UX/UI как катализатор повышения конверсии: почему после обновления дизайна показатели увеличиваются на треть-половину, однако владельцы бизнеса продолжают испытывать сомнения?

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

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

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

Рассмотрение трех уровней определяет успех или провал предпринятых мер:

1. Стратегический аспект.
Было ли проведено предварительное исследование ситуации? Осознаём ли мы причины неэффективности текущего варианта ресурса? Нехватка доверительных сигналов, сложность процедуры приобретения товара, неопределенность предложенного продукта? Изменение внешнего вида сайта без детального изучения обстоятельств равносильно лечению последствий заболевания без выяснения природы самой патологии.

2. Маркетинговая составляющая.
Создание удобного интерфейса является внешним проявлением основной идеи маркетинга. Инновационный UX окажется бессилен, если текстовая составляющая, ценностное предложение и подача материала останутся слабыми. Внешняя оболочка и содержание должны образовывать единую систему.

3. Уровень технической реализации (UX/UI).
Этот этап служит платформой, где реализуются намеченные планы. Важнейшей задачей здесь становится не красота решения, а его функциональность. Каждое графическое средство должно способствовать достижению поставленной задачи, ликвидируя препятствия и стимулируя совершение необходимых действий.

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

Прежде всего определимся с терминологией. Под конверсией принято подразумевать преобразование потенциального потребителя в реального заказчика. Понятие UX (User Experience) обозначает совокупность ощущений, возникающих у пользователя при взаимодействии с вашим ресурсом, начиная с первых секунд знакомства и заканчивая выполнением целевых действий. Наконец, UI (User Interface) подразумевает внешние компоненты, посредством которых осуществляется взаимодействие с системой.

Предположительно, усовершенствование опыта взаимодействия автоматически влечет повышение конверсии. Тем не менее, действительность демонстрирует обратное. Посетители способны позитивно воспринять изменения интерфейса («красиво, удобно»), но все равно отказаться от совершения сделки. Чем объяснить подобное поведение?

Отвечая откровенно, следует признать: дизайн сам по себе не способен продавать товар. Его задача состоит в создании благоприятных условий для осуществления продажи. Он помогает минимизировать сопротивления, повысить доверие, направить внимание клиента в нужное русло. Реализует же сделку другое — уникальное торговое предложение, конкурентоспособная цена, хорошая репутация бренда. Функционал UX/UI призван служить каналом доставки всех вышеперечисленных факторов до сознания покупателя. Отсутствие должного уровня информативности приведет к быстрому перемещению клиента от окна ресурса обратно к поиску подходящего поставщика.

Можно выделить ряд распространенных просчетов, нивелирующих преимущества грамотно разработанного редизайна:

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

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

"Пусть дизайнеры создадут красивую картинку, а маркетологи подготовят контент". Подобные разногласия губительны. Грамотный интерфейс обязан разрабатываться совместно с текстом, формируя целостное послание потребителю. Без четкого согласования усилий достичь значимых результатов невозможно.

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

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

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

Этап № 1: Постановка точного диагноза (аналитика превыше творчества)

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

• Изучение поведенческих моделей: применение тепловых карт и видеозаписи сеансов продемонстрировало, что гости уделяют основное внимание техническим характеристикам, обходя стороной такие важные разделы, как «преимущества» и «кейсы».

• Исследование коммуникаций: оригинальный текст описания ориентировался на профессионалов отрасли, насыщенный техническими деталями. Однако значительная доля посетителей представляла управленцев, заинтересованных в практической выгоде (рост прибыли, сокращение расходов).

• Диагностика уровня доверия: портал казался безупречно грамотным, но суховатым. Отсутствовали человеческие черты, отсутствие живых примеров успешной эксплуатации изделий.

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

Этап № 2: Формулирование стратегии и начальная концепция (организованный креатив в пределах заданных границ)

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

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

• Центральный месседж: приоритет изменился с подчеркивания факта производства определенной техники на выявление способности предлагаемого оборудования увеличивать производительность и снижать издержки.

• Создание точек доверия: ввод элементов подтверждения успешности деятельности компании, размещение отзывов довольных клиентов, видеороликов о внедрении оборудования.

При работе над первоначальным дизайном сформировалось несколько версий будущего сайта:

• Вариант А: свежая, лаконичная версия, содержащая крупные качественные иллюстрации продукции. Недостаток: выглядело словно портал дизайнера, утратив связь с производственной тематикой.

• Вариант Б: корпоративный стиль, строгие текстовые блоки, продуманная структура подачи данных. Минус: сохранялась прежняя сухость изложения, хотя качество информации заметно возросло.

• Вариант В: смешанный подход. Четкая, удобная компоновка элементов. Преобладающая гамма цветов синяя (символизирует стабильность технологий, ассоциируется с водной стихией применительно к профилю оборудования), широкое использование фотографий производственных операций, выделение зон для разных групп пользователей.

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

Этап № 3: Экспериментирование и коррекция курса (создание оптимальной среды для пользователей)

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

Наиболее важные этапы экспериментов (проведенные испытания, найденные недостатки и методы коррекции):

1. Испытание меню: исходный прототип предполагал раздельные пункты для технических специалистов и менеджеров. Во время тестов выяснилось, что пользователям сложно ориентироваться, они терялись среди предложенных пунктов. Метод исправления: создана универсальная панель меню, позволяющая перейти непосредственно к необходимым данным независимо от категории пользователей.
2. Опыт страницы продукта: первоначально размещённый на странице расчёт возврата инвестиций оказался проигнорирован пользователями, предпочитающими искать стандартные технические характеристики. Корректировка: калькулятор расчёта перенесли ниже, ближе к основным характеристикам, добавив наглядный лозунг «Экономическая выгода нашего оборудования».
3. Форма обратной связи: первоначальный шаблон включал массу полей заполнения, затруднявших взаимодействие. Новая версия стала компактнее, сохранив лишь ключевые данные. Одновременно появилась дополнительная страница с расширенными полями, доступная после нажатия специальной кнопки.

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

Этап № 4: Итоговый результат и его влияние на развитие компании

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

Через три месяца после внедрения зафиксированы следующие перемены:

• Коэффициент конверсии первичного контакта (форма обращения, телефонный звонок) увеличился на 40%. Улучшение обусловлено сокращением этапов регистрации и созданием двуязычного формата передачи сведений.

• Процент закрытия сделок (из обратившихся) вырос приблизительно на 15%. Качество запросов существенно повысилось: менеджеры стали получать запросы не только от технических сотрудников, запрашивающих подробную информацию, но и от директоров организаций, оценивающих экономический эффект. Это дало сотрудникам отдела продаж дополнительную возможность проводить эффективные переговоры.

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

Основной вывод руководства звучал следующим образом: «Сегодня мы получаем запросы не абстрактного характера вроде "интересуют характеристики", а осознанные пожелания типа "помочь снизить расходы моей компании2». Благодаря правильному подходу к оформлению сайт превратился из обычного перечня товаров в эффективный диалоговый инструмент.

Полученное увеличение на 40% не стало плодом чудес дизайнерского искусства. Оно представляло собой закономерное следствие преодоления существующих препятствий и направления коммуникации на удовлетворение потребностей обеих категорий пользователей. Именно UX/UI выступил решающим звеном, воплотившим эти преобразования в реальность.

По сути дела, прямым стимулятором увеличения показателя конверсии является не сам факт наличия хорошего UX/UI. Основой выступает целая цепь взаимосвязанных компонентов:

1. Осознанный подход к определению актуальной проблемы сайта и портрета целевой аудитории.
2. Четко сформулированное маркетинговое обращение, соответствующее интересам выбранной аудитории и ясно очерчивающее достоинства предложения.
3. Оптимизированный интерфейс (UX/UI), выступающий удобным посредником распространения вышеуказанной информации, способствующий устранению любых известных препятствий на маршруте покупателя.

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

Рост продаж на 30−50% после редизайна свидетельствует о том, что данное мероприятие выходит за рамки простого декора, затрагивая глубинные слои информационной архитектуры и философии коммуникации.

Обозначаю простой алгоритм действий, позволяющий принять верное решение относительно редизайна, минуя иллюзии мгновенного эффекта:

1. Начнём с исследования, а не с яркости визуализации. Прежде чем требовать обновить оформление сайта, проведите всестороннюю диагностику: в чем слабость существующего ресурса? Почему покидают страницу? Есть ли очевидные упущения? Используйте доступные инструменты аналитики и оценки (тепловые карты, опросы пользователей).
2. Определитесь со стратегией наполнения интерфейса. Какой именно образ вашего ресурса сможет качественно повлиять на восприятие компании клиентами? Решит ли новый интерфейс главную проблему ваших покупателей? Учитывает ли он нужды различных сегментов вашей аудитории?
3. Совместите разработку текста и дизайна. Исключите разрыв между работой дизайнеров и специалистов по маркетингу. Дизайнер обязан учитывать требования маркетинга, маркетолог должен осознавать границы возможностей интерфейса.
4. Проверьте работоспособность логики раньше, чем займётесь красотой. Ранние стадии проектирования должны включать тестирование прототипов, проверку гипотез на предмет логического соответствия. Самые красивые проекты могут содержать грубые ошибки в структуре навигации.
5. Критерии измерения эффективности — комплексные показатели. Помимо отслеживания динамики роста конверсии, важны также качество обращений, продолжительность нахождения на важных страницах, уменьшение случаев выхода с заполненной формы.

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

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

Константин Хохлов, RMDesign