Периодически я делаю поиск в Google по запросам «красивый дашборд», «отличный дашборд» и т.п. (в том числе и на английском языке). Это позволяет замечать тренды, видеть часто используемые паттерны проектирования, находить интересные идеи. Чаще всего мне попадаются дашборды, посвященные тем бизнес-областям, про которые я знаю не так много – это тоже полезно, так как заставляет напрячь мозг посильнее.

Среди найденных изображений можно легко выделить целый пласт макетов, которые я давно уже игнорирую – это дашборды, созданные без учёта контента, то есть без конкретных показателей, элементов структур данных и т.д. Чистые арт-объекты. Это может выглядеть очень красиво, однако, в своей работе я стараюсь вообще не касаться вопросов эстетики, слишком уж это всё субъективно. А вот логика, эргономика и другие науки работают не хуже математики; однако почему-то игнорируются многими авторами…

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

Я заметил, что мне постоянно хочется поделиться с коллегами своими находками в формате «да как же такое можно было придумать-то вообще?!». Поэтому я решил собрать некоторое количество дашбордов и качественно описать свои критические замечания к ним, основанные на имеющихся у меня компетенциях и опыте.

Мои суждения не претендуют на объективную истину, разумеется. Я, однако, вижу определенную пользу в том, чтобы мои коллеги (теперь уже - в широком смысле слова) посмотрели на очень «красивые» макеты дашбордов под несколько иным углом. Знаете, как в игре: «найди N различий между этими двумя изображениями». И увидели недостатки, которых в своей работе допускать по возможности не стоит. Вы можете сначала попробовать найти ошибки самостоятельно, а потом проверить, насколько ваши наблюдения и выводы сходятся с моими.

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

Эта публикация – предостережение. Увидев сколь угодно красивый макет дашборда (или создав его) – задумайтесь о смысле. Красота в данном случае может «спасти мир» лишь на очень короткий срок, а именно до начала эксплуатации системы.

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

Этот макет был выбран как заглавная иллюстрация для статьи о лучших советах для создания дашбордов в 2024 году.

1. В навигационном меню слева выбран пункт «Задачи» - следовательно, это основная анализируемая сущность. Однако нигде на экране мы не можем найти общего количества задач – только одну из категорий (завершенные). Кроме того, нет (вероятно) нужной фильтрации задач по проектам (эту сущность мы тоже замечаем в меню навигации).

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

3. Ниже расположен блок с графиком и выбором периода для сопоставления изменения значений. Отметим, что точка «7» на графике не соответствует метке на оси Y и зададимся вопросом – может ли график быть таким плавным если в значениях нет цифр после запятой, да и самой запятой тоже?

4. Следующий блок – задачи за неделю (интересно, почему этот выбор периода не аналогичен предыдущему блоку). И вновь мы не видим значения количества задач – зато видим долю завершенных; правда, мы не уверены, что “Done” = “Finished”. Мы лишены возможности сортировать и фильтровать список – а еще сомневаемся, должны ли задачи с меткой “Done” входить в список “Current”.

5. Правый блок – некоторый гибрид чата и потока уведомлений – и мы не будем касаться функциональной части, но зададим вопрос: а почему действия пользователей привязаны к проектам, а не к задачам, которые мы анализируем в рамках этого экрана?

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

1. Иконка говорит нам о том, что здесь мы анализируем доли (кстати, если таких блоков-виджетов будет много, вероятно, имело бы смысл выбрать иконку, иллюстрирующую суть данных, а не тип визуализации) – и помогает понять, что чарт – это на самом деле круговая диаграмма, а не заполняющийся индикатор – спидометр. Однако всё-таки лучше бы было выбрать другой чарт (если и не спидометр, то вопрос – а где вторая половина круга?); впрочем, возможно, пользователи этой системы привыкли?..

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

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

Давайте в первую очередь попробуем абстрагироваться от данных и посмотреть на смысловую композицию. Для этого отступим на пару шагов назад в процессе проектирования и соберём wireframe (схему) – как она, очевидно, виделась автору:

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

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

Из визуальных аспектов хочется отметить впервые встречаемые нами сегментированные столбцы и строки диаграмм. Возможно, это красиво. Но я не могу удержаться и не посчитать сегменты (да, как в анекдоте про спички и Балабановскую фабрику) – и я не понимаю, почему их именно столько.

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

Как и обещал, в эстетику постараюсь не уходить, хотя иконки и их обрамление в карточках виджетов вызывают у меня вопросы. Но вот стрелочки-индикаторы – это уже не про эстетику; изгиб стрелки говорит о драматизме ситуации, которая всё-таки стала позитивной, несмотря ни на что?..

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

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

Однако почему они разделены таким образом? Было бы куда логичнее использовать список проектов в том числе и для фильтрации данных на диаграмме Recent Tasks и в блоке с активностью, предположительно, по задачам. В этом случае, правда, визуально всё это, вероятно, стало бы выглядеть менее гармонично?..

Обратим дополнительно внимание на оформление блока Recent Activity. Первые две строки упорядочены одним способом (дальше в прошлое), а дальше строки сортируются в обратном порядке. Это небольшая техническая ошибка – или недоработка сценария работы с дашбордом.

Начну с самого интригующего: в Payment score я насчитал 37 сегментов. Комментировать не буду.

Советы по поводу того, что не стоит использовать 3D-версии диаграмм без особой нужды, можно найти, кажется, в любом учебнике по визуализации данных – или даже по PowerPoint. Однако, помимо самого типа и, мне кажется, не самых идеальных расстояний между столбцами, здесь еще сложная история с цветом. Можно считывать данные на диаграмме (с учетом нижнего блока в середине) таким образом, что основные составляющие Revenue – это Subscriptions, Meals и Internet & Telephone. Цветовая палитра в данном случае уже не про эстетику, а про ассоциации и использование разных блоков на одном экране.

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

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

С чего бы начать?..

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

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

3. Правая часть экрана встречает нас опечаткой и неочевидностью кольцевой диаграммы. Но это не так страшно на фоне следующих чартов: столбчатая диаграмма говорит о том, что предприятие работает по принципу некоторых общественных приёмных («По вторникам и пятницам обращаться только по вопросам приобретения продукции»). График же снизу - очень красивый, но совершенно непонятный. Где именно на оси Y находится сопоставляемый Апрель 2014 года, каковы шаги на этой оси?.. То, что демонстрируется «Best Sellers» я не критикую – возможно, пользователь знает, что это такое и у него тут вопросов не будет.

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

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

1. Без контекста довольно сложно понять, какая из областей навигации является основной. Но если следовать обычному паттерну «сверху-вниз, слева-направо», верхняя область должна быть основной. Однако в ней нет тех пунктов, что должны быть (см. п. 16).

2. Куда ведет кнопка «Назад»? Если на «домашний экран» - то получается дублирование, ведь кнопка «Домой» прямо здесь же, чуть ниже.

3. Что означает эта иконка? Честно, у меня даже нет версий.

4. Без контекста мне сложно понять, что за сущность этот Wallet – но я определенно не вижу инструментов переключения между этими сущностями, если их больше одного.

5. Эстетическая мелочь, но тут есть небольшая проблема. В большинстве дизайн-руководств есть вполне однозначные правила соотношения радиусов и применения отступов.

6. Пользователь в данном случае выбрал "годы", а на чарте (11) мы видим дни недели.

7. Просто неточность (техническая ошибка) или это действительно другая иконка и другая функция?

8. Странное соотношение определений: «мой», «твой». Момент спорный, конечно, но текст в интерфейсе и способы информирования пользователя очень важны.

9. Иконки в этом меню для нового пользователя не вполне очевидны; при этом я не вижу способа развернуть меню и получить текстовые наименования пунктов. Возможно (и это было бы лучшим вариантом), при наведении курсора мы увидим всплывающие подсказки.

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

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

12. Я прочитал эту иконку как «Скачать деньги». Вряд ли я прав – но много ли пользователей прочитают иначе?

13. Элемент управления выглядит так, словно я могу отрегулировать прошлое (сколько было в прошлом месяце); если это так – вопросов нет (хотя это очень странно). Если же это не так – то такой внешний вид лучше не применять.

14. Почему отличается способ начертания значения после запятой? Если в этом есть бизнес-смысл – что ж, пусть будет. Если же нет…

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

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

17. Мне кажется, важнее всего тут сумма, а потом уже всё остальное, а вам? А еще – я бы добавил что-то кроме цвета для обозначения направления транзакции, хотя бы даже отдельный столбец, который в том числе позволит легко и очевидно управлять фильтрацией списка.

18. Почему именно здесь используется другой способ отображения числового значения после запятой?

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

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