Luồng người dùng (User Flows) trong thiết kế UX

Xây dựng luồng người dùng (User Flows) đúng cách là một bước quan trọng quyết định sự thành công trong thiết kế trải nghiệm, thiết kế webstie.

Giả sử, bạn là một công nhân. Bây giờ sếp bạn chỉ vào đống vật liệu và nói rằng “Hãy xây một ngôi nhà”.



  • Không có bản thiết kế.
  • Bạn không biết bắt đầu từ đâu.
  • Không biết nên xây nhà tắm ở đằng sau hay là bên cạnh nhà bếp.

Trong thiết kế website cũng vậy, có rất nhiều cách để thực hiện nhưng cụ thể thực hiện như thế nào thì cần phải thống nhất:

  • Website sẽ có những trang nào, danh mục nào?
  • Các trang được sắp xếp liên kết ra sao?
  • Trang chủ có những phần nào?
  • Nút CTA này sẽ dẫn tới đâu?
  • Link này sẽ đưa người dùng sang trang nào, được tạo ở danh mục nào?
  • Click vào vị trí A thì mở trang mới hay là load dữ liệu ngay trên trang?
  • Đi từ trang chủ tới bài viết Blog thì đi qua những bước nào?
  • …

Vậy nên, để thiết kế website mang lại trải nghiệm tốt, giúp các bộ phận triển khai thiết kế, lập trình hiệu quả thì bạn cần xây dựng luồng người dùng (User Flows).



User Flows trong thiết kế UX

Nội dung bài viết bao gồm:

  • Luồng người dùng (User Flows) là gì?
  • Cách sử dụng User Flows trong giai đoạn thiết kế
  • Kết hợp User Flows với Wireframes
  • 8 Cách thiết kế User Flows tốt nhất
  • 5 Ví dụ User Flows của website có thiết kế UX tốt
  • Một số công cụ hỗ trợ tạo User Flows

1. Luồng người dùng (User Flows) là gì?

Luồng người dùng (User Flows) là một sơ đồ minh họa nhanh đường dẫn mà người dùng của bạn sẽ đi qua trang web hoặc ứng dụng để đạt được một mục tiêu nhất định.



Ví dụ về Luồng người dùng (User Flows) trong thiết kế UX

Bạn có thể tạo luồng người dùng ở bất kỳ giai đoạn nào của giai đoạn thiết kế và điều này sẽ giúp xác định kiến ​​trúc thông tin.

Tùy thuộc vào vị trí của bạn trong giai đoạn thiết kế, hình thức mà một luồng người dùng có thể có khác nhau.

Ví dụ: Nhiều nhóm thiết kế tạo luồng người dùng trước khi họ tạo khung giao diện người dùng (UI Wireframes).

Sơ đồ User Flows sơ bộ thường có dạng biểu đồ và sử dụng các khối với các ý nghĩa khác nhau, ví dụ:

  • Hình chữ nhật có 2 đầu tròn hoặc hình tròn (Bắt đầu, kết thúc)
  • Hình thoi (Quyết định)
  • Hình chữ nhật (Trang, màn hình hay hành động)
  • Mũi tên chuyển tiếp (Điều hướng người dùng)
  • Hình vuông (Đôi khi được sử dụng cho các ghi chú)

Tuy nhiên, khi nhóm thiết kế tạo wireframes, các hình chữ nhật trong User Flows sẽ được thay thế bằng các trang cụ thể.

Sự kết hợp giữa User Flows và Wireframes này đôi khi được gọi là “wireflow” trong thế giới thiết kế UX.

Tùy thuộc vào công ty, nhiều team thiết kế tiếp tục tạo luồng người dùng đến giai đoạn Prototype, ở đó, họ tiếp tục thay thế wireframes bằng các nguyên mẫu.

Trong một số trường hợp, User Flows cũng có thể được sử dụng để cải thiện thiết kế hoặc thêm tính năng mới cho website, ứng dụng.

1.1. Tại sao cần tạo User Flows?

Có nhiều lý do bạn nên cân nhắc tạo User Flows, đặc biệt nếu bạn mới bắt đầu giai đoạn thiết kế website của mình.

Dưới đây là cách User Flows có thể giúp bạn thiết kế website tốt hơn:

Thiết kế lấy người dùng làm trung tâm

User Flows giúp bạn suy nghĩ về cách người dùng sẽ điều hướng qua trang web của bạn như thế nào để đạt được mục tiêu của họ.

Từ đó bạn có thể thiết kế từng thành phần trong từng bước để đáp ứng họ.

Tại trang web này, người dùng bắt đầu tại trang chủ, sau đó họ có thể điều hướng đến trang danh mục, sau đó tới các danh mục phụ.

Mọi dòng chảy đều tuân theo một hướng tuyến tính.

Mỗi màn hình được dán nhãn rõ ràng và có ghi chú thể hiện ngắn gọn mục đích chính của màn hình với nhiều tùy chọn.

4.2. User Flows có sử dụng màu

User Flows của trang web này thể hiện mục tiêu của người dùng mua hàng và có thể nhận giảm giá qua cửa sổ bật lên.

Ở đây người ta đã sử dụng màu sắc để tổ chức Userflow, trong đó:

  • Màu đen: Điểm bắt đầu
  • Màu xanh: Các màn hình (trang)
  • Màu cam: Các phần cần quyết định

4.3. Trang web bán hàng #1

Thiết kế trang web bán hàng hoặc trang web thương mại điện tử không phải là việc đơn giản.

Thông thường, các trang liên quan đến tài khoản người dùng và thanh toán trực tuyến có luồng người dùng phức tạp hơn.

Ngoài ra, nếu trang web có các tính năng thiết kế riêng thì có rất nhiều luồng cần phải xác định rõ ràng.

Thay đổi luồng đôi khi là thay đổi cả cấu trúc thiết kế, thậm chí có thể các công việc thực hiện trước đó không sử dụng được nữa.

User Flows của trang web này thể hiện quá trình từ thời điểm người dùng chọn thanh toán mua hàng:

  • Nếu khách hàng đã có tài khoản thì cần đăng nhập
  • Nếu chưa thì cần tạo tài khoản mới
  • và một vài bước tiếp theo để thực hiện mua hàng thành công.
Ví dụ Luồng người dùng (User Flows) của một trang web hướng dẫn sinh viên

User Flows này trông thì phức tạp nhưng đã truyền tải các thông điệp một cách đơn giản, rõ ràng.

Một ví dụ về User Flow của một trang web bán hàng khác:

Ví dụ Luồng người dùng (User Flows) có sử dụng màu sắc của một trang web bán hàng đơn giản có sử dụng màu sắc

Xem ảnh lớn trên Behance

> Đọc thêm: Cách thiết kế trang web bán hàng hỗ trợ bán hàng hiệu quả

4.4. Sử dụng kiểu Wireflow

Dưới đây là một ví dụ khác về User Flows của trang web bán hàng, tại đây người dùng bắt đầu và hướng tới một mục tiêu mua thứ gì đó (hoặc đến trang xác nhận đơn đặt hàng).

Ví dụ Luồng người dùng (User Flows) của một trang web bán hàng có đăng ký tài khoản

Không giống như ví dụ trên, User Flows này là Wireflow, với bố cục chính cho mỗi màn hình đã được bố cục cụ thể hơn.

Người dùng truy cập trang chủ và có ba tùy chọn khác nhau:

  • Click vào Banner sản phẩm hoặc Danh mục
  • Click vào chiến dịch Marketing
  • Hoặc cuộn xuống dưới màn hình đầu tiên.

Và cuối cùng, mỗi luồng sẽ kết thúc tại trang xác nhận đơn đặt hàng.

Mỗi tùy chọn khác nhau được thể hiện bằng một màn hình wireframes đơn giản. Đây là nền tảng để phát triển thành Prototype để bắt đầu thử nghiệm trên người dùng thật.

4.5. User Flows có chú giải rõ ràng

Đây là một ví dụ rất hay về cách tạo luồng người dùng đơn giản bằng cách sử dụng các khối và hệ thống màu rõ ràng để mọi người có thể hiểu chức năng chính của trang web.

Nó cũng có Key chú giải rõ ràng giúp người đọc hiểu nhanh hơn nữa.

Như bạn thấy, ở bên dưới có phần chú thích/ Key chú giải rõ ràng để người xem hiểu được rõ hơn về User Flows.

Trong đó:

  • Màu đen được sử dụng khi người dùng truy cập và thoát khỏi ứng dụng web.
  • Màu xanh và đỏ riêng biệt chỉ ra các luồng luân phiên mà người dùng có thể thực hiện tùy thuộc vào việc họ đăng nhập hay đăng ký.
  • Màu tròn là thông báo lỗi
  • Hình chữ nhật đại diện cho màn hình và hành động
  • Các quyết định của người dùng được phân biệt rõ ràng với các quyết định của máy tính.

> Tạo User Flows là một phần quan trọng trong quy trình thiết kế website của Sao Kim.

Ví dụ User Flows trong quá trình đặt sách của Amazone:

Ví dụ Wireflow của một trang web bán hàng

5. Một số công cụ hỗ trợ tạo User Flows

Có rất nhiều công cụ hỗ trợ tạo User Flows giúp bạn nhanh chóng phác thảo luồng người dùng của trang web như:

  • FlowMapp
  • Stormboard
  • Whimsical
  • Moqups
  • Writemaps
  • Mindnode

Hoặc các công cụ hỗ trợ thiết kế web, thiết kế UX toàn diện:

  • Figma (Công cụ thiết kế web tốt nhất)
  • Sketch
  • Adobe XD
  • Axure

Cách dùng các công cụ này để tạo User Flows cũng khá đơn giản. Nhưng nếu bạn không thích công cụ, bạn hoàn toàn có thể sử dụng bút và giấy.

Tổng kết về User Flows

User Flows (Luồng người dùng) giúp chúng ta tập trung vào thiết kế lấy người dùng làm trung tâm, để tạo ra trải nghiệm người dùng nhất quán.

Không những thế, tạo ra User Flow còn giúp công việc thiết kế website hay ứng dụng dễ dàng hơn, tiết kiệm thời gian và tiền bạc.

User Flows giúp chúng ta xác định mọi vấn đề có thể xảy ra trước khi bắt đầu thiết kế chi tiết từng trang và ngăn việc thiết kế lại sau khi công việc đã bước vào giai đoạn lập trình.

User Flows cũng buộc chúng ta phải xem xét cách dễ dàng nhất để người dùng hoàn thành một nhiệm vụ và nghiên cứu các luồng thay thế, dẫn đến trải nghiệm người dùng tốt nhất có thể.

Nói tóm lại, thiết kế User Flows tốt là giải pháp dẫn đến thành công của thiết kế trải nghiệm người dùng (thiết kế UX).

Hãy bắt đầu tạo User Flows ngay nếu bạn muốn thiết kế trang web có trải nghiệm người dùng tốt, mang lại hiệu quả kinh doanh cho doanh nghiệp của mình.

Liên hệ ngay với Sao Kim nếu bạn muốn đảm bảo sự thành công khi muốn thuê thiết kế website.

#SaoKim #SaoKimDigital #SaoKimBranding #UserFlows #LuongNguoiDung #ThietKeUX #UX