Thực hành UI/UX tốt

Xây dựng Dashboard với shinydashboard

Png Kee Seng

Researcher

Một số nguyên tắc

Rõ ràng về mục đích của dashboard
Chọn trực quan phù hợp
Dùng màu hiệu quả/trực quan
Rút gọn giá trị lớn
Tránh quá nhiều phần tử tương tác
Thiết kế dashboard sau cùng

Các điểm này áp dụng cho mọi dashboard
Danh sách không đầy đủ
Là gợi ý, không phải chân lý phổ quát

1. Rõ ràng về mục đích của dashboard

Dashboard dành cho ai?
Họ cần biết gì?
Hiểu rõ yêu cầu người dùng sẽ cải thiện trải nghiệm $^1$
Kịch bản: Tạo dashboard cho Sally
Mục đích: Báo cáo hiệu suất danh mục của cô ấy

¹ François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552

2. Chọn trực quan phù hợp

Áp dụng cho từng biểu đồ và cả dashboard
Dashboard gồm nhiều biểu đồ
Thông tin nào hữu ích cho Sally?
Luôn đánh đổi giữa chính xác và rõ ràng
"The truthful art" của Alberto Cairo $^1$

Các loại biểu đồ nên dùng theo Alberto Cairo.

¹ Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016

3. Dùng màu hiệu quả/trực quan

Theo quy ước, màu sắc mang ý nghĩa khác nhau
Ví dụ
- Đỏ thường báo cảnh báo hoặc nhắc nhở
- Xanh lá thường báo thành công

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Dùng màu không phù hợp cho thông báo thành công.

3. Dùng màu hiệu quả/trực quan

Theo quy ước, màu sắc mang ý nghĩa khác nhau
Ví dụ
- Đỏ thường báo cảnh báo/nhắc nhở; người dùng kỳ vọng như vậy
- Xanh lá thường báo thành công

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Dùng màu không phù hợp cho thông báo thành công.

Dùng màu phù hợp cho thông báo thành công.

4. Rút gọn giá trị lớn

Có thể hiển thị số trong shinydashboard
Hy sinh chút độ chính xác để rõ ràng hơn
- Nên làm tròn số lớn

round(2.324815454862,2)

[1] 2.32

Giá trị không rút gọn

Giá trị rút gọn

5. Tránh quá nhiều phần tử tương tác

Lưu ý số lượng phần tử tương tác
Quá nhiều có thể gây rối cho người dùng
Nhiều không phải lúc nào cũng tốt

Quá nhiều mô phỏng là không tốt.

¹ Hình: Freepik

6. Thiết kế dashboard sau cùng

Đừng vội thiết kế dashboard
- Gồm wireframe, thẩm mỹ, v.v.
Xác định mục đích trước
- Giúp chọn trực quan phù hợp

6. Thiết kế dashboard sau cùng

Đừng vội thiết kế dashboard
- Gồm wireframe, thẩm mỹ, v.v.
Xác định mục đích trước
- Giúp chọn trực quan phù hợp

"Mục đích: tạo dashboard cho Sally."

Cô ấy muốn xem hiệu suất danh mục
Cũng muốn theo dõi từng cổ phiếu
Giờ ta quyết định vị trí các thành phần

Ayo berlatih!

Xây dựng Dashboard với shinydashboard

Preparing Video For Download...