Nội dung
Nội dung
Dẫn nhập
Trong chuỗi bài viết về các UX flow, chúng ta đã khám phá Customer Journey Map – công cụ giúp chúng ta thấu hiểu toàn diện hành trình cảm xúc và vấn đề của khách hàng. Chúng ta cũng đã tìm hiểu Sitemap để xây dựng cấu trúc vững chắc cho sản phẩm. Giờ đây, đã đến lúc đi sâu vào chi tiết những gì người dùng thực sự làm bên trong ứng dụng của bạn: User Flow (Luồng Người dùng). Nếu Sitemap là bản đồ của “ngôi nhà” bạn xây, thì User Flow chính là chỉ dẫn từng bước để người dùng di chuyển qua các phòng, hoàn thành một nhiệm vụ cụ thể.
User Flow là gì?
User Flow là một sơ đồ hoặc biểu đồ thể hiện chuỗi các bước hành động mà một người dùng thực hiện trong một sản phẩm kỹ thuật số (website hoặc ứng dụng) để hoàn thành một nhiệm vụ hoặc đạt được một mục tiêu cụ thể. Nó trực quan hóa con đường mà người dùng đi, từ điểm khởi đầu, qua các màn hình, tương tác, các điểm quyết định, cho đến khi hoàn thành mục tiêu.
User Flow không quan tâm đến cảm xúc chung hay các tương tác ngoài ứng dụng (như CJM), và cũng không chỉ đơn thuần là cấu trúc phân cấp các trang (như Sitemap). Nó tập trung vào hành vi người dùng và trình tự tương tác bên trong sản phẩm.
Hãy tưởng tượng bạn đang muốn đặt đồ ăn trưa qua một ứng dụng giao hàng. User Flow sẽ mô tả chi tiết từng cú chạm, vuốt, nhập liệu của bạn từ lúc mở ứng dụng cho đến khi món ăn được giao đến và bạn hoàn tất đánh giá.
Tầm quan trọng của User Flow
User Flow là công cụ thiết yếu để thiết kế các tương tác hiệu quả và tối ưu hóa trải nghiệm người dùng trong sản phẩm của bạn:
- Tối ưu hóa hiệu quả hoàn thành tác vụ: User Flow giúp Designer nhìn rõ từng bước người dùng thực hiện, từ đó phát hiện những điểm tắc nghẽn, những bước không cần thiết hoặc gây bối rối, giúp quy trình trở nên mượt mà và nhanh chóng hơn.
- Xác định các màn hình và trạng thái cần thiết: Nó giúp bạn liệt kê và hình dung các màn hình UI (User Interface) cụ thể cần có, cũng như các trạng thái khác nhau của chúng (ví dụ: trạng thái rỗng, trạng thái lỗi, trạng thái đang tải).
- Làm cơ sở cho Wireframe và Prototype: User Flow là nền tảng trực tiếp để bạn bắt đầu phác thảo wireframe (bố cục cơ bản của màn hình) và sau đó tạo prototype (mẫu thử có tương tác) để kiểm thử.
- Hỗ trợ lập trình viên: User Flow cung cấp một “bản thiết kế” rõ ràng cho các nhà phát triển về logic và trình tự tương tác của các tính năng, giúp quá trình lập trình chính xác và hiệu quả hơn.
Các thành phần của một User Flow
Một User Flow thường sử dụng các ký hiệu hình khối và mũi tên để thể hiện các yếu tố sau:
- Màn hình (Screens/Pages): Các trang hoặc giao diện mà người dùng nhìn thấy.
- Hành động người dùng (User Actions): Những gì người dùng làm (ví dụ: “Click nút A”, “Nhập văn bản”, “Chọn mục X”).
- Điểm quyết định (Decision Points): Nơi người dùng hoặc hệ thống đưa ra lựa chọn (ví dụ: “Đăng nhập thành công?”, “Thanh toán thành công?”). Thường được biểu diễn bằng hình kim cương.
- Trạng thái hệ thống (System States): Những thay đổi của hệ thống hoặc thông báo (ví dụ: “Đang tải”, “Thông báo lỗi”, “Xác nhận đơn hàng”).
- Đường dẫn (Paths): Các mũi tên nối các yếu tố lại với nhau, thể hiện trình tự di chuyển.
Ví dụ về User Flow cho quy trình đặt đồ ăn trên ứng dụng:
(Bắt đầu) → Mở ứng dụng đặt đồ ăn → Trang chủ (Hiển thị các nhà hàng gần đây/đề xuất) → Cuộn / Tìm kiếm nhà hàng → (Nếu tìm kiếm) → Nhập tên món/nhà hàng → Trang kết quả tìm kiếm → Click vào nhà hàng X → (Nếu chọn từ danh sách) → Click vào nhà hàng X
→ Trang Nhà hàng X (Menu, thông tin nhà hàng) → Cuộn menu / Click vào món ăn Y → Màn hình chi tiết món ăn Y → Click “Thêm vào giỏ hàng” → (Món ăn được thêm vào giỏ, hiển thị pop-up “Xem giỏ hàng” hoặc số lượng trong giỏ tăng lên)
→ Click “Xem giỏ hàng” → Màn hình Giỏ hàng (Danh sách món, tổng tiền, địa chỉ giao hàng) → Click “Thay đổi địa chỉ” (Nếu cần) → Màn hình chọn địa chỉ → Click “Thanh toán”
→ Màn hình Thanh toán (Xác nhận địa chỉ, chọn phương thức thanh toán) → Chọn “Thanh toán khi nhận hàng” / “Thanh toán qua ví điện tử” / “Thanh toán qua thẻ” → (Nếu ví/thẻ) → Chuyển đến cổng thanh toán → (Nếu thanh toán thành công) → Xác nhận thanh toán → (Nếu thanh toán thất bại) → Thông báo lỗi → Quay lại màn hình Thanh toán → Click “Đặt hàng”
→ Màn hình Xác nhận Đơn hàng (Cảm ơn, mã đơn hàng, thời gian dự kiến) → Màn hình Theo dõi đơn hàng (Vị trí tài xế, trạng thái đơn hàng)
(Đồ ăn được giao) → Người dùng nhận đồ ăn → (Sau khi nhận) Ứng dụng gửi thông báo “Đánh giá đơn hàng” → Màn hình Đánh giá → Đánh giá Nhà hàng (Sao, bình luận) → Đánh giá Tài xế (Sao, bình luận) → Click “Gửi đánh giá”
(Hoàn thành mục tiêu)`
Các loại User Flow phổ biến
Trong thực tế, có nhiều cách để thể hiện User Flow, tùy thuộc vào mức độ chi tiết và mục đích:
- Task Flow: Đơn giản nhất, chỉ tập trung vào một nhiệm vụ cụ thể mà người dùng hoàn thành, không quan tâm đến các điểm rẽ nhánh hay các trường hợp ngoại lệ.
- Wireflow: Kết hợp giữa User Flow và Wireframe (bố cục màn hình). Mỗi bước trong luồng được thể hiện bằng một bản wireframe của màn hình tương ứng.
- Full User Flow: Chi tiết nhất, bao gồm tất cả các trường hợp thành công, thất bại, các điểm rẽ nhánh, các quyết định của hệ thống và người dùng.
Quy trình tạo User Flow
- Xác định Mục tiêu và Điểm bắt đầu/kết thúc: Người dùng muốn đạt được gì? Họ bắt đầu từ đâu và kết thúc ở đâu?
- Ví dụ: Mục tiêu là “Đặt đồ ăn thành công”, bắt đầu từ “Mở ứng dụng”, kết thúc bằng “Nhận đồ ăn và đánh giá”.
- Liệt kê các bước hành động: Liệt kê tất cả các hành động mà người dùng và hệ thống sẽ thực hiện để đạt được mục tiêu.
- Vẽ sơ đồ: Sử dụng các ký hiệu hình khối và mũi tên để kết nối các bước, màn hình và điểm quyết định. Đảm bảo luồng rõ ràng, dễ theo dõi.
- Xử lý các trường hợp ngoại lệ: Đừng quên các trường hợp lỗi, quay lại, hủy bỏ, v.v.
Prototype: Biến User Flow thành Trải nghiệm Sống Động
Trong khi User Flow là một sơ đồ tĩnh thể hiện các bước logic, thì Prototype (bản sản phẩm mô phỏng) chính là công cụ biến sơ đồ đó thành một phiên bản tương tác của sản phẩm. Prototype cho phép bạn:
- Trải nghiệm thực tế luồng tương tác: Thay vì chỉ nhìn các hình khối và mũi tên, các bên liên quan (stakeholders) và người dùng có thể “click”, “vuốt”, “nhập liệu” và thực sự trải nghiệm cách User Flow hoạt động.
- Kiểm chứng giả định và thu thập phản hồi: Đây là bước quan trọng để kiểm tra xem User Flow có thực sự mượt mà, dễ hiểu và hiệu quả như mong đợi hay không. Phản hồi trực tiếp từ việc tương tác với prototype sẽ giúp phát hiện sớm các vấn đề và cơ hội cải thiện.
- Cải thiện giao tiếp: Việc có một bản prototype giúp mọi người trong team hình dung rõ ràng hơn về sản phẩm cuối cùng, giảm thiểu sự hiểu lầm và tăng cường sự đồng thuận.
Việc tạo prototype trực tiếp từ User Flow là một bước đệm cực kỳ quan trọng trước khi giao cho đội ngũ phát triển, giúp tiết kiệm thời gian và chi phí đáng kể trong dài hạn.
Công cụ hỗ trợ tạo User Flow và Prototype
Các công cụ phổ biến để vẽ User Flow và tạo Prototype bao gồm:
- Figma: Cực kỳ mạnh mẽ và phổ biến, cho phép bạn thiết kế giao diện, vẽ User Flow và tạo prototype tương tác cao trong cùng một môi trường.
- Whimsical, Miro, Lucidchart, draw.io: Các công cụ sơ đồ này rất tốt để vẽ User Flow. Một số cũng có tính năng prototype cơ bản.
- Adobe XD, Sketch, Axure RP: Các công cụ thiết kế UI/UX chuyên nghiệp khác với khả năng tạo User Flow và prototype mạnh mẽ.
- Đơn giản: Giấy và bút (để phác thảo nhanh các ý tưởng ban đầu).
Ai chịu trách nhiệm tạo User Flow và Prototype, và ai tiếp nhận?
- Người chịu trách nhiệm chính: Chủ yếu là UX Designer hoặc UI Designer. Họ là những người trực tiếp thiết kế luồng tương tác, giao diện, và tạo ra các bản prototype.
- Người tiếp nhận/Sử dụng:
- UI Designers: Để thiết kế chi tiết giao diện (visual design) dựa trên luồng đã được định nghĩa.
- Developers: Để lập trình các luồng chức năng, hiểu rõ logic chuyển đổi giữa các màn hình và trạng thái.
- Product Manager: Để duyệt và đảm bảo luồng đáp ứng yêu cầu tính năng và mục tiêu sản phẩm, cũng như để trình bày cho các bên liên quan.
- QA/Tester: Để kiểm thử các kịch bản người dùng khác nhau và đảm bảo không có lỗi.
- Stakeholders (các bên liên quan): Để trải nghiệm sản phẩm ở giai đoạn sớm, đưa ra phản hồi và đóng góp.
Kiến thức và thông tin cần có để vẽ User Flow và tạo Prototype tốt
Để tạo ra một User Flow và Prototype hiệu quả, bạn cần:
- Hiểu biết sâu sắc về hành vi người dùng: Điều này đến từ nghiên cứu người dùng, Persona, và đặc biệt là từ những vấn đề và cơ hội được xác định trong Customer Journey Map.
- Kiến thức về các nguyên tắc thiết kế tương tác (Interaction Design Principles): Để thiết kế các luồng trực quan, dễ sử dụng, và hiệu quả.
- Tư duy logic và kịch bản: Khả năng suy nghĩ qua tất cả các bước, xử lý các trường hợp thành công và thất bại.
- Kiến thức về các UI Patterns và UX Patterns: Áp dụng các giải pháp thiết kế đã được kiểm chứng để giải quyết các vấn đề tương tác phổ biến.
- Khả năng sử dụng công cụ thiết kế và prototyping: Để trực quan hóa luồng một cách rõ ràng và chuyên nghiệp, đồng thời tạo ra các bản prototype tương tác.
Kết Luận: User Flow – Lộ Trình Chi Tiết Cho Trải Nghiệm Hoàn Hảo
User Flow là bản chỉ dẫn chi tiết cho người dùng bên trong sản phẩm của bạn. Nó là cầu nối giữa cấu trúc tổng thể (Sitemap) và thiết kế giao diện chi tiết. Một User Flow được xây dựng cẩn thận, và đặc biệt khi được thể hiện thông qua Prototype, không chỉ giúp đội ngũ phát triển sản phẩm hiệu quả hơn mà còn đảm bảo rằng người dùng có thể dễ dàng và mượt mà hoàn thành mục tiêu của họ, dẫn đến một trải nghiệm người dùng tối ưu.
Để bạn có thể thực hành và nắm vững kỹ năng tạo prototype, đặc biệt là các hiệu ứng chuyển động và tương tác phức tạp, chúng tôi khuyến khích bạn theo dõi chuỗi video hướng dẫn thực hành Prototype trong Figma của chúng tôi. Chuỗi bài này sẽ đưa bạn đi từ những kiến thức cơ bản đến nâng cao, bao gồm cả cách tạo hiệu ứng tải, zoom, scroll và slide.
Đây là bài thứ tư và cũng là bài cuối cùng trong chuỗi bài về các UX flow phổ biến. Bạn có thể xem lại các phần trước để có cái nhìn tổng thể và toàn diện về các công cụ thiết yếu này:
