Что такое UX/UI-дизайн сайта и почему UX так важен

UX/UI — одно из тех сочетаний букв, которые постоянно встречаются при разработке сайтов.

«Нужно улучшить UX».

«Здесь слабый UI».

«Нужен UX/UI-дизайнер».

«Сделаем современный UX».

Проблема в том, что за этими словами легко потерять главное.

Для бизнеса UX/UI-дизайн — не отдельный декоративный этап между прототипом и разработкой.

В нашем рабочем понимании UX отвечает за то, как человек пользуется сайтом и проходит свой сценарий, а UI — за то, как этот интерфейс визуально представлен и как с ним взаимодействуют.

То есть UX — это прежде всего вопросы:

• зачем человек пришёл;
• что он должен понять;
• какую информацию ему нужно получить;
• в какой последовательности;
• где возникают сомнения;
• какое действие он должен совершить дальше.

А UI превращает эту логику в конкретный интерфейс:

кнопки, блоки, типографику, навигацию, визуальную иерархию и другие элементы страницы.

Поэтому хороший сайт начинается не с обсуждения оттенка кнопки.

Сначала нужно понять путь пользователя.

{здесь вставить изображение: «UX — сценарий и логика → UI — визуальная реализация интерфейса»}

UX и UI — не одно и то же

Эти понятия почти всегда упоминают вместе, из-за чего их легко воспринимать как одно направление.

Но для проектирования сайта полезно разделять их.

UX — пользовательский опыт и логика взаимодействия.

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

UI — интерфейс, через который этот сценарий реализуется.

То, как представлены кнопки, секции, навигация, текст, изображения и другие элементы.

Условно:

UX отвечает на вопрос:

«Что должно произойти с пользователем на этой странице?»

UI:

«Как сделать этот сценарий понятным и визуально реализовать его?»

Одно без другого работает плохо.

Можно сделать аккуратный и современный интерфейс, в котором человеку непонятно, что вообще продаёт компания.

А можно построить логичную структуру и испортить её слабой визуальной иерархией.

Поэтому при разработке сайта мы рассматриваем UX и UI как связанные части одного продукта.

Почему все так много говорят именно об UX

Потому что пользователь не приходит на сайт любоваться работой дизайнера.

У него есть задача.

Например:

понять, подходит ли ему продукт;

сравнить предложение;

найти условия;

снять сомнения;

оставить заявку.

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

Поэтому ещё до полноценного дизайна нам важно понять:

кто этот пользователь;

зачем он пришёл;

какой путь должен пройти;

и какая информация нужна ему по дороге.

В нашем процессе именно поэтому сначала появляется не финальный макет, а чёрно-белый прототип.

В нём уже есть структура страницы, секции, CJM и CTA.

То есть UX-логика появляется раньше визуального оформления.

UX начинается с понимания бизнеса

Нельзя качественно проектировать пользовательский опыт, если неизвестно, чем вообще занимается компания и почему её выбирают.

Поэтому до Figma мы разбираемся:

• что за продукт перед нами;
• кто им пользуется;
• зачем он нужен человеку;
• почему клиент выбирает эту компанию;
• почему может предпочесть конкурента;
• какие вопросы возникают перед покупкой;
• как устроены продажи.

Для нас особенно важны два вопроса:

Что за продукт?

И:

Почему человеку вообще должно быть нужно то, что мы предлагаем?

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

Именно поэтому разработка начинается с интервью с собственником или другим ЛПР, а не с вопроса:

«Какие сайты вам нравятся?»

Подробнее этот этап разбираем в статье «Почему мы не используем брифы и жёсткое ТЗ для разработки сайта».
{ссылка на /blog/pochemu-my-ne-ispolzuem-brify-i-zhestkoe-tz}

Один сайт могут использовать совершенно разные люди

Одна из важных задач UX — не воспринимать всю аудиторию как одного абстрактного «пользователя».

У бизнеса могут быть разные сегменты.

И даже один и тот же продукт может покупать человек с совершенно разными мотивами.

В нашем документе есть простой пример с надувным матрасом.

Одному человеку он нужен, чтобы отдыхать на море.

Другому — чтобы организовать дополнительное спальное место дома.

Продукт один.

Но сценарии разные.

Различаются причины покупки.

Вопросы.

Приоритеты.

Контекст.

Поэтому недостаточно написать:

«Наша аудитория — мужчины и женщины такого-то возраста».

При проектировании сайта нам нужно понимать, что конкретно приводит человека на страницу и чего он ожидает дальше.

Для этого нужен CJM

В нашей работе пользовательские сценарии связываются с CJM — Customer Journey Map.

Практически это означает, что мы стараемся представить путь определённого сегмента аудитории.

От возникновения интереса до нужного действия на сайте.

Какая информация человеку нужна сначала?

Что может остановить?

Какие возражения появляются?

Что помогает двигаться дальше?

Где должен появиться CTA?

Что должно произойти после него?

Это превращает проектирование из размещения блоков «потому что обычно на сайтах так» в работу со сценарием.

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

Он зависит от того, в какой момент пользователю нужна конкретная информация.

UX определяет структуру страницы

Представим условную страницу услуги.

Можно разместить:

первый экран;

преимущества;

описание;

кейсы;

отзывы;

FAQ;

форму.

Но сам список блоков ещё не является UX.

Важна последовательность.

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

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

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

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

Именно это мы прорабатываем ещё на этапе концепта.

CTA — тоже часть UX, а не просто яркая кнопка

CTA — call to action, целевое действие.

Оставить заявку.

Записаться.

Позвонить.

Получить консультацию.

Для нас важно не только наличие кнопки.

Нужно понимать:

готов ли пользователь выполнить это действие именно сейчас?

Если человек ещё не понял предложение, бесполезно просто поставить перед ним огромную кнопку «Купить».

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

Поэтому CTA связан с пользовательским сценарием.

Его положение и формулировка должны соответствовать тому, на каком этапе находится человек.

Именно поэтому вопрос:

«Почему кнопка находится здесь?»

для нас важнее:

«Какого она цвета?»

UX помогает работать с возражениями

Сайт участвует в коммуникации между бизнесом и потенциальным клиентом.

До разговора с менеджером у человека могут возникнуть вопросы:

«Подойдёт ли мне это?»

«Можно ли вам доверять?»

«Почему такая цена?»

«Как это вообще работает?»

«Что произойдёт после заявки?»

Если эти вопросы типичны для аудитории, сайт должен учитывать их в структуре и текстах.

Поэтому в нашем понимании продающий сайт связан не только с формой заявки.

Он включает:

• правильный оффер;
• UX;
• расположение блоков;
• работу с болями;
• страхами;
• возражениями;
• сегментацию аудитории;
• CJM;
• тексты для отдельных сегментов.

Именно так UX начинает работать не просто на удобство, а на бизнес-задачу.

Сначала UX-прототип — потом полноценный дизайн

После исследования мы собираем чёрно-белый прототип.

Не финальный визуальный макет.

В этот момент нас интересует содержание и логика:

• какие секции нужны;
• в каком порядке;
• какие CTA используются;
• какие сценарии проходит аудитория;
• какая информация должна быть на каждом этапе.

Почему без визуала?

Потому что цвет и стиль легко перетягивают внимание.

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

Чёрно-белый концепт позволяет сначала задать более полезный вопрос:

«Правильно ли вообще построен путь пользователя?»

И только потом заниматься внешним видом.

{здесь вставить изображение: пример wireframe → финальный UI}

UI нужен, чтобы логика стала понятным интерфейсом

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

Здесь уже важно то, как пользователь воспринимает информацию.

Какие элементы заметит сначала.

Какие — потом.

Где находится навигация.

Насколько явно выделены целевые действия.

Как разделены смысловые блоки.

Как интерфейс ведёт себя на разных устройствах.

То есть UI не существует отдельно от UX.

Он помогает реализовать уже сформированный сценарий.

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

Порядок обратный:

бизнес → пользователь → сценарий → структура → интерфейс.

Почему дизайн нельзя оценивать только по принципу «нравится — не нравится»

У любого визуального решения есть субъективная часть.

Поэтому фраза:

«Мне не нравится»

сама по себе допустима.

Но для нормальной работы нам нужно понять, что именно за ней находится.

Проблема для аудитории?

Неправильное понимание бренда?

Слабая визуальная иерархия?

Или просто личное предпочтение?

Условный аргумент:

«Я показал жене, она сказала, что синий некрасивый»

мы услышим.

Но сам по себе он не становится достаточным основанием менять дизайн.

Сайт создаётся не для дизайнера.

Не для собственника.

И не для его семьи.

Он должен работать для клиентов бизнеса.

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

Хороший UX нужно уметь объяснить

Когда мы презентуем концепцию, нам недостаточно показать макет и спросить:

«Ну как вам?»

Мы защищаем логику.

Почему блок расположен именно здесь.

Почему CTA появляется в этом месте.

Почему сценарий построен именно так.

Почему мобильный интерфейс устроен определённым образом.

Для аргументации используем:

• UX-принципы;
• конкурентный анализ;
• доступную веб-аналитику;
• собственный опыт.

Иногда — известные нам исследования, если они действительно относятся к задаче.

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

То есть дизайнерское решение должно иметь логику.

Не обязательно каждую кнопку подтверждать научной статьёй.

Но ответ:

«Так просто красивее»

для важного решения слишком слабый.

О том, как проходит такой диалог с клиентом, подробнее — «Как мы принимаем и защищаем решения в дизайне сайта».
{ссылка на /blog/kak-my-prinimaem-i-zashchishchaem-resheniya-v-dizajne-sajta}

UX не означает, что дизайнер всегда знает лучше

Это важная граница.

Мы можем разбираться в проектировании интерфейсов.

Но собственник лучше знает собственный бизнес.

Если заказчик говорит:

«Наши клиенты ведут себя не так»

— это нельзя просто проигнорировать со словами:

«Мы UX-эксперты, нам виднее».

Мы задаём вопросы.

Проверяем, правильно ли поняли информацию.

И если ошиблись — меняем концепцию.

В наших проектах были ситуации, когда заказчик прямо останавливал объяснение:

«Нет, вы не так поняли».

И действительно — мы понимали неправильно.

Поэтому хороший UX появляется не тогда, когда дизайнер самостоятельно придумал идеальную картину пользователя.

Он появляется в диалоге с бизнесом.

Но заказчик тоже не обязан самостоятельно проектировать UX

Есть обратная ситуация.

Клиент говорит:

«Сделайте кнопку больше и красной».

Мы скорее спросим:

«Зачем?»

Например:

«Чтобы пользователь её заметил».

Теперь у нас есть UX-задача — недостаточная заметность целевого действия.

И уже после этого можно искать решение.

Возможно, действительно увеличить кнопку.

Возможно, изменить расположение.

Возможно, убрать визуальный шум вокруг.

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

То есть заказчик приносит наблюдение о проблеме.

А студия должна предложить профессиональную реализацию.

Именно поэтому UX/UI-дизайн — это не просто работа руками в Figma.

UX должен учитывать мобильные устройства

Пользовательский сценарий нельзя проектировать только для большого экрана дизайнера.

Сайт должен работать на мобильных устройствах, планшетах и десктопах.

Причём адаптация — это не просто уменьшение всех элементов.

Меняется пространство.

Способ взаимодействия.

Расположение элементов.

Количество информации, которое одновременно помещается на экране.

Поэтому решение, которое удобно на desktop, не обязательно можно буквально перенести на смартфон.

В наших проектах адаптивность является частью реализации и последующего тестирования.

Скорость сайта тоже влияет на UX

Пользовательский опыт — это не только композиция макета.

Человек взаимодействует уже с работающим продуктом.

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

Поэтому в разработке мы используем:

• lazy loading;
• CDN;
• оптимизацию изображений;
• работу с Core Web Vitals;
• Next.js;
• SSR.

То есть хороший UX заканчивается не в Figma.

Он должен пережить этап разработки и сохранить свою работоспособность в production.

Поэтому после дизайна сайт ещё нужно тестировать

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

Поэтому перед запуском мы проверяем:

• браузеры;
• адаптивность;
• формы;
• интеграции;
• accessibility;
• пользовательские сценарии;
• производительность.

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

У нас есть простая внутренняя установка:

«Действуй как самый тупой пользователь».

Нажимай не туда.

Ищи информацию неожиданным способом.

Проверяй нестандартные сценарии.

Потому что разработчик слишком хорошо знает собственный интерфейс.

Пользователь — нет.

Подробнее об этом этапе — «Как мы тестируем сайт перед запуском».
{ссылка на /blog/kak-my-testiruem-sajt-pered-zapuskom}

После запуска UX можно оценивать уже по реальному поведению

До публикации мы работаем с анализом, бизнес-контекстом и гипотезами.

После запуска появляется дополнительный источник — реальные пользователи.

Если сайт остаётся на сопровождении, можно смотреть на метрики и работать с CRO — оптимизацией конверсии.

Тогда часть вопросов уже можно проверять не только обсуждением.

Например:

достаточно ли пользователей совершают нужное действие;

где возникают проблемы;

какие элементы пользовательского пути требуют пересмотра.

Поэтому UX — не обязательно решение, которое один раз утвердили в Figma и больше никогда не трогают.

Сайт работает внутри живого бизнеса.

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

Подробнее — «Что такое CRO, зачем оно и кому нужно».
{ссылка на /blog/chto-takoe-cro}

UX/UI-дизайн нужен не ради самого UX/UI

Бизнесу в конечном счёте не нужен CJM ради CJM.

Не нужен прототип ради прототипа.

Не нужен даже красивый UI как самостоятельный результат.

Все эти инструменты имеют смысл только тогда, когда помогают сделать сайт полезнее.

Понять аудиторию.

Правильно объяснить продукт.

Закрыть вопросы.

Упростить взаимодействие.

Подвести человека к нужному действию.

Поэтому UX/UI в нашем процессе является частью более широкой задачи разработки сайта.

Не:

«Мы сейчас сделаем вам UX».

А:

«Мы должны понять, как человек будет пользоваться вашим сайтом, и спроектировать под это интерфейс».

Может ли сайт быть красивым и при этом иметь плохой UX

Да.

Красивый дизайн ещё не означает понятный сценарий.

Можно сделать впечатляющую анимацию.

Необычную композицию.

Красивую типографику.

Но если посетитель не понимает:

что ему предлагают;

где найти нужную информацию;

почему стоит доверять компании;

что нажимать дальше,

сайт не выполняет свою задачу.

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

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

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

А может ли хороший UX выглядеть плохо

В нашей логике это тоже нежелательный результат.

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

Например, важные и второстепенные элементы выглядят одинаково.

CTA теряется.

Текст сложно читать.

Композиция перегружена.

Поэтому UX и UI нельзя полностью разделить.

Сначала мы проектируем логику.

Потом визуальный дизайн помогает сделать эту логику воспринимаемой.

И уже после разработки проверяем, сохранилась ли она в работающем продукте.

Как выглядит наш процесс UX/UI-дизайна сайта

Если сильно упростить, он выглядит так:

1. Разбираемся в бизнесе

Интервьюируем заказчика и заинтересованных участников проекта.

2. Изучаем продукт и аудиторию

Смотрим конкурентов, отзывы, поисковую выдачу, сегменты ЦА и причины выбора.

3. Проектируем сценарии

Определяем CJM и основные целевые действия.

4. Создаём чёрно-белый концепт

Формируем структуру страниц, секции и CTA.

5. Защищаем решения

Объясняем логику заказчику и корректируем её при необходимости.

6. Создаём визуальный дизайн

Переводим проработанный сценарий в полноценный интерфейс.

7. Разрабатываем

Делаем адаптивный работающий продукт.

8. Тестируем

Проверяем технические и пользовательские сценарии.

9. После запуска смотрим на реальные данные

Если проект остаётся на сопровождении, можем заниматься дальнейшим CRO.

{здесь вставить изображение: визуальная схема этапов UX/UI-проектирования}

Вся последовательность разработки целиком описана в статье «Как мы работаем над сайтом: от интервью до запуска».
{ссылка на /blog/kak-my-rabotaem-nad-sajtom}

Почему UX важен именно для бизнеса

Потому что сайт находится между компанией и её потенциальным клиентом.

Если пользователь не понимает интерфейс, для него это не «UX-проблема».

Он просто:

не находит информацию;

не понимает предложение;

не видит следующий шаг;

или уходит.

Поэтому проектирование пользовательского опыта для бизнеса — это не дизайнерская теория.

Это работа с тем, как сайт выполняет свою функцию.

Именно по этой причине для нас продающий сайт включает не только визуальную часть.

Он строится вокруг:

оффера;

UX;

структуры;

возражений;

сегментов ЦА;

CJM;

и целевых действий.

А дизайн помогает всё это превратить в понятный интерфейс.

Что на самом деле получает заказчик вместе с UX/UI-дизайном

Не только макеты.

Если процесс построен нормально, до финального дизайна уже проделана работа:

понят продукт;

выделены сегменты аудитории;

разобраны конкуренты;

сформированы пользовательские сценарии;

спроектирована структура;

определены CTA;

пройдена защита концепции.

Только после этого появляется визуальная оболочка.

Поэтому UX/UI-дизайн для нас не является услугой:

«Нарисуем красивые экраны».

Это часть проектирования продукта.

А сам клиент в конечном счёте покупает не Figma-файл, а команду, которая должна помочь решить задачу бизнеса с помощью сайта.

Подробнее эту позицию раскрываем в статье «Что на самом деле покупает бизнес, заказывая сайт у студии».
{ссылка на /blog/chto-pokupaet-biznes-zakazyvaya-sajt-u-studii}

Нужен UX/UI-дизайн сайта? Начнём не с дизайна

Если вы хотите разработать или переработать сайт, нам необязательно заранее знать:

какой должна быть структура;

где поставить каждую кнопку;

какие блоки нужны;

какой пользовательский сценарий выбрать.

Сначала важнее понять ваш бизнес.

Продукт.

Аудиторию.

Продажи.

И задачу самого сайта.

После этого уже можно проектировать UX и превращать его в интерфейс.

{здесь вставить CTA}

Обсудить UX/UI-дизайн сайта с Sadovnikov.digital

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

[Записаться на интервью]