10 UX эвристик и дэшборды

Anastasiya Kuznetsova
2 min readAug 27, 2021

--

Решила тут применить 10 UX эвристик Якоба Нильсона к проектированию дэшбордов. Эвристики известные, классные и применимы к разного рода продуктам, поэтому проверять на них можно все. Их можно применять и к визуализациям в целом.

картинка отсюда

1. Видимость статуса системы. Пользователю всегда должно быть понятно, что происходит. В качестве примера можно взять заполнение кружочка прогрузки страницы. В дэшах помимо необходимости отображения самых важны данных в левой верхней части страницы, можно добавлять вывод даты обновления данных. Важная фича, которая очень помогает понимать состояние дел, а точнее актуальность данных. От Натальи Киселёвой (посмотрите ее страничку обязательно): название дэшборда, подсветка страницы, на которой находится человек, если дэшборд многостраничный.

2. Связь между системой и реальным миром. Для меня это какой-то понятный и консистентный нейминг, цветовые ассоциации, узнаваемые пользователями.

3. Пользовательская свобода и возможность контролировать систему. Помимо просто кучи фильтров бывает полезно добавлять кнопку «очистить» фильтры (+ очистить натыканные графики) , чтобы пользователь всегда мог откатиться назад, если что-то пошло не так.

4. Последовательность и стандарты. Стайлгайды нужны! Мессенджеры похожи друг на друга не просто так — нам просто легче пользоваться похожими вещами, и если везде иконка человека означает «ваш профиль», то идти против этого стандарта — глупо. Так что стайлгайд для дэшбордов, в рамках которого фильтры будут находиться в одном месте, верстка графиков будет стандартизирована, цвета подобраны и тд, сильно поможет пользователям осваивать новые дэшборды.

5. Предотвращение ошибок. Если вы используете какие-то экшны или другие скрытые действия, которые могут привести к изменению существующего представления. Обозначайте в явном виде, что клик на что-то приведёт к изменению всей визуализации.

6. Распознавание, а не вспоминание. Основная необходимая информация для пользования дэшбордов должна быть видна, чтобы пользователям не приходилось ее как-то дополнительно искать или вспоминать. Например, можно делать дополнительные подсказки об объектах в тултипах.

7. Гибкое и эффективное использование. Дайте пользователям возможность кастомизации, например, чтобы у них был выбор представления данных разными типами графиков. Для дэшбордов в Tableau можно дополнительно сказать о возможности создания custom view.

8. Эстетичный и минималистичный дизайн. Снова про стайлгайд, повышение data-ink ratio и гештальт принципы помогут с красотой. И подборка Ромы Бунина про дизайн дэшбордов!

9. Помогайте пользователям распознавать, диагностировать и устранять ошибки. Из плюсов, в дэшбордах сложно словить прямо такую ошибку. Но если вы, например, знаете, что при выборе маленького количества дат или когда количество наблюдений на дэшборде становится менее какого-то референтного значения, можно тоже выводить плашку о том, что данных для принятия решения недостаточно. От Натальи Киселёвой: контакты и имя автора в правом нижнем углу и ссылка на баг-трекер, чтобы было понято, куда бежать в случае чего.

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

--

--

Anastasiya Kuznetsova

Write about Data Visualization, BI and Tableau. Love sociology, space and urban analytics.