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

Дело в том, что в современных 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 выглядели так:

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

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

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

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

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

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

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

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

Перевод статьи «When to use quantitative and when to use qualitative color scales»

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

Эта статья попытается ответить на следующий вопрос: когда следует использовать количественную цветовую палитру (последовательную или расходящуюся; например, голубой, синий, темно-синий), а когда — качественную палитру (например, красный, желтый, голубой)?

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

Итак, когда надо использовать оттенки? А когда — тона?

Используйте тона, когда у значений нет изначального порядка

Тона необходимо использовать, когда невозможно упорядочить данные. Например, если в графике представлены промышленности или страны (Иран, Марокко, Пакистан): Марокко ничем не уступает Пакистану, как и наоборот.

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

А вот когда вы можете упорядочить данные, представляемые цветом, используйте последовательную или расходящуюся цветовую палитру. Если, например, необходимо передать данные о безработице (4%; 6%; 8%), лучше отдать предпочтение именно количественной цветовой палитре.

Это правило применимо не только к тексту или числам. У шкалы Лайкерта («полностью не согласен», «не согласен», «где-то посередине», «согласен», «полностью согласен») или размеров одежды (XS, S, M, L, XL, XXL) также есть специфический порядок. Они тоже относятся к количественному типу данных, поэтому для их визуализации крайне рекомендуется использовать именно оттенки.

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

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

Здесь разобраться помогут древовидные карты:

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

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

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

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

А если все-таки покрасить подразумеваемые значения в удобочитаемом графике?

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

Давайте посмотрим на один пример, чтобы прокачать ваше интуитивное понимание, когда стоит прибегнуть к такому решению.

Страница с деталями графика «Алгоритм Google» из The Economist от 8 июня, 2019

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

Точечную диаграмму проблематично разобрать в частности из-за того, что точки покрашены расходящейся, а не последовательной цветовой палитрой. По сути, The Economist использует цвета для передачи двух различных переменных: тон для презентации политической идеологии («левые»/«правые») и насыщенность и яркость для демонстрации политической крайности. Тот же самый график, который передавал лишь политическую крайность (не важно, в сторону «левых» или «правых») с помощью последовательной цветовой палитры было бы проще читать.

И все же, чтобы понять этот график из The Economist, требуется несколько секунд. Обратите внимание, что точечную диаграмму справа проще прочитать, так как в ней совмещены два приема визуализации: политическая идеология показана позицией («левые» и «правые») и оттенком.

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

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

Итак, мы рассмотрели древовидные карты, столбчатые графики и точечные диаграммы. Теперь, давайте возьмем в качестве примера линейный график:

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

Используйте оттенки для выделения подкатегорий

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

Население в занимаемых территориях, сгруппированное по религиозной принадлежности (The Economist, PDF)

Мы видим две категории: «евреи» (голубой) и «арабы» (желтый). Подкатегориями же являются территории, которые представлены оттенками синего и желтого.

Вот похожий пример:

График NZZ

NZZ использует оттенки (зеленый и синий), чтобы помочь читателям заметить разницу между двумя категориями: Ältere («пожилые») и Jüngere («молодые»). Оттенки помогают различать подкатегории: какие слова пожилые люди и молодежь используют, чтобы сказать «сердцевина яблока».

(Кстати, и тому и другому графику цвета, в целом-то, и не нужны: все секции могут быть серыми с разделяющими их белыми линиями, так как каждая из подкатегорий объяснена текстом. Слова Gaza, Israel, Ältere, Gräutschi и так далее показаны на самих графиках, делая цветовое решение лишним.)

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

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

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

График Лизы Шарлотты Рост

По сути, этот график превращает категории («в браке», «не замужем/не женат», «разведен/а», «вдова/вдовец») в подкатегории, так как они все поделены на две большие группы («первостепенные» и «второстепенные»). Если покрасить подкатегории градиентом, наш читатель все отлично поймет.

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

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

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

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

Две причины — доступность и строгость — могут убедить вас выбрать оттенки, а не тона, при работе с категориями. Вот пример из The Financial Times:

График из The Financial Times

Но имейте в виду следующие особенности: во-первых, скорее всего, некоторые читатели будут пытаться придать цветам какой-то смысл. Даже если это не входило в ваши планы, они могут попытаться найти объяснение тому, почему использован градиент. «США изображены более темным цветом, так как имеют самые высокие показатели». Или: «... так как их данные имеют большую значимость в этой статье». Красить наобум нельзя.
Синтия Брюэр отмечала то же самое, когда говорила о представлении бинарных данных («да»/«нет», «общественный»/«частный», «присутствует»/«отсутствует») на картах:

Синтия Брюэр: «Рекомендации по выбору цвета для карт и визуализации», с. 136 по цитате в: «Визуализация в современной картографии», том 2, 1994. Курсив автора статьи.

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

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

В-третьих, если хочется использовать градиент, старайтесь использовать оттенки только одного тона, если нет необходимости вводить еще один.

Спросите себя, какое ключевое послание вы хотите передать, и выделите участки, которые нужно сделать более заметными, с помощью другого тона и его оттенков, как «Europe» и «US» в этом графике:

График The Financial Times, который я слегка отредактировала

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

До этого момента, мы в основном смотрели на причины использовать оттенки вместо тонов. А вот причина использовать тона вместо оттенков:

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

В 2020 году, The Financial Times опубликовали график, в котором отобранные страны Европы были сгруппированы в зависимости от значительного/умеренного/небольшого роста чисел новых случаев заболевания Covid-19.

График The Financial Times

Стивен Бернард и Джон Берн-Мердок, создатели этого графика, решили использовать тона для разных стран в каждой группе.

Я спросила Стивена Бернарда, почему он предпочел тона вместо оттенков. И вот что он ответил:

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

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

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

Выводы

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

Список литературы

1. Синтия Брюэр: «Рекомендации по выбору цвета для карт и визуализации», с. 136 по цитате в: «Визуализация в современной картографии», том 2, 1994.
2. Adobe Spectrum: Цвет для визуализации данных, 2019.
3. Юусо Копонен, Джонатан Хильден: «Руководство по визуализации данных», 2019, с. 73-79.

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

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

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

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

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 таблицы данных или применить их в своем следующем проекте дизайна приложения.