Блог об аналитике, визуализации данных, data science и BI, заметки с тегом: ux

Как переверстка помогает превратить хороший дашборд в отличный

Wed, 04 Sep 2024 15:44:06 +0300

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

Фидбэк:

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

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

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

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

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

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

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

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

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

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

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

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

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

Полное руководство по созданию таблиц

Wed, 09 Sep 2020 16:45:49 +0300

Перевод статьи «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)

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

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

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

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

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

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

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

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

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

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

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

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