Щільність інформації в B2B SaaS: розробка інформаційних панелей для досвідчених користувачів і новачків
Як розробити щільні інформаційні панелі та таблиці B2B, які експерти зможуть швидко сканувати, не перевантажуючи нових користувачів: режими щільності, ієрархія, поступове розкриття інформації.
Основний винос
Щільні інтерфейси не є проблемою; неорганізовані є. Експерти хочуть отримати більше інформації на екрані, тому надайте їм її за допомогою сильної ієрархії, послідовного вирівнювання та діаграм, які використовують положення та довжину. Захистіть новачків розумними параметрами за замовчуванням і поступовим розкриттям і дозвольте людям вибирати рівень щільності, як це роблять системи проектування, такі як Carbon, для таблиць.
Щільність – це функція для експертів
Люди, які цілий день використовують інструмент B2B, як-от аналітики, агенти підтримки та оператори, часто вважають за краще бачити більше одночасно, оскільки прокручування та перемикання вкладок коштує їм часу. Якщо зробити все просторим заради чистого скріншота, це може сповільнити їхню роботу. Метою є інформація, яка є щільною, але легкою для сканування.
Нехай люди вибирають щільність
Системи проектування тепер вбудовують щільність у компоненти. Таблиця даних IBM Carbon, наприклад, пропонує п’ять висот рядків: від дуже маленької (24 пікселів) для високощільних макетів до дуже великої (64 пікселів) для легшого сканування, із середньою (40 пікселів) за умовчанням.
- Запропонуйте два або три параметри щільності, які запам’ятовуються кожному користувачеві.
- Змінюйте інтервал і висоту рядків, а не розмір шрифту чи контрастність.
- Тримайте сенсорні мішені достатньо великими на сенсорних пристроях незалежно від щільності.
Ієрархія робить щільність читабельною
Nielsen Norman Group визначає інформаційні панелі як візуалізацію, яка надає миттєву інформацію, з якою люди можуть швидко діяти, і рекомендує кодувати величини за допомогою довжини та 2D-положення, які люди читають найшвидше. На практиці: помістіть кілька чисел, які керують рішеннями, угорі, вирівняйте все за сіткою, використовуйте колір лише для значення (статус, сповіщення) і вирівняйте числа праворуч, щоб їх можна було порівнювати.
Захищайте новачків, не сповільнюючи експертів
Поступове розкриття зберігає розширені параметри доступними, але не заважає. Почніть нових користувачів із сфокусованого перегляду за замовчуванням, дозвольте їм додавати стовпці, фільтри та віджети за потреби та зберігайте перегляди, щоб експерти могли миттєво повернутися до своїх щільних налаштувань.
Рух у щільних інтерфейсах
На екранах із великою кількістю даних рух має пояснювати зміни, а не прикрашати: виділіть щойно оновлене значення, анімуйте рядок у його нове відсортоване положення або покажіть перехід на діаграмі, щоб люди могли стежити за тим, що змінилося. Будьте короткими та уникайте безперервної анімації, яка конкурує з даними.
Ключі Principle, які слід запам’ятати
- Експерти виграють від щільних екранів; дезорганізація є справжньою проблемою
- Запропонуйте налаштування щільності, змінюючи інтервали, а не розмір тексту чи контрастність
- Використовуйте довжину та позицію для чисел; колір лише для значення
- Поступове розкриття захищає новачків
- Використовуйте рух, щоб пояснити зміни в даних, а не для прикраси
Часті запитання
Джерела
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group