Дизайн встречают по одёжке

Sun, 11 Oct 2026 13:22:44 +0300

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

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

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

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

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

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

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

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

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

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

«Очень крутой и интерактивный интерфейс, который сразу зацепит глаз»

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

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

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

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

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

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

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

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

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

Хороший дашборд

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

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

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

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

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

Не юзер-френдли интерфейс

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

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

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

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

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

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

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

Юзер-френдли интерфейс

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

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

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

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

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

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

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

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

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

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