Xây dựng luồng người dùng đúng cách là một bước quan trọng quyết định sự thành công của thiết kế trải nghiệm và thiết kế kiểu web.

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

Nếu bạn chưa vẽ bản thiết kế.

Xây dựng luồng người dùng đúng cách là một bước quan trọng quyết định sự thành công của thiết kế trải nghiệm và thiết kế kiểu web.

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

Nếu bạn chưa vẽ bản thiết kế.

Nếu bạn không biết bắt đầu và kết thúc từng giai đoạn như thế nào.

Nếu bạn đang phân vân vấn đề chia khu vực cho từng gian phòng của bạn.

Thiết kế website cũng có nhiều lựa chọn nhưng bạn cần thống nhất chính xác cách thực hiện.

Website bao gồm bao nhiêu mục và mẫu trang như thế nào?
Các trang đã được sắp xếp logic hay chưa?
Những phần thiết yếu của trang chủ web?
Chúng ta sẽ đến trang nào khi click vào nút CTACTA?
Khi nhấn vào Link này sẽ xảy ra trường hợp gì? Danh mục trang có vấn đề gì không?
Từ Blog muốn về trang chủ thì cần qua những bước gì?

Do đó, bạn cần tạo luồng người dùng để thiết kế một trang web mang lại trải nghiệm tuyệt vời và giúp các phòng ban triển khai thiết kế và lập trình một cách hiệu quả.

Chúng ta cần phải quan tâm các nội dung sau đây:

Luồng người sử dụng( hay còn gọi là Use Flows) được định nghĩa như thế nào?

Cách sử dụng luồng người dùng ở giai đoạn thiết kế

Sự kết hợp giữa Userstream và wireframe

8 thiết kế luồng người dùng tốt nhất

5 ví dụ về luồng người dùng từ một trang web được thiết kế tốt

Một số công cụ giúp bạn tạo luồng người dùng

1. Định nghĩa luồng người dùng (User Flows)

Luồng người dùng là một biểu đồ nhanh chóng cho thấy cách người dùng di chuyển qua một trang web hoặc ứng dụng để đạt được một mục tiêu cụ thể.

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ế. Điều này giúp xác định kiến trúc thông tin.

Sự xuất hiện mà luồng người dùng có thể thực hiện tùy thuộc vào vị trí của bạn trong giai đoạn thiết kế.

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

Sơ đồ người dùng sơ bộ thường có dạng sơ đồ và sử dụng các khối với các ý nghĩa khác nhau như sau:

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

Tuy nhiên, khi nhóm thiết kế tạo khung dây, hình chữ nhật luồng người dùng được thay thế bằng một cạnh cụ thể.

Sự kết hợp giữa luồng người dùng và khung dây này đôi khi được gọi là “luồng dây” trong thế giới thiết kế UX.

Tại một số công ty, nhiều nhóm thiết kế tiếp tục dẫn dắt người dùng đến giai đoạn nguyên mẫu, nơi họ tiếp tục thay thế wireframe bằng các nguyên mẫu.

Trong một số trường hợp, bạn cũng có thể sử dụng luồng người dùng để cải thiện thiết kế hoặc thêm các tính năng mới vào trang web hoặc ứng dụng của mình.

1.1. Lý do cần tạo User Flows

Có nhiều lý do tại sao bạn nên xem xét việc xây dựng luồng người dùng, đặc biệt nếu bạn mới bắt đầu trong giai đoạn thiết kế trang web của mình.

Đây là cách luồng người dùng có thể giúp bạn thiết kế một trang web tốt hơn.

Hướng về người dùng

Luồng người dùng giúp người dùng suy nghĩ về cách điều hướng trang web để đạt được mục tiêu của họ.

Từ đó, bạn có thể thiết kế từng thành phần từng bước và đạt được nó.

Hạn chế các sai sót

Nếu bạn thay đổi một bước trong điều hướng hoặc xóa một tính năng, nhà thiết kế sẽ mất hàng giờ để thích ứng.

Do đó, trừ khi bạn tạo luồng người dùng chuẩn từ đầu, bạn và nhóm thiết kế của bạn sẽ mất rất nhiều thời gian lãng phí.

Ngoài ra, nếu bạn phát hiện ra lỗi trong giai đoạn mã hóa dự án của mình, có thể mất vài ngày để thiết kế lại và viết mã theo cách mới.

Mặt khác, nếu lần đầu tiên bạn tạo và điều chỉnh luồng người dùng, bạn chỉ mất vài phút để sửa đổi cấu trúc và thêm chức năng.

Khi các luồng người dùng đã trở thành tiêu chuẩn, các nhóm thiết kế, mã hóa và thử nghiệm chỉ cần triển khai chúng.

1.2. Tìm hiểu về User Flows và User Stories

Một trong những điều khiến nhiều người (đặc biệt là người mới bắt đầu) bối rối là luồng người dùng và câu chuyện của người dùng.

Điều hướng và Câu chuyện là gì?

Câu chuyện người dùng tập trung vào việc lập bản đồ cách người dùng điều hướng các màn hình khác nhau của trang web để đạt được mục tiêu của họ, trong khi câu chuyện người dùng là một trong hai dòng giải thích các yêu cầu chức năng về mặt chức năng…

Vì vậy, câu chuyện của người dùng là những gì họ đang tìm kiếm và tại sao họ cần nó.

Khái niệm Bức tranh nhỏ và Bức tranh lớn

Luồng người dùng đề cập cụ thể đến cách người dùng thực hiện một tác vụ cụ thể trên một trang web.

Đằng sau câu chuyện người dùng là một bản đồ người dùng, đó là bức tranh lớn. H. Cách người dùng tìm hiểu và khám phá về sản phẩm của bạn cũng như các điểm tiếp xúc khác nhau mà họ có thể truy cập.

Cuối cùng, các bước tạo chúng cũng khác nhau.

Luồng người dùng thường được tạo theo tính cách của người dùng và câu chuyện của người dùng.

Câu chuyện của người dùng được sử dụng khi tạo luồng người dùng để biện minh cho bức tranh lớn.

1.3. Phân biệt User Flows và User Journeys

Luồng người dùng và hành trình của người dùng không giống nhau (điều này đôi khi được gọi là giống nhau).

Vi mô và Vĩ mô trong thiết kế luồng người dùng

Hành trình của người dùng như câu chuyện của người dùng có xu hướng xem trải nghiệm macro của người dùng.

Luồng người dùng tập trung vào chi tiết, nhưng tôi. H. Một giải pháp duy nhất cho câu chuyện của người dùng.

Hành trình của người dùng tương tự như bản đồ câu chuyện của người dùng xem xét cách người dùng sử dụng sản phẩm cũng như các kênh và giai đoạn họ trải qua.

Mặt khác, luồng người dùng có xu hướng hoàn toàn tập trung vào điều hướng.

Quyết định và Trải nghiệm là như thế nào?

Ban thiết kế hành trình người dùng thường quan tâm đến lịch sử cá nhân và xem xét trải nghiệm người dùng.

Bảng hành trình của người dùng cũng có thể đại diện cho suy nghĩ của người dùng ở mỗi bước, nhưng luồng người dùng chỉ mô tả quyết định.

2. Sử dụng User Flows trong thiết kế như thế nào?

Bạn triển khai luồng người dùng khi nào và như thế nào trong giai đoạn thiết kế?

Không có thời gian cụ thể thích hợp.

Tuy nhiên, WIO khuyên bạn nên bắt đầu vẽ trước khi vẽ wireframe hoặc thiết kế trang chi tiết.

Phương pháp như sau:

Tìm hiểu về người dùng, nghiên cứu đối thủ cạnh tranh

Để tạo luồng người dùng, hãy bắt đầu bằng khảo sát người dùng.

Khi bạn hiểu người dùng của mình là ai và hiểu rõ hơn về các giải pháp họ cần, bạn có thể bắt đầu phân tích đối thủ cạnh tranh của mình.

Khảo sát người dùng là một vấn đề lớn.

Làm thế nào để bạn phân tích đối thủ cạnh tranh của bạn?

Nó rất dễ. Tìm và truy cập các trang web do các đối thủ cạnh tranh trực tiếp điều hành, điều hướng các trang và phác thảo dòng chuyển động bên trong chúng.

User Flows đơn giản là một sự bắt đầu tốt

Bạn có thể bắt đầu với một sơ đồ người dùng đơn giản bao gồm các hình dạng trên. B. Là hình tròn đại diện cho đầu vào.

Ví dụ: Thủ tục đăng nhập / đăng ký website học trực tuyến

Trên trang chủ, nếu người dùng có tùy chọn đăng nhập, việc hướng họ đến trang đăng nhập sẽ chuyển hướng đăng nhập chính xác đến trang khóa học đã mua.
Nếu người dùng có tùy chọn đăng nhập, họ sẽ được đưa đến trang đăng ký. Nếu đăng ký thành công, trang quản lý tài khoản sẽ được hiển thị.
…

Theo cách đơn giản nhất, hãy làm tương tự cho một vài trang tiếp theo.

Tạo ra các User Flows khác thực tế hơn

Sau khi xác định quy trình này, bạn có thể chuyển sang tạo nguyên mẫu cuối cùng cho trang web của mình.

Sau đó, thay thế hình dạng cơ bản bằng các khía cạnh thực tế hơn như khung dây, nguyên mẫu, v. v.

Bằng cách thực hiện theo trình tự các bước này, bạn sẽ luôn có một bức tranh rõ ràng về hiệu suất của sản phẩm và vẫn đúng với mục tiêu định hình trải nghiệm bạn muốn tạo ra.

3.8 Phương pháp thiết kế User Flows tối ưu

Khi thiết kế luồng người dùng, có những thiết kế đúng và sai. Có những phương pháp thiết kế để tạo ra những tài liệu khó hiểu, khó hiểu mà rất ít người có thể hiểu được.

Nhưng đó không phải là điểm của việc xây dựng luồng người dùng.

Dưới đây là một số cách để thiết kế luồng người dùng dễ đọc và trực quan.

3.1. Mô tả bằng tên gọi cụ thể

Luôn đặt cho mỗi bước trong quy trình người dùng của bạn một tên mô tả mô tả chuyển động và quy trình.

Ví dụ: bạn có thể đặt tên nó là “Điều hướng từ Trang chủ đến Trang blog”.

Điều này cũng giúp chia nhỏ các luồng thay vì gộp nhiều luồng trong một bước.

3.2. Tập trung và luồng một chiều

Khi thiết kế luồng người dùng, hãy tập trung vào luồng một chiều.

Chỉ cần nghĩ về giao thông đường phố và bạn sẽ hiểu. Cảnh người ra vào rất hỗn loạn, khó kiểm soát.

Các dự án nhỏ với một vài trang thì không sao, nhưng đối với những dự án đòi hỏi thiết kế hàng chục trang, dòng chảy qua lại và nhanh chóng bị kẹt.

3.3. Mỗi luồng đảm nhận một mục tiêu cụ thể

Bạn nên thiết kế một luồng, mỗi luồng có một mục tiêu.

Là một nhà thiết kế, bạn không thể giữ sự tập trung. Vậy làm thế nào để người dùng có thể tập trung hoàn thành một nhiệm vụ?

Không bao giờ thiết kế bất cứ thứ gì cản trở người dùng khi cố gắng hoàn thành một nhiệm vụ.

Giúp họ đạt được từng mục tiêu một, thay vì đặt họ vào tình huống phải lựa chọn và mất tập trung.

Ví dụ: ngăn người dùng nhìn thấy cửa sổ bật lên yêu cầu họ cập nhật hồ sơ khi họ cố gắng nhấp vào nút đăng.

3.4. Phải có key để giải thích

Các phím huyền thoại giúp người mới bắt đầu dễ dàng hiểu nhanh các luồng người dùng và nhanh chóng hiểu ý nghĩa của các hình dạng, màn hình và mũi tên.

Ví dụ: Trong chú giải, chỉ định một hình tròn làm điểm bắt đầu, một hình chữ nhật làm màn hình, một hình thoi đại diện cho quyết định, v. v.

3.5. Chọn một điểm bắt đầu

Điều rất quan trọng là luồng người dùng bắt đầu từ một điểm rõ ràng.

Việc thiết lập một hành trình từ đầu đến cuối có thể rất khó khăn nếu luồng người dùng không có điểm bắt đầu rõ ràng (màn hình đăng nhập, trang chủ, v. v. ).

Nếu có thể có nhiều điểm xuất phát, hãy đảm bảo rằng chúng được mô tả rõ ràng hoặc cân nhắc chia chúng thành các luồng khác nhau.

Điều quan trọng là phải biết chính xác nơi người dùng đang truy cập ứng dụng hoặc trang web của bạn để bạn có thể bắt đầu thiết lập quy trình của mình.

3.6. Gắn nhãn cụ thể

Điều quan trọng là phải gắn nhãn rõ ràng cho tất cả các hành động, màn hình và quyết định trong luồng người dùng của bạn.

Nói cách khác, nếu đó là hình chữ nhật, màn hình đăng nhập nên được gắn nhãn “Màn hình đăng nhập”.

Hoặc, “Đăng nhập hoặc Đăng ký” cho các hành động yêu cầu quyết định.

Tránh các nhãn dài dòng và thông tin không cần thiết như “Đăng nhập nếu bạn đã có tài khoản hoặc đăng ký nếu bạn chưa có”.

Nếu luồng người dùng của bạn chứa các màn hình thực tế được tạo từ khung dây hoặc nguyên mẫu, bạn có thể gắn nhãn chúng hoặc thêm ghi chú ngắn gọn ở cuối mỗi màn hình.

3.7. Kết hợp màu sắc hợp lý trong thiết kế User Flows

Khi tích hợp màu sắc vào luồng người dùng của bạn, bạn nên mô tả chúng một cách rõ ràng (càng ít càng tốt) hoặc, nếu có thể, hãy tránh sử dụng chúng.

Ví dụ: bạn có thể gán một quyết định màu đỏ, màn hình xanh lam, điểm bắt đầu màu vàng.v.v.

Hãy nhớ duy trì sự nhất quán và sử dụng càng ít càng tốt.

3.8. Đưa ra giải pháp rõ ràng

Bất cứ khi nào bạn đạt được mục tiêu, hãy đảm bảo rằng quy trình người dùng của bạn đã hoàn tất.

Không chấp nhận sự mơ hồ. Nếu không, mục đích tạo luồng sẽ không thành công.

Ví dụ:

Khi người dùng đăng ký nhận bản tin, người dùng thường cần đồng ý với chính sách sử dụng thông tin. Vì vậy, đừng để họ đồng ý. Bạn không cần phải đồng ý.
Thay vào đó, bạn cần được hướng dẫn qua màn hình chính sách, đọc và nhấn OK để đăng ký thành công.

Bằng cách giữ mọi thứ ngăn nắp, bạn sẽ không bỏ lỡ mọi thứ, để lại xung đột hoặc cạm bẫy tiềm ẩn.

4.5 Một số ví dụ điển hình về User Flows

Như đã đề cập trước đó, để xây dựng một trang web với UX tốt, bạn cần tạo luồng người dùng tốt.

Luồng người dùng trang web có nhiều điểm tương đồng với luồng người dùng ứng dụng, ngoại trừ việc các trang web có nhiều điểm bắt đầu và sử dụng nhấp chuột thay vì vuốt như điện thoại.

4.1. Website hướng dẫn sinh viên

Quy trình sử dụng từ trang web hướng dẫn sinh viên này được đính kèm với khung dây (có thể được gọi là quy trình dây).

Trên trang này, người dùng có thể bắt đầu từ trang chủ, chuyển đến trang danh mục, sau đó đến các danh mục phụ.

Tất cả các dòng chảy 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ú giải thích ngắn gọn mục đích chính của màn hình với nhiều tùy chọn khác nhau.

4.2. Sử dụng màu trong User Flows

Luồng người dùng trên trang web này thể hiện mục tiêu của người dùng là mua hàng và nhận chiết khấu từ cửa sổ bật lên.

Màu sắc được sử dụng ở đây để tổ chức luồng người dùng.

Đen: Điểm xuất phát

Màu xanh lam: Màn hình (bên)

Màu cam: Phần quyết định

4.3. Website bán hàng #1

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

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

Ngay cả khi trang web của bạn có đặc điểm thiết kế riêng, thì vẫn có nhiều quy trình cần được xác định rõ ràng.

Thay đổi dòng chảy có thể thay đổi toàn bộ cấu trúc thiết kế. Ngay cả những triển khai trước đó có thể không còn nữa.

Luồng người dùng trên trang web này hiển thị quy trình từ thời điểm người dùng quyết định trả tiền mua hàng.

Nếu bạn đã có tài khoản, bạn sẽ cần đăng nhập
Nếu không, bạn sẽ cần tạo một tài khoản mới
Các bước tiếp theo để mua hàng thành công.

Những luồng người dùng này có vẻ phức tạp, nhưng tôi đã truyền tải thông điệp một cách đơn giản và rõ ràng.

Một ví dụ khác về luồng người dùng trên trang bán hàng:

4.4. Kiểu Wireflow trong thiết kế UX

Đây là một ví dụ khác về luồng người dùng cho một trang web bán hàng. Tại đây, người dùng bắt đầu và điều hướng đến mục tiêu mua hàng (hoặc trang xác nhận đơn hàng).

Không giống như ví dụ trên, luồng người dùng này là luồng dây và bố cục chính được trình bày chi tiết hơn trên mỗi màn hình.

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

Nhấp vào biểu ngữ sản phẩm hoặc danh mục
Nhấp vào một chiến dịch tiếp thị
Hoặc cuộn xuống bên dưới nếp gấp.

Và cuối cùng, mỗi chuỗi kết thúc bằng một trang xác nhận đơn hàng.

Mỗi tùy chọn khác nhau được thể hiện bằng một màn hình khung dây đơn giản. Đây là nền tảng mà bạn cần tạo nguyên mẫu để bắt đầu thử nghiệm với người dùng thực.

4.5. Sử dụng chú thích rõ ràng trong User Flows

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

Ngoài ra còn có các chú thích chính rõ ràng để người đọc hiểu nhanh hơn.

Như bạn có thể thấy, có chú thích / khóa rõ ràng bên dưới để giúp người xem hiểu rõ hơn về luồng người dùng.

Ví dụ:

Màu đen được sử dụng khi người dùng vào và thoát ứng dụng web.
Các màu xanh lam và đỏ khác nhau cho biết các luồng thay thế mà người dùng có thể thưởng thức, tùy thuộc vào việc người dùng đã đăng nhập hay đã đăng ký.
Màu tròn minh họa cho thông báo lỗi
Hình chữ nhật là hình đại diện cho màn hình và hành động
Các quyết định giữa máy tính và người dùng được phân loại rõ ràng.

5. Giới thiệu các công cụ hỗ trợ tạo User Flows

Có nhiều công cụ tạo luồng người dùng mà bạn có thể sử dụng để nhanh chóng có được cái nhìn tổng quan về luồng người dùng trên trang web của mình, bao gồm: Ví dụ:

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

Tạo luồng người dùng bằng các công cụ này cũng rất dễ dàng. Tuy nhiên, nếu bạn không thích công cụ này, bạn cũng có thể sử dụng bút và giấy.

Tóm lược kiến thức về User Flows

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

Không chỉ vậy, việc tạo luồng người dùng giúp bạn thiết kế trang web hoặc ứng dụng dễ dàng hơn, tiết kiệm thời gian và tiền bạc.

Luồng người dùng giúp xác định các vấn đề tiềm ẩn trước khi bạn bắt đầu thiết kế chi tiết của 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 viết mã.

Luồng người dùng cũng yêu cầu người dùng tìm cách dễ nhất để hoàn thành một tác vụ và tìm một quy trình thay thế, dẫn đến trải nghiệm người dùng tốt nhất có thể.

Tóm lại, thiết kế luồng người dùng tốt là chìa khóa để thiết kế trải nghiệm người dùng (thiết kế UX) thành công.

Nếu bạn muốn thiết kế một trang web với trải nghiệm người dùng tuyệt vời, thúc đẩy kết quả kinh doanh của công ty bạn, hãy bắt đầu xây dựng luồng người dùng của bạn ngay lập tức.