Зачем и как UX-дизайнеру быстро визуализировать данные
Я в дизайне 6 лет, и когда меня спрашивают, чем я занимаюсь, я обычно говорю: User Experience. Сложнее ответить, когда спрашивает мама. Тогда получается что-то вроде этого: «Я работаю с инженерами-нефтяниками уже 4 года и создаю для них интерфейсы, автоматизирующие их работу: например, визуализирую данные или разрабатываю интерфейс управления оборудованием, которое они с помощью лебедки погружают в нефтяную скважину». Для веб-дизайнера это может звучать пугающе, для инженера — непонятно и размыто.
Хотя самое приятное в моей работе — это видеть восторг на лице инженера, когда по результатам проведения интервью и подготовки технических спецификаций в процессе тестирования они видят цельный и простой интерфейс, приговаривая: «I love it». В этой статье я расскажу о своих принципах работы с данными, о том, как я строю графики и продумываю их интерактивность, поделюсь чек-листами, кейсами и лайфхаками визуализации инженерных данных. Эти приемы я использую в своей работе каждый день и проверила с помощью регулярных сессий пользовательского тестирования.
Что не так с дашбордом
Многие дизайнеры хотя бы раз в своей практике вместо kick-off-митинга получали от клиента имейл примерно такого содержания: «Мы разрабатываем дашборд для своих менеджеров, на котором они хотят видеть статистику продаж за прошлый год». И дизайнер, зайдя на Dribbble и введя в поиск «визуализация данных» или «дашборд», увидит довольно типичную картину: много красивых интерфейсов с максимумом вайтспейса. На дашбордах будут виджеты, обязательно парочка лайнчартов и один донат. Таблицы будут содержать сплошь однословные лейблы и от силы три-пять колонок.
А ведь хороший график должен обладать рядом особенностей, которые великолепно описаны в книге Эдварда Тафти «Visual Display of Quantitative Information» под общим названием «Графическое совершенство» (Graphical Excellence).
Первый принцип звучит примерно так: соотношение графических элементов, которые показывают непосредственно сами данные, к общему количеству элементов на графике должно стремиться к единице. Если говорить простыми словами, это означает, что не стоит увлекаться декорированием графиков и лучше меньше, чем больше. Почти в каждом дизайне я добиваюсь более прозрачных, легких направляющих и сетки, чтобы внимание пользователя было акцентировано на самом графике и несущих смысл элементах. Сетка не должна отвлекать от «чтения» графика. Если не придерживаться первого принципа, можно попасть в ситуацию, когда линия сетки покажется пользователю линией на графике (несущей смысл) — и это явно про плохой дизайн.
Второй принцип хорошей визуализации предполагает максимальное использование пространства графика, то есть нужно располагать данные плотно, сжато, компактно. Тафти приводит пример графика изменения погоды в Нью-Йорке в 1980 году как иллюстрацию этого принципа. На этом небольшом по размеру графике изображено 1888 чисел:
Третий принцип вводит понятие фактора лжи: нужно изображать данные правдиво, не применять гиперболизирующую графику, давать честную статистику. Есть такая поговорка: «Бывает три вида лжи: ложь, наглая ложь и статистика». Не секрет, что в ангажированных проектах, где применяется подтасовка фактов и цифр, статистика может быть показана в более выгодном свете, чем есть на самом деле. Например, кому-то выгодно графически показать быстрый рост продаж в 2019 году. Строим барчарт и получаем растущую диагональ. Однако если данные вырваны из контекста и в 2018 году продажи были низкими, а цель графика — это анализ последних двух лет, то зритель получит неправдивую картину. Так вот, Тафти призывает дизайнеров быть ответственными за свои проекты и не идти на поводу у чьих-то интересов.
Одни дизайнеры часто копируют структуру дашборда, повторяя визуальные решения и пытаясь вписать поток бесконечных правок в резиновый дашборд. Вторые безропотно перерисовывают в UI наброски барчартов и пайчартов, полученные от Product Owner. Но реальные данные заказчика не статичны и порой непредсказуемы. А что, если они будут обновляться в реальном времени? А что, если будет 20 колонок в таблице с таким форматом чисел: 99.123,1234? А что, если за прошлый год будут нулевые продажи?
Давайте же разберемся, как подобрать оптимальный тип графика или любой другой способ визуализации для набора данных, которые запрашивает заказчик. Как быстро спроектировать дизайн взаимодействия пользователя с графиком, продумать edge-кейсы и при этом соответствовать принципам Graphical Excellence?
О данных в дизайне
Прежде чем отрендерится график, данные пройдут немалый путь.
Чаще всего в интерфейсах попадаются такие типы данных:
1. Число. Самый простой тип данных, дает однозначный ответ на вопрос «Сколько?». Когда пользователю важна конкретная сумма или число (например, калории в день, количество шагов или доход за месяц), покажите это значение в дизайне как «главного героя».
2. Массив чисел. Несколько чисел можно назвать массивом чисел. Например, пользователь знает, сколько шагов в день он проходит, и хочет проследить, как этот показатель меняется на протяжении месяца: то есть у него есть массив из 31 числа. Самый распространенный вид графика для этой задачи — временной ряд, который показывает изменение переменной во времени.
3. Категории данных — это логические группы, которые помогают «читать» их и воспринимать информацию быстрее. Сухие числа сложно анализировать, и разбивка на категории помогает снизить когнитивную нагрузку. Даже если заказчик выдает вам для визуализации одни цифры, постарайтесь сгруппировать их и показать частями.
4. Дискретные и непрерывные данные. Дискретными называют те данные, которые можно посчитать, например шаги. А вот данные об атмосферном давлении или температуре, которые все время меняются, называют непрерывными. Слайдеры отлично иллюстрируют эту разницу.
5. Конкретные числа или тренд. Если главное для пользователя — это изменение данных в целом, то показываем тренд на графике, а если нужны конкретные цифры, тогда выводим и хайлайтим числовые значения.
101 по типам графиков
Чтобы подобрать тип визуализации и наконец сесть за дизайн, вам понадобится применять самые распространенные графики и жонглировать ими в зависимости от типа данных. Вот они:
Bar chart (столбчатая диаграмма) показывает категории. С его помощью можно показать, что за прошлый год менеджер продал 16 машин на бензине, 4 дизельных автомобиля и 30 электрокаров. Тут важна только одна ось (в моем случае Y), а ось X условна и существует только для того, чтобы разместить лейблы категорий. Барчарт легко спутать с гистограммой. Чтобы проверить, барчарт это или нет, поменяйте столбики местами — смысл графика не потеряется.
Stacked bar chart (столбчатая диаграмма) позволяет показать те же данные, но уже с разбивкой внутри категории. Например, можно увидеть, что из 16 бензиновых авто 4 продали в базовой комплектации, а остальные 10 — в полной.
Box and whisker plot («ящик с усами» — это не то же самое, что биржевые свечи). Один ящик — это одна категория, например электрокары. Допустим, по оси Y мы анализируем цену продажи этих авто. Ящик покажет нам, какова была средняя цена продажи в этой категории (медиана), а также каков был разброс цен внутри этой категории, минимальные и максимальные значения (усы).
Line chart (линейная диаграмма) чаще всего используется, чтобы показать, как параметр меняется во времени. В таком случае лайнчарт называют временным рядом.
Line chart + bar chart (комбинация двух типов чартов на одном графике) — удобный прием, чтобы показать и категории, и изменение ключевого KPI. Добавляем еще одну ось Y — и мы сможем отобразить, сколько авто продано по категориям и как менялась при этом средняя цена при продаже.
Анатомия графика и чек-лист дизайнера
И вот вы определились с графиком и приступаете к дизайну. Я часто использую эту шпаргалку по структуре графика, чтобы не забыть графические элементы, важные для «чтения» данных.
А также отвечаю на вопросы из этого чек-листа по настройкам, потому что дизайн напрямую зависит от ответов:
- График статический или динамический?
- Данные исторические или real-time?
- Сколько осей? Можно ли менять их количество? Скрывать оси? Number of Axis.
- Сколько переменных? Можно ли менять их количество? Скрывать переменные? Number of Variables.
- Какие используются единицы измерения? Units of Measure.
- Какова плотность сетки? Gridlines Density.
- Нужны ли фильтры? Filters.
- Нужны ли настройки масштаба шкал? Scale Adjustment.
- Нужна ли легенда? Кликабельна ли она? Key.
- Какая интерактивность поддерживается? Interaction.
Почти все современные библиотеки визуализации (например, ECharts) используют встроенные инструменты взаимодействия с графиком, которые я включаю в отдельный чек-лист Interaction:
- фильтры;
- индикаторы;
- сравнение;
- переключатели;
- toggles;
- ховеры;
- манипуляции (масштабирование, жесты).
Для real-time в дизайне особое внимание я обращаю на такие моменты:
- визуальная разница постоянных величин и тех, что меняются в реальном времени;
- анимация;
- оповещения (алерты, нотификации);
- состояния — вот некоторые типичные: данные есть, данных нет, загрузка, ошибка при загрузке, обновление.
Кейсы, примеры, заготовки
После ответов на вопросы из чек-листа я уже понимаю основные элементы будущего дизайна. Потом стараюсь проанализировать саму задачу визуализации и понять, есть ли у меня в запасе что-то похожее, что может пригодиться. Как показывает практика, можно найти повторяющиеся паттерны для решения наиболее часто встречающихся кейсов. Это поможет и на аналитических дашбордах, и в графиках, и в табличных представлениях.
Цели
Этот паттерн подойдет, если нужно показать не просто статистику изменения данных, а то, насколько близки или далеки эти изменения от конечной цели юзера или компании. Комбинируя график с ключевыми KPI, мы расставляем правильные приоритеты в дизайне: пользователь сразу видит главное и уже на графике углубляется в детали. Таким образом можно мотивировать пользователя.
Средние значения
Если данных много, они меняются в определенном промежутке времени, а пользователю нужно провести анализ за выбранный диапазон, чтобы принять четкое и понятное решение, то помогут средние значения. Хорошими примерами вывода средних значений служат приложение «Здоровье» в iOS и статистика в Instagram:
Светофор
Очень часто используемый в технических интерфейсах паттерн кодирования с применением зеленого, желтого и красного цветов. Иногда исключают цвет предупреждения (желтый) и оставляют только зеленый и красный как синонимы «плохо» и «хорошо», «да» и «нет», «пуск» и «стоп».
Что такое хорошая визуализация
Когда вы создали дизайн, есть два варианта: либо вы влюбляетесь в свою идею визуализации, либо стараетесь валидировать ее. Конечно, лучший способ валидации — это пользовательское тестирование, особенно если вы работаете с интерактивным интерфейсом. Есть и common-sense-критерии, позволяющие определить хорошую визуализацию:
- минималистичная, но с высокой плотностью данных;
- правдивая, ее можно мгновенно «переварить»;
- показывает контекст и вовлекает.
Подытожу
Работая с финансовыми или инженерными системами, B2B- или B2C-продуктами, дизайнер все время показывает данные в интерфейсе. Даже самые громоздкие и высоконагруженные интерфейсы можно разложить на смысловые блоки и оптимизировать представление. Для этого я рекомендую:
- Придерживаться принципов Graphical Excellence.
- Понимать основные типы данных и применять к ним базовые типы визуализации.
- Пользоваться чек-листом по анатомии графика.
- Пользоваться чек-листом по интерактивности.
- Создать свои заготовки для наиболее типичных кейсов и применять их.
