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.

Bạn Đang Xem: Luồng người dùng (User Flows) trong thiết kế UX

Giả sử, bạn là một công nhân. Thời điểm hiện tại 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 khởi nguồn từ đâu.
• Không biết nên xây phòng 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 phương pháp để thực hiện nhưng cụ thể thực hiện thế nào thì nên cần phải thống nhất:

• Website sẽ có đượ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 tài liệu ngay trên trang?
• Đi từ trang chủ tới nội dung 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 phòng ban triển khai thiết kế, lập trình hiệu quả thì bạn phải xây dựng luồng người dùng (User Flows).

Nội dung nội dung bài viết gồm có:

• Luồng người dùng (User Flows) là gì?
• Cách sử dụng User Flows trong thời đoạn thiết kế
• Phối 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ố phương tiện tương 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 các bạn sẽ đi qua website hoặc ứng dụng để đạt được một mục tiêu nhất định.

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

Tùy thuộc vào vị trí của bạn trong thời đ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 lúc họ tạo khuông 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 những ý nghĩa khác nhau, ví dụ:

• Hình chữ nhật có 2 đầu tròn hoặc hình tròn (Khai mạc, kết thúc)
• Hình thoi (Quyết định)
• Hình chữ nhật (Trang, màn hình hiển thị hay hành động)
• Mũi tên chuyển tiếp (Điều phối người dùng)
• Hình vuông (Thỉnh thoảng được sử dụng cho những 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ẽ tiến hành thay thế bằng các trang cụ thể.

Sự phối hợp giữa User Flows và Wireframes này thỉnh thoảng được gọi là “wireflow” trong thế giới thiết kế UX.

Tùy thuộc vào doanh nghiệp, nhiều team thiết kế tiếp tục tạo luồng người dùng đến thời đ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 xuất hiện 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. Vì 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 quan trọng nếu như khách hàng mới khai mạc thời đoạn thiết kế website của mình.

Về sau là cách User Flows có thể khiến cho 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 khiến cho bạn suy nghĩ về phong thái người dùng sẽ điều phối qua website của bạn thế nào để đạt được mục tiêu của họ.

Xem Thêm : GRE Tunnel là gì? Hướng dẫn cấu hình GRE Tunnel Trên Router Cisco

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

Tại website này, người dùng khai mạc tại trang chủ, sau đó họ có thể điều phối đế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 hiển thị được dán nhãn rõ ràng và có ghi chú thể hiện ngắn gọn mục tiêu chính của màn hình hiển thị với nhiều tùy chọn.

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

User Flows của website 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 hành lang cửa số bật lên.

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

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

4.3. Website bán sản phẩm #1

Thiết kế website bán sản phẩm hoặc website thương nghiệp đ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à tính sổ trực tuyến có luồng người dùng phức tạp hơn.

Ngoài ra, nếu website có những 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 thỉnh thoảng là thay đổi cả cấu trúc thiết kế, thậm chí còn 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 website này thể hiện quá trình từ thời khắc người dùng chọn tính sổ mua hàng:

• Nếu khách hàng đã có tài khoản thì nên cần đăng nhập
• Nếu chưa thì nên 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.

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 website bán sản phẩm khác:

Xem ảnh lớn trên Behance

> Đọc thêm: Cách thiết kế website bán sản phẩm tương trợ bán sản phẩm hiệu quả

4.4. Sử dụng kiểu Wireflow

Về sau là một ví dụ khác về User Flows của website bán sản phẩm, tại đây người dùng khai mạc 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).

Không như ví dụ trên, User Flows này là Wireflow, với bố cục tổng quan chính cho từng màn hình hiển thị đã được bố cục tổng quan 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 hiển thị trước nhất.

Xem Thêm : Hướng Dẫn Sử Dụng Graph API

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 hiển thị wireframes đơn giản. Đây là nền tảng để phát triển thành Prototype để khai mạc thử nghiệm trên người dùng thật.

4.5. User Flows có ghi chú rõ ràng

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

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

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

Trong số đó:

• 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 tin lỗi
• Hình chữ nhật thay mặt đại diện cho màn hình hiển thị 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 những 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:

5. Một số phương tiện tương trợ tạo User Flows

Có rất nhiều phương tiện tương trợ tạo User Flows khiến cho bạn nhanh chóng phác thảo luồng người dùng của website như:

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

Hoặc các phương tiện tương trợ thiết kế web, thiết kế UX toàn diện:

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

Cách dùng các phương tiện này để tạo User Flows cũng tương đối đơn giản. Nhưng nếu như khách hàng không thích phương tiện, 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 tất cả 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 làm công việc thiết kế website hay ứng dụng dễ dàng hơn, tiết kiệm ngân sách thời kì và tiền nong.

User Flows giúp tất cả chúng ta xác định mọi vấn đề có thể xẩy ra trước lúc khai mạc thiết kế rõ ràng và cụ thể từng trang và ngăn việc thiết kế lại sau khoản thời gian công việc đã lao vào thời đoạn lập trình.

User Flows cũng buộc tất cả chúng ta phải xem xét cách đơn giản 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 khai mạc tạo User Flows ngay nếu như khách hàng muốn thiết kế website 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 như khách hàng muốn đảm bảo sự thành công khi thiết kế website.

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