Плотность информации в B2B SaaS: создание информационных панелей для опытных пользователей и новичков
Как создавать плотные информационные панели и таблицы B2B, которые эксперты смогут быстро просматривать, не перегружая новых пользователей: режимы плотности, иерархия, постепенное раскрытие информации.
Главное
Плотные интерфейсы не являются проблемой; неорганизованные. Экспертам нужно больше информации на экране, поэтому дайте им строгую иерархию, последовательное выравнивание и диаграммы, в которых используются положение и длина. Защитите новичков с помощью разумных настроек по умолчанию и постепенного раскрытия информации, а также позвольте людям выбирать уровень плотности, как это делают системы проектирования, такие как Carbon, для таблиц.
Плотность — функция для экспертов
Люди, которые целый день используют B2B-инструмент, например аналитики, агенты службы поддержки и операторы, часто предпочитают видеть больше сразу, поскольку прокрутка и переключение вкладок отнимают у них время. Если сделать все просторным ради чистого скриншота, это может замедлить работу. Целью является получение плотной, но легко сканируемой информации.
Пусть люди выбирают плотность
Системы проектирования теперь создают плотность компонентов. Например, таблица данных IBM Carbon предлагает пять значений высоты строк: от очень маленькой (24 пикселя) для очень плотных макетов до очень большой (64 пикселя) для упрощения сканирования, со средней (40 пикселей) по умолчанию.
- Предлагайте две или три настройки плотности, запоминаемые для каждого пользователя.
- Измените интервал и высоту строки, а не размер шрифта или контрастность.
- Сохраняйте сенсорные объекты достаточно большими на сенсорных устройствах независимо от их плотности.
Иерархия делает плотность читабельной
Nielsen Norman Group определяет информационные панели как средства визуализации, которые дают людям оперативную информацию, с которой они могут быстро действовать, и рекомендует кодировать величины с помощью длины и двумерного положения, которые люди читают быстрее всего. На практике: поместите несколько чисел, которые определяют решения, вверху, выровняйте все по сетке, используйте цвет только для обозначения (статус, оповещения) и выровняйте числа по правому краю, чтобы их можно было сравнивать.
Защитите новичков, не замедляя работу экспертов
Прогрессивное раскрытие информации делает расширенные возможности доступными, но не мешающими. Начинайте работу с новыми пользователями с целенаправленным представлением по умолчанию, позволяйте им добавлять столбцы, фильтры и виджеты по мере необходимости, а также сохраняйте представления, чтобы эксперты могли мгновенно вернуться к плотной настройке.
Движение в плотных интерфейсах
На экранах с большим количеством данных движение должно объяснять изменения, а не украшать: выделять только что обновленное значение, анимировать строку в новую отсортированную позицию или показывать переход на диаграмме, чтобы люди могли следить за тем, что изменилось. Будьте краткими и избегайте непрерывной анимации, которая конкурирует с данными.
Ключевые принципы
- Эксперты выигрывают от плотных экранов; дезорганизация - это настоящая проблема
- Предлагайте настройки плотности, изменяя интервал, а не размер шрифта или контрастность.
- Используйте длину и положение чисел; цвет только для смысла
- Прогрессивное раскрытие информации защищает новичков
- Используйте движение для объяснения изменений в данных, а не для украшения
Частые вопросы
Источники
- Data table usage — Система карбонового дизайна (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group