Xây dựng luồng người dùng (User Flows) đúng phương pháp 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à”.
Bạn đang xem: User flow là gì
Không có bản thiết kế.Bạn chưa biết bắt đầu từ đâu.Không biết nên xây nhà tắm ở đằng sau hay là là bên cạnh nhà bếp.
Bạn đang đọc: Luồng người dùng (User Flows) trong thiết kế UXTrong thiết kế website cũng vậy, có rất nhiều nhiều phương pháp để làm nhưng chi tiết làm như thế nào thì cần phải thống nhất:
Website cũng sẽ có những trang nào, danh mục nào?những 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 cũng 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à là load dữ liệu ngay ở trên trang?Đi đến 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 cho những 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).
Nội dung bài viết bao gồm:
Luồng người dùng (User Flows) chính là gì vậy?phương pháp dùng User Flows trong giai đoạn thiết kếKết hợp User Flows với Wireframes8 Phương Pháp thiết kế User Flows tốt nhất5 Thí dụ User Flows của website có thiết kế UX tốtMột số dụng cụ hỗ trợ tạo User Flows
1. Luồng người dùng (User Flows) chính là gì vậy?
Luồng người dùng (User Flows) chính là một sơ đồ minh họa nhanh đường dẫn mà người dùng của bạn cũng sẽ đi qua trang web hoặc ứng dụng để đạt đã được một mục tiêu nhất định.
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 cho 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.
Thí 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à dùng những khối với những ý nghĩa khác nhau, Thí 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 dùng cho những ghi chú)
Tuy nhiên, khi nhóm thiết kế tạo wireframes, những hình chữ nhật trong User Flows sẽ được thay thế bằng những trang chi tiết.
Sự kết hợp giữa User Flows , và Wireframes này đôi khi được gọi chính 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 chỉ bằng những nguyên mẫu.
Trong một số trường hợp, và User Flows cũng có thể được 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 nguyên nhân 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 chính là phương pháp User Flows có thể giúp cho bạn thiết kế website tốt hơn:
Thiết kế lấy người dùng thực hiện trung tâm
User Flows giúp bạn suy nghĩ về phương pháp 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ọ.
Tham khảo thêm: Exfoliant Là Gì – Exfoliate Là Gì, Nghĩa Của Từ Exfoliate
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 những 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 , 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ó 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 , có thể nhận giảm giá qua cửa sổ bật lên.
Ở đây người ta đã dùng màu sắc để tổ chức Userflow, trong đó:
Màu đen: Điểm bắt đầuMàu xanh: Những màn hình (trang)Màu cam: Những 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ử chưa phải chính là việc đơn giản.
Thông thường, những trang liên quan đến tài khoản người dùng , 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ó 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 đôi khi là thay đổi cả cấu trúc thiết kế, thậm chí có thể những công việc thực hiện trước đó chưa dùng được nữa.
User Flows của trang web này thể hiện quá trình đến 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ậpNếu chưa thì cần tạo tài khoản mớivà một vài bước tiếp theo để làm mua hàng thành công.
User Flows này trông thì phức tạp Tuy nhiên đã truyền tải những thông điệp một phương pháp đơn giản, rõ ràng.
Một Thí dụ về User Flow của một trang web bán hàng khác:
Xem ảnh lớn trên Behance
> Đọc thêm: phương pháp thiết kế trang web bán hàng trợ giúp bán hàng tốt nhất
4.4. dùng kiểu Wireflow
Dưới đây là một Thí 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).
Không giống như Thí 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 chi tiết hơn.
Người dùng truy cập trang chủ , có ba tùy chọn khác nhau:
Click vào Banner sản phẩm hoặc Danh mụcClick vào chiến dịch MarketingHoặ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.
Xem thêm: Áo tee là gì vậy?Những điều cần biết về áo tee
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 chính 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 chính là một Thí dụ rất nhiều hay là về phương pháp tạo luồng người dùng đơn giản chỉ bằng phương pháp dùng những 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 dùng khi người dùng truy cập , thoát khỏi ứng dụng web.Màu xanh , đỏ riêng biệt chỉ ra những 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 là đăng ký.Màu tròn chính là thông báo lỗiHình chữ nhật đại diện cho màn hình và hành độngnhững 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 chính là một phần quan trọng trong quy trình thiết kế website của Sao Kim.
Thí dụ User Flows trong quy trình đặt sách của Amazone:
5. Một số công cụ hỗ trợ tạo User Flows
Có rất nhiều nhiều dụ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ư:
FlowMappStormboardWhimsicalMoqupsWritemapsMindnode
Hoặc những 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)SketchAdobe XDAxure
phương pháp dùng những dụng cụ này để tạo User Flows cũng khá đơn giản. Nhưng nếu bạn chưa thích công cụ, bạn hoàn toàn có thể dùng bút , 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 số 1 quán.
Không những thế, gây 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 phương pháp dễ dàng nhất để người dùng hoàn thành một nhiệm vụ và khảo sát những 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à biện 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 tốt nhất kinh doanh cho doanh nghiệp của mình.
Liên hệ ngay với Sao Kim nếu bạn muốn bảo đảm sự thành công khi muốn thuê thiết kế website.
#SaoKim #SaoKimDigital #SaoKimBranding #UserFlows #LuongNguoiDung #ThietKeUX #UX
Tham khảo thêm: Đừng tưởng bạn đã biết: Có phải cứ sở hữu 1 tỷ USD thì sẽ được gọi chính là tỷ phú?