Tổng quan về wireframe – Ý nghĩa & Phân loại

Wireframe giống với một ngôi nhà trên bản vẽ kiến trúc khi chưa trở thành sự vật cụ thể.

Chúng phác thảo cấu trúc và chức năng của sản phẩm mà không bị cuốn vào màu sắc, hình ảnh hoặc nội dung cụ thể. Bạn đã bao giờ tìm hiểu và sử dụng wireframe? Cole sẽ giúp bạn hiểu wireframe là gì và cách sử dụng chúng hiệu quả trong bài viết dưới đây.

Wireframe là gì? Tại sao wireframe được sử dụng?

Wireframe là một bản vẽ hai chiều, phác thảo trang web hoặc ứng dụng. Wireframe cung cấp cái nhìn tổng quan rõ ràng về cấu trúc trang, bố cục, kiến ​​trúc thông tin, user flow, chức năng và hành vi dự định. Kiểu dáng, màu sắc, đồ họa và các yếu tố thiết kế khác được giữ ở mức tối thiểu. Chúng có thể được vẽ bằng tay hoặc được tạo bằng digital, tùy thuộc vào mức độ chi tiết được yêu cầu. 

Wireframing là một phương pháp được các UX designer sử dụng phổ biến nhất. Quá trình này cho phép tất cả các bên liên quan đồng ý về nơi thông tin sẽ được đặt trước khi developer coding giao diện.

Ai là người khởi tạo và sử dụng wireframe?

Lý do chính mà wireframe ra đời chính là để tạo và truyền đạt ý tưởng. Do đó, việc tạo wireframe không bị giới hạn ở bất kỳ vai trò hoặc chuyên môn nào trong doanh nghiệp. Dưới đây là một số vị trí nhân sự thường tạo và sử dụng wireframe:

• Founders và Business Owners sử dụng chúng để truyền đạt hoặc trình bày ý tưởng về sản phẩm hoặc ứng dụng của họ với các nhà đầu tư hoặc product team.
• Product Manager và Business Analyst sử dụng wireframe để chuyển các yêu cầu thành thông số kỹ thuật trực quan cho designer hoặc developer.
• UX Designers sử dụng chúng để khám phá và tinh chỉnh các concepts.
• Developers sử dụng chúng để phác thảo giao diện người dùng khi họ không có designer hoặc khi làm việc trực tiếp với khách hàng.
• Marketers và Copywriters sử dụng wireframe để khám phá concept landing page và trực quan hóa vị trí cũng như kích thước của bản sao trên trang page.

Ý nghĩa của việc sử dụng wireframe trong UX design

Wireframe có 3 lợi ích chính: giữ cho concepts tập trung vào user, làm rõ các tính năng và điều hướng, đồng thời việc tạo ra wireframe tiết kiệm thời gian và chi phí.

Wireframe giúp concepts tập trung vào user

Wireframing tạo điều kiện thuận lợi cho phản hồi từ user, thúc đẩy các cuộc trò chuyện với các stakeholders và tạo ra ý tưởng giữa các designers. Việc tiến hành thử nghiệm user sớm cho phép designer nhận được phản hồi trung thực và xác định các điểm yếu chính.

Bằng cách sử dụng văn bản Lorem ipsum cho content tương lai, các designer có thể gợi ý cho user những câu hỏi như “bạn mong đợi điều gì sẽ được viết ở đây?” Những insights này giúp designer hiểu được cảm giác trực quan để tạo ra những sản phẩm dễ sử dụng.

Wireframes làm rõ các tính năng và điều hướng

Khi truyền đạt ý tưởng của bạn tới clients, họ có thể không theo kịp các thuật ngữ như “hero image” hoặc “call to action”. Các tính năng cụ thể của wireframing sẽ truyền đạt rõ ràng cho clients của bạn về cách chúng hoạt động nhằm phục vụ mục đích gì.

Việc xem trước các tính năng cũng sẽ cho phép bạn và các stakeholders hình dung được cách tất cả chúng hoạt động cùng nhau hoặc không. Giai đoạn wireframing là lúc các stakeholders bày tỏ quan điểm và đánh giá khốc liệt nhất. Mọi trường hợp sẽ được vẽ ra trong giai đoạn này và tìm giải pháp khắc phục ngay lập tức.

Wireframe được tạo ra nhanh chóng với chi phí thấp

Nếu bạn có sẵn bút và giấy, bạn có thể nhanh chóng phác thảo wireframe mà không tốn một xu nào. Sự phong phú của các công cụ có sẵn có nghĩa là bạn cũng có thể xây dựng digital wireframe trong vòng vài phút.

Thông thường, khi một sản phẩm có vẻ quá bóng bẩy, user sẽ ít có khả năng phản hồi trung thực hơn. Bằng cách bộc lộ phần cốt lõi của bố cục trang, bạn có thể dễ dàng xác định được các điểm yếu mà không cần tốn nhiều thời gian hoặc tiền bạc. Quá trình thiết kế sản phẩm càng ở giai đoạn cuối thì càng khó thay đổi!

Sự khác biệt giữa wireframe và prototype

Mặc dù có một số điểm trùng lặp giữa wireframe và prototype nhưng về bản chất, chúng vẫn có sự khác biệt. 

Sự khác biệt chính nằm ở chỗ, prototype là những thiết kế có độ chính xác cao nhằm mục đích thể hiện thực tế final product. Người xem prototype sẽ có cảm giác như thể họ đang đứng trước một sản phẩm thực và bất kỳ tương tác nào với sản phẩm đó sẽ bắt chước hành vi dự định của published code.

Ngược lại, wireframe giống như một bản phác thảo của một sản phẩm kỹ thuật số. Nó không bao gồm tất cả các chi tiết của sản phẩm cuối cùng và sẽ không bị nhầm lẫn với một sản phẩm nào đó. Vì việc tạo và sửa đổi chúng nhanh hơn nhiều nên wireframe phải luôn được tạo trước prototype.

Phân loại wireframe

Có ba loại wireframe chính: low-fidelity, mid-fidelity, and high-fidelity. Độ trung thực của wireframe đề cập đến mức độ chi tiết trong từng thiết kế.

Low-fidelity wireframes (wireframe có độ trung thực thấp)

Các wireframe có độ trung thực thấp thường đóng vai trò là điểm khởi đầu của thiết kế. Do đó, chúng có xu hướng khá thô, được tạo ra mà không có bất kỳ yêu cầu nào về tỷ lệ, lưới hoặc độ chính xác của pixel. Chúng chỉ bao gồm các hình ảnh đơn giản, hình khối và nội dung mô phỏng, chẳng hạn như văn bản phụ cho nhãn và tiêu đề.

Wireframe có độ chính xác thấp rất hữu ích để bắt đầu cuộc trò chuyện, quyết định bố cục điều hướng và user flow. Chúng là lý tưởng nếu bạn trao đổi trước stakeholders hoặc clients trong phòng và bạn muốn phác thảo điều gì đó bằng bút giữa cuộc họp. Low-fidelity wireframes cũng cực kỳ hữu ích cho những designer có nhiều ý tưởng về sản phẩm và muốn nhanh chóng quyết định nên đi theo hướng nào.

Mid-fidelity wireframes (wireframe có độ trung thực trung bình)

Các wireframe có độ trung thực trung bình, được sử dụng phổ biến nhất vì có khả năng thể hiện bố cục chính xác hơn. Mặc dù chúng vẫn hạn chế về như hình ảnh hoặc kiểu chữ, nhưng mid-fidelity wireframes sở hữu nhiều chi tiết hơn cho các thành phần và tính năng cụ thể.

Độ dày khác nhau của text có thể được sử dụng để phân tách các tiêu đề và nội dung nội dung. Mặc dù vẫn là màu đen và trắng, các designer có thể sử dụng các sắc thái khác nhau của màu xám để truyền đạt sự nổi bật về mặt hình ảnh của từng yếu tố riêng lẻ. Các wireframe có độ chân thực trung bình thường được tạo bằng công cụ wireframing digital, chẳng hạn như Sketch hoặc Balsamiq.

High-fidelity wireframes (wireframe có độ trung thực cao)

High-fidelity wireframes có pixel-specific layouts và có thể bao gồm hình ảnh đặc trưng thực tế và bản sao có liên quan. Chúng là lựa chọn lý tưởng để khám phá và ghi lại các khái niệm phức tạp như hệ thống menu hoặc bản đồ tương tác.

Các công cụ sáng tạo wireframe

Một trong những lợi ích của wireframe là bạn có thể tạo chúng bằng nhiều công cụ khác nhau, phần lớn công cụ bạn đã có từ trước. Tuy nhiên, có những lợi ích rõ ràng khi sử dụng một công cụ được tối ưu hóa để wireframing. Các công cụ phổ biến nhất để tạo wireframe có  thể kể đến như:

• Giấy + bút
• Phần mềm trình chiếu
• Phần mềm vẽ sơ đồ, hoặc đơn giản là bảng trắng
• UX prototyping tools
• Phần mềm dành riêng cho wireframe như Sketch hoặc Balsamiq

Bạn có thể tham khảo bảng so sánh các loại công cụ phổ biến nhất để tạo wireframe dưới đây:

Wireframe là yếu tố không thể thiếu trong mỗi dự án thiết kế, là dáng hình sơ khai nhất của sản phẩm cuối cùng. Hiểu và biết cách xây dựng wireframe sẽ giúp thể hiện kiến thức chuyên môn cũng như các kỹ năng mềm như thuyết phục, phản biện,… của bạn. Theo dõi ngay Cole để cập nhật các kiến thức mới nhất về thiết kế, lập trình và khoa học dữ liệu. Để trở thành một business analyst chuyên nghiệp tham gia ngay khóa học ba online hữu ích.    

>> Xem thêm: Peer review – hình thức cải thiện chất lượng hiệu quả của BA