Phân biệt User Flows vs. Wireframes trong thiết kế UI/UX

‍

Các UI/UX Designers sử dụng nhiều công cụ, phương pháp khác nhau trong suốt quá trình thiết kế, với mỗi công cụ có vai trò riêng trong quá trình tạo ra sản phẩm cuối cùng. User flows và Wireframes là hai trong số những công cụ thiết kế được nhắc đến nhiều nhất trong lĩnh vực UI/UX, nhưng chúng thường bị nhầm lẫn với nhau. Cả User flows và Wireframes đều giúp việc giao tiếp giữa các thành viên trong nhóm thiết kế hay việc trao đổi với khách hàng dễ dàng và hiệu quả hơn. Trong khi User flows và Wireframes thường được sử dụng kết hợp với nhau, giữa chúng vẫn có sự khác biệt rất rõ ràng. Bạn hãy tìm hiểu qua bài viết dưới đây nhé!

1. User Flows và Wireframes là gì và mục đích của chúng

1.1. User Flows (Luồng người dùng)

Khi tương tác với một sản phẩm, người dùng có thể thực hiện theo nhiều con đường khác nhau. Luồng người dùng là một sơ đồ minh hoạ trực quan các đường dẫn mà người dùng đi qua ứng dụng hay trang web. Nó có thể được vẽ bằng tay hoặc tạo bằng kỹ thuật số. Sơ đồ thường bắt đầu với điểm vào (Entry) của người dùng trên sản phẩm, ví dụ như màn hình hay trang chủ giới thiệu. Sơ đồ sẽ kết thúc bằng hành động hoặc kết quả cuối cùng, chẳng hạn như mua sản phẩm hay đăng ký tài khoản.

User flows giúp xác định chính xác số lượng trang bạn cần để người dùng hoàn thành một cách dễ dàng một nhiệm vụ cụ thể hoặc đạt được một mục tiêu nhất định. Tạo luồng người dùng thường có nghĩa là phác thảo một sơ đồ giúp bạn sắp xếp các trang web hoặc trang màn hình ứng dụng của mình theo cách phù hợp nhất với nhu cầu của người dùng. Từ đó, bạn sẽ xác định những trang nào cần được thiết kế và chúng sẽ được sắp xếp theo thứ tự nào. Việc mô tả quá trình này cho phép các nhà thiết kế đánh giá và tối ưu hoá trải nghiệm người dùng, từ đó tăng tỷ lệ chuyển đổi khách hàng.

Ví dụ về User flows (Nguồn: Career Foundary)

1.2. Wireframes (Cấu trúc dây/ Khung xương)

Wireframes là bản phác thảo trước khi thiết kế một ứng dụng hoặc trang web. Wireframes cho bạn cái nhìn tổng quan, rõ ràng về cấu trúc của từng trang, bố cục, kiến trúc thông tin (IA), luồng người dùng, chức năng và các hành vi dự kiến của người dùng. Cụ thể hơn khi tạo wireframes, bạn sẽ quyết định những hình ảnh, nút hoặc văn bản nào sẽ bao gồm và vị trí của chúng trên trang.

Đội thiết kế (designers) thường sử dụng wireframes để trao đổi với khách hàng (client) hay các bên liên quan (stakeholders). Ngoài ra, tạo wireframes trong những giai đoạn đầu của quy trình để có thể thực hiện thử nghiệm người dùng (user testing) sớm hơn. Từ đó, đội thiết kế sớm nhận được phản hồi và tìm ra những điểm cần được cải thiện để nâng cao trải nghiệm người dùng. Vì wireframes thường đại diện cho sản phẩm ban đầu (sản phẩm phác thảo) nên kiểu dáng, màu sắc và đồ họa đều được giữ ở mức tối giản. Các UX/UI Designers có thể tạo wireframes thông qua vẽ tay hoặc công cụ kỹ thuật số, tùy thuộc vào mức độ chi tiết được yêu cầu.

‍

Ví dụ về Wireframes (Nguồn: Balsamiq)

Tham khảo khóa học Sketch & Wireframe để nâng cao kỹ năng Sketching/ Wireframing: https://capidemy.com/khoa-hoc/ux-research

2. User Flows và Wireframes ở đâu trong quy trình thiết kế?

Việc xây dựng user flows sẽ dựa trên dữ liệu thô có được từ bước nghiên cứu người dùng. Với user flows là cơ sở, bạn sẽ đi tới bước wireframing. Bạn sẽ thiết lập số lượng màn hình bạn cần cũng như mục đích phục vụ của chúng. Sau đó tạo wireframes cho từng trang. Trong các bước tiếp theo, bạn sẽ thực hiện prototype cho sản phẩm cũng như kiểm tra khả năng tiếp cận (Usability Testing), đánh giá và bàn giao sản phẩm (UI Audit & Hand-off). Trong quy trình tạo ra sản phẩm, user flows hay wireframes sẽ luôn có những điều chỉnh để cải tiến trải nghiệm người dùng.

‍

Quy trình thiết kế UX/UI (Nguồn: Medium)

Tham khảo khóa học Mobile App Design để nắm rõ quy trình thiết kế sản phầm Mobile App: https://capidemy.com/khoa-hoc/mobile-app-design

3. Sử dụng công cụ gì để tạo User Flows và Wireframes?

Figma và Sketch là những công cụ tuyệt vời để xây dựng cả user flows và wireframes. Hai phần mềm này cung cấp tất cả những gì bạn cần để lập sơ đồ luồng người dùng và thiết kế từng màn. Google Draw và Adobe Illustrator cũng là hai phầm mềm khác có thể sử dụng để tạo cả hai. Tuy nhiên chúng thiếu chức năng tạo prototype để thực hiện user testing, và chúng hiệu quả hơn cho việc tạo user flows. Một số phần mềm trình bày slide đơn giản hơn như Keynote hay Google Slides cũng có thể hỗ trợ bạn lập flowcharts. Về các phần mềm giúp xây dựng riêng wireframes, Justinmind, Adobe XD và Balsamiq sẽ là lựa chọn tốt nhất cho bạn. Chúng được trang bị mọi chức năng cần thiết, từ tạo wireframes, đến prototype và thử nghiệm (testing).

‍

Công cụ tạo User flows và Wireframes (Nguồn: Mission Data)

4. Wireflows - Sự kết hợp giữa User Flows và Wireframes

User flows được trình bày dưới dạng Flowcharts. Cả flowcharts và wireframes đều có một số nhược điểm nhất định. Flowcharts có thể ghi lại những tương tác chi tiết, ghi lại quá trình phức tạp của người dùng. Trong khi đó, wireframes truyền tải bố cục và nội dung tĩnh nhưng không có tương tác. Từ đó mà wireflows được ra đời để khắc phục những điểm đó. Wireflows trình bày tổng quan về quá trình người dùng sẽ di chuyển, thao tác trong sản phẩm dưới dạng các màn hình giao diện của sản phẩm đó. Ví dụ, thay vì có một ô vuông ghi chữ "Homepage" (Trang chủ) như trong flowcharts, bạn sẽ trình bày dưới dạng một màn hình trang chủ được thiết kế.

Do kích thước nhỏ của màn hình điện thoại, wireflows sẽ phù hợp nhất cho các ứng dụng thiết bị di động. Nó cũng có thể được sử dụng cho các trang web và ứng dụng dành cho máy tính để bàn. Wireflows giúp bạn trình bày sản phẩm từ tổng quan đến chi tiết, chúng thực sự hiệu quả khi bạn thuyết trình với khách hàng hay trao đổi với đồng nghiệp về những giao diện thiết kế mang tính tương tác cao.

‍

Ví dụ về Wireflows (Nguồn: Dribble)

Lời kết

Vậy là mình đã chia sẻ sơ lược cho các bạn về sự khác nhau giữa User Flows và Wireframes, cũng như sự kết hợp của hai khái niệm trên - Wireflows. Đừng quên Capi Demy vẫn đang tuyển sinh cho khóa học Mobile App Design, cung cấp cho các bạn những kiến thức chuyên sâu và tốt nhất trong việc nghiên cứu và thiết kế mobile app. Khóa học sẽ khai giảng trong tháng 11 này, ĐĂNG KÝ NGAY tại đây để nhận được bộ UI Kit Bright Kit Web trị giá $68 MIỄN PHÍ.. Hy vọng bài viết sẽ giúp ích cho các bạn.

Liên hệ tư vấn:

Inbox: m.me/CapiDemy.Edu

Email: capidemy@gmail.com

Address: Tầng 6, số 35 Tô Vĩnh Diện, Hà Nội

‍