Kỳ trước, chúng ta đã cùng nhau tìm hiểu về User journey (bạn có thể xem lại bài viết User Journey – Hành trình đi đến trái tim người dùng). Bên cạnh User journey, một khái niệm nữa cũng rất quen thuộc với Product Owner mà Lemon’s Tribe sẽ đề cập đến trong bài viết này. Đó chính là User Flow. Cùng tìm hiểu ngay cho nóng nhé.

User Flow là gì?

User flow, hay còn gọi là lưu đồ User flow (User flow diagram), là một loại lưu đồ mô tả các bước mà người dùng có thể đi qua khi tương tác với một ứng dụng hoặc một website để hoàn thành một nhiệm vụ cụ thể nào đó. Lưu đồ này sẽ bắt đầu bằng một điểm chạm trên một giao diện nào đó, sau đó sẽ phát triển thêm nhiều bước hoặc nhiều nhánh, phụ thuộc vào hành động và quyết định của người dùng1. Vì vậy mà user flow sẽ biểu diễn cả các trường hợp thay thế (alternative pathway), chứ không chỉ là một đường tuyến tính (linear pathway) thể hiện happy case (trường hợp hoàn hảo nhất có thể xảy ra)2.

Mục tiêu mà người dùng cần đạt được trong user flow thường là những mục tiêu nhỏ, có thể hoàn thành bằng một số bước, và thường chỉ diễn ra trong vòng vài phút hoặc vài giờ3. Ví dụ như user flow sẽ được dùng để diễn tả các bước khi user đăng ký tài khoản cho một ứng dụng; thay avatar trên Facebook; hoặc đăng ký gói hội viên. Ngoài ra, user flow đa phần sẽ gói gọn trong một ứng dụng hoặc một website. Có một số trường hợp, ví dụ như bạn là Product Owner của một ứng dụng Ví điện tử, và người dùng của bạn mua hàng trên một ứng dụng mua sắm, có sử dụng Ví điện tử của bạn để thanh toán, thì user flow mô tả các bước để user hoàn thành việc mua hàng có thể được mô tả ở trên 2 ứng dụng khác nhau.

Ngoài việc biểu diễn các hành động hoặc quyết định của người dùng, user flow cũng có thể hiển thị phản hồi từ hệ thống trong quá trình người dùng tương tác với sản phẩm (ví dụ như ứng dụng hiển thị thông báo in-line khi người dùng thực hiện chưa đúng yêu cầu quy định của hệ thống). Tuy nhiên, khác với user journey, user flow sẽ không thể hiện cảm xúc hay suy nghĩ của người dùng khi thực hiện các thao tác, mà tập trung vào chức năng của sản phẩm.4

User Flow khác gì User Journey?

User journey và user flow thường bị nhầm lẫn với nhau. Tuy đều chỉ về các bước mà user đi qua, nhưng user journey sẽ có tính vĩ mô và bao quát hơn cho tổng thể cả hành trình trải nghiệm của user, mà trong hành trình đó người dùng sẽ phải thực hiện nhiều hơn một nhiệm vụ nhằm đạt được mục tiêu lớn. Trong khi đó, user flow có tính vi mô hơn, tập trung vào một nhiệm vụ cụ thể.5 Thường thì người làm Product sẽ phát triển user journey map trước để có cái nhìn tổng quan về những thao tác tổng quan mà người dùng phải thực hiện, cảm xúc và suy nghĩ của họ, nhằm xác định được trải nghiệm mà họ muốn mang đến cho người dùng. Nhưng để chi tiết hoá cách mà người dùng cần phải tương tác với sản phẩm thực tế như thế nào (ví dụ như điền bao nhiêu thông tin, nhấn bao nhiêu nút, đi qua bao nhiêu màn hình,…), lúc này user flow sẽ “có đất dụng võ”.

Cụ thể hơn về sự khác nhau giữa user flow và user journey, có thể điểm qua một số đầu mục sau:

Khía cạnhUser journeyUser flow
Mục đíchĐồng cảm với người dùng và xác định cơ hội để mang đến trải nghiệm tốt hơn cho userThiết kế luồng và chức năng cần thiết để người dùng có thể hoàn thành nhiệm vụ
Tập trung vàoHành động, cảm xúc, suy nghĩ và cả kênh tương tác của người dùngCác bước, trình tự và sự tương tác giữa người dùng và hệ thống
Phạm viCó thể diễn ra trên nhiều điểm chạm và kênh tương tácChỉ diễn ra trong phạm vị của sản phẩm
FormatDiễn giải theo cách kể chuyện, sử dụng User journey mapSử dụng flowchart, wireflow hoặc screen flow
Bàng 1. So sánh giữa user journey và user flow67

Các loại lưu đồ User Flow?

User flow thường được biểu diễn dưới 3 dạng lưu đồ:

  • Flowchart – lưu đồ biểu diễn luồng thao tác của người dùng
  • Wireflow – lưu đồ wireframes (khung xương của màn hình) theo thứ tự mà người dùng đi qua
  • Screen flow – lưu đồ màn hình đã hoàn thiện thiết kế (mockup) theo thứ tự mà người dùng đi qua

1. Flowchart

Flowchart, hay còn gọi là UX flow, là một lưu đồ quy trình các bước hành động hoặc quyết định của người dùng. Flowchart được biểu diễn bởi các khối hình học và kết nối với nhau bởi các đường nối (transition line).

Hình 1. Ví dụ về Flowchart8

Một flowchart cơ bản sẽ bao gồm các yếu tố9:

  • Bắt đầu hoặc kết thúc quy trình: được thể hiện dưới dạng hình bầu dục nằm ngang hoặc hình tròn
  • Hành động của user: được biểu diễn dưới hình chữ nhật
  • Quyết định của user hoặc điều kiện: được biểu diễn dưới dạng hình thoi. Từ thành phần này sẽ thường có 2 nhánh được rẽ ra (trong một số trường hợp sẽ có nhiều hơn 2 nhánh). Thường 2 nhánh được rẽ ra sẽ có hai trường hợp: “Có” hoặc “Không”.
  • Đầu vào hoặc đầu ra (thông tin/dữ liệu do người dùng nhập vào hoặc do hệ thống hiển thị ra): được trình diễn dưới dạng hình bình hành
  • Đường nối: là những đường nối giữa các khối với nhau (3 khối mô tả ở trên), và có tính định hướng thứ tự các bước diễn ra). Các đường nối được sử dụng sẽ là đường nối liền.
Hình 3. Các thành phần chính của Flowchart10

Lưu ý là Flowchart không phải để chỉ riêng user flow, mà thực tế user flow được biểu diễn dưới dạng flowchart là một loại flowchart trong nhiều loại flowchart (ví dụ như Data flowchart, Workflow diagram, System flowchart).11

2. Wireflow

Wireframe là bản vẽ khung xương cho một màn hình, do Product Owner hoặc UX Designer tạo ra. Wireframe sẽ không giống như mockup – bản vẽ màn hình đã được thiết kế UI hoàn chỉnh, mà một wireframe sẽ bao gồm các thành phần (component) cơ bản, được biểu diễn dưới dạng hình chữ nhật, hình vuông, text,…. Wireflow sẽ do nhiều wireframes tạo ra, dựa theo các bước mà user đi qua. Hay nói cách khác, wireflow là sự kết hợp giữa wireframes và flowchart.12

Wireflow sẽ giúp Product Owner và UX Designer có cái nhìn trực quan hơn về các màn hình mà user sẽ đi qua, các thông tin cần user cung cấp hoặc các vị trí thao tác mà user cần thực hiện theo quy tắc UX. Đồng thời, wireflow là tài liệu quan trọng để UI designer có thể chuyển hoá thành screen flow.

Hình 2. Ví dụ về Wireflow13

3. Screen flow

Nếu wireflow là lưu đồ của các bản khung xương màn hình, thì screen flow chính là lưu đồ của bản vẽ hoàn chỉnh (mockup). Screen flow sẽ giúp cả đội cùng nhìn lại trước khi thiết kế được chuyển thành prototype.

Hình 3. Ví dụ về Screen flow14

Làm thế nào để tạo ra một User Flow?

Trên thực tế, khi bạn phát triển một sản phẩm có nhiều tính năng trong đó, giai đoạn đầu tiên mà bạn cần tập trung vào chính là xác định vấn đề và giải pháp về trải nghiệm mà bạn muốn mang đến cho người dùng. Ở giai đoạn này, user journey map sẽ là một công cụ hữu ích cho bạn.

  • Khi đã xác định được trải nghiệm và các tính năng mà bạn muốn xây dựng cho người dùng, bạn sẽ lên kế hoạch (roadmap) để biến các tính năng đó từ ý tưởng đến thực dùng trên tay user.
  • Sau đó, bạn sẽ đi sâu hơn vào việc viết user story, xác định điểm chạm, liệt kê các thao tác cơ bản nhất để user có thể hoàn thành nhiệm vụ của mình, hình dung các trường hợp có thể xảy ra khi user đi qua từng bước.
  • Kế đến là nối các bước này lại với nhau bằng lưu đồ, và xem lại khi đã hoàn thành bản nháp cho lưu đồ.
  • Khi đã có trên tay lưu đồ user flow, bạn có thể trình bày lưu đồ này đến các đội nhóm liên quan để có thể góp ý cải thiện luồng. Những góp ý từ team Developer (lập trình viên), Designer, hay team Business, sẽ giúp bạn đáp ứng được trải nghiệm của người dùng, mà vẫn đảm bảo về mặt hệ thống và ít tốn nguồn lực nhất có thể.

Tạm kết

Cho dù bạn là Product Owner, Product Designer, hay bạn là UI/UX Designer, thì việc hiểu, vẽ và truyền tải được user flow là luôn cần thiết. Với mỗi PRD (Product Requirement Document) mà bạn viết cho một tính năng nào đó, bạn có thể kết hợp cả flowchart và screen flow để giúp cả đội phát triển sản phẩm có thể hình dung được hết các chức năng của tính năng mà bạn muốn phát triển, và các tình huống có thể xảy nhằm đảm bảo ngay cả khi có vấn đề về hệ thống thì trải nghiệm của người dùng cũng được chăm sóc tử tế.

Nguồn tham khảo

  1. https://blog.zeplin.io/what-are-user-flows ↩︎
  2. https://builtin.com/articles/task-flow ↩︎
  3. https://www.nngroup.com/articles/user-journeys-vs-user-flows/ ↩︎
  4. https://www.nngroup.com/articles/user-journeys-vs-user-flows/ ↩︎
  5. https://www.nngroup.com/articles/user-journeys-vs-user-flows/ ↩︎
  6. https://www.nngroup.com/articles/user-journeys-vs-user-flows/ ↩︎
  7. https://www.interaction-design.org/literature/topics/user-flows ↩︎
  8. https://designli.co/blog/user-flow-for-app-development-a-beginners-guide/ ↩︎
  9. https://www.flowmapp.com/blog/articles/user-flow-based-on-flowchart-principles-and-tools ↩︎
  10. https://www.justinmind.com/blog/user-flow/ ↩︎
  11. https://asana.com/resources/what-is-a-flowchart ↩︎
  12. https://balsamiq.com/learn/articles/wireflows/ ↩︎
  13. https://blog.zeplin.io/what-are-user-flows ↩︎
  14. https://www.eleken.co/blog-posts/ux-flow-and-its-importance-for-the-design-process ↩︎
Categories: