Thuật ngữ UX: Task Flows, User Flows, Flowchart…

idesign wireframe flows

UX gồm một danh sách dài những thuật ngữ chuyên môn. Danh sách này có thể nhiều hơn nếu nhìn vào một bảng mô tả công việc của nghề này. Đôi khi từ này lại lặp lại nghĩa của từ khác, thế nên ta luôn phải xem xét một cách cụ thể.


Làm rõ từng thứ

Task Flow Analysis và User Flows là thuật ngữ vô cùng phổ biến trong thời gian qua. Tôi nghĩ cần có một cách giải thích chính xác. Tôi cũng thử google nhanh những thuật ngữ này nhưng chúng chưa có những giải thích cụ thể.

Trong một ý nghĩa khác, flow (dòng) mô tả một chuyển động. Người thiết kế cần cân nhắc cách người dùng di chuyển xuyên suốt ứng dụng hoặc trang web. Tạo ra những flow sẽ giúp người thiết kế nghĩ về điều gì xảy ra trước và sau khi họ ghé thăm một trang cụ thể và tập trung vào điều quan trọng. Bên cạnh việc tạo ra những prototype, flows còn giúp người lập trình có thể hiểu được những tình huống thay thế hiệu qả.

Flowcharts

idesign userflows 01

Flowcharts là một sơ đồ gồm những chuỗi di chuyển của người dùng trong một hệ thống phức tạp hoặc tương tác.

Task Flow vs User Flow

idesign wireflows 01

Task Flows và User Flows không khác biệt. Mục đích của cả hai là rút ngắn những bước giúp người dùng hoàn thành được một nhiệm vụ với ít nỗ lực. Cả hai đều giúp bạn nghĩ xuyên suốt về thiết kế trước khi các tính năng được phát triển. Nếu bạn muốn chi tiết hơn thì bạn có thể xác định như sau:

Task Flow

Task Flow là một chuỗi di chuyển và tương tác chung cho người dùng với một hành động cụ thể. Ví dụ như Sign Up. Task flows đi một đường và không phân nhánh.

User Flow

User Flow là một đường dẫn mà một người dùng đi suốt một ứng dụng. Tôi thích nghĩ về chúng như một chuyến du lịch nhỏ. Việc di chuyển không cần phải độc nhất, chúng có thể phân nhánh. Bằng việc xác định được con đường này bạn có thể thấy những khả năng có thể xảy ra trong cả quá trình và tối ưu trải nghiệm người dùng.

User Flows có thể bắt đầu đơn giản và giúp xác định “đường chính” - chìa khoá trong user journeys (việc người dùng trải nghiệm). Chúng có thể gồm nhiều flows phức tạp khi có nhiều trạng thái và yêu cầu đính kèm. User flows rất có ích trong việc chia nhỏ những tình huống phức tạp trước khi tạo nên sản phẩm.

Thiết kế tốt User flows sẽ đem lại kết quả tốt cho cả người dùng lẫn góc độ kinh doanh.


Morgan brown

UI Flows

37 Signal có những cách viết tắt cho User Flows. Họ cho rằng User flows có những vấn đề dưới đây:

  • Flows khó để tương tác trong suốt quá trình thiết kế;
  • Vẽ ra mọi bước trong flow quá tốn thời gian;
  • Và việc vẽ cũng có thể bị “quá date” khi những màn hình thay đổi.

Bạn có lẽ muốn cho UI flows một cơ hội. Chúng là cách nhanh chóng để bắt đầu và trong thời gian gấp gáp chúng có thể phù hợp với nhu cầu của bạn.

Wireflows

idesign wireflows 02
Simplified Checkout Process by Michael Pons from PG

Trong nhiều năm, tôi đã quyết định tạo những flowcharts để truyền tải tương tác. Để cung cấp nhiều bối cảnh hơn, những flowcharts của tôi gồm cả wireframes. NNgroup gần đây đồng ý rằng thuật ngữ Wireflows dùng để ghi lại khả năng truyền tải mới về UX.

Giải thích: Wireflows là một định dạng thiết kế riêng khi kết hợp những thiết kế layout kiểu wireframe với một flowchart đơn giản giống như cách trình bày tương tác - NNgroup.

Wireframes đứng riêng không đủ. Wireframes truyền tải layout và nội dung tĩnh nhưng không có tương tác. Flowcharts có thể bao quát các tương tác chi tiết, nhưng chúng bỏ qua bối cảnh người dùng. Wireflows giúp trình bày những tương tác phức tạp khi nội hoặc bố cục thay đổi trong một vài trang.

Các thành phần của Wireflow

  • Lối vào và Ra;
  • Các bước. Ví dụ: hành động của User, hành động của hệ thống, những đường thay thế;
  • Sự kết nối: Chỉ ra những đường dẫn mong muốn và những khả năng có thể xảy ra;
  • Điểm quyết định: một điểm nơi mà người dùng buộc phải chọn từ 2 phương án trở lên.

Việc hiểu biết về những kịch bản có thể xảy ra của người dùng cho phép thiết kế tốt hơn trải nghiệm người dùng. Phương pháp mô tả giúp truyền đạt ý tưởng và cung cấp giải pháp để làm việc hiệu quả hơn. Dưới đây là một vài tài liệu giúp bạn bắt đầu.

Nguồn Tài Liệu 

Một số nguồn tài liệu giúp bạn đẩy nhanh quá trình làm worklow UX.

UI Kits

idesign ui kit
FREEBIE — Flowchart kit for Sketch

Đây là một USer flow kit được vẽ cẩn thận với Sketch giúp tạo ra những sitemap đơn giản nhanh và dễ dàng.

Tất cả các thành phần sẽ có mũi tên có thể co kéo và tuỳ chỉnh.

Flowchart Kit bởi Arthur Guillermin Hazan.

idesign ui kit 02
Flowchart Kit Sketch Resource

Đây là Flowchart kit được tạo ra để trình bày cách tương tác giữa các trang của một dự án Web. Bạn có thể thêm mũi tên, icons, chỉnh sửa trang của mình và thậm chí là tạo một sitemap riêng với bộ kit này.

User Flow Diagram Template của Jarosław Ceborski

idesign ui kit 03
User Flow Diagram Template

Đây là bộ kit sơ đồ flow dành cho Sketch sẽ giups bạn tạo một sơ đồ đẹp đẽ dễ dàng! Những khối và mũi tên đều là những symbols của Sketch nên rất tiện lợi.

Sketch Plugins:AEFlowcharts by Marko Tadic.

Sketch có rất nhiều plugin cho việc tạo flowcharts. Sau khi xem qua một lượt, tôi thấy AEFlowchart dễ nhất để sử dụng. Xem qua tại Vimeo.


Nguồn: Uxplanet.org