Hỏi một nhóm thiết kế ứng dụng giao đồ ăn xem họ có bao nhiêu màn hình, họ trả lời được ngay: 24. Hỏi khi thẻ ngân hàng bị từ chối lúc thanh toán thì người dùng thấy gì, cả nhóm im lặng. Màn đó không ai vẽ vì nó không nằm trên “đường đẹp”.
Luồng thao tác (user flow) là công cụ để nhìn thấy những khoảng trống như vậy trước khi bắt tay vào giao diện.
Luồng thao tác khác sơ đồ trang ở đâu
Sơ đồ trang (sitemap) trả lời câu “sản phẩm có những trang gì, xếp theo cấp bậc nào”. Nó tĩnh, giống mục lục một cuốn sách.
Luồng thao tác trả lời câu “một người muốn làm việc X thì đi qua những bước nào, rẽ nhánh ở đâu, kết thúc thế nào”. Nó có hướng, có điều kiện, có điểm bắt đầu và điểm kết thúc.
Một trang trong sơ đồ có thể xuất hiện ở nhiều luồng. Màn giỏ hàng nằm trong luồng mua lần đầu, luồng mua lại, luồng dùng mã giảm giá. Mỗi luồng đặt ra cho nó một yêu cầu khác.
Bộ ký hiệu tối thiểu
Không cần học chuẩn sơ đồ khối của kỹ sư. Bốn ký hiệu là đủ cho 90% trường hợp:
- Hình chữ nhật: một màn hình hoặc một trạng thái màn hình.
- Hình thoi: một điểm quyết định, của người dùng (“có tài khoản chưa?”) hoặc của hệ thống (“thẻ hợp lệ?”).
- Mũi tên có nhãn: hành động dẫn từ bước này sang bước kia, ghi rõ là bấm gì.
- Hình tròn hoặc bo tròn: điểm vào và điểm kết thúc.
Quy ước quan trọng hơn ký hiệu: mỗi hình thoi phải có đủ mọi nhánh ra. Hình thoi chỉ có nhánh “Có” là dấu hiệu bạn đang vẽ đường đẹp.
Bắt đầu từ điểm vào, không từ trang chủ
Người dùng hiếm khi bắt đầu từ trang chủ. Họ bấm vào thông báo đẩy, một đường dẫn bạn bè gửi qua tin nhắn, một quảng cáo, một kết quả tìm kiếm. Mỗi điểm vào mang theo một trạng thái khác nhau: đã đăng nhập hay chưa, có ngữ cảnh gì sẵn.
Ví dụ luồng “đặt lại món đã từng gọi” có ít nhất ba điểm vào:
- Mở ứng dụng, vào mục đơn cũ.
- Bấm thông báo “Món quen của bạn đang giảm giá”.
- Bấm đường dẫn người khác chia sẻ, khi chính người nhận chưa có tài khoản.
Điểm vào thứ ba buộc bạn phải trả lời: sau khi đăng ký xong, người dùng có quay lại đúng món đó không, hay bị ném về trang chủ? Đây là chỗ mất người dùng rất thường gặp.
Đếm bước và đếm quyết định
Khi luồng đã vẽ xong đường chính, đếm hai con số:
- Số màn hình người dùng phải đi qua.
- Số quyết định họ phải đưa ra (chọn, nhập, xác nhận).
Số quyết định quan trọng hơn số màn. Ba màn mỗi màn một câu hỏi rõ ràng thường dễ hơn một màn dồn sáu ô nhập và bốn lựa chọn. Khi rút gọn luồng, hỏi từng quyết định: hệ thống có tự suy ra được không? Có thể đặt giá trị mặc định hợp lý không? Có thể hoãn tới sau không?
Ví dụ: địa chỉ giao hàng có thể mặc định là địa chỉ lần trước; phương thức thanh toán mặc định là cái vừa dùng; ghi chú cho quán có thể ẩn sau một liên kết “Thêm ghi chú”.
Những nhánh luôn bị quên
Khi rà một luồng, đi qua danh sách kiểm này cho từng màn:
| Trạng thái | Câu hỏi cần trả lời |
|---|---|
| Rỗng | Lần đầu vào, chưa có dữ liệu thì hiện gì? Có gợi ý bước tiếp không? |
| Đang tải | Mạng chậm 5 giây thì người dùng thấy gì? Có bấm lại hai lần được không? |
| Lỗi hệ thống | Máy chủ lỗi thì dữ liệu đã nhập có mất không? |
| Lỗi người dùng | Nhập sai thì báo ở đâu, lúc nào, có giữ nguyên phần đúng không? |
| Mất kết nối | Đang giữa chừng thì mất mạng, quay lại thì ở bước nào? |
| Quay lui | Bấm nút quay lại của hệ điều hành thì đi đâu? |
| Hết hạn | Phiên đăng nhập hết hạn giữa luồng thì sao? |
Không phải trạng thái nào cũng cần một màn riêng. Nhưng mỗi trạng thái cần một quyết định có ghi lại, để lập trình viên không phải tự đoán.
Độ chi tiết: luồng tác vụ, luồng người dùng, luồng màn hình
Trong thực tế người ta dùng ba mức, lẫn lộn tên gọi nhưng khác mục đích:
- Luồng tác vụ: một đường thẳng các bước, không nhánh. Dùng ở giai đoạn đầu để thống nhất việc người dùng cần làm.
- Luồng người dùng: có nhánh quyết định, có điểm vào khác nhau. Đây là mức làm việc chính.
- Luồng màn hình (wireflow): thay hình chữ nhật bằng ảnh thu nhỏ wireframe, mũi tên nối từ đúng nút được bấm. Dùng khi bàn giao cho lập trình.
Sai lầm hay gặp là nhảy thẳng vào wireflow. Bạn tốn công vẽ màn hình rồi mới phát hiện luồng thiếu một nhánh, phải vẽ lại.
Bài tập: luồng quên mật khẩu
Đây là luồng nhỏ nhưng đủ nhánh để luyện. Vẽ trên giấy trước, đủ các câu hỏi sau:
- Người dùng nhập email hoặc số điện thoại. Nếu tài khoản không tồn tại thì báo thế nào? (Lưu ý: báo thẳng “không có tài khoản” giúp kẻ xấu dò email, nhiều sản phẩm chọn câu trung tính.)
- Mã xác nhận gửi qua tin nhắn. Không nhận được thì bao lâu mới cho gửi lại?
- Nhập sai mã mấy lần thì khoá? Khoá bao lâu?
- Đặt mật khẩu mới: yêu cầu hiện trước hay chỉ báo khi sai?
- Xong rồi thì tự đăng nhập luôn hay bắt đăng nhập lại?
- Người dùng mở đường dẫn đặt lại trên máy tính trong khi đang yêu cầu trên điện thoại thì sao?
Đếm: bạn có bao nhiêu hình thoi, bao nhiêu điểm kết thúc? Một luồng quên mật khẩu tử tế thường có ít nhất 4 điểm kết thúc: thành công, khoá tạm, bỏ cuộc, chuyển sang hỗ trợ.
Trình bày luồng cho người khác đọc
- Đường chính chạy một hướng (trái sang phải hoặc trên xuống), nhánh phụ tách ra một bên.
- Dùng một màu cho đường chính, màu khác cho nhánh lỗi, để người xem thấy ngay tỷ lệ.
- Mỗi luồng một khung, tên luồng ghi theo mục tiêu người dùng (“Đặt lại món cũ”), không theo tên tính năng.
- Đánh số từng bước để khi thảo luận chỉ cần nói “bước 4b”.
Việc nên làm tiếp theo: chọn một ứng dụng ngân hàng hoặc ví điện tử bạn dùng, tự vẽ lại luồng chuyển tiền kể cả nhánh sai số tài khoản và nhánh vượt hạn mức. Làm ngược từ sản phẩm có thật là cách nhanh nhất để quen tay trước khi tự thiết kế luồng của mình.
Câu hỏi thường gặp
User flow là gì?
Là sơ đồ mô tả các bước một người đi qua để hoàn thành một mục tiêu trong sản phẩm, gồm màn hình, điểm quyết định và các nhánh rẽ. Nó khác sơ đồ trang ở chỗ có hướng và có điều kiện.
User flow và sitemap khác nhau thế nào?
Sitemap liệt kê các trang và cấp bậc của chúng, giống mục lục. User flow mô tả con đường đi qua các trang để làm một việc cụ thể, có nhánh và điểm kết thúc.
Nên vẽ user flow bằng công cụ gì?
Giấy bút là đủ cho bản đầu. Khi cần chia sẻ thì dùng FigJam, Miro, Whimsical hoặc ngay trong Figma. Công cụ không quan trọng bằng việc vẽ đủ các nhánh.
Wireflow là gì?
Là luồng thao tác trong đó mỗi bước là một ảnh thu nhỏ wireframe, mũi tên nối từ đúng thành phần được bấm. Thường dùng khi bàn giao cho lập trình.
Làm sao rút gọn một luồng thao tác dài?
Đếm số quyết định người dùng phải đưa ra, rồi hỏi từng cái có thể để hệ thống tự suy ra, đặt mặc định hợp lý hoặc hoãn sang sau không. Giảm quyết định quan trọng hơn giảm số màn.
