Сайт хвалят, а посетители всё равно уходят
Разговор о UX/UI чаще всего начинается одинаково. Сайт выглядит хорошо. Команде нравится, как его приняли на согласовании. А потом Метрика показывает: люди бросают те же самые формы, что и раньше, менеджерам задают те же вопросы, которые сайт должен был закрыть, а конверсия стоит на месте. Интерфейс поменялся. Поведение — нет.
Обычно причина не на поверхности, а выше по течению. Дизайн переделали, а структура сайта осталась прежней. Или исследованием занимались одни, прототипами — другие, визуалом — третьи, и на каждой передаче терялся смысл, пока итоговый интерфейс не начал решать задачу «чтобы было аккуратно», а не задачу пользователя. К моменту запуска те, кто разговаривал с клиентами, уже давно вышли из проекта.
Что делают в таких случаях? Кнопку побольше. Первый экран почище. Поля в форме поменять местами. Иногда показатель сдвигается на пару процентов. Чаще — ничего. Интерфейс не сломан в каком-то одном месте. Он решает не ту задачу.
Настоящая работа над UX/UI — структурная, а не косметическая. Это умение собрать исследование, структуру, сценарии взаимодействия и визуал в одно связное представление о том, как сайт должен работать для человека.
Как мы понимаем UX/UI
UX/UI-проекты ломаются с одного из двух концов: либо красивый интерфейс, который никто не проверял на реальном поведении людей, либо толстый отчёт с исследованием, который положили в папку и открыли макеты с чистого листа. Мы строим работу так, что исследование, структура и интерфейс — не отдельные этапы для отдельных команд.
Стратегия и есть дизайн
Большинство студий начинают UX/UI с открытия графического редактора. Мы начинаем с вопроса, зачем сайт вообще нужен вашему клиенту: разбираем записи звонков и обращения в поддержку, структуру сайтов конкурентов, сверяем предположения руководства с данными Метрики. Дизайн становится следствием этого разбора, а не его заменой.
Структура от аудитории, а не от оргсхемы
Многие сайты устроены по внутренней логике компании: отделы, направления, исторически сложившиеся разделы. Это работает только тогда, когда совпадает с тем, как ищет ответ посетитель. Мы строим структуру от того, кто пришёл на сайт и что ему нужно сделать, — чтобы пункты меню звучали как поисковый запрос клиента, а не как термин из внутренней переписки.
Опыт людей, усиленный нейросетями
Интерфейсы, собранные нейросетью за минуты, сейчас повсюду. Чего в них нет — так это взгляда человека, который решает, работает ли это вообще: три одинаковых блока подряд, дежурные тексты на кнопках, ставка на новых клиентов, когда бизнес живёт на рекомендациях. Нейросеть — самый быстрый участник команды, но не самый умный. Решения принимают опытные люди; нейросеть ускоряет разбор данных.
Одна команда от исследования до макетов
UX/UI-проекты чаще всего рассыпаются на стыках. Аналитик передаёт выводы дизайнеру, который не читал исследование; дизайнер отдаёт прототипы визуальщику, которого не было на обсуждении структуры. Мы собираем команду так, что люди, которые проводили исследование, остаются в проекте до визуального дизайна и передачи в разработку.
Если бы вы сами руководили этим проектом и могли выбрать, кто примет решение, вы бы выбрали того, кто делал исследование, а не менеджера, который пересказывает слова специалистов. Мы так и собираем команду по умолчанию. Решения принимают те, кто может их выполнить, — без прослойки между вами и ними.
Что входит в полноценный UX/UI-проект
Работа над UX/UI охватывает исследование, проектирование структуры и визуальное исполнение. Чаще всего она идёт внутри разработки сайта, где одна команда отвечает за каждый слой. Отдельным блоком тоже делаем, когда это оправдано.
Исследование
Прежде чем нарисовать первый прототип, собираем базу, на которую опираются все дальнейшие решения: интервью с руководством и менеджерами, разбор записей звонков и обращений клиентов, структура сайтов конкурентов, данные Метрики и портреты аудитории с отдельным путём для каждой группы, которую сайт должен обслужить. Именно здесь решается, какой будет навигация, порядок разделов и тон каждого блока — задолго до макетов.
Структура и пользовательские сценарии
От структуры зависит, найдёт ли посетитель нужное или закроет вкладку. Карта сайта, которая не копирует конкурентов, а ищет, где можно выделиться; сценарий пути для каждого портрета аудитории; документ о структуре, где записано, в каких местах мы следуем привычным решениям, а где сознательно их нарушаем и почему. Структура — это стратегия, а карта сайта — лишь один из её результатов.
Прототипы
Прототипы утверждаем по очереди: сначала главная, затем внутренние шаблоны — после того как зафиксирована дизайн-система. Главной уделяем больше всего внимания, потому что от неё тянутся все остальные решения. Когда сценарии сложные или руководству нужно «пощупать» вживую, собираем интерактивный прототип. Мобильная версия проектируется наравне с настольной, а не прикручивается в конце.
Визуальный дизайн и дизайн-система
Визуал служит структуре и бренду, а не модному приёму. Шрифты, цвета, отступы и компоненты разрабатываем как систему, которая работает на всех шаблонах, а не как главную, заново переизобретаемую для каждой внутренней страницы. Документация по компонентам нужна для того, чтобы ваша команда после запуска расширяла сайт, не ломая его. Если у компании есть суббренды, которым нужен свой характер внутри общей системы, закладываем и это. Адаптивность и доступность — с первого экрана, а не по остаточному принципу.
Передача в разработку
Красивые макеты, которые невозможно сверстать, — типичная беда. Мы проектируем интерфейс вместе с теми, кто будет его собирать, и передаём документацию, где написано не только «как», но и «почему»: спецификации компонентов, состояния элементов, требования к доступности и логика решений на случай, когда макет не предусмотрел какую-то ситуацию. Если сайт собирает ваша команда или другой подрядчик, мы выстраиваем передачу так, чтобы одни и те же вопросы не ходили через менеджера каждую неделю.
Не знаете, с чего начать? Начните с аудита
Когда UX/UI-дизайн оправдан
Честно скажем, какой путь подходит в вашей ситуации.
Внутри разработки сайта
Большая часть нашей UX/UI-работы идёт внутри полной разработки сайта — потому что именно там стратегия доживает до готового продукта. Если вы переделываете сайт или серьёзно его перестраиваете и уже обжигались на интерфейсах, которые нравились, но ничего не меняли, — это ваш вариант.
Отдельный UX/UI-спринт
Когда у вас есть своя команда дизайнеров или разработчиков и ей нужны исследование, структура и прототипы, по которым работать. Или когда нужен обоснованный план редизайна до того, как оценивать полную переделку. Или вы запускаете новый раздел или сервис внутри существующего сайта.
Лучше — повышение конверсии
Когда структура в порядке, а проблема поддаётся тестированию. Страницы уже приносят заявки, и задача — постепенно улучшать показатели, а не переосмысливать сайт. Работа над конверсией тестирует тот слой, который реально можно менять; UX/UI нужен тогда, когда слой, требующий изменений, лежит глубже, чем тесты.
Пока рано
Когда непонятно, кто ваш пользователь, нет ни аналитики, ни отзывов, на которые можно опереться, или компания меняет позиционирование и путь клиента вот-вот изменится сам. Мы скажем вам об этом прямо, даже если большой проект был бы нам выгоднее.
Как на самом деле идёт работа над UX/UI
Пять этапов. Порядок всегда один и тот же. Объём меняется в зависимости от того, идёт ли работа отдельно или внутри разработки сайта, — последовательность нет.
01 Знакомство
Несколько недель исследования до любого визуала. Интервью с руководством и менеджерами, разбор звонков и обращений клиентов, структура сайтов конкурентов, данные Метрики и Вебвизора, портреты аудитории для каждой группы, которую сайт должен обслужить.
02 Стратегия
Затем — синтез. Складывается документ о структуре сайта: навигация на языке клиента, задача каждой страницы и обоснование каждого решения по меню. Если проект идёт вместе с работой над брендом, структуру сверяем с позиционированием, чтобы она выражала бренд, а не спорила с ним.
03 Реализация
Прототипы утверждаем по очереди: главная, затем внутренние шаблоны после фиксации системы. Визуальный дизайн следует за прототипами и опирается на дизайн-систему, а не рисуется для каждой страницы отдельно. Опытные специалисты остаются в проекте от исследования до макетов; нейросети ускоряют анализ, но не принимают стратегических решений.
04 Запуск
Для отдельного спринта это передача разработчикам: документация, созвоны с разбором, ответы на вопросы во время сборки. Для проекта внутри разработки — дизайн переходит в вёрстку к той же команде, что была с самого старта. В любом случае вместе с макетами передаём логику каждого значимого решения.
05 Оптимизация
Первые месяцы после запуска показывают то, чего не предскажет ни одно исследование: где живой трафик спотыкается, какие пути работают лучше ожидаемого, что стоит донастроить. Все выводы фиксируем в общей документации, чтобы следующий этап начинался с фактов, а не с чистого листа.
Как UX/UI усиливает остальное
UX/UI приносит больше всего пользы, когда связан с тем, что идёт до него и после.
UX/UI → Редизайн сайта
Чаще всего UX/UI-проект идёт внутри редизайна. Когда одна команда отвечает за исследование, дизайн и разработку, смысл, ради которого строилась структура, доживает до запущенного сайта, а не теряется на передачах.
UX/UI → Повышение конверсии
Сильная структура даёт программе тестирования широкое поле для гипотез; слабая — ограничивает, что вообще можно исправить тестами. Когда обе задачи ведёт одна команда, тестирование наследует логику, по которой строилась структура.
UX/UI → Брендинг
Фирменный стиль — фундамент, на котором строится дизайн-система. Если бренд изменился, а визуальная айдентика не успела, дизайн-система закрепит решения, из которых компания вот-вот вырастет. Иногда правильный порядок — сначала бренд, потом UX/UI на обновлённой основе.
Накопительный эффект
Чаще всего UX/UI становится связующей тканью для всего, что делает сайт. Структура определяет, вокруг чего SEO-специалист сможет строить экспертность. Исследование аудитории подсказывает, какие смыслы писать в бренд-платформе. Дизайн-система даёт маркетингу шаблоны, которые можно расширять, не разваливая внешний вид. Эффект накапливается: через несколько месяцев команда замечает, что каждое новое решение принимается быстрее, потому что база уже задокументирована.
«Когда исследование и интерфейс делает одна команда, смысл доживает до каждого решения. Именно на передачах между специалистами UX/UI чаще всего теряет остроту».
Руководитель студии
С чего начать
UX/UI без исследования — это более аккуратная версия гадания. UX/UI без ясности по бренду закрепляет позиционирование, из которого компания скоро вырастет. UX/UI без связи с разработкой рождает красивые файлы, которые мучительно верстать. С чего начинать — зависит от того, что отстаёт сильнее. Разберём это на созвоне.
Кому мы подходим
UX/UI окупается, когда обе стороны стартуют с одних и тех же ожиданий: исследование до дизайна, язык клиента вместо внутренних терминов, структурные решения раньше визуальных. Расхождения обычно всплывают позже, когда менять курс уже дорого и больно. Лучше назвать их сейчас.
Мы подходим, если
- Компаниям, чей сайт хвалят, но который не меняет поведение посетителей
- Маркетологам, которые видели, как исследование клали в папку, а дизайн делали без него
- Руководителям, которым нужна одна команда за исследование, структуру и дизайн, а не координация подрядчиков
- Компаниям с понятной аудиторией и достаточным объёмом аналитики или обратной связи, чтобы на них опираться
- Командам, готовым отойти от привычного, если исследование аудитории даёт на это ясную причину
- Руководителям, способным отстоять язык клиента против внутренней терминологии
Мы не подходим, если
- Тем, кто хочет, чтобы дизайнер пропустил исследование и сразу открыл макет
- Компаниям, ожидающим кратного роста конверсии от одной лишь смены визуала
- Организациям, которым нужны формальные юзабилити-тесты с набором респондентов и лабораторным наблюдением
- Заказчикам, у которых каждое решение по интерфейсу утверждает комитет
- Командам в разгар смены позиционирования, когда путь клиента вот-вот поменяется
- Компаниям, где разработка сидит в отдельной команде и не готова участвовать на этапе дизайна
Если по любому из списков мы не подходим друг другу, скажем это на первом созвоне, а не через три месяца, когда расхождение станет дорогим.
Прозрачные цены
Стоимость
По запросу, ориентир: от … за отдельный спринт, от … в составе разработки сайта
- Исследование, структура, прототипы, визуальный дизайн, документация дизайн-системы и передача в разработку
- Отдельный спринт подразумевает, что визуал или разработку делает ваша команда
- Несколько аудиторий, суббренды и требования к доступности расширяют объём
Сроки
Несколько недель для отдельного спринта, несколько месяцев в составе разработки
- Отдельный спринт охватывает всё от исследования до передачи
- UX/UI внутри разработки идёт от старта до запуска сайта
- Скорость решений и готовность материалов влияют на сроки сильнее всего, что зависит от нас
Оплата
По этапам
- Отдельный спринт: половина при старте, половина при сдаче
- В составе разработки: поэтапно — аванс при старте, далее по ходу проекта, остаток при подписании акта
- Работа вне объёма оформляется письменным дополнением до начала любых дополнительных работ
Без сюрпризов и скрытых доплат.
От чего зависит цена
- Сложность аудитории и структуры. Сайт для одного типа клиента с линейным путём — это другой объём работы, чем сайт для нескольких разных аудиторий, суббрендов или людей в разном эмоциональном состоянии.
- Глубина исследования. Проекты, где интервью с клиентами, разбор звонков и анализ конкурентов можно сжать, отличаются от тех, где каждый пункт требует серьёзного погружения.
- Широта дизайн-системы. Одна страница или набор шаблонов — не то же самое, что полная дизайн-система с описанными компонентами, состояниями и требованиями к доступности.
- Доступность, многоязычность и вспомогательные технологии. Сайты для широкой аудитории или для регулируемых отраслей включают работу над соответствием требованиям, которой нет в лёгких проектах.
- Связь с разработкой. Проекты, где сайт собирает студия «Своя орбита», идут быстрее: дизайн и вёрстка живут в одной инфраструктуре. Передача вашим или сторонним разработчикам требует больше документации и времени на ответы.
Частые вопросы
Частые вопросы о UX/UI-проектах: об исследовании, на котором они строятся, и о том, как результат доживает до готового сайта.
Сколько длится UX/UI-проект?
Отдельный спринт (исследование, структура, прототипы, визуал, передача в разработку) обычно занимает несколько недель. UX/UI внутри полной разработки сайта идёт несколько месяцев — от старта до запуска. Проекты с несколькими аудиториями, суббрендами, требованиями к доступности или многоязычности длятся дольше. Сильнее всего на срок влияет то, как быстро ваша сторона даёт обратную связь и принимает структурные решения.
Зачем столько времени на исследование до дизайна?
Потому что иначе мы будем эффективно решать не ту задачу. UX/UI без исследования рождает интерфейсы, которые хорошо смотрятся на презентации и плохо работают в жизни. Исследование показывает, что люди реально делают, что ищут, где застревают и какой контент важен какой аудитории. К моменту прототипов у каждого структурного решения есть записанное обоснование, привязанное к поведению пользователя или цели бизнеса. Это и отличает UX/UI, который поднимает конверсию, от UX/UI, который собирает комплименты.
Чем UX отличается от UI и нужно ли нам и то и другое?
UX (пользовательский опыт) — структурная часть: исследование, архитектура сайта, сценарии, прототипы, логика взаимодействия. UI (интерфейс) — визуальное исполнение: шрифты, цвета, отступы, компоненты — то, к чему человек прикасается. На бумаге они разделимы, на практике нет: визуал, который не опирается на структуру и исследование, выглядит цельно, а ведёт себя бессвязно. В большинстве проектов нужно и то и другое — и в руках одной команды.
Как вы используете нейросети в UX/UI?
Нейросеть — самый быстрый участник команды, но не самый умный. Где она ускоряет работу: обработка записей Вебвизора, обращений в поддержку, отчётов по поисковым запросам и контента конкурентов в объёмах, на которые вручную ушли бы недели. Что она не решает: какой быть структуре, как называть пункты меню и от каких привычных решений отказаться. Стратегические решения остаются за опытными людьми; нейросеть сжимает аналитику и рутину, которые раньше отнимали у них время.
Проводите ли вы формальные юзабилити-тесты с респондентами?
Нет. Формальные исследования с набором респондентов и лабораторным наблюдением дают отличные данные и уместны при бюджетах, которые выдерживают отдельный дорогой исследовательский проект. Среднему бизнесу это редко оправдано. Вместо этого мы используем то, что уже есть: записи звонков, обращения клиентов, упоминания в соцсетях, аналитику и интервью с сотрудниками. Вместе с проработкой портретов и путей клиента это даёт строгое понимание пользователя без стоимости лаборатории. Если вашей ситуации нужен именно такой уровень тестирования, порекомендуем исследовательскую компанию под эту задачу.
Что делать с дизайном, который разработчики не могут собрать?
Не допускать этого: разработчик участвует в обсуждении на этапе дизайна, а не после. Главная причина «красивый макет — плохая вёрстка» в том, что дизайн рисуют в отрыве от ограничений платформы или CMS. В наших проектах есть контрольные точки проверки реализуемости прямо во время визуального дизайна. Если сайт собирает наша команда, передача идёт непрерывно. Если ваша или сторонняя — документацию строим вокруг вопросов, которые реально задают верстальщики: не только что нарисовано, но и почему так.
Что входит в дизайн-систему?
Минимум: шкала шрифтов, система цветов с правилами применения, отступы и сетка, библиотека компонентов с вариантами и состояниями, описание того, как систему расширять. В больших проектах добавляются дизайн-токены, требования к доступности по каждому компоненту и инструкция для новых сотрудников. Глубина зависит от того, как систему будут использовать: маркетингу, который выпускает пару новых шаблонов в год, нужно меньше, чем продуктовой команде, которая ежемесячно выкатывает новые функции.
Насколько нам нужно участвовать?
Больше, чем обычно признают на первом созвоне. Планируйте несколько часов в неделю от одного ответственного с вашей стороны в активные фазы. Плюс несколько часов за весь проект от каждого эксперта, который будет смотреть выводы исследования, проверять структуру или давать вводные. Быстрее всего заканчиваются проекты, где заказчик передаёт сведённую обратную связь через одного человека и в оговорённом ритме.
Сколько раундов правок включено?
Один. На каждом этапе (выводы исследования, структура, прототипы, визуал) — один раунд сведённых замечаний с вашей стороны и один раунд правок с нашей. Дальше — по часам. Это не способ заработать, а дисциплина. Бесконечные правки в проектах возникают не потому, что одного раунда мало, а потому, что дизайн начали до того, как зафиксировали исследование, бренд и структуру. Мы выстраиваем работу так, чтобы структурные вопросы решались до визуала. Если во время дизайна всплывает что-то действительно структурное, возвращаемся к разговору о структуре, а не замазываем ещё одним раундом визуала.
Вы гарантируете результат?
Ни одна честная студия этого не сделает. Мы гарантируем работу: глубину исследования, дисциплину в структуре, качество дизайна, требования доступности, документацию при передаче и обоснование каждого значимого решения. Но мы не гарантируем, что конкретный интерфейс поднимет конверсию на конкретный процент, — слишком многое лежит выше страницы: предложение, аудитория, источник трафика, остальной сайт. Тот, кто обещает конкретные цифры, либо продаёт шаблоны, либо обещает то, чего не выполнит.
Готовы проектировать ради заявок, а не ради комплиментов?
Обычно разговор о UX/UI начинается с «как скоро вы начнёте рисовать?». Наш начинается с другого. Мы хотим понять, кто ваш пользователь, что сайт должен для него сделать и действительно ли UX/UI — правильное следующее вложение или сначала нужно разобраться с чем-то выше по течению. Этот разговор полезен независимо от того, будем ли мы работать вместе.
Мы честно скажем, подходим ли мы под вашу ситуацию, а если нет — подскажем, к кому обратиться. Без шаблонных предложений, искусственной срочности и давления на подпись.
Студия из Донецка, работаем с клиентами по всей России.
