Một nhà thiết kế mới vào nghề mang tới buổi họp một wireframe trang sản phẩm đã có màu thương hiệu, ảnh thật, phông chữ chọn kỹ. Bốn mươi phút họp dành cho việc bàn nút nên màu cam hay đỏ. Câu hỏi thật sự, là thông số kỹ thuật nên nằm trên hay dưới đánh giá của khách, không ai đụng tới.
Wireframe độ trung thực thấp tồn tại để tránh đúng tình huống đó. Nó cố ý xấu để người xem chỉ còn thứ để bàn là bố cục và thứ tự thông tin.
Wireframe trả lời câu hỏi gì
Ở mức thấp, wireframe chỉ phải trả lời ba câu:
- Trên màn này có những khối nội dung nào?
- Khối nào quan trọng hơn khối nào (thứ tự, kích thước tương đối)?
- Người dùng làm gì tiếp từ màn này (hành động chính, hành động phụ)?
Nó không trả lời màu, phông, ảnh, khoảng cách chính xác tới từng điểm ảnh. Những thứ đó thuộc về bản mô phỏng (mockup) về sau. Đưa chúng vào sớm không chỉ tốn công mà còn khiến người xem nghĩ bố cục đã chốt.
Ba mức trung thực và khi nào dùng
| Mức | Trông như thế nào | Dùng để | Thời gian mỗi màn |
|---|---|---|---|
| Phác tay | Bút dạ trên giấy, hộp và đường gạch | Nghĩ ra nhiều phương án, so sánh nhanh | 2–5 phút |
| Thấp (số hoá) | Hộp xám, chữ thật, không màu | Thống nhất bố cục với nhóm, kiểm thử sớm | 15–30 phút |
| Trung bình | Lưới chuẩn, cỡ chữ gần đúng, thành phần gần thật | Bàn giao cho thiết kế giao diện, ước lượng công việc | 1–2 giờ |
Thời gian ở đây là để bạn tự kiểm: nếu mất hai tiếng cho một wireframe “thấp”, bạn đang làm mockup trá hình.
Luật 8 phác thảo: đừng yêu phương án đầu tiên
Phương án đầu tiên thường là phương án bạn đã thấy ở đâu đó. Bài tập hay dùng trong các buổi thiết kế nhanh: gập tờ A4 làm 8 ô, vẽ 8 phương án bố cục cho cùng một màn trong 8 phút, mỗi ô một phút.
Phút thứ 1–3 bạn vẽ những gì quen. Phút thứ 4–6 bắt đầu khó, bạn buộc phải đổi cách: xếp thông tin theo chiều ngang thay vì dọc, đưa hành động lên đầu, tách thành hai màn. Phút 7–8 thường ra một ý lạ. Không phải ý lạ nào cũng tốt, nhưng có thể một chi tiết trong đó đáng lấy.
Dùng chữ thật, bỏ lorem ipsum
Đoạn văn giả Latin có độ dài đều đặn, từ ngắn, không bao giờ tràn dòng. Nội dung thật thì không. Tên sản phẩm tiếng Việt thường dài: “Nồi cơm điện tử cao tần 1,8 lít lòng niêu phủ chống dính”. Đặt nó vào thẻ sản phẩm thiết kế cho “Tên sản phẩm” và bạn biết ngay bố cục có trụ nổi không.
Ba loại nội dung cần thử với trường hợp xấu nhất:
- Tên người: “Nguyễn Thị Thanh Hương” dài gấp đôi “An Lê”.
- Con số tiền: “1.250.000 ₫” so với “50.000 ₫”.
- Danh sách: 0 mục, 1 mục, 47 mục.
Tiêu đề và nhãn nút cũng nên là chữ thật. Nút “Thêm vào giỏ” và nút “Mua ngay” dẫn tới hai luồng khác nhau, viết “Nút” thì không ai bàn được.
Phân cấp thông tin chỉ bằng xám
Không có màu, bạn chỉ còn bốn công cụ để tạo phân cấp:
- Vị trí: trên hơn dưới, trái hơn phải (với người đọc chữ Latin và tiếng Việt).
- Kích thước: khối lớn nổi hơn.
- Độ đậm: dùng tối đa ba sắc xám. Nhiều hơn là đang tô màu bằng xám.
- Khoảng trống: khối được bao quanh bởi khoảng trống rộng được chú ý hơn.
Nếu bố cục chỉ bằng bốn công cụ đó mà người xem vẫn không biết nhìn đâu trước, thêm màu sau này không cứu được. Đây là phép kiểm tra tốt nhất của wireframe xám: nheo mắt nhìn, khối nào hiện ra đầu tiên phải là khối quan trọng nhất.
Chú thích bên lề: phần hay bị quên
Wireframe không nói được hành vi. Viết chú thích đánh số bên lề cho những gì bản vẽ không thể hiện:
- Danh sách này sắp theo gì? Mặc định bao nhiêu mục, cuộn vô hạn hay phân trang?
- Nút này bị vô hiệu khi nào?
- Khối này ẩn với khách chưa đăng nhập?
- Dữ liệu lấy từ đâu, người quản trị có sửa được không?
Những chú thích này sau này thành yêu cầu cho lập trình. Thiếu chúng, lập trình viên sẽ tự quyết và quyết khác bạn nghĩ.
Trình bày wireframe để góp ý đúng chỗ
Trước khi mở màn hình, nói rõ ba điều: đây là mức trung thực nào, cần góp ý về cái gì, và cái gì chưa cần góp ý.
Câu mở đầu mẫu: “Đây là wireframe xám, màu và ảnh chưa làm. Hôm nay em cần quyết một việc: thông số kỹ thuật đặt trên hay dưới phần đánh giá. Em có hai phương án.”
Đưa hai hoặc ba phương án cạnh nhau thay vì một. Với một phương án, người ta bàn chi tiết. Với ba phương án, người ta so sánh và chọn hướng.
Bài tập áp dụng trong 45 phút
- Chọn màn chi tiết sản phẩm của một sàn thương mại điện tử bạn dùng.
- Liệt kê mọi khối nội dung đang có trên đó (thường 12–20 khối).
- Xếp chúng theo thứ tự bạn nghĩ người mua cần, không theo thứ tự hiện tại.
- Vẽ 8 phác tay trong 8 phút.
- Chọn 2, vẽ lại ở mức xám số hoá với tên sản phẩm dài nhất bạn tìm được.
- Viết 5 chú thích hành vi bên lề.
Việc nên làm tiếp theo: làm xong, đưa hai phương án cho một người bạn không học thiết kế, hỏi “Nếu muốn biết món này dùng có bền không, em nhìn vào đâu trước?”. Câu trả lời của họ cho bạn biết phân cấp thông tin có hoạt động hay không, mà chưa cần một điểm màu nào.
Câu hỏi thường gặp
Wireframe là gì?
Là bản phác bố cục một màn hình, thể hiện các khối nội dung, thứ tự quan trọng và hành động chính, chưa có màu sắc hay hình ảnh hoàn thiện. Mục đích là thống nhất cấu trúc trước khi làm giao diện.
Wireframe và mockup khác nhau thế nào?
Wireframe tập trung vào bố cục và thứ tự thông tin, thường xám và đơn giản. Mockup là bản mô phỏng trông gần như sản phẩm thật với màu, phông, hình ảnh.
Có nên dùng lorem ipsum trong wireframe không?
Nên hạn chế. Chữ giả có độ dài đều và không tràn dòng, che mất các vấn đề bố cục mà nội dung thật như tên sản phẩm dài hay giá tiền nhiều chữ số sẽ làm lộ ra.
Vẽ wireframe bằng phần mềm gì?
Giấy bút cho phác thảo; Figma, Balsamiq hoặc Penpot cho bản số hoá. Nhiều nhóm dùng luôn Figma để sau này chuyển lên mức trung thực cao dễ hơn.
Wireframe cần chú thích những gì?
Những hành vi bản vẽ không thể hiện được: cách sắp xếp danh sách, khi nào nút bị vô hiệu, khối nào ẩn với ai, dữ liệu lấy từ đâu và ai sửa được.
