<>Vấn đề bài toán (Case Problem). Các ứng dụng thương mại điện tử thường cung cấp rất nhiều tính năng, tuy nhiên người dùng vẫn gặp khó khăn khi điều hướng nền tảng, đặc biệt trong quá trình tìm kiếm sản phẩm và thanh toán. Những vấn đề phổ biến bao gồm:
– Điều hướng không rõ ràng
– Quá nhiều bước để hoàn thành một tác vụ
– Thiếu cấu trúc trong cách trình bày thông tin
Những vấn đề này làm tăng tải nhận thức và khiến người dùng rời bỏ hành trình mua sắm trước khi hoàn tất đơn hàng. Case study này tập trung vào việc thiết kế user flow rõ ràng và wireframe nhằm giúp người dùng điều hướng ứng dụng thương mại điện tử hiệu quả hơn.
/Xác định User Flow (Defining the User Flow)
Dựa trên các vấn đề đã được xác định, một user flow được xây dựng để mô phỏng cách người dùng tương tác với ứng dụng thương mại điện tử từ điểm vào (entry point) cho đến khi hoàn thành tác vụ.
User flow tập trung vào mục tiêu chính:
– Duyệt sản phẩm
– Xem chi tiết sản phẩm
– Hoàn tất quy trình thanh toán
Bằng cách xác định rõ từng bước, user flow giúp đảm bảo người dùng có thể di chuyển trong ứng dụng một cách logic, có cấu trúc, không gây nhầm lẫn hay phát sinh các thao tác không cần thiết.
/User Flow
User flow chính bắt đầu từ trang chủ, tiếp tục qua khám phá sản phẩm và trang chi tiết sản phẩm, và kết thúc ở checkout và thanh toán.
Các flow phụ như đăng nhập, đăng ký và xem giỏ hàng cũng được xem xét nhằm hỗ trợ các kịch bản sử dụng khác nhau, nhưng không làm gián đoạn hành trình mua sắm chính.
/Kiến trúc thông tin (Information Architecture)
Sau khi xác định user flow, kiến trúc thông tin (IA) được xây dựng nhằm tổ chức nội dung và các tính năng theo cách logic và có ý nghĩa. IA tập trung vào:
– Nhóm các thông tin liên quan
– Xác định nhãn điều hướng rõ ràng
– Đảm bảo người dùng luôn hiểu họ đang ở đâu trong ứng dụng
Một kiến trúc thông tin được cấu trúc tốt giúp:
– Giảm tải nhận thức
– Cải thiện khả năng tìm kiếm và định vị thông tin đặc biệt ở các khu vực quan trọng như danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng và thanh toán.
/Từ Kiến trúc Thông tin đến Wireframe
Sau khi hoàn thiện kiến trúc thông tin, các wireframe được tạo ra để chuyển cấu trúc đó thành bố cục ở cấp độ màn hình. Wireframe tập trung vào:
– Thứ bậc nội dung (content hierarchy)
– Tính nhất quán trong bố cục
– Ưu tiên tương tác thay vì yếu tố thẩm mỹ.
Cách tiếp cận này cho phép kiểm chứng khả năng sử dụng từ sớm và đảm bảo kiến trúc thông tin được thể hiện hiệu quả trên từng màn hình.
/Wireframe
Các wireframe được thiết kế nhằm dẫn dắt người dùng mượt mà trong suốt hành trình mua sắm bằng cách làm nổi bật:
– Hành động chính
– Thông tin quan trọng
Các yếu tố điều hướng, thông tin sản phẩm và nút kêu gọi hành động (CTA) được đặt một cách có chủ đích để hỗ trợ user flow và củng cố kiến trúc thông tin.
Cách tiếp cận này giúp người dùng:
– Hoàn thành tác vụ nhanh hơn
– Giảm tác vụ không cần thiết trong quá trình mua hàng
/Bước tiếp theo (Next Step)
Các user flow, kiến trúc thông tin và wireframe này đóng vai trò là nền tảng cho các giai đoạn thiết kế tiếp theo. Ở bước tiếp theo, wireframe có thể được phát triển thành mockup nhằm:
– Tăng độ rõ ràng về mặt thị giác
– Thể hiện sát hơn giao diện cuối cùng của sản phẩm
/Kết luận (Conclusion)
Case study này cho thấy cách user flow, kiến trúc thông tin và wireframe phối hợp với nhau để tạo ra một trải nghiệm thương mại điện tử có cấu trúc và dễ sử dụng.
– User flow xác định hành trình end-to-end, đảm bảo người dùng có thể đi từ khám phá sản phẩm đến thanh toán mà không gặp các bước dư thừa.
– Kiến trúc thông tin chuyển đổi luồng đó thành cấu trúc nội dung rõ ràng, giúp người dùng hiểu họ đang ở đâu và cần làm gì ở mỗi giai đoạn.
– Wireframe kết nối hai yếu tố trên ở cấp độ màn hình, trực quan hoá cách bố cục, thứ bậc và hành động chính hỗ trợ toàn bộ hành trình người dùng.
Việc đồng bộ ba thành phần này giúp:
– Giảm tải nhận thức
– Hạn chế tác vụ thừa ở các thời điểm quan trọng như chọn sản phẩm và thanh toán
– Tạo nền tảng vững chắc để tiếp tục phát triển thành thiết kế hoàn chỉnh
Quy trình này nhấn mạnh tầm quan trọng của việc xây dựng các quyết định UX mang tính cấu trúc trước khi đi vào thiết kế hình ảnh, đảm bảo giao diện cuối cùng không chỉ đẹp mà còn hiệu quả và lấy người dùng làm trung tâm.
Nếu bài viết này mang lại cho bạn giá trị, bạn có thể ủng hộ tác giả bằng một khoản tuỳ tâm để tôi tiếp tục duy trì website này theo cách độc lập và chất lượng.
