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

Дело в том, что в современных BI-тулах, которые мы используем — в частности, в популярном Tableau — возможности кастомизации гораздо шире, чем может себе представить сотрудник, мигрирующий с excel-таблиц. Часто пользователь просто не знает, каким вообще может быть дашборд и как составить ТЗ.

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

Именно такая ситуация сложилась у нас в процессе работы с образовательным стартапом Refocus.

Один из главных их дашбордов — обзор SLA (Service Level Agreement). Его пользователи — руководители отдела продаж и сейлз-менеджеры. Именно здесь их интересует прежде всего скорость обработки входящих лидов в зависимости от ряда факторов, от источника лида до региона.

Нормативное значение этого показателя для Refocus — 15 минут, значит, там, где он выше, есть потенциал для оптимизации процессов и роста выручки.

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

У заказчика было желание оптимизировать дашборды и бюджет на это, так что мы предложили общую переверстку и подключили к проекту датавиз-эксперта.

Версия 1: с чем мы работаем

Первая версия SLA-дашборда, которой некоторое время пользовался клиент, выглядела так:

В фокусе три графика:

1. Скаттерплот по времени ответа с момента получения лида.
2. Гистограмма по медианному времени ответа.
3. Гистограмма по средней длительности первого звонка с лидом.

Справа — 15 фильтров, от региона и гранулярности до имени сотрудника, работавшего с лидом.

Сверху — много текста, поясняющего тонкости работы с фильтрами по времени.

Задача

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

А главное — есть ли у вас понимание, как сделать понятнее и что сказать исполнителю проекта?

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

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

Проблемы этого дашборда:

• Основной график — скаттерплот с SLA для всех лидов — выстроен на логарифмической шкале по оси Y без возможности переключиться на линейную. Есть сомнения, что все сейлз-менеджеры, глядя на дашборд, понимают, как работает логарифмическая шкала.
• При выборе гранулярности по неделям масштаб позволяет показать распределение точек на оси X по дням — но они распределены случайно с помощью функции RANDOM().
• Ось Y не синхронизирована между графиками, поэтому сложно оценить связь всех трех значений.
• Невозможно сравнить медианный SLA по следующим параметрам: курс, источник лида, команда, сейлз-менеджер — все они расположены в фильтрах. Сравнение требует скриншотов разных отображений или нескольких вкладок с одним дашбордом.

Установленные причины:

• Логарифмическая шкала: заказчик, который являлся только одним из юзеров дашборда, попросил реализовать логарифмическую шкалу, чтобы смотреть на значения SLA, близкие к нулю. Видимо, это было релевантно для целей именно его отдела.
• Рандомное распределение по оси X: попытка сделать график проще и красивее, потому что скаттерплот уже перегружен информацией, и оценить распределение значений внутри недели — не приоритет.
• Неэффективные фильтры: до ввода дашборда заказчик не знал, какие именно сравнения окажутся ему полезны.

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

Решение

Наш датавиз-специалист рисовал макеты карандашом на бумаге, а после утверждения переносил в Tableau: аналитический функционал и UX-дизайн для готового дашборда можно оптимизировать и без специальных тулов. Здесь хорошо ориентироваться на заказчика: если ему приятнее смотреть на файл в Figma — замечательно. Все понятно и на бумаге — отлично.

Предложенные изменения:

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

Версия 2: рабочая версия после переверстки

Что поменялось:

• В левой части дашборда появилась таблица-фильтр по командам и сейлз-менеджерам. По ней можно оценить показатели работы отдельных сотрудников и отделов и получить общее представление о том, как обстоят дела с SLA в компании — а именно это изначальное назначение дашборда.
• В центральной части дашборда остался скаттерплот с SLA по всем лидам, только теперь формат отображения оси (линейная или логарифмическая) можно переключить.
• Фильтры курсов, источников лидов и категорий превратились в кликабельные бар-чарты в правой части экрана. Они позволяют сразу визуально оценить медианный SLA по этим параметрам.
• Все глобальные фильтры по категориям, которые нет необходимости сравнивать между собой, оказались в верхней части дашборда, там же — фильтр по дате. Теперь пространство экрана организовано эффективнее.

Фидбэк:

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

Версия 3: доработки и брендирование

Что поменялось:

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

Когда функционал доработан и утвержден, вводится брендирование по корпоративным гайдлайнам. Они у Refocus выглядели так:

Обзор функционала

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

Так выглядит финальный дашборд при открытии, пока не выбран ни один фильтр:

А так, если выбрать сейлз-менеджера из таблицы слева:

Использование фильтров справа (например, отобразить только лидов, пришедших с вебинаров):

Тултипы со ссылкой на первоисточник на скаттерплоте с лидами (время в них отображается в минутах при выборе любой шкалы):

Наконец, переключение между линейной и логарифмической шкалами:

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

Этот материал — перевод статьи «How to Make Dashboards Using a Product Thinking Approach»

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

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

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

Ключевой момент — продуктовое мышление. Это неотъемлемая часть отдела Data Science в Shopify. Как мы создаём продукты, думая о наших продавцах, так и специалисты по обработке данных создают дашборды, ориентированные на потребности аудитории.

Нужен ли мне дашборд?

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

Вопросы, которые следует задать себе:

1. Будут ли данные дашборда обновляться динамически?
2. Хотите ли вы, чтобы исследование было интерактивным?
3. Ваша цель заключается в том, чтобы мониторить что-то и отвечать на вопросы, связанные с данными?
4. Нужно ли пользователю возвращаться к этим данным ввиду их ежедневного изменения?

Если на большинство вопросов вы ответили «Да», то дашборд — хороший выбор для решения вашей проблемы.

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

1. Поймите проблему и аудиторию

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

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

Четко определив свою аудиторию и причину создания дашборда, вам нужно выяснить, какие показатели лучше всего удовлетворяют потребностям группы. В большинстве случаев это неочевидно и может превратиться в долгую беседу с пользователем, и это нормально! Время, потраченное на данном этапе, принесёт плоды позже.

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

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

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

Теперь, когда у вас есть план, вы готовы приступить к созданию дашборда.

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

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

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

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

Способ представления данных напрямую влияет на понимание данных пользователем.

Используйте макет, чтобы сосредоточить внимание пользователей

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

Перевернутая пирамида — пример организации иерархии информации, которую вы отражаете на дашборде

Не забудьте использовать исходные цели из первого этапа при формировании иерархии.

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

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

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

Оставляйте только целевой контент

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

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

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

Обеспечьте достаточный бизнес-контекст, чтобы кто-то, открывший ваш дашборд, мог сразу получить ответы на такие вопросы:

1. Почему существует этот дашборд
2. Для кого он создан
3. Когда он был построен и когда он перестанет быть актуальным
4. Какие функции он реализует

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

Статистика справа лучше, чем слева, потому что преподносит контекст.

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

Перед публикацией подумайте об актуальности данных

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

3. Поддержка

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

«Продавайте» дашборд

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

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

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

Используйте и улучшайте

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

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

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

Поддерживайте

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

Ключевые выводы

Посмотрите и другие наши переводы — «10 правил для совершенного дизайна дашбордов» и «Полное руководство по созданию таблиц»

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

1. Понять проблему и аудиторию, спроектировать дашборд, который хорошо справляется с одной задачей для чёткого круга пользователей
2. Учесть интересы пользователей, чтобы он был точным и простым для понимания
3. Поддерживать полученный результат, продвигая и улучшая его в дальнейшем

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

Данная статья — перевод оригинала

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

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

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

1. Определите назначение дашборда

Как и любое другое представление в вашем продукте, дашборд предназначен для определенной цели. Ошибка в понимании его предназначения делает ваши дальнейшие усилия бессмысленными. Существует несколько популярных способов категоризации дашбордов в зависимости от их назначения (аналитические, стратегические, оперативные, тактические и т. д.). Для простоты я разделю их на 2 более общие формы:

Оперативные дашборды

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

Ключевые особенности оперативного дашборда

Аналитические дашборды

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

Ключевые особенности аналитического дашборда

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

2. Выбирайте представление данных правильно

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

Типы графиков, которые помогут вам увидеть взаимосвязь в данных

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

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

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

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

Типы графиков, которые помогут вам увидеть варианты построения

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

Типы графиков, помогающих проследить распределение

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

Типы графиков, которых следует избегать

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

Когда использовать различные типы графиков

Чтобы правильно выбрать тип представления данных для диаграммы, задайте себе следующие вопросы:

1. Сколько переменных вы хотите отобразить на одной диаграмме?
2. Будете ли вы отображать значения за определенный период времени или среди элементов / групп?
3. Сколько точек данных необходимо отображать для каждой переменной?

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

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

4. Определитесь с внешним видом потока информации. Расставляйте приоритеты.

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

Сетка и модули

Принимая решение о том, какая информация должна быть, имейте в виду следующее:

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

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

5. Используйте составные элементы с последовательной структурой.

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

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

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

6. Удвойте свою прибыль.

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

Визуальная разница между полями 12 пикселей и 24 пикселей

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

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

Empire State Dashboard

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

Не слишком полагайтесь на большое количество взаимодействий при раскрытии информации

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

Пример дашборда с перегруженными данными

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

8. Персонализируйте, а не настраивайте.

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

Настраиваемый дашборд

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

9. При интеграции таблиц или списков данных убедитесь, что они интерактивны и данные выровнены правильно.

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

10. Проектируйте дашборд в последнюю очередь.

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

Перевод статьи «The Ultimate Guide to Designing Data Tables»

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

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

Разработка стиля таблицы

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

Выберите лучшее оформление строк

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

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

Пример сетки (таблица из UI Prep)

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

Пример горизонтальной линии (таблица из UI Prep)

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

Пример зебры (таблица из UI Prep)

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

Пример произвольной формы (таблица из UI Prep)

Используйте заметный контраст

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

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

Наверху: контраст текста заголовка, Внизу: контраст фона заголовка (таблица из UI Prep)

Выделение столбцов: Столбцы также могут быть разных цветов и жирности для выделения определенных данных, таких как идентификатор строки (первый столбец) или главных данных в одной ячейке (например, данные ячейки: 1,234 34%).

Наверху: контраст первой строки, Внизу: Контраст данных (таблица из UI Prep)

Добавляйте визуальные подсказки

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

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

Пример фона строки (таблица из UI Prep)

Фон ячейки: Измените цвет ячейки, чтобы выделить элемент данных (например, уменьшение и повышение значения элемента данных).

Пример фона ячейки (таблица из UI Prep)

Правильно выравнивайте столбцы

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

Правила, которым необходимо следовать:

1. Выравнивайте текстовые данные по левому краю (например, имя)
2. Выравнивайте числовые данные, не связанные с размером (например, дату, почтовый индекс, номер телефона)
3. Выравнивайте числовые данные, относящиеся к размеру (например, количество, процент)
4. Выравнивайте заголовки в соответствии с данными столбца

Пример выравнивания (таблица из  UI Prep)

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

При отображении чисел используйте табличный (или моноширинный) шрифт. Это означает, что вместо пропорционального интервала (т. е. символ «W» шире, символа «I»), каждая фигура имеет одинаковую ширину. Это упрощает просмотр столбцов с числовыми данными.
Для своей таблицы вы можете использовать моноширинный шрифт (например, Courier, Courier New, Lucida Console, Monaco и т. д.) Или моноширинный числовой набор, иногда включаемый в пропорциональные шрифты.

Пример пропорционального и табличного шрифта

Выберите подходящую высоту для строки

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

Высота рядов:

1. Сжатая: 40px
2. Стандартная: 48px
3. Свободная: 56px

Примеры высоты строки (таблица из UI Prep)

Создавайте достаточно отступов

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

Пример отступа (таблица из UI Prep)

Используйте подтекст

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

Пример подтекста (таблица из UI Prep)

Функциональность таблицы

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

Сохранение контекста при прокрутке

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

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

Пример фиксированного заголовка (таблица из UI Prep)

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

Пример фиксированного столбца (таблица из UI Prep)

Ставьте в приоритет стандартные действия

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

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

Пример действия при наведении курсора (таблица из UI Prep)

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

Пример массового действия (таблица из UI Prep)

Управляйте данными с помощью фильтров

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

Базовые фильтры: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.

Пример базового фильтра (таблица из UI Prep)

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

Пример комплексного фильтра (таблица из UI Prep)

Включайте нумерацию страниц

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

Пример нумерации страниц в таблице (таблица из UI Prep)

Сделайте данные столбца настраиваемыми

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

Пример настраиваемого столбца (таблица из UI Prep)

Сделайте параметры отображения страницы настраиваемыми

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

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

Пример сортировки столбца (таблица из UI Prep)

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

Столбец с изменяемым размером (таблица из UI Prep)

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

Пример плотности отображения (таблица из UI Prep)

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

Перевод статьи «Dashboards are Dead»

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

Hello Dashboard, my old friend

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

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

Не совсем. Вскоре мы обнаружили, что дашборды приносят с собой ряд новых проблем:

1. Как? У вас ещё нет дашборда?! Неожиданно повсюду появились дашборды. Инженеру нужны данные для специального анализа? Вот дашборд. У вице-президента будет презентация на следующей неделе и ему нужны диаграммы? Она получает дашборд. А что происходит дальше? О нём просто забывают. Такой шаблонный подход истощал время, ресурсы и мотивацию нашей команды. Это уникальное деморализующее чувство — наблюдать, как ещё один из ваших дашбордов забросили быстрее, чем профиль MySpace в 2008 году.
2. Смерть от 1000 фильтров. После того, как новый дашборд заработал, нас сразу же заваливали запросами на новые представления, фильтры, поля, страницы (напомните мне рассказать вам о том, как я увидела 67-страничный дашборд). Было ясно: дашборды не отвечали на все вопросы, что было либо неудачей на этапе разработки, либо неспособностью инструментов дать ответы, в которых нуждались люди. Что ещё хуже, мы выяснили, что люди использовали все эти фильтры, чтобы экспортировать данные в Excel и уже там работать с ними 🤦‍♀️
3. Не мой дашборд. Постепенно шумиха вокруг дашбордов начала сходить на нет, люди начали пренебрегать ими и откровенно игнорировать их. Многие видели в них угрозу для своей работы, и если они встречали неожиданные цифры, то списывали всё на «плохие данные». У нас на работе были серьёзные проблемы с доверием между людьми, и дашборды только усугубляли положение. В конце концов, мы ведь не могли отправлять другим наши SQL-запросы для получения данных: люди бы просто не смогли не только прочитать их, но даже понять ту сложную схему, по которой они работают. И тем более мы не могли отправлять другим командам необработанные данные. Итак, у нас была просто огромная, наболевшая, серьезная проблема с доверием.

Реальный пример: что это за странная красная точка на карте?

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

Дашборд привлекателен визуально. Красный и чёрный вызывают чувство строгости и важности с первого взгляда. По мере того, как взгляд останавливается на странице, мы сталкиваемся с числами, точками разного размера и графиками, которые почти всегда направлены вправо-вверх. У нас осталось ощущение, что всё плохо, и, кажется, становится ещё хуже. Этот дашборд был создан с целью получения данных доступным и интересным способом. Возможно, он даже был разработан, чтобы ответить на несколько ключевых вопросов: «Сколько новых случаев было сегодня в моей стране? А в моём регионе?». Безусловно, это намного лучше, чем если бы они просто разместили таблицу или ссылку для скачивания.

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

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

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

Данные в портретном режиме

Блокноты с данными, такие как Jupyter, стали очень популярными за последние несколько лет в области Data Science. Их технологическая направленность оказалась лучше традиционных скриптовых инструментов для Data Analysis и Data Science. Это не только полезно для аналитика, выполняющего работу, но также помогает начальнику, коллеге, другу, который вынужден этим пользоваться.

По сути, блокноты обеспечивают:

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

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

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

Блокноты в массы

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

Чтобы использовать их за пределами Data Science, нам пришлось создать собственную версию, но фундаментальные принципы всё ещё применимы с некоторыми дополнительными преимуществами...

Создан для любого уровня опыта

1. Нет необходимости учить всех в вашей команде Python или SQL, поскольку запросы можно создавать по принципу drag-and-drop, используя «составной запрос» SQL или написания запроса с нуля.
2. Стройте графики и диаграммы одним щелчком мыши, без сложных пакетов визуализации или программного обеспечения
3. Автоматическое объединение таблиц и результатов запроса, нет необходимости писать сложные объединения или пытаться объяснить схему

Collaboration-enabled

1. Делитесь блокнотами с товарищем по команде, всей командой или тем, у кого есть ссылка
2. Добавляйте комментарии и выноски, чтобы сделать документ действительно общим

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

1. Аналитики используют блокноты вместо SQL-скриптов для создания нескольких базовых таблиц, которые используют другие команды. Эти блокноты доступны для просмотра всем, что решает проблему доверия в команде
2. Команда по работе с данными создаёт несколько базовых отчётов. Эти отчёты полны комментариев, которые помогут читателю лучше понять, как интерпретировать числа и какие соображения следует принять
3. Затем пользователи делают fork этих дата-блокнотов или создают свои собственные. Они делятся этими блокнотами с Data Team, чтобы они могли помочь им, а затем и с другими подразделениями компании

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