Làm sao phân biệt Sketch, Wireframe, Mockup và Prototype?

Tổng quan về Sketch, Wireframe, Mockup và Prototype

Trước khi phân biệt Sketch, Wireframe, Mockup và Prototype, bạn cần hiểu những thuật ngữ này có nghĩa là gì. Sketch, wireframe, mockup và prototype là quá trình thiết kế giao diện (UI) và trải nghiệm người dùng (UX). Những bước này giúp các designer và Business Analyst hiểu rõ hơn về nhu cầu của người dùng và tạo ra sản phẩm đáp ứng được những nhu cầu đó. Cụ thể hơn:

Sketch là gì?

Sketch là bản phác thảo đơn giản thể hiện ý tưởng ban đầu của sản phẩm. Sketch thường được vẽ bằng tay hoặc trên các phần mềm thiết kế như Figma, Sketch, Adobe XD, v.v. Mục đích của sketch là để Business Analyst nhanh chóng nắm bắt ý tưởng và truyền đạt cho các bên liên quan. Từ đó, Sketch giúp BA thu thập phản hồi từ khách hàng sớm hơn trong quá trình phát triển sản phẩm.

Bên cạnh đó, khi thảo luận về việc cải tiến tính năng, Sketch là một thao thác hữu ích. Sketch sẽ giúp đội ngũ mường tượng ngay lập tức khi hệ thống hiện tại đã có những tính năng sẵn có và khách hàng muốn thêm những tính năng mới, việc đưa chúng vào hệ thống sẽ ảnh hưởng như thế nào. 

Wireframe là gì?

Đây là bản thiết kế chi tiết hơn sketch. Wireframe sẽ thể hiện được cấu trúc và bố cục của sản phẩm. Wireframe thường được sử dụng để xác định các thành phần giao diện, luồng người dùng và tương tác giữa các màn hình. Wireframe thường được vẽ bằng các hình dạng đơn giản, không có màu sắc hoặc chi tiết đồ họa. Wireframe sẽ giúp BA đảm bảo rằng sản phẩm đáp ứng được các yêu cầu của khách hàng.

Khi xây dựng wireframe cho website hoặc ứng dụng web, việc duy trì sự nhất quán trong cấu trúc là một nhiệm vụ quan trọng của BA. Thông thường, wireframe sẽ bao gồm các phần nhất định như Header (chứa thông tin tổng quan như Tên, Chủ sở hữu và Trạng thái), Body (chứa các phần dữ liệu thể hiện thông tin muốn mô tả) và Footer (chứa các trường thông tin cơ bản như Người tạo, Ngày tạo, Người sửa đổi và Ngày sửa đổi).

Wireframe thường được thiết kế ở mức độ Low Fidelity và thường là sản phẩm của các UX Designer, đôi khi có thể là của Business Analyst nếu BA hiểu rõ về kỳ vọng của người dùng đối với User Flows. Tuy nhiên, theo chuẩn chuyên môn và trách nhiệm, người làm wireframe từ đầu nên thuộc về UX Team.

Quá trình nghiên cứu người dùng và xây dựng User Personas là nền tảng để BA đưa ra các quyết định chính xác về luồng thao tác và các thành phần trên giao diện người dùng.

Tìm hiểu thêm: Tổng hợp kiến thức của BA từ cơ bản đến nâng cao

Mockup là gì?

Mockup là bản thiết kế gần với sản phẩm thực tế hơn, thể hiện các thành phần giao diện, màu sắc, kiểu chữ, kích cỡ, font chữ, hình ảnh, đường kẻ, phân lô, phân luồng, thậm chí là cả quá trình kiểm tra và xác thực dữ liệu. Mockup bao quát mọi chi tiết, từ trạng thái của các trường nhập liệu đến sự tương tác giữa chúng.

Vì tính chi tiết, BA cần phải nắm vững các thông tin như màn hình thuộc chức năng hay nhóm chức năng nào, có nằm trong quy trình kinh doanh nào, thể hiện nội dung gì và input/output trên màn hình là gì, cùng với các quy tắc kiểm tra dữ liệu. Những Mockup này sẽ là cơ sở để khách hàng đánh giá và phê duyệt.

Nhìn chung, Mockup thường được sử dụng để kiểm tra tính thẩm mỹ và khả năng sử dụng của sản phẩm. Mockup thường được tạo bằng các phần mềm thiết kế như Figma, Sketch, Adobe XD, v.v.

Prototype là gì?

Cuối cùng, Prototype là bản thiết kế có thể tương tác, thể hiện cách hoạt động của sản phẩm khi được sử dụng. Vì vậy, Prototype thường được sử dụng để kiểm tra tính khả thi của sản phẩm và nhận phản hồi từ người dùng. Nghĩa là thay vì chỉ là những màn hình tĩnh, người dùng có thể tương tác trực tiếp với Prototype, như nhấn nút, kéo thả, trượt lên, trượt xuống, mở popup, v.v.

Khi tạo Prototype, thường đội ngũ chỉ cần chọn ra 1-2 tính năng nổi bật nhất để phát triển nhằm chứng minh khả năng đáp ứng mong muốn của khách hàng. Vì phát triển Prototype đòi hỏi nhiều ngân sách và nỗ lực nên thường được tạo trong giai đoạn pitch dự án hoặc để làm rõ những yêu cầu phức tạp cần được hiển thị trực quan.

Một điều cần BA lưu ý chính là  Prototype khác với “phiên bản beta”. Bản beta là một sản phẩm đầy đủ chức năng có thể sử dụng, trong khi Prototype chỉ là “bộ mặt” của sản phẩm, không có mã nguồn front-end và back-end.

Nhìn chung, Sketch, Wireframe, Mockup và Prototype đều có những chức năng và mục đích sử dụng khác nhau.

XEM THÊM:

• BRD là gì? Tầm quan trọng của BRD trong dự án kinh doanh
• Viết đặc tả yêu cầu phần mềm chi tiết
• Phân biệt  BRD, SRS, FRS

Vì sao cần phân biệt Sketch, Wireframe, Mockup và Prototype?

Theo Topchuyengia, việc phân biệt rõ giữa Sketch, Wireframe, Mockup và Prototype quan trọng đối với các đội ngũ vì 3 lý do chính: 

Để xác định hướng đi của từng bước: Mỗi bước trong quá trình thiết kế UIUX có những mục tiêu khác nhau. Vì vậy, việc xác định rõ mục tiêu của từng bước sẽ giúp các nhà thiết kế và nhóm phát triển sản phẩm tập trung vào những khía cạnh cần thiết nhất. 

Để lựa chọn công cụ phù hợp: Có nhiều công cụ khác nhau để tạo Sketch, Wireframe, Mockup và Prototype. Nếu phân biệt được các thuật ngữ này, BA sẽ lựa chọn công cụ phù hợp với từng quá trình. Từ đó, đội ngũ có thể tạo ra các bản thiết kế chất lượng cao.

Để truyền đạt ý tưởng hiệu quả: Mỗi loại thiết kế có những ưu điểm và nhược điểm riêng. Việc lựa chọn loại thiết kế phù hợp sẽ giúp các nhà thiết kế và phát triển sản phẩm truyền đạt ý tưởng hiệu quả.