Mật độ thông tin trong B2B SaaS: Thiết kế bảng điều khiển cho người dùng thành thạo và người mới
Cách thiết kế bảng và bảng điều khiển B2B dày đặc mà các chuyên gia có thể quét nhanh chóng mà không gây choáng ngợp cho người dùng mới: chế độ mật độ, phân cấp, tiết lộ lũy tiến.
Điểm chính
Giao diện dày đặc không phải là vấn đề; những người vô tổ chức là. Các chuyên gia muốn có nhiều thông tin hơn trên mỗi màn hình, vì vậy hãy cung cấp cho họ thông tin có thứ bậc rõ ràng, căn chỉnh nhất quán và các biểu đồ sử dụng vị trí và độ dài. Bảo vệ người mới sử dụng bằng các giá trị mặc định hợp lý và tiết lộ lũy tiến, đồng thời cho phép mọi người chọn mức mật độ, giống như các hệ thống thiết kế như Carbon thực hiện đối với bảng.
Mật độ là một tính năng dành cho các chuyên gia
Những người sử dụng công cụ B2B cả ngày, chẳng hạn như nhà phân tích, đại lý hỗ trợ và nhà điều hành, thường thích xem nhiều hơn cùng một lúc vì việc cuộn và chuyển đổi tab sẽ khiến họ mất thời gian. Việc làm cho mọi thứ trở nên rộng rãi để có một ảnh chụp màn hình rõ ràng có thể khiến công việc của họ chậm hơn. Mục tiêu là thông tin dày đặc nhưng dễ quét.
Hãy để mọi người chọn mật độ
Hệ thống thiết kế bây giờ xây dựng mật độ thành các thành phần. Ví dụ: bảng dữ liệu Carbon của IBM cung cấp năm chiều cao hàng, từ cực nhỏ (24px) cho bố cục có mật độ cao đến cực lớn (64px) để quét dễ dàng hơn, với mặc định là trung bình (40px).
- Cung cấp hai hoặc ba cài đặt mật độ, được ghi nhớ cho mỗi người dùng.
- Thay đổi khoảng cách và chiều cao hàng, không phải kích thước phông chữ hoặc độ tương phản.
- Giữ mục tiêu cảm ứng đủ lớn trên thiết bị cảm ứng bất kể mật độ.
Hệ thống phân cấp làm cho mật độ có thể đọc được
Nielsen Norman Group định nghĩa bảng thông tin là hình ảnh trực quan cung cấp thông tin nhanh chóng mà mọi người có thể hành động nhanh chóng và đề xuất số lượng mã hóa có độ dài và vị trí 2D mà mọi người đọc nhanh nhất. Trong thực tế: đặt một số số đưa ra quyết định lên trên cùng, sắp xếp mọi thứ vào một lưới, chỉ sử dụng màu sắc để thể hiện ý nghĩa (trạng thái, cảnh báo) và căn phải các số để có thể so sánh.
Bảo vệ người mới mà không làm chậm các chuyên gia
Tiết lộ lũy tiến giúp cung cấp các tùy chọn nâng cao nhưng không phù hợp. Bắt đầu với người dùng mới bằng chế độ xem mặc định tập trung, cho phép họ thêm cột, bộ lọc và tiện ích khi họ cần, đồng thời lưu chế độ xem để các chuyên gia có thể quay lại thiết lập dày đặc của họ ngay lập tức.
Chuyển động trong các giao diện dày đặc
Trong màn hình nặng về dữ liệu, chuyển động sẽ giải thích sự thay đổi chứ không phải trang trí: đánh dấu một giá trị vừa cập nhật, tạo hoạt ảnh cho một hàng vào vị trí được sắp xếp mới hoặc hiển thị chuyển đổi biểu đồ để mọi người có thể theo dõi những gì đã di chuyển. Giữ nó ngắn gọn và tránh hoạt ảnh liên tục cạnh tranh với dữ liệu.
Nguyên tắc chính cần nhớ
- Các chuyên gia được hưởng lợi từ màn hình dày đặc; sự vô tổ chức là vấn đề thực sự
- Cung cấp cài đặt mật độ bằng cách thay đổi khoảng cách, không phải kích thước loại hoặc độ tương phản
- Sử dụng độ dài và vị trí cho các con số; màu sắc chỉ mang ý nghĩa
- Tiết lộ lũy tiến bảo vệ người mới
- Sử dụng chuyển động để giải thích những thay đổi trong dữ liệu chứ không phải để trang trí
Câu hỏi thường gặp
Nguồn
- Data table usage — Hệ thống thiết kế carbon (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group