Sơ đồ Task Flow: Dựng nhanh, dễ hiểu | UX Design
Trong quá trình mentor, Lance nhận thấy một số bạn newbie chưa có cái nhìn đầy đủ về việc triển khai Sơ đồ luồng người dùng (User-flow diagram/chart), đặc biệt đối với sơ đồ Task flow.
Đó là lý do mình lên bài viết nhỏ này, chia sẻ một chút về những mấu chốt và nguyên tắc trọng tâm khi thiết lập sơ đồ Task flow. Nội dung chủ yếu đề cập đến phương diện thực hành, cách trình bày tối ưu mà mình đút kết qua kinh nghiệm làm việc.
Sơ đồ luồng nói chung (flowchart) là cách trình bày một quá trình xử lý, kết hợp với các hình khối hình học liên kết nhau để diễn giải các bước. Đây là công cụ triển khai đơn giản, nhanh và kết quả nhiều hữu ích, vì vậy nó được ứng dụng khá phổ biến trong các quy trình thiết kế UX.
Bạn cần nắm rõ các đặc điểm khác nhau giữa 3 dạng của sơ đồ luồng người dùng:
Task flow - mô tả các bước người dùng phải trải qua khi thực hiện MỘT tác vụ.
Đặc trưng: diễn đạt bằng văn bản thuần đặt trong các hình khối (tạm gọi là block)
Tính chất: đơn luồng, định hướng một chiều
Ý nghĩa: làm rõ cách thức hoạt động của một chức năng
Wireflow (hoặc Screen flow) - mô tả mối liên kết giữa các thành phần UI khi có sự tương tác giữa người với giao diện màn hình;
Đặc trưng: diễn đạt bằng văn bản kết hợp với các bản vẽ giao diện low/high fidelity wireframe hoặc screenshot
Tính chất: có thể đơn luồng hoặc đa luồng, định hướng hoặc đa hướng
Ý nghĩa: làm rõ cách thức thao tác của người dùng trong thực tế và phản hồi của các cấu trúc UI.
User flow - mô tả toàn bộ trải nghiệm khả dụng của người dùng khi tương tác với giao diện app.
Có thể áp dụng trình bày như đặc trưng của Task flow hoặc kết hợp cả 2 đặc trưng trên (block + wireframe/screenshot).
Tính chất: đa luồng, đa hướng
Ý nghĩa: làm rõ chi tiết hoạt động tương tác của người dùng
Qua so sánh trên, ta thấy, dữ liệu từ Task flow tập trung cung cấp thông tin về chuỗi hành động của người dùng trước khi đạt được user goal nào đó. User goal được đạt đến chỉ khi hoàn thành Task flow. Mặt khác, Task flow chính là cận cảnh giải pháp của chúng ta trông như thế nào khi vận hành và giúp người dùng giải quyết vấn đề của họ .
Do đó, thông tin diễn giải trong Task flow nên chi tiết, súc tích, mô phỏng đầy đủ các giai đoạn hoạt động. Hiệu quả hướng đến là người làm tư duy-dựng nhanh, người xem đọc-hiểu nhanh.
Một sơ đồ Task flow (flowchart nói chung) có 5 thành phần cơ bản
[1] Block bắt đầu/kết thúc; [2] Block câu hỏi; [3, 4] Block hoạt động của người dùng và hệ thống; và [5] mũi tên liên kết. Ngoài ra, bạn cũng cần phân loại các hình dạng và đề xuất những màu sắc khác nhau cho dễ phân biệt
Một số nguyên tắc:
Phân loại hai loại hành động: (1) thao tác/hành động của người dùng; (2) phản hồi của hệ thống
Với các block bạn muốn biểu thị tương ứng với một Page mới khi chuyển Page, bạn có thể tùy biến đôi chút để phân biệt. (Mình gợi ý chọn cách tạo nét đứt viền block hoặc thêm số đánh dấu thống kê số lượng Page).
Khi gặp tình huống cần xem xét quyết định từ người dùng, bạn cần đặt câu hỏi tình huống để xác nhận ý kiến đồng thuận hay không (Thông thường là câu hỏi Có / Không).
Tự đưa ra phán đoán sẽ tạo lỗ hổng logic cũng như không phản ánh đúng bối cảnh thực tế.
Đồng bộ cấu trúc câu được sử dụng khi mô tả hành trình. VD:
Đối với thao tác của người dùng, mình thường đặt Động từ (chọn, nhấn, trượt, nhập,…) + Danh từ;
Đối với phản hồi của hệ thống, tùy trường hợp có thể thì bạn có thể chỉ đặt Danh từ hoặc Động từ (đi đến, gọi, tiến hành, xác nhận,…) + Danh từ.
Là đơn luồng (single path), nên quy tắc hiểu chung là 1 điểm input và 1 điểm output. Do đó, khi có hai đường có cùng block input hoặc output, điểm giao/cắt nên là trên mũi tên chứ không phải trên block.
Người xem giảm căng thẳng khi điểm nhập/xuất được bố trí dễ xác định.
Một sơ đồ Task flow chỉ tương ứng với MỘT tác vụ, nên bạn cần xác định rõ User goal trước khi triển khai, tránh lan man sang các task khác không phục vụ đáp ứng User goal.
Khi chọn phương sơ đồ đặt dọc hoặc đi ngang, dòng lưu thông luôn là từ trên xuống, từ trái sang. Bạn lưu ý kiểm soát bề rộng/dày, bố trí khúc rẽ hợp lý với các hành trình dài hơn để phù hợp tham khảo trên bản in giấy hoặc trình chiếu slide.
Cộng đồng tự học UX: facebook.com/learn.ux
#TuiLaNewbie