Что такое UI дашборд
90% информации, которую получает наш мозг, является визуальной. Поэтому она обрабатывается в 60 000 раз быстрее, чем текст. Чтобы можно было воспринимать большое количество информации быстрее, люди придумали представлять данные через таблицы, графики, диаграммы. Так и появились дашборды.
Дашборд (с англ. «приборная панель») — это инструмент, который представляет аналитические данные в виде графиков, схем и таблиц. Особенность UI дашбордов в том, что они интерактивные, и обновляются на основе собираемых сведений.
Где используются UI дашборды
Специалисты многих направлений каждый день работают с большим массивом информации, которую трудно воспринять в текстовом виде. Возьмем пример с банками: представьте, что вы хотите посмотреть, какую сумму потратили в месяц на покупку еды, а приложение просто выдает историю всего, что вы купили за этот период. И вам надо самостоятельно вычленить цифры и посчитать траты на продукты, общую сумму. Звучит сложно и нудно. А если данных гораздо больше? Если они охватывают, например, траты небольшого предприятия?
«UI приборные панели» не только упрощают восприятие, но и экономят время, делают работу эффективнее. Дашборды незаменимы во многих направлениях:
- Маркетинг.Дашборд — главный инструмент многих сервисов маркетинговой аналитики, такие как Яндекс.Метрика, Google Analytics, MixPanel. Эти сервисы собирают данные о посещаемости сайта, поведении пользователей, рекламных кампаниях и представляют информацию в виде понятных графиков.
- Управление.Как узнать KPI сотрудника или отдела в целом в каждом месяце? Как вычислить, сколько времени было затрачено на каждую из задач? Если руководитель пользуется программами с UI дашбордами, получить эти данные он сможет быстро и легко. Сервисы для управления проектами, такие как Trello, Bitrix 24, Jira, учитывают время и производительность каждого работника и представляют в виде интерактивных и диаграмм.
- Образование.Школы и университеты создают внутренние дашборды чтобы отслеживать статистику успеваемости и посещаемости учеников и студентов. На административном уровне такие инструменты визуализации используют органы управления образованием: дашборды показывают, например, скорость внедрения новой программы и как она отразилось на образовательном процессе.
Чтобы дашборд действительно помогал в работе, он должен быть наглядным. Какие еще характеристики должен иметь хороший дашборд? И как понять, что перед вами — качественный интерфейс? Сейчас расскажем.
Как (и зачем) отличать хороший UI дашборд от плохого
Для начала разберемся с этим «зачем» — почему дашборд вообще должен быть сделан качественно?
Допустим, вы — маркетолог в компании, и ваша задача — собирать данные аналитики и на ее основе корректировать рекламные кампании и даты запуска нового товара на рынки. Вы открываете программу, которая собирала информацию — анализировала спрос и потребности пользователей. Программа подсчитывает цифры и показывает их на экране. Все вроде бы в порядке — отображается множество столбиков, графиков, других паттернов UI дизайна. Цвета приятные и контрастирующие, но ни один из показателей не подписан. С дашбордом невозможно взаимодействовать. Последний раз цифры обновлялись месяц назад. Картинка красивая, но абсолютно бесполезная для вас, потому что на основе этих цифр невозможно понять, как улучшить показатели рекламных кампаний.
Главная функция UI дашборда — отражение актуальной информации. Человек должен прочесть показатели и понять ситуацию при первом взгляде на дашборд, чтобы быстро среагировать на их изменение.
Есть три признака качественной «UI приборной панели», по которым можно понять, что перед вами — хороший дашборд.
1. Обновляемые актуальные данные
Если вы можете на основе данных дашборда оперативно оценить ситуацию и внести изменения, чтобы получить нужный результат, то экран работает так, как надо, и выполняет свои задачи.
2. Сбалансированные элементы UI UX дизайна
Перед человеком стоит сложная задача — «прочитать» большой объем информации по визуальным элементам. Поэтому на дашборде не должно быть лишних элементов и цифр, которые не несут смысловой нагрузки. Они будут затруднять восприятие и рассеивать внимание. Также между блоками должно быть пространство, чтобы мозгу было легко считать паттерны UI дизайна. Дашборд не должен содержать отвлекающих эффектов вроде фоновых градиентов и 3D-графики.
3. Цвета и шрифты
Цвета в дашборде имеют такое же большое значение, как и цифры. Цвет должен быть визуальной подсказкой, которая помогает соотносить данные. Чтобы не запутать пользователя, в дашборде не должно использоваться слишком много цветов. Идеальное количество — 3-4 контрастных цвета. Шрифт лучше использовать один.
А еще хороший UI дашборд можно настроить так, как хочется. Допустим, при управлении командой — сегодня у нас один приоритетный показатель, плашка которого отображается на большую часть экрана, а завтра — другой. И мы спокойно переставляем и увеличиваем элементы так, как нам хочется и как нам удобно.
Чтобы информация выше стала нагляднее, мы подкрепим ее примерами и разберем несколько хороших и плохих дашбордов. Так вы сможете самостоятельно оценивать дашборды — это пригодится, например, если вам понадобится разработка мобильных приложений и вы обратитесь в UI UX дизайн агентство на аутсорсинге.
Примеры удачных и неудачных UI дашбордов
Чтобы оценить дашборды мы снова обратимся к уже помогавшему нам в статье про UX портфолио вымышленному стартаперу Максиму. Он подскажет, что не так в примерах неудачных дашбордов и как это можно исправить. Качественные экраны прокомментировал Женя, наш лид UI UX дизайнер: он разобрал их фишки и сильные стороны.
Дашборды-образцы для подражания
Приложения для учета семейного бюджета
В мобильных приложениях, где места гораздо меньше, чем на экране десктопа, тоже возможно сделать хороший UI дашборд.
Контрастными цветами разделены счета каждого из партнеров. Эти же цвета используются в шкале расходов, поэтому там даже без подписи понятно, кто потратил больше за месяц. Другой экран показывает соотношение трат за несколько дней и выводит список совершенных покупок и переводов. Глядя на сравнительную кривую, человек легко сможет скорректировать расходы на следующий месяц.
В отличие от примеров ниже, фон этого интерфейса темный — за счет этого цветные плашки выделяются на небольшом экране мобильного еще сильнее. Здесь так же соблюден баланс между графическими элементами и паттернами UI дизайна, информация сгруппирована по логическом блокам — на первом экране данные о счетах, на втором — о расходах. Дашборд понятен интуитивно — а это один из залогов качественного продукта.
HR-платформа
Это лаконичный дашборд, который отображает полную информацию, необходимую эйчару, на одном экране. Здесь нет визуального и информационного перегруза: цвета всего три, цифры сразу бросаются в глаза.
По круговой диаграмме можно понять соотношение кандидатов и оперативно среагировать, если в одной из категорий будет нехватка кадров. Справа от диаграммы список запланированных собеседований, их должности и время, на которое запланировано их собеседование.
Все необходимое у HR-специалиста под рукой: от показателей ситуации с кадрами в компании до его текущих задач. Чтобы получить больше информации в интересующем блоке, эйчар может нажать кнопку «view all» и посмотреть полные данные.
Приложение для управления ресторанами
Здесь использовано минимум цветов, ничто не отвлекает пользователя от цифр. Есть пространство между блоками и внутри них, отсутствуют лишние элементы, поэтому мозг может сконцентрироваться на важных показателях и ничего не упустить. При этом на дашборде скомпоновано и размещено большое количество информации: бронирование, работники ресторана, количество гостей, их активность.
Дашборд предоставляет управляющему ресторанами информацию в реальном времени — он может быстро оценить ситуацию и скорректировать данные. На этих показателях в UI UX дизайне сделан акцент.
Дашборды, требующие доработки
Приложение для занятий спортом
Не продумана логика расположения блоков: две большие круглые плашки отвлекают внимание от цифр. Если бы элементы были расположены по-другому и центральное место занимало что-то полезное, например, наглядный график сравнения активности сегодня и вчера, то вопросов бы не возникло.
Если бы я обратился к UI UX дизайн агентству, которое собрало бы мне такой дашборд, я бы вряд ли остался доволен. На экране ничего не видно — интерфейс перегружен дизайном, хотя элементов тут не очень много. Такое ощущение создает яркий фон, из-за которого сложно читать цифры и надписи на экране.
Содержание дашборда не понятно интуитивно: например, показатель Circles. Нужен онбординг, чтобы разобраться, хотя в дашборде все должно быть интуитивно понятно. Этот пример явно нуждается в доработке.
Дашборд программы для управления персоналом
Слева размещен блок с горизонтальным скроллом. Добавлять такие блоки в дашборд не стоит, лучше переставить элементы так, чтобы они помещались на одном экране. Когда нужно проматывать экран, чтобы посмотреть все данные, пропадает наглядность дашборда. В разработке мобильных приложений этим еще можно пожертвовать из-за маленького размера экрана, но для десктопных версий как в примере оправданий нет.
Здесь интерфейс перегрузили цветами. На один экран я насчитал 8. Да, они приглушенные, но смотрится все равно слишком ярко, глаза пытаются одновременно зацепиться за все. Между блоками есть пространство — это плюс, но сами блоки однообразные, оформленные в виде простых столбиков цифр. Акценты в виде красных и зеленых треугольников не работают из-за пестроты UI UX дизайна вокруг, мозг просто их не замечает.
Самая большая и распространенная проблема дашбордов — непонятность. Как мы увидели выше, непонятным экран может быть по разным причинам, но все они ведут к тому, что дашборд становится бесполезен.
Теперь вы знаете, что такое качественный дашборд
Давайте подытожим, какие же характеристики особенно важны для грамотного дашборда.
1. Отражение актуальной информации
Чтобы оперативно среагировать на изменения в показателях: восполнить нехватку кадров в отделе, скорректировать количество расходов.
2. Выстроенная логика и правильные акценты
Чтобы легко ориентироваться в данных и не тратить время на поиск нужной информации.
3. Простота восприятия
Чтобы быстро выделить главное и не отвлекаться на цвета, узоры и плашки.
Эти критерии помогут вам оценить дашборд и с пользовательской, и с профессиональной точек зрения. Теперь вы не сможете ошибиться и одобрить некачественный продукт, если обратитесь в UI UX дизайн агентство за разработкой мобильных приложений или веб-платформ.
Если у вас уже есть идея собственного проекта, обратитесь в Purrweb. Мы разработали не один дашборд. Например, мы создали дашборд в приложении Cargo для компаний, занимающихся доставкой, а еще — панель платформы для копи-трейдинга Fintarget. Связаться с нами просто — заполните форму ниже, и наш специалист перезвонит вам для обсуждения вашего проекта.
