Định nghĩa

Wireframe là bản phác thảo mang tính tổng quan về cấu trúc, bố cục, thông tin, và chức năng của web/app thông qua những hình khối được giản lược về màu sắc và họa tiết.

Wireframe thể hiện cách sắp xếp nội dung trên trang web/ứng dụng và là phiên bản đơn giản hóa với gam màu đen, trắng, xám của sản phẩm cuối cùng. Nó sẽ tập trung nhiều vào UX hơn là UI.

Wireframe cũng là cách để UX Designers truyền tải ý tưởng có trong đầu họ ra bên ngoài.

Trước khi team dev tiến hành code, UX designer sẽ cần tạo ra wireframe. Wireframe là nguồn tham khảo mà team dev nhìn vào để code. Stakeholders và các phòng ban khác trong công ty sẽ ngồi lại review về wireframe, đề xuất 1 số thay đổi, chỉnh sửa trước khi chốt phương án wireframe cuối cùng.

2. Tác dụng

Được ví như khung xương của web/app, wireframe giúp người xem có hình dung ban đầu về sản phẩm. Ví dụ, Copywriters sau khi nhìn vào wireframe sẽ hình dung ra được phần nội dung mà họ phải viết cần dài bao nhiêu để phù hợp với diện tích khung chứa.

Wireframe sẽ giúp quá trình giao tiếp và trao đổi thông tin giữa UX Designer và các phòng ban khác trở nên dễ dàng hơn. Dựa trên wireframe, team sẽ thảo luận và thống nhất về cấu trúc tổng thể và các chức năng sẽ được đưa vào sản phẩm.

Thay vì đợi ứng dụng/ trang web được hoàn thành hoàn chỉnh, các phòng ban và stakeholders có thể dựa vào wireframe để đánh giá và xác định nhanh xem đâu là những điểm cần thay đổi trước khi code, từ đó giúp rút ngắn thời gian, chi phí và các đầu việc phải làm trong giai đoạn sau của quá trình phát triển sản phẩm.

Càng đi về những giai đoạn cuối, sản phẩm càng khó để thay đổi. Vậy nên việc chỉnh sửa cấu trúc của website/ ứng dụng ngay từ bước wireframe cũng sẽ dễ dàng và tiết kiệm chi phí hơn rất nhiều. Vì thế mà wireframe thường được dùng để test các cách sắp xếp thông tin khác nhau nhằm tìm ra bố cục hợp lý nhất. Nếu có wireframe, cả team sẽ có thể di chuyển đến các bước tiếp theo một cách tự tin và chắc chắn hơn.

Phân loại

Wireframe sẽ thường được phân loại dựa trên fidelity, có thể được hiểu là mức độ chi tiết và hoàn thiện của wireframe.

1. Lo-fi wireframe (Low fidelity wireframe)

Lo-fi wireframe cho phép UX Designers phác thảo nhanh ý tưởng của họ về bố cục của ứng dụng/ website.

Lo-fi wireframe thường được vẽ trên giấy hoặc bảng trắng. Nó sẽ tập trung vào bố cục tổng quan hơn là đi vào chi tiết cụ thể. Lo-fi wireframe sẽ không cần UX Designers quá tỉ mỉ về việc căn chỉnh theo lưới, kích thước, tỉ lệ. Đây cũng là loại wireframe tương đối đơn giản để sửa đổi.

Tính chất tối giản của lo-fi wireframe đôi khi làm cho nó trở nên hơi khó hiểu với người xem. Vì vậy, UX Designers trong quá trình xây dựng wireframe này có thể cân nhắc đưa thêm chú thích để người xem có thể hình dung dễ dàng hơn.

2. Mid-fi wireframe (Mid fidelity wireframe)

Mid-fi wireframe sẽ chỉn chu hơn so với lo-fi wireframe và chỉ có thể được tạo ra trên máy tính. Thông tin hiển thị trong mid-fi wireframe cũng sẽ được phân cấp 1 cách trực quan hơn. (Chữ sẽ được phân cấp bằng độ dày mỏng khác nhau. Các phần nội dung sẽ được phân cấp bằng các gam màu xám khác nhau) Đây cũng là loại wireframe được sử dụng nhiều nhất trong UX Design.

3. Hi-fi wireframe (High fidelity wireframe)

Hi-fi wireframe sẽ có mức độ hoàn thiện cao nhất trong 3 loại wireframe. Hi-fi wireframe sẽ có hệ thống font chữ, màu sắc, hình ảnh, icon và nút bấm rất chi tiết và đầy đủ để sát nhất với thực tế. Nói cách khác, hi-fi wireframe sẽ là hình ảnh của giao diện đã hoàn thiện của website/ ứng dụng.

Xây dựng wireframe

Việc vẽ wireframe nên bắt đầu với màn hình nhỏ rồi sau đó chuyển sang màn hình với độ phân giải lớn hơn. Hãy xác định xem đâu là thiết bị mà tệp người dùng chính của sản phẩm sẽ sử dụng để vẽ wireframe dựa trên kích thước của thiết bị đó. UX Designer có thể bắt đầu với độ phân giải 1024x768px với giao diện máy tính và 320x480px cho giao diện điện thoại. Wireframe được vẽ trên máy tính sẽ có thể được chia sẻ cho các phòng ban khác một cách dễ dàng hơn.

Câu hỏi cần đặt ra với mỗi màn hình wireframe là:

• Mục đích của trang/màn này là gì?

• Trang/màn này giúp người dùng hoàn thành mục tiêu như thế nào?

Lo-fi hoặc mid-fi wireframe sau khi hoàn thiện sẽ được đem đi test với người dùng, stakeholders và các bộ phận khác trong team để thu thập ý kiến phản hồi. Nếu có thể, hãy tạo ra nhiều wireframe với các phương án sắp xếp bố cục khác nhau để test với người dùng và các stakeholders nhằm tìm ra cái phù hợp nhất.

UX Designer cũng cần phối hợp với copywriter trong quá trình xây dựng wireframe để ước lượng được phần không gian cần thiết để điền nội dung vào, tránh tình trạng nội dung thì nhiều nhưng khung chứa nội dung lại không đủ lớn.

Dựa trên những ý kiến thu thập được, UX Designers sẽ thực hiện những thay đổi cần thiết và tạo ra hi-fi wireframe. Bước tiếp theo là tiếp tục test hi-fi wireframe. Vòng lặp (làm và test) sẽ tiếp tục với prototype và sản phẩm cuối. Trước khi code, các thành viên trong team cần phài thống nhất được bố cục và cách trình bày thông tin trên website/ứng dụng. Sau khi stakeholders và người dùng duyệt wireframe, team có thể tự tin chuyển sang bước tiếp theo trong quá trình xây dựng sản phẩm.

Khi xây dựng wireframe, hãy tạm thời đừng nghĩ đến màu sắc hay các yếu tố thẩm mĩ khác. Đó là việc mà UI Designer sẽ lo ở khâu tiếp theo. Và nếu bạn là Designer duy nhất trong công ty thì sao? Chả sao cả. Việc đó cứ để đó làm sau. Một ứng dụng đẹp mắt nhưng người dùng lại gặp khó khăn khi sử dụng và điều hướng thì chắc chắn không phải là một ứng dụng thân thiện với người dùng.

Có một số ý kiến cho rằng wireframe khi đem đi test sẽ không nên sử dụng màu sắc, hình ảnh hay nội dung thật. Lý do là bởi stakeholders và người dùng có thể thích 1 màu nào đó được sử dụng trong wireframe và điều này sẽ dẫn đến sự thiên vị khi tiến hành test). Đây cũng là điều mà UI/UX Designers có thể cân nhắc để giúp kết quả test trở nên chính xác và khách quan hơn. Nếu đã xác định được màu sắc sẽ sử dụng cho ứng dụng/website, Designers có thể tạm thời chưa thêm màu hoặc biến wireframe thành dạng âm bản (đen trắng) để phục vụ mục đích test.

Khi vẽ wireframe, hãy đưa vào 1 số chú thích để giúp các thành viên trong team hiểu nó dễ dàng hơn. Nút bấm, đường link, hình ảnh hay icons, các yếu tố đó nên được ký hiệu để người xem dễ nhận ra. Khi stakeholders xem wireframe (đặc biệt là với lo-fi và mid-fi), UX Designers có thể sẽ phải cùng tham gia để giải thích một số phần thông tin được sử dụng.

Một số thuật ngữ liên quan:

Sketch: Sketch là giai đoạn mà UX Designer muốn liệt kê ra nhiều ý tưởng nhất có thể (ưu tiên số lượng hơn chất lượng). Việc sketch cũng diễn ra nhanh, rất nhanh là đằng khác. Mức độ chi tiết của sketch vì thế cũng sẽ thấp hơn wireframe.