Bố cục và thứ bậc thị giác

Bạn sẽ học được

• Cách sắp xếp khối thông tin theo mức quan trọng.
• Vì sao vị trí trên cùng bên trái quan trọng nhất.
• Dùng kích thước, khoảng trắng và căn lề để dẫn mắt.
• Giới hạn số khối thông tin trên một màn hình.
• Thiết kế dashboard đọc được trên điện thoại.

Khái niệm cốt lõi

Bố cục là cách trả lời câu hỏi "người xem nhìn đâu trước". Mắt người đọc theo thứ tự:

1. Vùng nổi bật nhất — kích thước lớn, màu đậm, hoặc đặt ở góc trên trái.
2. Theo hướng đọc — từ trái sang phải, trên xuống dưới (kiểu F với nội dung dày, Z với trang thưa).
3. Theo đường dẫn — đường kẻ, căn lề, khoảng trắng dẫn mắt từ khối này sang khối khác.

Nếu mọi thứ đều nổi bật, không có gì nổi bật. Thứ bậc thị giác là kỹ năng chính của thiết kế dashboard.

Bố cục ba tầng

Một bố cục dashboard điều hành phổ biến:

┌─────────────────────────────────────────────┐
│  Tiêu đề + khoảng thời gian + lần cập nhật  │
├──────────┬──────────┬──────────┬────────────┤
│ KPI 1    │ KPI 2    │ KPI 3    │ KPI 4      │  ← hàng 1: tổng quan
├──────────┴──────────┴──────────┴────────────┤
│  Xu hướng chính (biểu đồ đường lớn)         │  ← hàng 2: đi đâu
├─────────────────────┬───────────────────────┤
│  Phân rã theo chiều │  Bảng chi tiết        │  ← hàng 3: ở đâu
└─────────────────────┴───────────────────────┘

Nguyên tắc:

• Hàng 1 trả lời "đang thế nào" trong 5 giây.
• Hàng 2 trả lời "đang đi về đâu".
• Hàng 3 trả lời "ở đâu khác" và cho phép đi sâu.

Khối quan trọng nhất chiếm diện tích lớn nhất. Đừng chia đều mọi khối — chia đều nghĩa là không có gì quan trọng.

Kích thước và khoảng trắng

• Kích thước: chỉ số chính lớn gấp 2–3 lần chỉ số phụ. Số liệu nên là phần tử lớn nhất trong thẻ KPI.
• Khoảng trắng: khoảng trắng giữa các nhóm lớn hơn khoảng trắng trong nhóm. Đây là cách rẻ nhất để tạo nhóm mà không cần đường kẻ.
• Căn lề: mọi thẻ cùng một lưới. Lệch vài pixel trông như lỗi, không như phong cách.
• Đường kẻ: dùng ít. Nếu đã có khoảng trắng tạo nhóm, không cần thêm viền.

Quy tắc thực dụng: nếu phải thêm một đường kẻ để tách hai khối, thử tăng khoảng trắng trước.

Giới hạn số khối

Trên một màn hình:

• 3–7 khối thông tin là vừa.
• Hơn 10 khối thì người xem bỏ qua phần dưới.
• Nội dung dưới màn hình đầu chỉ được xem khi có lý do cụ thể.

"Nội dung trên màn hình đầu" (above the fold) là toàn bộ những gì thấy mà không cần cuộn. Quyết định quan trọng phải nằm trong vùng này.

Nếu có quá nhiều nội dung, chia thành nhiều tab theo câu hỏi, không nhồi vào một trang dài.

Điện thoại

Dashboard thường được xem trên điện thoại khi đang di chuyển. Thiết kế phải:

• Xếp dọc một cột.
• Chỉ giữ 3–5 khối quan trọng nhất; phần còn lại ẩn sau "xem thêm".
• Chữ tối thiểu 14px, số liệu 24px trở lên.
• Biểu đồ đơn giản: một đường hoặc một chuỗi cột, không nhiều lớp.
• Không dùng bảng nhiều cột — chuyển thành danh sách thẻ.

Kiểm tra trên màn hình 375px trước khi xuất bản, không chỉ trên máy tính.

Tiêu đề và ngữ cảnh

Mỗi khối cần trả lời được, chỉ bằng tiêu đề và nhãn:

• Chỉ số gì?
• Đơn vị gì?
• Khoảng thời gian nào?
• So sánh với gì?

Ví dụ tiêu đề tốt: "Doanh thu 30 ngày gần nhất (so với 30 ngày trước)". Tiêu đề kém: "Doanh thu".

Thông tin cập nhật ("cập nhật 10:15") nên đặt ở đầu trang, một lần, không lặp ở mọi thẻ.

Thực hành

1. Vẽ phác bố cục ba tầng cho một dashboard bán hàng.
2. Chỉ ra khối nào nên lớn nhất và vì sao.
3. Sửa một tiêu đề widget mơ hồ thành tiêu đề đủ ngữ cảnh.
4. Kiểm tra một dashboard thật trên màn hình 375px và ghi ba vấn đề.
5. Đề xuất cách tách một dashboard 15 khối thành hai trang.

Lỗi thường gặp

Tóm tắt

• Thứ bậc thị giác quyết định người xem nhìn đâu trước.
• Bố cục ba tầng: tổng quan → xu hướng → phân rã.
• Khối quan trọng nhất lớn nhất; không chia đều.
• Giữ 3–7 khối trên màn hình đầu.
• Thiết kế và kiểm tra trên điện thoại 375px.