Luồng người dùng: Chúng là gì và tại sao chúng quan trọng trong thiết kế UX32 min read

UX tuyệt vời không bắt đầu bằng pixel. Nó bắt đầu bằng việc hiểu người dùng đang cố gắng làm gì, họ mua sản phẩm ở đâu, họ cần đưa ra những quyết định nào và con đường nào đưa họ đến kết quả thành công.

Con đường đó được gọi là luồng người dùng.

Luồng người dùng là bản đồ trực quan về các bước mà một người thực hiện thông qua một ứng dụng, trang web hoặc tác vụ cụ thể. Nó có thể hiển thị trải nghiệm sản phẩm đầy đủ, như giới thiệu ứng dụng SaaS hoặc một quy trình nhỏ hơn, như đăng ký, đặt bản demo, đăng ký nhận bản tin hoặc hoàn tất thanh toán.

Đối với các nhà thiết kế, nhóm sản phẩm và người sáng lập UX, luồng người dùng là một trong những cách đơn giản nhất để thiết kế giao diện tốt hơn trước khi chuyển sang màn hình chi tiết. Chúng giúp bạn biết người dùng có thể bối rối ở đâu, ở đâu một quy trình có quá nhiều bước và những màn hình nào bạn thực sự cần thiết kế.

Trong hướng dẫn này, chúng tôi sẽ giải thích luồng người dùng là gì, cách đọc chúng, thời điểm tạo chúng và cách chúng hỗ trợ thiết kế UX tốt hơn.

Hãy thử thiết kế luồng người dùng bằng AI

Mô tả luồng người dùng mà bạn muốn thiết kế, sau đó để Anima biến nó thành UX, màn hình và mã.

Luồng người dùng là gì?

A luồng người dùng là sơ đồ hiển thị đường dẫn mà người dùng thực hiện để hoàn thành mục tiêu bên trong sản phẩm. Trong thiết kế UX, sản phẩm đó thường là ứng dụng, trang web, ứng dụng web hoặc dịch vụ kỹ thuật số.

Luồng người dùng bắt đầu bằng điểm truy cập, chẳng hạn như trang chủ, trang đích, kết quả tìm kiếm, liên kết email, màn hình đăng nhập hoặc giỏ hàng. Quá trình này kết thúc bằng tương tác cuối cùng, chẳng hạn như tạo tài khoản, hoàn tất giao dịch mua, gửi biểu mẫu, xuất bản dự án hoặc truy cập trang xác nhận.

Luồng người dùng có thể đại diện cho:

• Hành trình đầy đủ của sản phẩm, như khám phá, đăng ký và sử dụng ứng dụng mới
• Một tác vụ duy nhất, như đặt lại mật khẩu hoặc nâng cấp gói
• Luồng tính năng, như tạo dự án, mời đồng đội hoặc xuất thiết kế
• Luồng giao diện người dùng, hiển thị cách các màn hình kết nối bên trong sản phẩm

Mục tiêu rất đơn giản: làm cho đường dẫn của người dùng rõ ràng trước khi bạn thiết kế giao diện một cách chi tiết.

Một ví dụ về cấu trúc luồng người dùng cơ bản

Luồng người dùng so với luồng giao diện người dùng

Các điều khoản luồng người dùng và luồng giao diện người dùng có liên quan chặt chẽ.

Luồng người dùng tập trung vào con đường hướng tới mục tiêu của người dùng. Nó trả lời những câu hỏi như:

• Người dùng bắt đầu từ đâu?
• Họ đang cố gắng hoàn thành hành động gì?
• Họ đưa ra quyết định gì trên đường đi?
• Điều gì xảy ra nếu họ thành công, thất bại hoặc chọn một con đường khác?

Luồng giao diện người dùng tập trung cụ thể hơn vào cách kết nối màn hình, trạng thái, nút, biểu mẫu và thành phần giao diện. Nó trả lời những câu hỏi như:

• Màn hình nào xuất hiện sau màn hình này?
• Điều gì xảy ra khi người dùng nhấp vào nút này?
• Trạng thái lỗi này dẫn đến đâu?
• Người dùng thấy gì sau khi gửi biểu mẫu?

Trong thực tế, các nhóm UX thường sử dụng cả hai cùng nhau. Luồng người dùng xác định đường dẫn. Luồng giao diện người dùng làm cho đường dẫn đó trở nên cụ thể bên trong sản phẩm UI.

Cách đọc luồng người dùng

Luồng người dùng trình bày các bước mà người dùng thực hiện từ điểm bắt đầu đến lần tương tác cuối cùng. Mỗi bước thường được biểu thị bằng một hình dạng, còn được gọi là nút. Các nút được kết nối bằng các mũi tên chỉ hướng chuyển động.

Hầu hết các sơ đồ luồng người dùng đều sử dụng ngôn ngữ hình ảnh đơn giản:

• Hình tròn hoặc hình bầu dục: Điểm bắt đầu hoặc điểm kết thúc
• Hình chữ nhật: Màn hình, trang hoặc hành động
• Kim cương: Điểm quyết định, chẳng hạn như có/không, thành công/thất bại hoặc chọn đường đi
• Mũi tên: Hướng chuyển động giữa các bước

Giải thích về các thành phần luồng người dùng

Ví dụ: luồng người dùng đăng ký đơn giản có thể trông như thế này:

1. Người dùng truy cập vào trang chủ
2. Người dùng nhấp vào “Bắt đầu miễn phí”
3. Người dùng nhập email và mật khẩu
4. Hệ thống kiểm tra email có hợp lệ không
5. Người dùng xác nhận tài khoản
6. Người dùng đến màn hình giới thiệu
7. Người dùng hoàn tất thiết lập
8. Người dùng truy cập trang tổng quan

Loại ví dụ về luồng người dùng này giúp nhóm hiểu được trải nghiệm trước khi thiết kế mọi màn hình.

Ví dụ về luồng người dùng

Luồng người dùng trở nên dễ hiểu hơn khi bạn kết nối chúng với các tác vụ sản phẩm thực. Dưới đây là một số ví dụ về luồng người dùng phổ biến mà nhóm UX tạo ra trong quá trình lập kế hoạch sản phẩm.

Luồng người dùng đăng ký

Luồng người dùng đăng ký ánh xạ cách một khách truy cập mới trở thành người dùng đã đăng ký.

1. Truy cập trang đích
2. Nhấp vào đăng ký CTA
3. Chọn phương thức đăng ký
4. Nhập chi tiết tài khoản
5. Xác minh email
6. Hoàn tất quá trình giới thiệu
7. Tiếp cận trang tổng quan sản phẩm

Luồng này giúp các đội giảm bớt xích mích trong trải nghiệm đầu tiên. Nếu quá trình đăng ký có quá nhiều bước, trường biểu mẫu không rõ ràng hoặc trạng thái xác minh khó hiểu, người dùng có thể bỏ ngang trước khi họ nhìn thấy sản phẩm.

Luồng người dùng thanh toán

Luồng người dùng thanh toán sẽ ánh xạ cách người dùng chuyển từ quan tâm đến sản phẩm sang mua hàng.

1. Xem trang sản phẩm hoặc giá cả
2. Thêm mục hoặc chọn gói
3. Xem lại chi tiết giỏ hàng hoặc gói
4. Nhập thông tin thanh toán
5. Xác nhận mua hàng
6. Tiếp cận trang thành công hoặc biên nhận

Quy trình này đặc biệt quan trọng đối với thương mại điện tử, SaaS và các sản phẩm đăng ký vì mỗi bước bổ sung đều có thể ảnh hưởng đến chuyển đổi.

Luồng người dùng đăng nhập và đặt lại mật khẩu

Luồng đăng nhập ánh xạ cách người dùng cũ truy cập vào tài khoản của họ, bao gồm cả các trường hợp khó khăn.

1. Mở trang đăng nhập
2. Nhập thông tin xác thực
3. Hệ thống xác thực đầu vào
4. Người dùng đăng nhập thành công hoặc thấy lỗi
5. Nếu cần, người dùng bắt đầu đặt lại mật khẩu
6. Người dùng xác nhận email
7. Người dùng đặt mật khẩu mới
8. Người dùng quay lại sản phẩm

Ví dụ về luồng người dùng cho quy trình đăng nhập (luồng tác vụ)

Luồng người dùng giới thiệu

Luồng người dùng giới thiệu sẽ ánh xạ cách người dùng mới tiếp cận thời điểm sản phẩm thành công đầu tiên của họ.

1. Tạo tài khoản
2. Trả lời câu hỏi thiết lập
3. Chọn mẫu hoặc điểm bắt đầu
4. Hoàn thành hành động đầu tiên
5. Xem trạng thái thành công
6. Tiếp tục vào sản phẩm

Đối với các sản phẩm AI, công cụ thiết kế và ứng dụng năng suất, quy trình triển khai rất quan trọng vì người dùng cần nhanh chóng hiểu những việc cần làm tiếp theo.

Khi nào cần tạo luồng người dùng

Tạo luồng người dùng sớm trong quá trình thiết kế, lý tưởng nhất là sau nghiên cứu ban đầu của người dùng và trước khi thiết kế UI có độ chính xác cao.

Ở giai đoạn này, luồng người dùng sẽ giúp bạn:

• Quyết định màn hình nào cần tồn tại
• Loại bỏ các bước không cần thiết
• Xác định các điểm quyết định khó hiểu
• Sắp xếp nhóm xung quanh cấu trúc sản phẩm
• kế hoạch nguyên mẫu nhanh hơn
• Tránh thiết kế màn hình bóng loáng cho lối đi bị hỏng

Luồng người dùng cũng hữu ích sau này trong vòng đời sản phẩm. Nếu giao diện hiện tại hoạt động kém thì luồng người dùng có thể giúp bạn chẩn đoán vị trí mọi người bỏ dở, lặp lại hoặc không hoàn thành các nhiệm vụ chính.

Nói cách khác, luồng người dùng không chỉ dành cho các sản phẩm mới. Chúng cũng hữu ích cho việc cải tiến các sản phẩm hiện có.

Vai trò của luồng người dùng trong thiết kế UX

Luồng người dùng là một phần cốt lõi của thiết kế UX vì chúng kết nối mục tiêu của người dùng với cấu trúc sản phẩm. Trước khi lo lắng về khoảng cách, kiểu chữ, phân cấp hình ảnh hoặc các thành phần, bạn cần biết người dùng đang cố gắng thực hiện điều gì và sản phẩm giúp họ đạt được điều đó như thế nào.

Luồng người dùng giúp các nhóm UX thực hiện ba việc quan trọng.

1. Tạo giao diện trực quan hơn

Luồng người dùng rõ ràng giúp giao diện cuối cùng dễ hiểu hơn.

Khi lập sơ đồ quy trình trước khi thiết kế, bạn có thể sớm phát hiện ra những cản trở. Có thể người dùng phải đưa ra quyết định trước khi họ có đủ thông tin. Có thể một biểu mẫu xuất hiện quá sớm. Có thể bước xác nhận bị thiếu. Có lẽ có ba màn hình, một màn hình là đủ.

Nếu luồng khó hiểu thì giao diện có thể cũng sẽ khó hiểu.

2. Đánh giá giao diện hiện có

Luồng người dùng là một cách tuyệt vời để tối ưu hóa các sản phẩm hiện có có thể không chuyển đổi hoặc giữ chân được như mong đợi. Nếu người dùng không chuyển đổi, kích hoạt hoặc hoàn thành một nhiệm vụ quan trọng, hãy lập sơ đồ quy trình hiện tại.

Bạn có thể nhận thấy rằng người dùng đang bị đưa tới nhầm màn hình, bị yêu cầu cung cấp quá nhiều thông tin hoặc bị buộc phải đi theo một con đường không phù hợp với mục đích của họ.

3. Truyền đạt chiến lược của bạn tới các thành viên trong nhóm và các bên liên quan

Luồng người dùng rất tốt cho sự cộng tác. Họ cung cấp cho các nhà thiết kế, nhà phát triển, Thủ tướng, người ra quyết định và các bên liên quan một bản đồ trải nghiệm chung.

Nhà thiết kế có thể sử dụng quy trình để lập kế hoạch cho màn hình. Các nhà phát triển có thể sử dụng nó để hiểu các trạng thái và trường hợp đặc biệt. Thủ tướng có thể sử dụng nó để làm rõ các yêu cầu. Các bên liên quan có thể sử dụng nó để xem xét tính logic của trải nghiệm trước khi nhóm đầu tư vào thiết kế hoặc triển khai chi tiết.

Luồng người dùng cũng có thể giúp nhà phát triển hiểu được tổng thể cấu trúc đằng sau nguyên mẫu cuối cùng của bạn, điều đó làm cho chuyển giao hiệu quả hơn.

Hành trình của người dùng so với luồng người dùng

Hành trình của người dùng và luồng người dùng thường bị nhầm lẫn nhưng chúng không giống nhau.

A hành trình của người dùng kể câu chuyện rộng hơn về mối quan hệ của người dùng với sản phẩm. Nó thường bao gồm mục tiêu, cảm xúc, động lực, điểm yếu và điểm tiếp xúc của người dùng trước, trong và sau khi sử dụng sản phẩm.

A luồng người dùng tập trung vào đường dẫn mà người dùng thực hiện bên trong sản phẩm để hoàn thành một mục tiêu cụ thể.

Sự khác biệt chính

Cả hai đều hữu ích. Hành trình giúp bạn hiểu bối cảnh của người dùng. Luồng giúp bạn thiết kế đường dẫn thực tế thông qua giao diện.

Cách tạo luồng người dùng

Bạn có thể tạo luồng người dùng bằng bảng trắng, công cụ thiết kế, công cụ lập sơ đồ hoặc công cụ thiết kế AI. Định dạng không quan trọng bằng sự rõ ràng của đường dẫn.

1. Xác định mục tiêu người dùng

Bắt đầu với hành động mà người dùng muốn hoàn thành.

• Tạo một tài khoản
• Mua một sản phẩm
• Đặt bản demo
• Xuất bản một trang web
• Mời đồng đội
• Xuất thiết kế sang mã

Luồng người dùng phải được xây dựng xung quanh một mục tiêu cụ thể chứ không phải một lĩnh vực sản phẩm mơ hồ.

2. Chọn điểm vào

Quyết định nơi người dùng bắt đầu. Ví dụ bao gồm trang chủ, trang định giá, kết quả tìm kiếm, chiến dịch email, trang tổng quan ứng dụng, thông báo hoặc liên kết được chia sẻ.

Các điểm vào khác nhau có thể tạo ra các luồng khác nhau. Người dùng quay lại và người truy cập lần đầu có thể không cần cùng một đường dẫn.

3. Vạch ra con đường hạnh phúc

Con đường hạnh phúc là con đường thành công đơn giản nhất từ đầu đến cuối.

1. Người dùng mở trang định giá
2. Người dùng chọn gói
3. Người dùng tạo tài khoản
4. Người dùng nhập thông tin thanh toán
5. Người dùng xác nhận mua hàng
6. Người dùng đến trang thành công

Điều này mang lại cho bạn trải nghiệm cơ bản.

4. Thêm quyết định và trường hợp đặc biệt

Người dùng thực sự không phải lúc nào cũng đi theo con đường hoàn hảo. Thêm các điểm quyết định như:

• Người dùng đã có tài khoản chưa?
• Biểu mẫu có hợp lệ không?
• Thanh toán có thành công không?
• Người dùng chọn thanh toán hàng tháng hay hàng năm?
• Người dùng có được phép tiếp tục không?
• Điều gì xảy ra nếu người dùng hủy?

Các nhánh này biến một đường dẫn đơn giản thành luồng người dùng thiết kế UX thực sự.

5. Đơn giản hóa quy trình

Sau khi lập bản đồ dòng chảy, hãy tìm lực ma sát.

• Chúng ta có thể loại bỏ một bước?
• Chúng ta có thể kết hợp màn hình không?
• Có phải chúng ta đang yêu cầu thông tin quá sớm?
• Hành động tiếp theo có rõ ràng không?
• Có ngõ cụt không?
• Trạng thái lỗi có rõ ràng không?
• Người dùng có luôn biết chuyện gì đã xảy ra không?

Các luồng người dùng tốt nhất có thể cảm thấy rõ ràng vì sự phức tạp đã được giải quyết ở hậu trường.

Tóm tắt luồng người dùng

Luồng người dùng là bản đồ cấu trúc cho thiết kế sản phẩm. Chúng cho thấy cách người dùng di chuyển qua một ứng dụng, trang web hoặc tác vụ từ điểm đầu vào đến tương tác cuối cùng.

Luồng người dùng mạnh mẽ:

• Bắt đầu với mục tiêu người dùng rõ ràng
• Hiển thị điểm vào của người dùng
• Ánh xạ các bước, màn hình và quyết định trong đường dẫn
• Bao gồm các trường hợp cạnh quan trọng
• Giúp các nhóm xác định ma sát trước khi thiết kế UI chi tiết
• Giúp việc chuyển giao dễ dàng hơn cho các nhà thiết kế, nhà phát triển, Thủ tướng và các bên liên quan

Đối với các nhóm UX, luồng người dùng là một trong những công cụ thiết thực nhất để biến nghiên cứu người dùng thành cấu trúc giao diện. Chúng giúp bạn thiết kế có mục đích thay vì đoán từng màn hình.

Câu hỏi thường gặp: Luồng người dùng

Luồng người dùng là gì?

Luồng người dùng là sơ đồ hiển thị đường dẫn người dùng thực hiện thông qua một tác vụ ứng dụng, trang web hoặc sản phẩm. Chúng thường bắt đầu tại điểm vào, chẳng hạn như trang chủ hoặc màn hình đăng nhập và kết thúc khi người dùng hoàn thành mục tiêu, chẳng hạn như đăng ký, mua hoặc gửi biểu mẫu.

Luồng người dùng trong thiết kế UX là gì?

Trong thiết kế UX, luồng người dùng ánh xạ các bước, màn hình, quyết định và hành động mà người dùng thực hiện để hoàn thành mục tiêu. Các nhóm UX sử dụng luồng người dùng để lập kế hoạch cấu trúc sản phẩm, giảm ma sát và thiết kế giao diện rõ ràng hơn trước khi tạo màn hình có độ trung thực cao.

Sự khác biệt giữa luồng người dùng và hành trình người dùng là gì?

Hành trình của người dùng cho thấy trải nghiệm rộng hơn, bao gồm động lực, cảm xúc, điểm yếu và điểm tiếp xúc của người dùng. Luồng người dùng tập trung vào đường dẫn cụ thể mà người dùng đi vào sản phẩm để hoàn thành một tác vụ.

Luồng giao diện người dùng là gì?

Luồng giao diện người dùng hiển thị cách màn hình, trạng thái UI, nút, biểu mẫu và tương tác kết nối bên trong sản phẩm. Nó liên quan chặt chẽ đến luồng người dùng, nhưng nó tập trung cụ thể hơn vào đường dẫn cấp giao diện.

Khi nào bạn nên tạo luồng người dùng?

Tạo luồng người dùng sau nghiên cứu người dùng ban đầu và trước khi thiết kế UI chi tiết. Bạn cũng có thể tạo luồng người dùng sau này để kiểm tra sản phẩm hiện có, chẩn đoán tình trạng bỏ dở hoặc cải thiện chuyển đổi.

Ví dụ về luồng người dùng là gì?

Các ví dụ về quy trình người dùng phổ biến bao gồm quy trình đăng ký, quy trình thanh toán, quy trình giới thiệu, quy trình đăng nhập, quy trình đặt lại mật khẩu, quy trình đăng ký, quy trình nâng cấp và quy trình mời đồng đội.

Tại sao luồng người dùng lại quan trọng?

Luồng người dùng giúp các nhóm hiểu cách người dùng di chuyển qua sản phẩm trước khi đầu tư vào thiết kế hoặc phát triển chi tiết. Chúng bộc lộ những xích mích, những bước thiếu sót, những quyết định khó hiểu và sự phức tạp không cần thiết ngay từ đầu trong quy trình.

Làm thế nào để bạn tạo ra một luồng người dùng?

Bắt đầu với mục tiêu của người dùng, chọn điểm đầu vào, vạch ra con đường hạnh phúc, thêm các quyết định và trường hợp khó khăn, sau đó đơn giản hóa đường dẫn. Sử dụng hình tròn hoặc hình bầu dục cho điểm bắt đầu và điểm kết thúc, hình chữ nhật cho màn hình hoặc hành động, hình thoi cho các quyết định và mũi tên để chỉ hướng.

Hãy dùng thử Anima Playground để biết luồng người dùng và thiết kế UX

Anima Playground cho phép bạn đi từ ý tưởng sản phẩm đến quy trình, thiết kế và mã hoạt động của UX trong trình duyệt. Mô tả trải nghiệm bạn muốn xây dựng, tinh chỉnh nó bằng AI và biến kết quả thành sản phẩm tương tác thực sự.

Bắt đầu thiết kế với Anima Playground.