User flow là gì, hiểu đơn giản nhất
Anh chủ một cửa hàng nệm ở Bình Dương từng kể: sau mấy tháng chạy quảng cáo, lượt click vào web khá ổn, nhưng hầu như không ai điền form liên hệ. Anh liên lạc công ty làm web, người ta bảo “anh thử nhấn nút Liên hệ xem sao”. Anh nhấn, phải qua ba trang và một popup đăng ký email mới tới được form. Không ai trong nhóm làm web vẽ trước user flow là gì và luồng đó sẽ đi qua đâu.
User flow (luồng người dùng) là sơ đồ mô tả từng bước mà người dùng thực hiện khi tương tác với website hoặc ứng dụng để hoàn thành một mục tiêu cụ thể. Điểm bắt đầu là lúc người dùng vào web, điểm kết thúc là lúc họ hoàn thành việc cần làm: đặt hàng, điền form, đọc bài viết, hoặc đơn giản là tìm được số điện thoại.
Khác với bản vẽ giao diện, user flow không quan tâm đến màu sắc hay bố cục chi tiết. Thứ nó thể hiện là chuỗi hành động: nhấn vào đâu, thấy gì tiếp theo, nếu điền sai thì được thông báo gì, nếu thoát giữa chừng thì xảy ra chuyện gì. Một sơ đồ có thể chỉ là vài ô và mũi tên, nhưng nó buộc cả đội cùng nhìn vào một kịch bản thay vì mỗi người tưởng tượng một cách khác nhau.
User flow xuất hiện ở đâu trong quy trình làm web
Trong quy trình thiết kế website, user flow thuộc giai đoạn sớm nhất, sau khi nghe yêu cầu và trước khi vẽ wireframe (bản phác thảo bố cục từng trang). Trình tự thông thường là: nghe brief, xác định đối tượng người dùng, vẽ user flow, wireframe, mockup (bản thiết kế có màu sắc thật), prototype (bản bấm thử được), rồi mới lập trình.
Lý do vẽ user flow trước khi wireframe quan trọng hơn nhiều người nghĩ. Nếu bỏ qua, designer có thể thiết kế những màn hình đẹp nhưng không ăn khớp nhau. Khi đội lập trình ghép lại mới phát hiện: “Sau khi khách đặt hàng xong thì đi đâu? Form lỗi có hiện thông báo không? Khách chưa đăng nhập thì thêm vào giỏ được không?” Sửa những câu hỏi này lúc lập trình tốn thời gian gấp nhiều lần so với vẽ lại một mũi tên trên tờ giấy.
User flow thường do UX designer (chuyên gia thiết kế trải nghiệm người dùng) vẽ, nhưng chủ doanh nghiệp thường được mời vào để phản hồi. Phần sau sẽ nói rõ hơn về vai trò của bạn trong bước này.
Các ký hiệu thường dùng trong sơ đồ user flow
User flow không có chuẩn tuyệt đối, nhưng hầu hết đội thiết kế dùng bộ ký hiệu mượn từ sơ đồ quy trình (flowchart). Khi bạn nhận được một user flow để duyệt, đây là những hình bạn sẽ thấy:
- Hình oval hoặc chữ nhật bo tròn: điểm bắt đầu và điểm kết thúc của luồng, ký hiệu là nơi người dùng vào web và nơi họ xong việc.
- Hình chữ nhật thường: một màn hình hoặc trang cụ thể, ví dụ “Trang sản phẩm”, “Trang giỏ hàng”, “Trang xác nhận đơn”.
- Hình thoi: điểm người dùng phải quyết định, ví dụ “Đã đăng nhập chưa?” với hai nhánh Có và Không, hoặc “Điền đầy đủ chưa?” với hai nhánh Có và Còn thiếu.
- Mũi tên: chiều đi, từ bước này sang bước tiếp theo.
Một user flow cho trang đặt hàng đơn giản sẽ có khoảng 6 đến 10 ô. Nếu sơ đồ bạn nhận được có vài chục ô và mũi tên đan chéo, đó là dấu hiệu luồng đang quá phức tạp và cần thu gọn trước khi thiết kế.
So sánh user flow, sitemap và wireframe để không nhầm lẫn
Ba khái niệm này hay xuất hiện cùng nhau trong giai đoạn đầu dự án, và nhiều chủ doanh nghiệp dùng lẫn lộn vì tất cả đều là “bản vẽ”.
| User flow | Sitemap | Wireframe | |
|---|---|---|---|
| Là gì | Sơ đồ hành trình người dùng | Sơ đồ cây toàn bộ trang | Bản phác thảo bố cục 1 trang |
| Tập trung vào | Hành động và lựa chọn của người dùng | Cấu trúc nội dung và điều hướng | Chi tiết bố cục từng màn hình |
| Có màu/hình ảnh | Không | Không | Không, chỉ khung xám |
| Làm ở giai đoạn nào | Trước wireframe | Song song user flow | Sau user flow |
Cách nhớ nhanh: sitemap là danh sách tất cả các phòng trong tòa nhà, user flow là đường đi của một người từ cổng vào lên tầng 3 phòng 301, còn wireframe là bản vẽ nội thất của phòng 301 đó. Thiếu user flow, bạn có thể biết phòng 301 nằm ở tầng 3, nhưng không biết thang máy hay cầu thang bộ dẫn lên đó, và khách của bạn hay đi theo hướng nào.
Ví dụ user flow cụ thể cho web đặt lịch tư vấn
Một công ty dịch vụ B2B muốn web có nút “Đăng ký tư vấn miễn phí”. Trước khi thiết kế, đội làm web vẽ user flow để xem khách đi qua những bước nào. Luồng đơn giản nhất trông như sau:
Khách đọc trang dịch vụ, thấy nút đăng ký, nhấn vào. Form hiện ra yêu cầu tên, số điện thoại và chọn khung giờ muốn được gọi. Khách điền, nhấn Gửi. Nếu điền đúng, web chuyển sang trang xác nhận và nói rõ “Chúng tôi sẽ gọi cho bạn trong vòng 24 giờ”. Nếu bỏ trống trường nào, hiện thông báo lỗi ngay tại trường đó, không mất những gì đã điền.
Nghe có vẻ hiển nhiên, nhưng khi vẽ ra tờ giấy mới thấy hàng loạt câu hỏi: “Nếu khách đã đăng ký rồi, bấm lại có cần điền lại không? Form nhớ số điện thoại không? Nếu khách thoát giữa chừng, lần sau mở lại form còn thông tin không? Trang xác nhận có nút nào để khách quay lại đọc thêm không?” Mỗi câu hỏi đó nếu bỏ qua khi vẽ user flow sẽ thành một lỗi nhỏ trong sản phẩm thật.
Chủ doanh nghiệp có cần hiểu user flow không
Cần, nhưng chỉ cần ở mức đọc và phản hồi, không cần tự vẽ. Khi designer gửi user flow để duyệt, bạn không cần hiểu từng ký hiệu, nhưng cần đặt những câu hỏi này:
- Khách của tôi thường làm gì đầu tiên khi vào web? Luồng bắt đầu từ đúng điểm đó không?
- Nếu khách điền sai hoặc bỏ trống, web báo lỗi như thế nào và khách biết cần sửa chỗ nào?
- Bước nào có thể bỏ bớt mà vẫn đủ thông tin cần thiết? User flow dài không có nghĩa là tốt.
- Luồng này có đúng với cách khách của tôi hay dùng web trên điện thoại không?
Điều dễ xảy ra nhất khi không duyệt kỹ user flow: web ra sản phẩm mà khách quen làm thật khác hoàn toàn với kịch bản đội thiết kế tưởng tượng. Một spa có khách đa số vào web từ Instagram, nhưng user flow lại thiết kế theo kiểu người gõ Google, sẽ làm luồng sai ngay từ điểm vào đầu tiên.
Câu hỏi thường gặp về user flow
User flow khác customer journey map thế nào?
Customer journey map (bản đồ hành trình khách hàng) rộng hơn nhiều, bao gồm cả giai đoạn trước và sau khi dùng website như đọc bài review, nhận email, gọi hotline sau mua. User flow chỉ nói về hành trình bên trong website hoặc ứng dụng từ điểm vào tới điểm ra. Một customer journey map có thể chứa nhiều user flow bên trong, tương ứng với những lần khách tương tác với web.
Có thể tự vẽ user flow bằng công cụ nào không cần trả phí?
Figma có gói miễn phí và nhiều mẫu flowchart có sẵn. Draw.io (diagrams.net) cũng miễn phí, giao diện đơn giản, xuất được nhiều định dạng. Miro có gói cơ bản miễn phí, phù hợp để cộng tác với team. Và đơn giản nhất: vẽ tay trên giấy A4 rồi chụp ảnh, hoàn toàn đủ để thống nhất ý tưởng với cả nhóm.
Khi nào cần vẽ lại user flow?
Khi thêm tính năng lớn vào web đã có, khi phân tích thấy khách hay thoát ở một bước cụ thể (đọc từ dữ liệu Google Analytics hoặc heatmap), hoặc khi đối tượng người dùng mục tiêu thay đổi đáng kể. User flow là tài liệu sống, không phải bản vẽ một lần rồi bỏ.
User flow và UX design có phải một không?
Không. UX design (thiết kế trải nghiệm người dùng) là một lĩnh vực rộng gồm nghiên cứu người dùng, kiến trúc thông tin, thiết kế tương tác, kiểm thử và nhiều phần khác. User flow chỉ là một trong nhiều công cụ mà một UX designer dùng để lên kế hoạch trước khi vẽ màn hình thật. Bài về moodboard cũng giải thích thêm một công cụ khác hay dùng song song trong giai đoạn này.
Vẽ user flow không tốn nhiều thời gian, nhưng bỏ qua bước này thì dễ lãng phí nhiều ngày lập trình cho những tính năng không ai dùng tới hoặc luồng khách không thể đi qua. Nếu bạn đang lên kế hoạch làm website và muốn trải nghiệm người dùng được thiết kế bài bản từ đầu, xem thêm dịch vụ thiết kế UI/UX của Web22 để biết cách tiếp cận giai đoạn user flow trong một dự án thật.