- Đây là một thư viện JavaScript nhẹ cho phép gắn product tour và highlight vào các màn hình cần hướng dẫn người dùng bên trong sản phẩm
- Hoạt động dựa trên Vanilla JavaScript, không có dependency và hỗ trợ các trình duyệt chính cùng thiết bị di động
- Là mã nguồn mở giấy phép MIT được viết bằng TypeScript, nhấn mạnh khả năng tùy biến và hỗ trợ accessibility
- Phù hợp với các luồng hướng dẫn trong sản phẩm như onboarding người dùng, thu hút sự chú ý, trợ giúp theo ngữ cảnh và thúc đẩy adoption tính năng mới
- Đạt hàng triệu lượt tải và sở hữu 26K GitHub Stars; có thể xem ví dụ khởi đầu và tài liệu trong tài liệu chính thức
Tính chất thư viện và phạm vi hỗ trợ
- Driver.js là thư viện JavaScript nhẹ giúp người dùng hiểu sản phẩm thông qua product tour, highlight và trợ giúp theo ngữ cảnh
- Vì dựa trên Vanilla JavaScript nên có thể dùng mà không cần dependency riêng, đồng thời được viết bằng TypeScript
- Các đặc điểm về hỗ trợ và cấu hình gồm:
- Hỗ trợ các trình duyệt chính và thiết bị di động
- Khả năng tùy biến cao
- Cấu hình nhẹ nhưng giàu tính năng
- Giấy phép MIT
- API dễ sử dụng
- Hỗ trợ accessibility
- Sẵn sàng cho framework
Cách sử dụng trong sản phẩm
- Onboarding người dùng: có thể hướng dẫn từng bước cách sử dụng sản phẩm và trả lời các câu hỏi thường gặp
- Loại bỏ phân tán chú ý: có thể highlight các yếu tố quan trọng để tập trung ánh nhìn của người dùng vào một khu vực cụ thể
- Trợ giúp theo ngữ cảnh: có thể cung cấp cách dùng và trợ giúp đúng vào thời điểm cần thiết trong sản phẩm
- Adoption tính năng: có thể highlight tính năng mới và giải thích cách sử dụng để người dùng không bỏ lỡ
Tài liệu và thông tin dự án
- Có thể xem thêm ví dụ và cách bắt đầu trong tài liệu
- Kho lưu trữ GitHub là kamranahmedse/driver.js, với 26K GitHub Stars
1 bình luận
Ý kiến trên Hacker News
Không, sản phẩm phải được thiết kế sao cho người dùng hiểu ngay từ lần đầu thấy nó
Apple nổi tiếng là hầu như không làm vậy trên iPhone, trong khi Sony lại ép người dùng qua các quy trình như thế với mỗi thiết bị mới
Onboarding nên là thứ thúc đẩy khả năng sử dụng, chứ đây không phải công cụ bổ trợ mà là thứ còn tệ hơn và có hại
Tính khả dụng của iOS rất tệ, khả năng gợi ý hành động kém và độ dễ khám phá cũng thấp
Có quá nhiều cách nhập liệu, chủ yếu là cử chỉ, mà nếu không có ai chỉ hoặc không tự tìm kiếm thì sẽ không biết; lại còn thiếu nhất quán giữa các ứng dụng, thậm chí ngay cả giữa các ứng dụng mặc định của Apple
Có lúc “vuốt một hàng sang trái” là “xóa”, lúc khác lại là “thao tác bổ sung”, nói chung rất lộn xộn
Nếu quan sát người dùng iPhone không rành kỹ thuật, nhiều người thậm chí không biết đến một nửa số tính năng có thể làm được. Ví dụ, bạn đã từng thấy ai dùng “lắc để hoàn tác” chưa?
Nhưng gần đây khi đăng ký HubSpot cho CRM, tôi thấy đây là một sản phẩm nhìn chung được tổ chức tốt và trực quan, dù vậy vẫn khó hoặc gần như không thể làm cho nó trực quan như smartphone. Trong trường hợp như vậy, tour sản phẩm khá hữu ích
Ý là đó gần như một lý tưởng không thể đạt được, không tồn tại ngoài đời thực
Ở mức trải nghiệm người dùng hiện nay, thật khó để tin rằng có thể tạo ra UI hoàn toàn không cần tour sản phẩm, tài liệu hay video hướng dẫn; ít nhất với những sản phẩm có độ phức tạp từ mức nào đó trở lên thì lại càng như vậy
Nhưng ứng dụng B2B, nơi các tutorial demo sản phẩm thường được dùng, lại khác. Một tutorial sản phẩm tốt rất hữu ích để nhân viên sales hướng dẫn khách hàng qua ứng dụng và bán đúng giá trị cho khách hàng tiềm năng
Nếu hợp đồng trị giá từ vài chục nghìn đến vài trăm nghìn đô và sản phẩm cũng khá phức tạp, thì đây là giải pháp tốt hơn việc để đội sales/hỗ trợ liên tục chạy đi chữa cháy
Có phải chỉ mình tôi luôn đóng mấy thứ này càng nhanh càng tốt rồi còn cằn nhằn vì bực không?
Thường thì có thể bỏ qua, nhưng đến lúc thật sự muốn học dùng ứng dụng cho tử tế rồi thì gần như rất khó tìm cách khởi động lại
Nó cũng tốt để giới thiệu các tính năng mới từng được người dùng yêu cầu, nhưng chưa đến mức chiếm không gian trên màn hình chính
Chỉ khó chịu khi nó chỉ vào những điều quá hiển nhiên
Giữa thứ hữu ích và thứ mang tính thù địch không phải là một ranh giới mong manh, mà là một ranh giới to đùng, chớp đèn và hú còi inh ỏi
Với tư cách người dùng sản phẩm thì tôi ghét tour sản phẩm, nhưng với tư cách người phát triển sản phẩm thì tôi luôn mong có một phương án thay thế mã nguồn mở
Thư viện này trông khá ngầu vì hiệu ứng mượt mà
Theo kinh nghiệm cá nhân của tôi khi làm vài sản phẩm, ngay cả các tour sản phẩm được thiết kế tốt nhất cũng bị đóng đi khoảng 90% trong các sản phẩm SMB và tiêu dùng
Tôi hơi thích mấy tính năng kiểu này
Đừng ép người dùng mới, chỉ cần hỏi họ có muốn xem tour hay không
Chỉ nên dùng tiết kiệm khi ứng dụng có tính năng, nút bấm hoặc thay đổi mới; chỉ hiển thị một lần mỗi phiên; và lời nhắc nên có lựa chọn “Đóng/Xem tour”
Trải nghiệm người dùng của ứng dụng trực quan hơn thì vẫn tốt hơn, nhưng tour không mang tính ép buộc vẫn có thể hữu ích
Nó còn tốt hơn màn hình chặn giữa lúc đăng nhập để thông báo tính năng
Có vẻ nhiều nhà thiết kế nghĩ rằng khi tôi mở ứng dụng lên, tôi sẽ tự hỏi “hôm nay những con người tuyệt vời này đã chuẩn bị niềm vui gì cho mình nhỉ?” và tôi đang dư thời gian lắm
Thực tế thì đa số lúc mở ứng dụng là tôi cần hoàn thành một việc cụ thể ngay lập tức, và đó là thời điểm tôi ít sẵn sàng nhất để ai đó dúi ảnh em bé sản phẩm của họ vào mặt mình rồi bắt tôi nói “vâng, xinh thật đấy”
Thời điểm tôi thực sự sẵn lòng với tour là sau khi làm xong việc, hoặc khi tôi vừa nhận ra rằng mình không biết phải làm điều mình muốn làm bằng cách nào
Tour sản phẩm không phải lúc nào cũng tệ, nhưng thường được triển khai vụng về với quá nhiều bước vô nghĩa với người dùng
Những thứ phù hợp ngữ cảnh như tip nhúng sẵn, có liên quan như onboarding tùy biến theo persona, hoặc onboarding định hướng hành động như checklist thường tốt hơn
Sau khi dẫn dắt đội onboarding và giáo dục trong ứng dụng tại Dropbox, tôi đã khởi động Dopt [0], một thư viện component React và SDK để giúp dễ dàng tạo ra trải nghiệm onboarding mang tính ngữ cảnh hơn và ít gây gián đoạn hơn, như tour sản phẩm nhưng cả tip nhúng sẵn và checklist nữa
Với Dopt, bạn vẫn có thể tạo những thứ như tour 2 bước để giới thiệu tính năng mới khi cần, nhưng tôi muốn cung cấp một bộ công cụ lớn hơn và tốt hơn cho mọi kiểu onboarding và giáo dục người dùng
[0] https://dopt.com/
Và tôi cũng thắc mắc về “Hybrid work”
Việc nêu rõ trước như vậy nhìn bề ngoài là tốt, nhưng trong bối cảnh đã có nghiên cứu[0] cho thấy làm việc từ xa 100% giúp nhân viên làm việc hiệu quả hơn, tôi muốn biết vì sao họ lại chọn hybrid là lời giải
[0]: https://thehill.com/business/4110598-remote-employees-work-l...
Có vẻ ổn. So với Shepherd[0] thì khác gì?
[0]: https://github.com/shipshapecode/shepherd
https://devboard.gitsense.com/shipshapecode/shepherd
https://devboard.gitsense.com/kamranahmedse/driver.js
Trong vài tuần gần đây, độ phổ biến của driver.js đã tăng mạnh, nhưng tôi không rõ lý do
Tham khảo thêm, đây là công cụ tôi làm
Vấn đề của kiểu hướng dẫn tham quan như thế này là nó nhồi quá nhiều thông tin vào trước mặt người dùng trong thời gian ngắn rồi biến mất
Vài phút sau, người dùng sẽ tự hỏi: “Khu này dùng để làm gì nhỉ?”
Trước đây tôi từng dùng kiểu này khi làm một nền tảng điều khiển drone, nhưng dashboard quá phức tạp nên cần biết trước khu nào để điều khiển và khu nào để xem video feed trước khi bấm
Nhưng người dùng thường không đọc, chỉ gật gù rồi bấm Next liên tục, nên cuối cùng chúng tôi bỏ nó đi và gắn biểu tượng thông tin vào từng khu vực để khi rê chuột vào có thể xem phần giải thích
Tôi đã tạo thư viện https://github.com/Evernote/Aquaman để làm việc tương tự trong ứng dụng Redux. Tôi cũng làm phiên bản tương tự cho React context, nhưng chưa open source
Điểm còn thiếu ở đây là 1) trạng thái ứng dụng có thể cần kích hoạt một tour hướng dẫn, 2) sớm muộn gì cũng sẽ cần luồng nhiều bước, và 3) logic thay đổi trạng thái của luồng đó cần được tách khỏi logic render
Mọi bước của luồng phải nằm cùng nhau. Với Aquaman thì có thể làm được điều đó
Với tư cách người dùng thì tôi không thích, nhưng với tư cách lập trình viên thì đây là thư viện phù hợp để đáp ứng yêu cầu từ đội sản phẩm
Hôm nay tôi xem demo Walnut.io [1] cho một sản phẩm khác, đã bỏ qua phần lớn và cũng hầu như không hiểu gì về sản phẩm đó
Tôi nghĩ điều này phụ thuộc vào việc ai và bằng cách nào cấu hình phần product tour hơn là bản thân công cụ
Có những sản phẩm đủ phức tạp đến mức cần phần giải thích hoặc cần kỹ sư giải pháp hay quản lý tài khoản hướng dẫn. Không có sản phẩm nào tuyệt vời đến mức hoàn toàn không cần trợ giúp hay product tour
[1] https://walnut.io