4 дня до повышения цен в UPROCK! Распродажа! «С 0 до Middle+» + курс «Креативная айдентика»  в подарок!

Как сделать хороший дашборд

Автор статьи:
,

Введение

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

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

Что такое дашборд

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

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

Их можно создавать в различных программах для работы с данными, таких как Excel, Tableau, Power BI и т. д.

Пример дашборда в мобильном приложении

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

Этот инструмент используют буквально везде. Поскольку пользователями дашбордов являются и их создатели, и непосредственно заказчики, программные продукты для работы с дашбордами содержат просмотрщик и редактор и для той, и для другой категории пользователей. Дашборды используют принципы построения интерфейсов, а также методы улучшения UX и повышения Usability.

Задачи и особенности оформления дашборда

У дашбордов есть вполне конкретные задачи, под которые их создают:

  • Аккумуляция информации в одном месте. На дашбордах собирают основные сводные показатели. Таким образом, пользователь освобождается от изучения различных источников данных, таких как таблицы, списки или отчеты.
  • Автоматизация аналитики. С помощью подобного интерфейса можно отобразить всю информацию для анализа. Различные данные визуально оформлены, поэтому на это не нужно тратить свое время и силы.
  • Экономия времени. Дашборды помогают сэкономить время и быстрее принимать решения. Поскольку информация на них представлена уже в готовом виде, а ключевые данные всегда под рукой, просмотр и аналитика проходят намного быстрее, а значит, принять решение становится проще.
  • Помогают увидеть все слабые места. Приборную панель автомобиля тоже можно назвать дашбордом. Поскольку на ней собраны все самые важные данные и нет ничего лишнего, держать ситуацию под контролем становится намного проще.
Спидометр OBD. Приборная панель автомобиля как дашборд — apkpr.com

Оформление дашбордов играет важную роль в их эффективности. Ниже мы рассмотрим некоторые особенности оформления дашбордов:

1. Простота и понятность.

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

2. Цветовая гамма.

Цветовая гамма должна быть гармоничной и не вызывать напряжения глаз. Используйте не более трех-четырех цветов, чтобы не создавать сложности восприятия.

3. Форматирование текста.

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

4. Использование иконок.

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

5. Адаптивность.

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

История появления дашбордов

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

10 век. Диаграмма движения небесных тел

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

1770-е гг. Небесные глобусы Коперника и Птолемея

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

Аудитория пользователей

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

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

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

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

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

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

Vladislav Vedenskii

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

Портрет аудитории

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

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

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

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

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

Разновидности дашбордов

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

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

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

Пример стратегического дашборда — alexkolokolov.com

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

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

Как создать хороший дашборд

Чтобы создать хороший дашборд, необходимо помнить о важных правилах.

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

Специалисты по созданию дашбордов дают несколько простых, но действенных советов:
01
Важно улавливать суть того, что вы хотите показать и показывать это максимально просто.
02
Не стоит забывать о сравнении.
03
Лучше ставить данные для сравнения рядом.
04
Сопровождение — лучшая помощь к пониманию важных данных.
05
Меняйте точку зрения — смотреть с разных сторон на одни и те же данные будет полезно, ведь это поможет придумать новые идеи.
06
Чаще задавайте вопрос «почему?».
07
Располагайте данные в логическом порядке, а не хаотично.
08
Выбирайте тот тип визуализации данных, который упростит восприятие информации. Помните о принципе пустоты — на вашем интерфейсе не должно быть ничего лишнего.
09
Подпись к данным или изображениям должна быть на самом графике. Наш мозг воспринимает увиденное целиком, так у человека получится быстрее все понять и сделать выводы.

Самые популярные способы визуализации данных

Круговая диаграмма

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

Гистограмма

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

Столбчатая диаграмма

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

Линейная диаграмма

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

Диаграмма области

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

Японские свечи

Зачастую применяют в трейдинге. Одна свеча покажет изменения за определенный период.

Хороший дашборд

Рассмотрим пример хорошего дашборда. Это HR-платформа. Обратите внимание, что данный дашборд отображает всю нужную информацию и выполнен при этом весьма лаконично.

purrweb.com

Мы видим отсутствие информационной и цветовой перегрузки. Использованы всего три цвета, а все нужные цифры на экране видны сразу. Как мы уже поняли, хороший дашборд помогает быстро принимать решения. Тут благодаря круговой диаграмме специалист сразу может увидеть соотношение кандидатов и принять нужное решение в случае нехватки кадров в одной из категорий. Справа мы можем увидеть наглядный список запланированных собеседований со всеми необходимыми данными. Все, что нужно специалисту, находится у него в секундном доступе: и ситуация с кадрами, и текущие задачи. Также специалист может воспользоваться кнопкой view all, чтобы получить более развернутую информацию по каждому интересующему блоку.

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

Рассмотрим еще пример хорошего дашборда в мобильном приложении.

Дашборд в мобильном приложении Тинькофф

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

Сервисы для создания дашбордов

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

Одним из самых популярных сервисов для создания дашбордов является Tableau. Есть также QlikView и Domo. Другим популярным сервисом является Microsoft Power BI.

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

  1. Составьте четкий план, поставьте цель, исходя из портрета целевой аудитории.
  2. На основе собранной информации соберите данные, которые должны увидеть пользователи.
  3. Выберите вид дашборда, над которым вы будете работать. Подробнее о видах мы рассказывали выше. Для дизайнера важно понимать, какой тип дашборда требуется, так как от этого напрямую зависит эффективность результата.
  4. Определите, какие инструменты вы будете использовать (японские свечи, диаграмма и т. п.).
  5. Выберите цветовую гамму, стиль шрифта и т. п. с учетом поставленной задачи.
  6. Расставьте приоритеты, составьте макет дашборда и подробный сценарий создания. В этом могут помочь сетки, с их помощью можно легко создать композицию для будущего проекта.
  7. Не забывайте о паттернах восприятия информации. Пользователь будет читать дашборд слева направо, поэтому важно разместить наиболее значимые элементы именно по такому принципу.
  8. Применяйте строительные блоки с последовательной структурой.
  9. Сбалансируйте пустое пространство с помощью удвоения полей. Так пользователю будет проще читать текст.
  10. Не забывайте о персонализации. Заказчик хочет увидеть персональный дашборд, созданный по соответствующим критериям, с нужной информацией.

Заключение

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