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

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

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

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

Все дашборды и интерфейсы, представленные в этой статье, сгенерированы нейросетью. Любые совпадения случайны.

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

Эта мысль, кстати, не нова:

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

Слишком много всего

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

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

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

Теперь перейдём к содержательному наполнению. На графике «Выручка VS Конверсия» связь между показателями не отображает реального положения дел, так как один показатель процентный, а другой — абсолютный при том, что шкала только с абсолютными значениями. В таких случаях лучше использовать две Y-шкалы, чтобы пользователь мог реально сравнить соотношение величин. Также важно обратить внимание, что шкала начинается с 800, то есть динамика может оказаться искажённой. Ну и чисто визуально жирная сетка на заднем фоне, градиент столбцов и наслоение единиц измерения, значения шкалы и первого столбца затрудняют восприятие графика.

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

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

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

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

Минимализм — лучший друг

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

Что здесь хорошо:

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

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

Усложнение простого

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

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

Но пользователь не думает как программа или как её разработчик. У него свой мозг и своё мнение на этот счёт.

Поле с подписью «Поле 4 (дом)» — скорее всего, системное название, которое забыли переделать. Формулировка из базы данных, как правило, непонятна другим пользователям, может вызвать лишние вопросы, да и просто выглядит неаккуратно.

Цена доставки «рассчитается на шаге 4», итог — «на шаге 5». Скрытая цена до последнего шага. Такой приём часто используют на страничках с описанием продукта: цену указывают в самом конце, перед этим рассказывая обо всех плюшках. Здесь же это лишнее. Если клиент уже оформляет заказ, он хочет видеть, сколько ему придётся заплатить, а такое «утаивание» может его отпугнуть. При этом платную страховку сразу включили флажком в стоимость, сделав пометку мелким и светлым шрифтом.

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

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

«Честный» интерфейс

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

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

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

Доставка отображается в виде карточки с датой, временем и ценой; выбранное состояние очевидно. Видно и время, и доплату. Кстати, о деньгах: полная стоимость видна до оплаты и продублирована в кнопке — «Оплатить 7 329 ₽». То есть не возникает ощущение, что тебя хотят обмануть таким оттягиванием.

Показаны живые состояния: поле в фокусе, проверенное поле, поле с ошибкой. Лишние вопросы не возникают, а если и появляются, то ответы на них видны сразу.

Вместо вывода: так когда же пора говорить о дизайне?

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

Если собрать статью в несколько принципов, получится так:

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

Напоследок вернусь к метафоре, с которой начала. Да, встречаем мы «по одёжке» — но провожаем всё-таки по тому, удобно ли с этим жить дальше. Хороший интерфейс проходит оба теста: его хочется открыть — и с ним не хочется прощаться.

P.S. Если хочется взглянуть на данные как на искусство — послушайте подкаст с Анастасией Кузнецовой о важности дизайна в аналитики и разборе рабочих визуализаций.