Принципы проектирования интерфейсов дашбордов: принципы гештальта, Data-ink ratio и принцип «пусть потеет машина»

Все аналитика строят дашборды, но важно строить их так, чтобы пользователь понял его за несколько секунд и не тратил силы на поиск нужной информации.

Когда мы проектируем дашборды, мы работаем не только с данными, но и с особенностями человеческого восприятия. Именно поэтому хорошие интерфейсы редко появляются случайно, обычно за ними стоят вполне конкретные принципы.

В этой статье я расскажу о трех подходах, которыми пользуюсь практически в каждом дашборде:

• принципы гештальта;

• Data-ink ratio Эдварда Тафти;

• принцип «пусть потеет машина, а не пользователь».

1. Принципы гештальта

Принципы гештальта появились в начале XX века как часть психологии восприятия. Их основная идея очень проста: человек воспринимает не отдельные объекты, а цельные структуры.

Именно поэтому расположение элементов на экране зачастую влияет на понимание информации сильнее, чем сами данные.

Существует около десяти принципов гештальта, но при проектировании дашбордов чаще всего оказываются полезны всего три.

1. Принцип близости

Элементы, расположенные рядом друг с другом, воспринимаются как связанные.

На первый взгляд правило кажется очевидным, но именно оно отвечает за то, насколько быстро пользователь ориентируется в интерфейсе.

Где применять

Тултипы

Возле названия метрики обычно располагаются цветной индикатор и значение. Благодаря близости пользователь мгновенно понимает, какие элементы относятся друг к другу.

Лучше размещать фильтр рядом с графиком, которым он управляет, или вообще внутри области графика. Если собрать все фильтры в одну большую панель, связь между ними становится менее очевидной.

Группы графиков

Если дашборд состоит из нескольких тематических блоков (например, география, категории, каналы), заголовок должен находиться максимально близко к соответствующим графикам.

Когда принцип близости нарушается, пользователю приходится искать глазами, к чему относится каждый элемент.

2. Принцип общей области

Если несколько объектов находятся внутри одного контейнера, имеют общий фон или рамку, мозг автоматически воспринимает их как одну группу. Даже если между ними остается достаточно большое расстояние.

Где применять

KPI-карточки

В карточках обычно размещается сразу несколько элементов: название, значение, динамика, мини-график.

Общий фон позволяет воспринимать всю карточку как единую сущность.

Группы фильтров

В операционных дашбордах фильтров может быть несколько десятков.

Вместо длинного списка гораздо удобнее объединить их в смысловые группы:

• параметры товара;

• параметры пользователя;

• география;

• временные интервалы.

Подграфики (Small multiples)

Когда один график разбивается на несколько небольших однотипных графиков, общая область помогает воспринимать их как части одной визуализации.

Этот принцип особенно полезен в перегруженных интерфейсах, так как он позволяет навести визуальный порядок без удаления информации.

3. Принцип сходства

Объекты с одинаковыми визуальными характеристиками воспринимаются как связанные, даже если находятся далеко друг от друга.

Где применять

Единая цветовая схема

Если категория «Пионы» розовая на одном графике, она должна оставаться розовой на остальных.

Пользователь перестает заново расшифровывать легенду и начинает считывать информацию автоматически.

Одинаковый цвет итоговых значений и динамики

Например, тотал значения заказов показаны в виде барчартов, а изменение во времени, через area-график. Если для одного и того же показателя используется одинаковый цвет и в тотале, и в динамике, пользователь легче связывает эти визуальные элементы между собой.

Единый стиль KPI

Одинаковая структура карточек (значение → WoW → мини-график) позволяет воспринимать их как единую систему показателей.

Главная идея принципа сходства проста: повторяющийся визуальный язык снижает когнитивную нагрузку.

2. Data-ink ratio

Практически любой, кто интересуется визуализацией данных, рано или поздно сталкивается с именем Эдварда Тафти. Именно он сформулировал один из самых известных принципов информационного дизайна — Data-ink ratio.

В 1980-х графики печатались типографским способом, поэтому Тафти предложил оценивать отношение полезных чернил ко всем чернилам, использованным для построения графика.

Сегодня чернила уже никто не экономит, но сама идея остается актуальной.

Что такое полезные чернила

Полезные чернила — это всё, что непосредственно передает данные:

• линии;

• столбцы;

• подписи;

• значения;

• необходимые оси.

Все остальное можно считать декоративными элементами:

• лишние сетки;

• тяжелые рамки;

• объемные 3D-эффекты;

• градиенты;

• чрезмерное количество цветов;

• перегруженные легенды.

Чем выше Data-ink ratio, тем меньше пользователь отвлекается на оформление и тем быстрее воспринимает данные.

Пример

На первом графике можно увидеть типичные элементы, которые не добавляют информации:

• насыщенный фон;

• толстые линии сетки;

• разноцветные столбцы;

• массивную легенду.

После удаления всего лишнего остается только то, что действительно помогает читать данные.

Конечно, принцип не означает, что нужно убрать абсолютно всё.

Хорошая визуализация — это баланс между минимализмом и удобством чтения.

3. Пусть потеет машина, а не пользователь

Есть еще один принцип, который редко встречается в книгах по дизайну, но постоянно помогает при разработке BI-интерфейсов.

Любую работу, которую может выполнить система, должна выполнять система.

Чем меньше пользователь считает, ищет или вспоминает самостоятельно, тем лучше становится пользовательский опыт. Рассмотрим на примерах ниже.

Делайте тултипы информативнее

Вместо одного значения можно сразу показать:

• отклонение от плана;

• изменение относительно прошлой недели;

• дополнительные показатели для интерпретации результата.

Тогда пользователю не придется открывать несколько графиков или считать проценты самостоятельно.

Добавляйте день недели

Если метрика имеет ярко выраженную недельную сезонность, полезно показывать в тултипе не только дату, но и день недели.

Тогда становится понятно, связано ли изменение с выходными или это действительно аномалия.

Используйте относительные даты

Во многих BI-системах пользователи постоянно переключают диапазон дат вручную.

Вместо этого можно сразу использовать:

• Last 30 days;

• Last 90 days;

• Last month.

Дашборд всегда будет открываться с актуальными данными.

Настраивайте значения по умолчанию

Посмотрите логи использования или просто поговорите с пользователями.

Если большинство сразу меняет определенный фильтр после открытия дашборда, возможно, именно это значение и должно стать значением по умолчанию.

Каждое такое небольшое улучшение экономит пользователю всего несколько секунд.

Но если дашбордом пользуются сотни людей каждый день, эффект оказывается весьма заметным.

Заключение

Все три принципа решают одну и ту же задачу, они уменьшают когнитивную нагрузку на пользователя.

• Принципы гештальта помогают правильно организовать интерфейс.

• Data-ink ratio избавляет визуализацию от лишнего шума.

• Принцип «пусть потеет машина» переносит рутинную работу с пользователя на систему.

По отдельности это небольшие улучшения. Но именно из таких деталей складываются дашборды, которыми действительно удобно пользоваться.

Об авторе

Меня зовут Валерия Смирнова, я уже более 6 лет работаю в продуктовой и в BI-аналитике. Веду канал про BI и визуализацию данных и аналитике.