Driver.js: ürün turları, vurgulamalar ve bağlamsal yardım için Vanilla JS kütüphanesi

 (driverjs.com)
4 puan yazan GN⁺ 2023-07-25 | 1 yorum | WhatsApp'ta paylaş
  • Ürün içinde kullanıcıya rehberlik edilmesi gereken ekranlara ürün turları ve vurgulamalar eklemeye yarayan hafif bir JavaScript kütüphanesidir
  • Vanilla JavaScript tabanlı çalışır, bağımlılığı yoktur ve başlıca tarayıcılar ile mobil cihazları destekler
  • TypeScript ile yazılmış MIT lisanslı bir açık kaynak projedir; özelleştirme ve erişilebilirlik desteğini öne çıkarır
  • Kullanıcı onboarding'i, dikkat odağı oluşturma, bağlamsal yardım ve yeni özellik benimsenmesini teşvik etme gibi ürün içi rehberlik akışlarına uygundur
  • Milyonlarca indirmeye ve GitHub Star 26K değerine sahiptir; başlangıç örnekleri ve belgeler resmi dokümantasyonda görülebilir

Kütüphanenin yapısı ve destek kapsamı

  • Driver.js, ürün turları, vurgulamalar ve bağlamsal yardım yoluyla kullanıcıların ürünü anlamasına yardımcı olan hafif bir JavaScript kütüphanesidir
  • Vanilla JavaScript tabanlı olduğu için ek bir bağımlılık olmadan kullanılabilir ve TypeScript ile yazılmıştır
  • Destek ve yapılandırma açısından öne çıkan özellikleri şunlardır
    • Başlıca tarayıcılar ve mobil cihaz desteği
    • Yüksek özelleştirilebilirlik
    • Hafif yapı ve zengin özellikler
    • MIT lisansı
    • Kullanımı kolay API
    • Erişilebilirlik desteği
    • Framework hazır yapısı

Ürün içinde kullanım biçimleri

  • Kullanıcı onboarding'i: Ürünün nasıl kullanılacağını adım adım açıklayabilir ve yaygın soruları yanıtlayacak yönlendirmeler sunabilir
  • Dikkat dağınıklığını azaltma: Önemli öğeleri vurgulayarak kullanıcının bakışını belirli bir alana odaklayabilir
  • Bağlamsal yardım: Ürün içinde ihtiyaç duyulan anda kullanım bilgisi ve yardım sunabilir
  • Özellik benimsenmesi: Yeni özellikleri vurgulayıp nasıl kullanılacağını anlatarak kullanıcıların bunları kaçırmamasını sağlayabilir

Dokümantasyon ve proje bilgileri

İlgili okumalar

1 yorum

 
GN⁺ 2023-07-25
Hacker News görüşleri

  • Hayır, ürün ilk kez görüldüğünde bile anlaşılacak şekilde tasarlanmalı
    Apple, iPhone’da bu tür şeyleri neredeyse hiç yapmamasıyla bilinirken, Sony her yeni cihazda bu tür bir süreci dayatıyor
    Onboarding’in kullanılabilirliği zorlayan bir mekanizma olmasını sağlamalısınız; bu bir yardımcı araç değil, daha kötü ve zararlı bir şey

    • “Apple, iPhone’da bu tür şeyleri neredeyse hiç yapmıyor” sözü aslında ürün turu gerektiği tarafına daha yakın
      iOS’un kullanılabilirliği berbat, affordance’ları zayıf ve keşfedilebilirliği düşük
      Biri söylemezse ya da aratmazsanız bilinmeyen, çoğu jest olan çok fazla giriş yöntemi var; uygulamadan uygulamaya, hatta Apple’ın kendi varsayılan uygulamaları arasında bile tutarlı değiller
      Bazen “satırı sola kaydırmak” “sil” anlamına geliyor, bazen “ek işlemler”; tamamen karmakarışık
      Teknik olmayan kullanıcıların iPhone kullandığını görünce, mümkün olan özelliklerin yarısını bile bilmediklerini sıkça görürsünüz. Örneğin “sallayarak geri al” kullanan birini hiç gördünüz mü?
    • Belki de bu yüzden iPhone kullanıcılarının yarısı hâlâ klavyeye ya da boşluk çubuğuna uzun basarak imleç kontrolü yapılabildiğini bilmiyor. Bu sadece tek bir örnek
    • Bu yöntem her şey için pratik değil. Telefonlar sezgisel olmalı ve daha önemlisi, tüm kullanım biçimlerini en baştan bilmek gerekmez; zamanla öğrenilebilir
      Ama yakın zamanda CRM olarak HubSpot’a kaydoldum; genel olarak iyi düzenlenmiş ve sezgisel bir ürün gibi hissettirse de, onu bir akıllı telefon kadar sezgisel yapmak zor ya da neredeyse imkânsız. Bu gibi durumlarda ürün turu epey yardımcı oluyor
    • Kullanılabilirlik ve keşfedilebilirliği her zaman istememiz gerektiğine katılıyorum. Ama her şeyin her zaman kendiliğinden keşfedilebilir olması gerektiği iddiası, efsanevi yeterince akıllı derleyici tartışmasına benziyor
      Yani gerçekte var olmayan, ulaşılamaz bir ideale yakın
      Mevcut kullanıcı deneyimi düzeyinde ürün turu, dokümantasyon, video eğitimler vb. hiç gerektirmeyen bir UI yapabileceğimizden emin olmak zor; en azından belli bir karmaşıklığın üzerindeki ürünlerde bu daha da geçerli
    • Tüketici uygulamaları için genel olarak doğru olduğunu düşünüyorum
      Ama ürün demo eğitimlerinin ağırlıklı kullanıldığı B2B uygulamalar farklı. İyi bir ürün eğitimi, satış temsilcisinin müşteriye uygulamayı gezdirip potansiyel müşteriye doğru şekilde satmasına yardımcı olur
      Sözleşme büyüklüğü on binlerce-yüz binlerce dolar seviyesindeyse ve ürün de oldukça karmaşıksa, satış ve destek ekiplerinin sürekli yangın söndürür gibi müdahale etmesinden daha iyi bir çözümdür

  • Bunları mümkün olduğunca hızlı kapatıp sinir bozucu diye söylenen tek kişi ben miyim?

    • Ben de öyleyim ama adil olmak gerekirse HN’deki bizim gibi teknik kullanıcılar, bunları entegre eden ürünlerin ana hedef kullanıcıları muhtemelen değil
    • Atlanabiliyorsa ve daha sonra tekrar yapılabiliyorsa bence sorun yok
      Genellikle atlamak mümkün oluyor ama uygulamayı düzgünce öğrenmeye karar verdikten sonra yeniden başlatmanın yolunu bulmak neredeyse hiç kolay olmuyor
    • Kullanım senaryosuna bağlı. Kullanıcıları onboarding’den geçirirken, temel işlerin nasıl yapılacağını bilememekten kaynaklanan destek e-postalarını azaltıyor
      Ayrıca ana ekran alanını kaplayacak kadar önemli olmayan ama talep edilmiş yeni bir özelliği göstermek için de iyi
      Yalnızca bariz olan şeyleri işaret ettiğinde sinir bozucu
    • Genelde kötü tasarımı telafi eden bir koltuk değneği gibi hissettiriyor, ama bazı ürünlerde kaçınılmaz bir karmaşıklık var
    • UI kavramları arasında bunlara, uygulama indirme pop-up’larına, e-posta listesi pop-up’larına, yine uygulama indirmeye, sosyal medya takibine, yine uygulama indirmeye birkaç kez dırdır dendiğini gördüm. Muhtemelen “siktir git” demek için fazla fazla harf gerektiğindendir
      Yardımcı olanla düşmanca olan arasında ince bir çizgi yok; yanıp sönen ışıkları ve sirenleri olan büyük, belirgin bir çizgi var

  • Ürünün kullanıcısı olarak ürün turlarından nefret ediyorum ama ürün geliştiricisi olarak her zaman açık kaynak alternatif olmasını istiyorum
    Bu kütüphanenin efektleri akıcı görünüyor, oldukça hoş
    Kişisel olarak birkaç ürün geliştirirken gördüğüm kadarıyla, en iyi tasarlanmış ürün turları bile KOBİ/tüketici ürünlerinde yaklaşık %90 oranında kapatılıyor

  • Bu tür özellikleri biraz seviyorum
    Yeni kullanıcılara dayatmayın, tur isteyip istemediklerini sorun yeter
    Uygulamaya yeni özellik, düğme ya da değişiklik eklendiğinde idareli kullanın; oturum başına yalnızca bir kez gösterin ve istemde “kapat/turu başlat” seçenekleri olsun
    Uygulamanın kullanıcı deneyiminin sezgisel olması daha iyi, ama zorunlu olmayan bir tur yardımcı olabilir
    Özellik duyurusu için kullanılan giriş arası ekranından daha iyi

    • Lütfen bir yerlerde düzgün dokümantasyon ve turu tekrar çalıştırma imkânı içeren bir yardım menüsü sunun
      Birçok tasarımcı, uygulamayı açtığımda “bakalım bugün bu harika insanlar bana nasıl bir keyif hazırlamış?” diye düşündüğümü ve bolca vaktim olduğunu sanıyor gibi
      Gerçekte çoğu zaman uygulamayı hemen o anda belirli bir işi bitirmek için açıyorum ve o an, birinin ürün çocuğunun fotoğrafını yüzüme tutup “evet, gerçekten çok güzelmiş” dedirtmesine en az açık olduğum an
      Tura gerçekten açık olduğum zaman, işi bitirdikten sonra ya da yapmak istediğim şeyi nasıl yapacağımı bilmediğimi yeni fark ettiğim andır

  • Ürün turları her zaman kötü değildir, ama kullanıcı için anlamsız çok fazla adım içerdiği için kötü uygulanmış olmaları yaygındır
    Yerleşik ipuçları gibi bağlama uygun, persona bazlı özelleştirilmiş onboarding gibi ilgili ya da kontrol listeleri gibi eylem odaklı onboarding genelde daha iyidir
    Dropbox’ta onboarding ve uygulama içi eğitim ekibini yönettikten sonra Dopt’u [0] başlattım; bu, yalnızca turlar değil, yerleşik ipuçları ve kontrol listeleri gibi daha bağlamsal ve daha az rahatsız edici onboarding deneyimlerini kolayca oluşturmak için bir React bileşen kütüphanesi ve SDK
    Dopt ile gerektiğinde yeni özellik tanıtımı için 2 adımlı tur gibi şeyler de oluşturabilirsiniz, ama her tür onboarding ve eğitim için daha büyük ve daha iyi bir araç kutusu sunmak istiyoruz
    [0] https://dopt.com/

    • Web sitesinde neden çerez toplamak gerektiğini merak ediyorum. İlk karşıma çıkan şey çerez bildirim ekranı olduğu için neyi izlediğinizi sorgulatıyor
      Ayrıca “Hybrid work” de merak konusu
      Dışarıdan bakınca bunu önceden belirtmeniz iyi, ama %100 uzaktan çalışmanın daha üretken çalışanlara yol açtığını gösteren araştırma[0] varken neden hibriti çözüm olarak belirlediğinizi merak ediyorum
      [0]: https://thehill.com/business/4110598-remote-employees-work-l...

  • İyi görünüyor. Shepherd[0] ile karşılaştırınca farkı ne?
    [0]: https://github.com/shipshapecode/shepherd

  • Bu tür turların sorunu, kısa sürede çok fazla bilgiyi yüzünüze dayayıp sonra kaybolmaları
    Birkaç dakika sonra kullanıcı “Bu bölüm ne işe yarıyordu?” diye soruyor
    Eskiden bir drone kontrol platformu yaparken kullanmıştım; dashboard karmaşıktı, bazı bölümler kontrol için, bazıları video akışı içindi ve tıklamadan önce bunu bilmek gerekiyordu
    Ama kullanıcılar çoğu zaman okumadan başlarını sallayıp sadece ileriye basıyordu; sonunda bunu kaldırıp her bölüme bilgi ikonu ekledik, fareyle üzerine gelince açıklama görülebilecek şekilde değiştirdik

  • Redux uygulamasında benzer bir şey yapmak için https://github.com/Evernote/Aquaman kütüphanesini yaptım. React context için de aynısını yaptım ama açık kaynak olarak yayımlanmadı
    Burada eksik kalan nokta şu: 1) uygulama durumunun rehberli turu tetiklemesi gerekebilir, 2) bir noktada çok adımlı akışlara ihtiyaç duyulması yüksek olasılık, 3) bu akışın durum değiştirme mantığı render mantığından ayrı olmalı
    Akışın tüm adımları bir arada olmalı. Aquaman ile bunu uygulayabiliyorduk

  • Kullanıcı olarak hoşlanmam ama geliştirici olarak ürün ekibi taleplerini karşılamak için iyi bir kütüphane

  • Bugün başka bir ürün için Walnut.io [1] demosu izledim; çoğunu atladım ve ürün hakkında da neredeyse hiçbir şey anlamadım
    Bence mesele aracın kendisinden çok ürün turunun nasıl ve kim tarafından kurgulandığına bağlı
    Bazı ürünler karmaşıktır; açıklamaya ya da bir çözüm mühendisi veya hesap yöneticisinin yönlendirmesine ihtiyaç duyabilir. Hiç yardım ya da ürün turu gerektirmeyecek kadar harika bir ürün yok
    [1] https://walnut.io