Design

Bố trí & Thiết kế Dashboard

Nguyên tắc layout, màu sắc, typography và UX để tạo dashboard chuyên nghiệp, dễ đọc và dễ ra quyết định.

Layout Patterns
3 layout phổ biến nhất cho Power BI dashboard
Layout 1 — Executive Dashboard (KPIs trên, charts dưới)
₫12.4B
Total Revenue
+18.5%
YoY Growth
8,241
Total Orders
1,502
Customers
Revenue by Month
Revenue by Category
Electronics 45%
Fashion 25%
Food 18%
Layout 2 — Analytical Dashboard (Filters trái, charts phải)
YEAR
2024
2023
CATEGORY
All
Electronics
₫12.4B
Revenue
32.4%
Margin
Trend Line
Rule 01
F-Pattern Reading
Người dùng đọc theo pattern chữ F — trái qua phải, trên xuống dưới. Đặt thông tin quan trọng nhất ở góc trên trái.
Rule 02
Hierarchy rõ ràng
KPI Cards hàng đầu (tóm tắt). Charts chính giữa (detail). Filters/slicers cạnh bên hoặc trên cùng.
Rule 03
Alignment & Grid
Dùng grid 4px hoặc 8px. Snap to grid = ON. Tất cả elements phải align — lệch 1px trông rất sai.
Rule 04
White Space
Đừng sợ khoảng trống. Padding tối thiểu 8px giữa visuals. Chart không nên chiếm >80% diện tích card.
Rule 05
Tối đa 6-8 visuals/trang
Quá nhiều chart = cognitive overload. Mỗi trang chỉ trả lời 1-2 câu hỏi. Dùng drill-through thay vì nhét hết vào 1 trang.
Rule 06
Mobile-responsive
Tạo Phone Layout riêng trong View → Mobile Layout. Stack visuals theo chiều dọc. Ẩn bớt non-essential charts.
Color System
Chọn màu đúng — không phải chọn màu đẹp
Nguyên tắc: Màu phải mang ý nghĩa, không chỉ để đẹp. Xanh = tốt/tăng, Đỏ = xấu/giảm, Vàng = highlight/chú ý. Giữ nhất quán trong toàn bộ report.
Primary Blue
#2F6FD4
Main charts, title bars, interactive elements
Success Green
#21BF73
Positive values, growth, targets met
Alert Red
#E74C3C
Negative values, below target, alerts
Warning Amber
#F39C12
Caution, approaching threshold
Secondary Purple
#8E44AD
Secondary data series, categories
Neutral Gray
#7F8C8D
Background series, non-focus data
Cách áp dụng Theme trong Power BI
  1. Vào View → Themes → Browse for themes để load file JSON theme
  2. Hoặc Customize current theme → chọn Primary Color, Secondary Color
  3. Export theme JSON để dùng lại: View → Themes → Save current theme
  4. Áp dụng cho tất cả visuals cùng lúc — không phải format từng cái
Tránh: Dùng quá nhiều màu (>5 màu khác nhau). Dùng màu tương tự nhau (gây nhầm lẫn). Màu sáng chói trên background trắng (gây mỏi mắt).
Typography Scale
Font size hierarchy tạo visual order
Page Title
Dashboard Title
24px Bold · Page header only
Section Title
Chart Title
16-18px Semibold · Visual titles
KPI Value
₫12.4B
32-40px Bold · Card callout values
Data Label
12,345,678
9-11px Regular · Axis labels, data labels
Body Text
Tooltip text, descriptions
12-14px Regular · Tooltips, labels
Font khuyên dùng: Segoe UI (mặc định Power BI), Calibri, DM Sans, Inter. Tránh font serif (Times New Roman) — khó đọc trên màn hình.
Slicer & Filter Design
UX cho filter controls
Đặt Slicer ở đâu?
Header bar (ngang) cho Date/Year — luôn hiển thị. Right panel cho Category/Region — dùng panel tính năng. Tránh trộn lẫn slicer giữa các charts.
Slicer Sync
View → Sync slicers → chọn slicer → tick các page cần sync. Slicer Date ở header nên sync toàn bộ pages.
Date Slicer best practices
Dùng Between style cho date range. Dùng Dropdown cho Year/Quarter để tiết kiệm space. Relative date slicer (Last 3 months) tốt hơn absolute.
Clear Filters button
Thêm Button (Insert → Button → Reset) → Action = Clear All Slicers. Người dùng thường bị lost trong filter state — nút này cứu sống họ.
Conditional Slicer Style
Format slicer: Selection controls → Single Select ON khi chỉ cần 1 giá trị. Show Select All = ON cho multi-select.
Performance tip
Slicer trên high-cardinality column (CustomerID hàng triệu) sẽ rất chậm. Dùng Dropdown style thay List, hoặc search slicer. Cân nhắc filter thay slicer.
Conditional Formatting
Màu tự động theo giá trị — không cần custom visual
Background Color theo Rule
Matrix → Format → Cell elements → Background color → Rules. Ví dụ: Profit % > 30% = xanh, 15-30% = vàng, <15% = đỏ.
Data Bars trong Table
Format → Cell elements → Data bar → ON. Hiện bar chart nhỏ ngay trong cell — không cần visual riêng.
Icon Sets (KPI arrows)
Format → Cell elements → Icons. Chọn Arrow set. Rule: >0 = mũi tên xanh lên, <0 = mũi tên đỏ xuống, = 0 = dash vàng.
Font Color theo Measure
Format → Cell elements → Font color → Field value → Tạo measure trả về màu hex: IF([Growth]>0,"#0ECB81","#F6465D")
Bookmarks & Navigation
Tạo interactive navigation giữa các views
  1. Tạo 2 states: state A (chart 1 visible) và state B (chart 2 visible). Hide chart cần ẩn.
  2. View → Bookmarks → Add Bookmark cho từng state. Rename cho dễ nhớ.
  3. Insert → Button. Format → Action = Bookmark → chọn target bookmark.
  4. Dùng để tạo Tab navigation (Sales / Inventory / Finance) trên cùng 1 page.
  5. Dùng Selection Pane (View → Selection) để manage visibility của các visuals.
Use case hay: Nút toggle Chart ↔ Table — cùng data, người dùng chọn cách xem. Bookmark Chart = chart visible, Table hidden. Bookmark Table = ngược lại.
Custom Tooltip Page
Rich tooltip thay vì tooltip mặc định
  1. Tạo page mới → Format page → Page information → Allow use as tooltip = ON
  2. Set canvas size = 320×240px (Tooltip size trong Page information)
  3. Thêm visuals vào page này — sẽ hiện khi hover vào visual khác
  4. Vào visual cần gán → Format → General → Tooltips → Type = Report page → chọn trang vừa tạo
Ví dụ: Hover vào bar chart của 1 tháng → tooltip page hiện mini line chart trend của 12 tháng + top 3 products tháng đó.