Driver.js: Library Vanilla JS untuk tur produk, highlight, dan bantuan kontekstual

 (driverjs.com)
4 poin oleh GN⁺ 2023-07-25 | 1 komentar | Bagikan ke WhatsApp
  • Ini adalah library JavaScript ringan yang dapat menambahkan tur produk dan highlight pada layar yang perlu memandu pengguna di dalam produk
  • Berjalan berbasis Vanilla JavaScript tanpa dependensi, serta mendukung browser utama dan perangkat mobile
  • Merupakan open source berlisensi MIT yang ditulis dengan TypeScript, dengan keunggulan pada kustomisasi dan dukungan aksesibilitas
  • Dirancang untuk alur panduan di dalam produk seperti onboarding pengguna, menarik perhatian, bantuan kontekstual, dan mendorong adopsi fitur baru
  • Memiliki jutaan unduhan dan GitHub Star 26K, dan contoh awal serta dokumentasinya dapat dilihat di dokumentasi resmi

Karakter library dan cakupan dukungan

  • Driver.js adalah library JavaScript ringan yang membantu pengguna memahami produk melalui tur produk, highlight, dan bantuan kontekstual
  • Karena berbasis Vanilla JavaScript, library ini dapat digunakan tanpa dependensi tambahan dan ditulis dengan TypeScript
  • Fitur dari sisi dukungan dan konfigurasi adalah sebagai berikut
    • Mendukung browser utama dan perangkat mobile
    • Tingkat kustomisasi yang tinggi
    • Konfigurasi ringan dengan fitur yang kaya
    • Lisensi MIT
    • API yang mudah digunakan
    • Dukungan aksesibilitas
    • Siap digunakan dengan framework

Cara pemanfaatan di dalam produk

  • Onboarding pengguna: dapat memandu penjelasan penggunaan produk secara bertahap dan membantu menjawab pertanyaan umum
  • Menghilangkan distraksi: dapat menyorot elemen penting agar perhatian pengguna terfokus pada area tertentu
  • Bantuan kontekstual: dapat menyediakan panduan penggunaan dan bantuan pada saat dibutuhkan di dalam produk
  • Adopsi fitur: dapat menyorot fitur baru dan menjelaskan cara menggunakannya agar tidak terlewat oleh pengguna

Dokumentasi dan informasi proyek

Bacaan terkait

1 komentar

 
GN⁺ 2023-07-25
Komentar Hacker News

  • Tidak, produk harus dirancang agar bisa dipahami bahkan saat pertama kali dilihat
    Apple terkenal hampir tidak pernah melakukan hal semacam ini di iPhone, sementara Sony memaksa prosedur seperti ini di setiap perangkat baru
    Onboarding seharusnya menjadi mekanisme yang mendorong kegunaan, bukan alat bantu; yang ini justru lebih buruk dan merugikan

    • Pernyataan “Apple hampir tidak pernah melakukan hal semacam ini di iPhone” justru lebih dekat ke argumen bahwa tur produk memang diperlukan
      Kegunaan iOS berantakan, affordance-nya kurang, dan discoverability-nya rendah
      Ada terlalu banyak cara input, terutama gestur, yang tidak akan diketahui orang jika tidak diberi tahu atau mencarinya, dan tidak konsisten antar-aplikasi, bahkan di antara aplikasi bawaan Apple sendiri
      Kadang “menggeser baris ke kiri” berarti “hapus”, kadang berarti “aksi tambahan”, jadi benar-benar kacau
      Kalau melihat pengguna nonteknis memakai iPhone, sering kali mereka tidak tahu bahkan separuh dari fitur yang tersedia. Misalnya, pernahkah Anda melihat orang memakai “goyangkan untuk urungkan”?
    • Jadi mungkin itu sebabnya separuh pengguna iPhone masih belum tahu bahwa mereka bisa menekan lama keyboard atau spasi untuk mengendalikan kursor. Itu baru satu contoh
    • Pendekatan ini tidak praktis untuk semuanya. Ponsel harus intuitif, dan yang lebih penting, pengguna tidak perlu mengetahui semua cara kerjanya sejak awal; mereka bisa mempelajarinya seiring waktu
      Namun baru-baru ini saya mendaftar ke HubSpot sebagai CRM, dan meskipun secara keseluruhan terasa seperti produk yang tertata baik dan intuitif, membuatnya seintuitif smartphone rasanya sulit atau nyaris mustahil. Dalam kasus seperti itu, tur produk cukup membantu
    • Saya setuju bahwa kegunaan dan discoverability selalu diinginkan. Namun klaim bahwa segala sesuatu harus selalu bisa ditemukan begitu saja terdengar seperti pembahasan tentang kompiler yang cukup pintar yang legendaris
      Maksudnya, itu lebih mirip ideal yang mustahil dicapai dan tidak ada di dunia nyata
      Dengan tingkat pengalaman pengguna saat ini, sulit untuk yakin bahwa kita bisa membuat UI yang sama sekali tidak membutuhkan tur produk, dokumentasi, tutorial video, dan sebagainya, terutama untuk produk yang setidaknya cukup kompleks
    • Untuk aplikasi konsumen, saya rasa secara umum itu benar
      Namun berbeda untuk aplikasi B2B, tempat tutorial demo produk terutama digunakan. Tutorial produk yang bagus berguna bagi staf sales untuk memandu pelanggan menggunakan aplikasi dan menjualnya dengan benar kepada prospek
      Jika nilai kontraknya puluhan ribu hingga ratusan ribu dolar dan produknya juga cukup kompleks, itu solusi yang lebih baik daripada staf sales dan dukungan terus-menerus memadamkan masalah

  • Apakah cuma saya yang langsung menutup hal-hal seperti ini secepat mungkin sambil menggerutu karena kesal?

    • Saya juga begitu, tetapi agar adil, kemungkinan besar pengguna teknis seperti kita di HN bukan target utama produk yang mengintegrasikan hal semacam ini
    • Menurut saya tidak masalah kalau bisa dilewati dan bisa dijalankan lagi nanti
      Biasanya memang bisa dilewati, tetapi setelah memutuskan untuk benar-benar mempelajari aplikasinya, hampir selalu sulit menemukan cara untuk memulainya lagi
    • Tergantung kasus penggunaannya. Saat onboarding pengguna, ini mengurangi email dukungan yang datang karena mereka tidak tahu cara melakukan tugas dasar
      Ini juga bagus untuk menunjukkan fitur baru yang pernah diminta, tetapi tidak cukup penting sampai harus mengambil ruang di layar utama
      Menyebalkan hanya ketika menunjuk hal-hal yang sudah jelas
    • Biasanya terasa seperti tongkat penyangga untuk menutupi desain yang buruk, tetapi beberapa produk memang tak terhindarkan memiliki kompleksitas
    • Dalam konteks UI, saya beberapa kali melihat hal seperti ini, popup unduh aplikasi, popup mailing list, lalu unduh aplikasi lagi, ikuti media sosial, lalu unduh aplikasi lagi disebut omelan. Mungkin karena “pergi sana” terlalu banyak huruf
      Antara sesuatu yang membantu dan sesuatu yang bermusuhan bukan ada garis tipis, melainkan garis besar yang sangat jelas dengan lampu berkedip dan sirene

  • Sebagai pengguna produk, saya membenci tur produk, tetapi sebagai pengembang produk, saya selalu menginginkan alternatif open source
    Library ini terlihat cukup keren karena efeknya tampak mulus
    Secara pribadi, dari pengalaman membuat beberapa produk, bahkan tur produk yang dirancang paling baik pun sekitar 90% ditutup di produk UKM dan konsumen

  • Saya agak menyukai fitur seperti ini
    Jangan memaksakannya kepada pengguna baru; cukup tanyakan apakah mereka ingin melihat tur
    Gunakan seperlunya hanya saat ada fitur, tombol, atau perubahan baru di aplikasi, tampilkan hanya sekali per sesi, dan sebaiknya prompt-nya punya pilihan “Tutup/Lihat tur”
    Memang lebih baik jika pengalaman pengguna aplikasi bersifat intuitif, tetapi tur yang tidak dipaksakan bisa membantu
    Itu lebih baik daripada layar perantara saat login untuk pengumuman fitur

    • Tolong sediakan menu bantuan di suatu tempat yang berisi dokumentasi yang layak dan kesempatan untuk menjalankan ulang tur
      Banyak desainer sepertinya mengira saat saya membuka aplikasi, saya berpikir “kira-kira kesenangan apa yang disiapkan orang-orang keren ini hari ini?” dan punya banyak waktu luang
      Kenyataannya, saya biasanya membuka aplikasi karena ingin menyelesaikan sesuatu yang spesifik saat itu juga, dan momen itu adalah saat saya paling tidak siap menerima seseorang yang menyodorkan foto anak produk mereka sendiri dan membuat saya berkata “ya, cantik sekali”
      Saat saya benar-benar terbuka untuk tur adalah setelah saya menyelesaikan pekerjaan, atau ketika saya baru sadar bahwa saya tidak tahu cara melakukan sesuatu yang ingin saya lakukan

  • Tur produk tidak selalu buruk, tetapi sering kali implementasinya buruk karena terlalu banyak langkah yang tidak bermakna bagi pengguna
    Onboarding yang kontekstual seperti tip tertanam, relevan seperti onboarding yang disesuaikan per persona, atau berorientasi aksi seperti checklist umumnya lebih baik
    Setelah memimpin tim onboarding dan edukasi dalam aplikasi di Dropbox, saya memulai Dopt [0], yaitu library komponen React dan SDK untuk memudahkan pembuatan pengalaman onboarding yang lebih kontekstual dan tidak terlalu mengganggu, seperti tip tertanam dan checklist, bukan hanya tur
    Dengan Dopt, jika diperlukan, Anda juga bisa membuat sesuatu seperti tur 2 langkah untuk memperkenalkan fitur baru, tetapi kami ingin menyediakan kotak perkakas yang lebih besar dan lebih baik untuk segala jenis onboarding dan edukasi
    [0] https://dopt.com/

    • Saya penasaran mengapa situs webnya perlu mengumpulkan cookie. Hal pertama yang saya temui adalah layar pemberitahuan cookie, jadi saya bertanya-tanya apa yang dilacak
      Dan saya juga penasaran dengan “Hybrid work”
      Dari luar, bagus bahwa itu dinyatakan sejak awal, tetapi dengan adanya studi[0] yang menunjukkan bahwa kerja jarak jauh 100% menghasilkan karyawan yang lebih produktif, saya penasaran mengapa hybrid dipilih sebagai solusi
      [0]: https://thehill.com/business/4110598-remote-employees-work-l...

  • Terlihat bagus. Apa bedanya dibanding Shepherd[0]?
    [0]: https://github.com/shipshapecode/shepherd

  • Masalah tur seperti ini adalah mereka menjejalkan terlalu banyak informasi di depan muka pengguna dalam waktu singkat lalu menghilang
    Beberapa menit kemudian pengguna akan bertanya, “Area ini tadi untuk apa ya?”
    Dulu saat membuat platform kendali drone, saya pernah memakainya; dashboard-nya rumit, jadi sebelum mengeklik pengguna perlu tahu area mana untuk kendali dan area mana untuk feed video
    Namun pengguna sering kali bahkan tidak membaca, hanya mengangguk dan menekan Next, sehingga akhirnya kami menghapusnya dan menggantinya dengan ikon informasi di tiap area agar penjelasan muncul saat mouse diarahkan ke sana

  • Saya membuat library https://github.com/Evernote/Aquaman untuk melakukan hal serupa di aplikasi Redux. Saya juga membuat hal yang sama untuk React context, tetapi tidak pernah dirilis sebagai open source
    Hal yang kurang di sini adalah 1) state aplikasi mungkin perlu memicu tur berpemandu, 2) pada akhirnya kemungkinan besar akan dibutuhkan alur multi-langkah, dan 3) logika perubahan state untuk alur itu harus dipisahkan dari logika rendering
    Semua langkah dalam alur harus berada bersama. Dengan Aquaman, hal itu bisa diimplementasikan

  • Sebagai pengguna saya tidak menyukainya, tetapi sebagai developer ini adalah library yang bagus untuk memenuhi permintaan tim produk

  • Hari ini saya melihat demo Walnut.io [1] untuk produk lain, tetapi sebagian besar saya lewati dan saya juga hampir tidak memahami produknya
    Menurut saya, ini lebih bergantung pada siapa yang menyusun tur produk dan bagaimana caranya, bukan pada tool itu sendiri
    Beberapa produk cukup kompleks sehingga membutuhkan penjelasan atau panduan dari solution engineer maupun account manager. Tidak ada produk yang begitu menakjubkan sampai sama sekali tidak membutuhkan bantuan atau tur produk
    [1] https://walnut.io