Bảng, KPI và sparkline
Bạn sẽ học được
- Cấu trúc một thẻ KPI đầy đủ.
- Cách hiển thị thay đổi so kỳ trước đúng hướng.
- Định dạng số Việt Nam và cách rút gọn.
- Khi nào dùng bảng và cách định dạng bảng.
- Sparkline dùng để làm gì và không để làm gì.
Khái niệm cốt lõi
Thẻ KPI là đơn vị thông tin nhỏ nhất của dashboard. Một thẻ đủ ý có năm phần:
┌──────────────────────────────┐
│ Doanh thu 30 ngày │ ← nhãn + khoảng thời gian
│ 1,25 tỷ ₫ │ ← giá trị, đơn vị
│ ▲ 8,2% so 30 ngày trước │ ← thay đổi + nền so sánh
│ mục tiêu 1,30 tỷ (96%) │ ← mục tiêu
│ ╱╲___╱╲__ │ ← sparkline
└──────────────────────────────┘Thiếu nhãn thời gian, con số vô nghĩa. Thiếu nền so sánh, người xem không biết tốt hay xấu. Thiếu mục tiêu, không biết có cần hành động.
Thay đổi so kỳ trước
Ba điều cần chốt cho mỗi mũi tên:
- Tuyệt đối hay tương đối: +8,2% tương đối hay +95 triệu tuyệt đối?
- Tăng là tốt hay xấu: doanh thu tăng là tốt; tỷ lệ huỷ tăng là xấu.
- Nền so sánh: kỳ trước, cùng kỳ năm trước, hay mục tiêu?
Màu phải theo ý nghĩa, không theo chiều mũi tên:
| Chỉ số | Tăng | Giảm |
|---|---|---|
| Doanh thu | Tốt (xanh) | Xấu (đỏ) |
| Tỷ lệ huỷ | Xấu (đỏ) | Tốt (xanh) |
| Số lỗi | Xấu | Tốt |
| AOV | Tốt | Xấu |
Một lỗi phổ biến: tô xanh mọi mũi tên đi lên. Với tỷ lệ huỷ, điều đó nói ngược sự thật.
Định dạng số
Quy ước Việt Nam:
- Dấu chấm phân cách hàng nghìn:
1.250.000. - Dấu phẩy thập phân:
12,5%. - Đơn vị tiền sau số:
1.250.000 ₫.
Rút gọn khi không cần chính xác tuyệt đối:
| Giá trị | Hiển thị |
|---|---|
| 1.250.000.000 | 1,25 tỷ |
| 125.000.000 | 125 triệu |
| 12.500 | 12,5 nghìn |
| 0,125 | 12,5% |
Một thẻ không nên trộn hai cách rút gọn. Nếu cần chính xác, dùng bảng hoặc tooltip.
Ngưỡng và trạng thái
Con số trần không cho biết có cần hành động. Thêm ngưỡng:
Tỷ lệ huỷ: 2,4% [bình thường < 3%] → xanh
Tỷ lệ huỷ: 3,8% [cảnh báo 3–5%] → vàng
Tỷ lệ huỷ: 6,1% [nghiêm trọng > 5%] → đỏNgưỡng phải được chốt với người dùng, không do người làm dashboard tự đặt. Ghi ngưỡng ngay trên thẻ (tooltip hoặc dòng nhỏ) để người xem hiểu vì sao thẻ đổi màu.
Sparkline
Sparkline là biểu đồ nhỏ không trục, chỉ cho thấy hình dạng xu hướng trong 10–30 điểm gần nhất.
Dùng khi:
- Cần thêm ngữ cảnh cho một KPI.
- Không cần đọc giá trị chính xác.
- Xu hướng quan trọng hơn con số.
Không dùng khi:
- Người xem cần so sánh nhiều chuỗi.
- Dữ liệu có mùa vụ mạnh — hình dạng gây hiểu sai.
- Giá trị tuyệt đối quan trọng hơn xu hướng.
Sparkline không có trục nên không được dùng để kết luận độ lớn. Nó chỉ trả lời "đang lên hay xuống".
Bảng
Bảng phù hợp khi người xem cần tra cứu hoặc so sánh chính xác nhiều dòng.
Quy ước:
- Căn phải số, căn trái chữ.
- Tiêu đề cột rõ đơn vị: "Doanh thu (₫)".
- Sắp xếp mặc định có ý nghĩa (doanh thu giảm dần, ngày tăng dần).
- Giới hạn 5–10 dòng trên dashboard; phần còn lại chuyển trang chi tiết.
- Tổng ở cuối bảng nếu có nhiều dòng số.
- Không tô màu cả dòng; tô ô cần chú ý.
Định dạng có điều kiện giúp quét nhanh, nhưng chỉ dùng một thang màu. Tô ba màu khác nhau cho ba ngưỡng trong một bảng thường gây rối hơn là giúp.
Thực hành
- Viết cấu trúc thẻ KPI cho tỷ lệ huỷ đơn.
- Xác định chiều "tốt" cho 5 chỉ số bạn biết.
- Định dạng lại các số
1250000000,0.125,12500theo quy ước Việt Nam. - Đặt ba ngưỡng cho tỷ lệ lỗi thanh toán và giải thích.
- Chọn 5 cột cho bảng sản phẩm bán chạy và sắp xếp mặc định.
Lỗi thường gặp
| Triệu chứng | Nguyên nhân | Cách sửa |
|---|---|---|
| Mũi tên xanh cho chỉ số xấu | Tô màu theo chiều, không theo nghĩa | Đặt quy tắc tốt/xấu |
| Không biết so với gì | Thiếu nền so sánh | Ghi rõ kỳ so sánh |
| Số quá dài | Không rút gọn | Dùng tỷ/triệu/nghìn |
| Sai dấu thập phân | Định dạng kiểu Mỹ | Dùng dấu phẩy thập phân |
| Thẻ đổi màu không rõ lý do | Ngưỡng ẩn | Hiện ngưỡng trong tooltip |
| Bảng 30 dòng trên dashboard | Không giới hạn | Top 10 + liên kết chi tiết |
Tóm tắt
- Thẻ KPI cần nhãn, giá trị, thay đổi, nền so sánh, mục tiêu.
- Màu theo ý nghĩa chỉ số, không theo chiều mũi tên.
- Định dạng số theo quy ước Việt Nam, rút gọn khi cần.
- Ngưỡng phải chốt với người dùng và hiển thị được.
- Sparkline chỉ cho hình dạng; bảng cho giá trị chính xác.
Dùng ← → để chuyển bài