Wireframe là gì - các bạn ví von wireframe như khung xương

Wireframe là gì? Wireframe đứng ở đâu trong toàn bộ quá trình thiết kế UI/UX? Wireframe có thật sự quá quan trọng để chú tâm vào? Hãy cùng tìm hiểu qua bài viết dưới đây.

Giải thích cơ bản cho câu hỏi “Wireframe là gì?

Wireframe là 1 bước làm việc căn bản và quan trọng. Thường sau research, brainstorm, và trước design. Wireframe (hay mockup hay design) đều có thể dùng làm prototype tùy mục đích sử dụng.

Wireframe khi mình hỏi các bạn quen biết của mình làm Business Analyst thì các bạn ví von wireframe như khung xương (còn prototype như mạch máu, và design như da dẻ bên ngoài).

Còn khi mình đọc sách UX căn bản và các bài trên Medium: Wireframe được xem như bảng vẽ nhà trong kiến trúc.

Kiến trúc sư cần bảng vẽ nhà đàng hoàng để có 1 plan kĩ lưỡng cho căn nhà thì tech team (và những người liên quan) cũng cần chốt wireframe thiệt chu đáo để đỡ đau khổ về sau.

Bảng vẽ nhà giúp biết vị trí, kích thước và công năng các phòng, biết cửa chính cửa sổ đi lại ở đâu, thì cũng như wireframe phải biết được các functions, thứ tự ưu tiên chính phụ, vai trò của các elements, biết được flow căn bản.

Bảng vẽ nhà không thể biết được nhà xây xong sơn màu gì tranh treo hình thù thế nào đẹp xấu cụ thể ra sao, thì tương tự wireframe tập trung UX nhiều hơn là UI (lưu ý: mình dùng từ “tập trung”, chứ không phải làm wireframe là không liên quan gì đến UI, đừng quá quan tâm về đẹp xấu ở bước này).

Tóm lại, wireframe tập trung show “How it will work, not how it will look”

Nên làm wireframe kĩ thế nào?

Luôn là tùy task tùy dự án mà tụi mình chọn làm lo-fi hay hi-fi. Thậm chí, trong cùng 1 bộ nhưng có screen/page hoặc block thì mình vẽ hi-fi, chỗ không quan trọng thì mình làm lo-fi. Tóm lại là miễn cả team cùng thống nhất, miễn là tập trung vào những cái quan trọng, miễn là hiểu mình đang làm cái gì, tại sao lại làm thì chọn cách cho phù hợp.

Trong 1 vài dự án web, mình kết hợp wireframe chung với moodboard luôn, có những đoạn mình sẽ capture cái mẫu phù hợp mình add vào luôn cho nhanh.

Trong 1 vài dự án app, mình kết hợp wireframe với flow, gọi nôm na là wireflow để cả team nắm vấn đề cho nhanh luôn, sửa nhanh, test nhanh prototype ở bước này luôn cho đừng hỏng flow.

Cái nào không phải là wireframe?

Wireframe không phải là bản phác thảo, bản nháp… Mấy cái đó cũng không gọi là lo-fi wf luôn, nó chỉ đơn thuần là sketch, nó chưa chốt được gì, chưa đảm bảo cả team cùng đồng thuận 1 plan chung thì không thể coi là wireframe.

Hình bên trái được xem là sketch, vì nhìn vào, mọi người chưa hiểu rõ ý đồ cụ thể của UX sẽ làm gì. Còn hình bên phải cũng là nguệch ngoạc ra giấy, nhưng hiểu rõ chức năng, vị trí, vai trò các thành phần, thì được xem là lo-fi wireframe.

Đa phần người ta dễ nhầm lẫn chỗ này, cứ nghĩ những buổi thảo luận rồi cùng vẽ trên bảng hoặc ra giấy các function, map để thảo luận thì xem là lo-fi wireframe. Như thế không chính xác. Đó vẫn chỉ là sketch. Chừng nào cả team cùng hiểu hướng thực hiện UX sẽ ra sao, thống nhất cụ thể là gì, thì đó mới là bước wireframe.

Wireframe lại càng không phải là bản màu mè show-off khoe mẽ đẹp đẽ nhé. Đừng gõ tìm trên #Dribbble thấy các shots về wireframe mà màu mè, icons, hình ảnh quá trời quá đất thì “toang” đấy.

Một vài ghi chú nhỏ từ trải nghiệm cá nhân về làm wireframe

• Dù wireframe không quan trọng đẹp xấu của UI sau này nhưng cố gắng đừng vẽ wireframe trắng đen, vì màu đó nhìn nó chán và tụt mood í. Cố gắng cho cái màu tình cảm xíu, nhìn wireframe dễ chịu hơn để còn tập trung duyệt cho kĩ.
• Cố gắng ghi chú kĩ thêm để đảm bảo cả team và khách nữa hiểu rõ ngụ ý của mình muốn làm gì cho các elements quan trọng. Mình sẽ dùng cái note màu tím để team mình dễ phân biệt.
• Dù wireframe đang là lo-fi thì cũng phải ghi chú thiệt kĩ: đâu là nút, đâu là link, đâu là hình, đâu là icons, đâu là text. Đặc biệt link và nút phải ghi rõ ra là dẫn đi đâu.
• Wireframe: theo góc nhìn của mình thì suy nghĩ kĩ chiếm 80% effort rồi, và 20% còn lại là vẽ viết ra thôi.

Quyền đăng bài viết được sự đồng ý của tác giả tại website www.hocdohoa.edu.vn