Design,  UX

Onboarding UX pattern

 

 

Dành thời gian để thiết kế onboarding chất lượng là việc hết sức cần thiết để đảm bảo trải nghiệm tốt cho user và một sản phẩm tốt. Ở first impression, sản phẩm cần nhanh chóng show được được giá trị của mình (rút ngăn time-to-value), chỉ ra “aha moment”, và củng cố về brand cho user. Tiêu chí: NHANHCÓ THIỆN CẢM!

Một số yếu tố cần lưu ý:

  • Yếu tố tâm lý – Động lực của user là gì? User thích cái gì? (Kiểu hoa hay là quà í?!? :>)
  • Yếu tố cảm xúc – User cảm thấy gì trong 5s đầu tiên?
  • Yếu tố nội dung (context) – User phản ứng như thế nào

Mối cách làm có những mặt ưu nhược điểm khác nhau. Với mỗi cách, nên cân nhắc sử dụng ở đâu và khi nào cho phù hợp. Cách nào sẽ phù hợp cho các sản phẩm và các tính năng của sản phẩm?

Một số kỹ thuật UX làm Onboarding user từ đơn giản nhất đến phức tạp nhất:


1. First-look tour (slides)

Dẫn new user tham quan

Illustrations for Mobile App Onboarding #userinterface Icons8 onboarding app screens illustration 4x 

5 UX Tips to Master the App Onboarding – 10Clouds – Medium

Cách thể hiện: một loạt các màn hình nội dung trước khi vào phần sản phẩm. Thường được áp dụng để dễ dàng phù hợp với các cách làm onboarding khác. Phổ biến nhất trong các cách onboard

Áp dụng

Để truyền đạt các giá trị có tính bao quát và các tính năng không có tính cụ thể; Chỉ để “hoan nghênh” hoặc giải thích mang tính tổng quát cho sản phẩm

Ưu điểm

Dễ làm. Là một không gian tốt để quảng bá brand

Nhược điểm

Lack of content. Hầu hết user đều lướt qua nhanh hoặc skip luôn.

Đánh giá

Vì dễ làm và nói “vĩ mô” nên impact cũng ở tầm “vĩ mô”. Mà, u know, “vĩ mô” khì không phải ai cũng quan tâm và hiểu được. Nó sẽ chỉ chạm “hờ hờ” tới cảm xúc và cảm tình của user tới sản phẩm. Tuy nhiên, so với việc lẳng lặng lease một tính năng, “một lời chào hỏi đơn giản” cũng vẫn tốt hơn là không có. Về nội dung cách này có thể đơn giản, nhưng nếu có khả năng sáng tạo tốt sản phẩm có thể nâng tầm cách thể hiện lên ftầm ancy để tạo ấn tượng tốt.

2. Walk through tour

Bước qua nhanh các tính năng

Hey guys,  I've been playing around with different concepts for a simple guided tour of our app. It would consist of a few steps. Each step would explain an element or feature with a small tooltip....
 

Nội dung giới thiệu được trỏ đến từng thành phần của sản phẩm. Vì vậy, giá trị nội dung của mỗi giới thiệu cần liên kết trực tiếp với một thành phần UI. Nâng cấp hơn một chút so với First-look tour

Áp dụng

Giới thiệu user qua từng action step mà họ cần thực hiện để đạt được kết quả cụ thể nào đó

Ưu điểm

Làm nhanh, Ít cost. Cũng dễ làm tương tự như First-look tour

Nhược điểm

Lack of content, chỉ trong các box không thể hiện được nhiều nội dung. User cũng dễ lướt qua nhanh hoặc skip luôn nếu quá dài.

3. In-context tooltips

Đặt các chú thích trong từng ngữ cảnh

Những tips này xuất hiện trong khi user khám phá sản phẩm (trái ngược với UX First-look tour)

Mỗi tips được thể hiện dưới dạng One-time dismissible modal (chỉ hiện một lần) giúp giải thích giá trị hoặc các sử dụng của từng tính năng/thành phần UI đó.

Áp dụng

Chờ user thực hiện một hành động và trình bày giá trị ngay lúc có hành động và ngay tại chỗ. Thường được thực hiện trên một lớp phủ hoặc modal (Tương tự như cách làm tour). Chờ user thực hiện một hành động và trình bày giá trị ngay lúc có hành động và ngay tại chỗ. Thường được thực hiện trên một lớp phủ hoặc modal (Tương tự như cách làm tour).

Ưu điểm

Nằm trong context, vì vậy có thể trực tiếp chỉ cho user thấy giá trị của sản phẩm. Ngoài ra cách này cũng hỗ trợ làm tăng nhận thức của user về các giá trị đó (nói chung là dễ hiểu hơn – reducing cognitive load, kiểu don’t make me think đó!).

Nhược điểm

Nằm trong context nên một số “ngóc ngách” có thể không bao giờ được user khám phá ra 🙁

4. Blank slate tips

Cài các tips trên không gian trống

Couple of empty states for an financial app.

Sử dụng không gian trống đó để hướng dẫn user về loại content ở đó (cách thêm nội dung, thời gian và giá trị của nội dung). Là một cách rất phù hợp cho blank space.

Áp dụng

Nên chú ý hơn đến những không gian not-yet-populated section/view trên sản phẩm (kiểu empty state, error, bảo trì,…) để thúc đẩy user tạo nội dung/involve hơn vào sản phẩm. Nội dung Blank slate tips nên liên tục xuất cho đến khi user có action thay thế nó bằng nội dung user tạo ra.

Ưu điểm

Cơ hội thể hiện sự sáng tạo và truyền tải thông điệp tốt hơn. Một blank screen nhìn thực sự rất boring và no meaning! Blank slate tips giúp thúc đẩy xu hướng hoàn thành nhiệm vụ của user.
Điền vào chỗ trống đi item!

Nhược điểm

Sẽ có trường hợp mà nội dung ở Blank slate tips là chưa đủ để thúc đẩy hành vi của user.

5. Demo content

Thiết kế nội dung demo

Demo content là nội dung thực hoặc giả định. Là cách làm tốt hơn nữa so với các cách đã kể trên. Là ví dụ điển hình của style “show don’t tell” technique.

Áp dụng

Kết hợp với các cách làm khác, tạo ra một trạng thái pre-populated state của sản phẩm để user xem/tham khảo cách sử dụng/thực hiện…

Ưu điểm

User sẽ ngay lập tức ghi nhớ và hiểu các hướng dẫn, định hướng, và các usecase… có thể sử dụng với sản phẩm đó.

Nhược điểm

Khá fancy, có thể phải mất rất cost (từ thiết kế trải nghiệm đến build). Không dễ dàng gì để tạo được demo content có sức ảnh hưởng ngay lập tức tới user. Trừ khi product team muốn và có khả năng nâng “đẳng cấp” sản phẩm lên, như Trello và Asana.

6. Touchable video

Thiết kế video có thể tương tác được

Là một dạng video có các điểm tạm dừng tích hợp (pause) mà user cần chạm để tiếp tục, và gắn kết các mảnh ghép của nội dung.

Loại nội dung này giàu thông tin, giàu tính branding và có thể giải thích các chủ đề phức tạp như các level hay giá trị của tính năng/sản phẩm. Airtable đã sáng tạo ra cách tiếp cận này. Nó fancy, truyền tải nội dung tốt và có thể rất giàu cảm xúc nữa.

Áp dụng

Xác định rõ nội dung, các mission muốn truyền tải tới user, các user story/usecases. Chuẩn bị Storyboard và thiết kế theo các story tương ứng

Xác định content vibes, mood and tone để lên creative concept (allign với design guidline hoặc branding nếu cần thiết)

Ưu điểm - Video dễ ghi nhớ, giàu thông tin

Nhược điểm

Không dễ làm. Nếu không có video maker hoặc animator lái lụa trong team thì sẽ gặp nhiều khó khăn đấy. Nói chung game này khó hơn, cost cao hơn. Nhưng nếu làm ngon thì hiệu quả và ấn tượng để lại cao.

Đánh giá

Những tính năng chưa đánh giá được impact ổn ổn (business? solution), hoặc không được cả team định hướng đầu tư thì không nên bắt đầu bằng cách tiếp cận fancy này.

7. Checklist

Danh sách kiểm các nhiệm vụ cần user thực hiện

benlow24-mobile-concept-rebound@2x.png

Một list theo thứ tự các giá trị trải nghiệm key của tính năng/sản phẩm, sẽ luôn xuất hiện cho đến khi user hoàn thành hết “nhiệm vụ” (tiếp cận kiểu gamification)

Áp dụng

Tính toán thời gian cần thiết và phù hợp để user hoàn thành mỗi nhiệm vụ và chỉ ra giá trị mà nó tạo ra cho user. “Mô phỏng” trước việc user hoàn thành nhiệm vụ. Nên chia nhỏ các nhiệm vụ phức tạp thành các bước có thể quản lý được. Có thể apply cách làm này không chỉ cho việc onboarding ban đầu và “aha moment”, mà còn rất hiệu quả cho các giai đoạn setting khó (nhiều bước, phức tạp), hoặc để educate user về sức mạnh tiềm ẩn của các tính năng.

Ưu điểm

Cách này apply các nguyên tắc tâm lý cực kỳ “vi diệu” (gamification, áp dụng các mechanics trong game để xây dựng sản phẩm – cách mà các game “bẫy” người chơi).

Thường work tốt và cho phép tạo thêm trải nghiệm về cảm xúc (ví dụ: chúc mừng, ăn mừng) và kích thích user sau khi hoàn thành mỗi nhiệm vụ.

Có thể là lý do hợp lý có thể dai dẳng, lẽo đẽo đi theo user cho đến khi họ hoàn thành nhiệm vụ mà không quá phản cảm nếu làm khéo phần cảm xúc của trải nghiêm. “Anh chỉ cần một lý do thôi!”

Nhược điểm

Hàng ngon như thế này thì có thể cũng sẽ khá cost khi build, tùy thuộc vào cấu trúc list mong muốn.

8. Simulation

Trải nghiệm mô phỏng

Đúng như cái tên – là một trải nghiệm mô phỏng cách work của sản phẩm. Cách làm này đặc biệt có giá trị đối với các sản phẩm collaboration based. Cách để build trải nghiệm mô phỏng khá nặng về kỹ thuật, nhưng có thể là một cách “show don’t tell” technique ấn tượng.

Áp dụng

Là cách tốt nếu sản phầm cần user có ai đó tương tác để tìm hiểu trải nghiệm và các giá trị của nó. Có lẽ chỉ nên thực hiện game khó này sau khi đã thử nghiệm các kỹ thuật khác.

Ưu điểm

Đối với một số sản phẩm, show được giá trị cho user không phải việc dễ dàng, và đôi khi là rất khó để giải thích. Nhưng chỉ cần có một user mô phỏng giả để user thật có thể trò chuyện, chat chít, chuyển tiền, gán nhiệm vụ, hoặc vẽ vời cùng, và nói chung làm các nhiệm vụ cùng v.v … lại show được giá trị.

Nhược điểm

Build rất mất công, nặng về kỹ thuật để xây dựng và thực sự có thể fail trừ khi có thể khiến user “nhập tâm” hoàn toàn vào những cốt truyện mô phỏng đã tạo ra. 

Nên đơn giản, ngắn gọn và tập trung!

9. Self Segmentation & branching

Cá nhân hoá và đáp ứng đúng nhu cầu của user

Car Rental App - Welcome and Onboarding screens  #App #car #Onboarding #Rental

Cầu kỳ hơn, tận dụng tất cả các cách kể trên để tạo ra một “trải nghiệm riêng biệt cho từng user” qua onboarding. Personalize (Cá nhân hóa) là cách tiếp cận ngày càng được user mong đợi và thích thú, khiến user cảm nhận được ấn tượng brand muốn tạo ra, tinh tế và cá nhân hoá hơn.

Áp dụng

Hỏi user một vài thông tin về bản thân họ, sau đó hướng họ đến một trải nghiệm phù hợp. Chia phân khúc user là một cách tốt cho sản phẩm nhiều tính năng như VinID - với nhiều usecase khác nhau.

Ưu điểm

Đối với một số sản phẩm, show được giá trị cho user không phải việc dễ dàng, và đôi khi là rất khó để giải thích. Nhưng chỉ cần có một user mô phỏng giả để user thật có thể trò chuyện, chat chít, chuyển tiền, gán nhiệm vụ, hoặc vẽ vời cùng, và nói chung làm các nhiệm vụ cùng v.v ... lại show được giá trị.

Nhược điểm

Đây là cách làm fancy và có thể không phù hợp với khả năng đầu tư hạn chế. Lưu ý, một số sản phẩm thực sự không thể thiết kế ra các đề xuất có giá trị khác biệt. Vậy nên cách này không nên áp dụng.