Как с помощью UX увеличить прибыль бизнеса

UX (user experience, «опыт пользователя) — это не только и не столько про красивые картинки, всевозможные блок-схемы и умные интерфейсы на сайте и в других IT-продуктах. Это прежде всего про логику, которая лежит за экранами, кнопками и полями. И про впечатления, которые пользователь получает от контакта с продуктом. В конечном счёте всё сводится к тому, делает ли клиент выбор в пользу продукта, остаётся с ним на долгое время и рекомендует его своим друзьям или уходит к конкурентам.

Если вы при взаимодействии с сайтом прошли 5, 10, 20 экранов и их не заметили, потому что вам было удобно и легко «общаться» с интерфейсом, это и есть тот самый правильный UX, ради которого UX-дизайнер с маниакальной дотошностью продумывает и полирует все элементы интерфейса.

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

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

Как UX влияет на прибыль компании: 5 пунктов

Уменьшает стоимость и продолжительность разработки

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

Доктор философии Americas Human Factors International Сьюзан Вайншенк ссылается на исследование международной ассоциации IEEE и приводит такие цифры: 50% своего времени на проекте разработчики тратят на устранение проблем, которых можно избежать с вовремя проведённым UX-исследованием. А это существенно влияет на цену проекта и его продолжительность. После запуска стоимость исправления ошибки в 100 раз выше, чем стоимость её корректировки до разработки проекта.

Скриншот из видео Сьюзан

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

Отличным примером здесь служит кейс о создании мобильного приложения для такси Hailo. Британская компания привлекла инвестиции в размере 100 миллионов долларов, чтобы запустить свой онлайн-сервис заказа такси в Нью-Йорке, но прогадала. Она не учла тот факт, что американские таксисты не пользовались смартфонами в отличие от водителей в Лондоне. Последним мобильные устройства помогали прокладывать нужные маршруты, потому что ориентироваться в британской столице очень сложно. Нью-Йорк в этом плане прост, и американским таксистам смартфоны были не нужны. Так, не проведённое вовремя UX-исследование стоило компании сотню миллионов долларов.

Находит узкие места на сайте

UX-тестирование помогает выявлять неочевидные проблемные места, которые влияют на конверсию сайта и на продажи.

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

Новые клиенты не знали, что можно купить продукт без регистрации и не хотели вводить свои данные, а старые пользователи не могли вспомнить логин и пароль и уходили с сайта. Кнопку «Зарегистрироваться» заменили на «Продолжить» и добавили сообщение о том, что оформить заказ можно без создания учётной записи. Изменения принесли компании рост продаж на 45%, увеличение заказов на 15 миллионов долларов в первый месяц и на 300 миллионов долларов за год.

Увеличивает конверсию в продажи

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

UX-исследование, которые мы провели для федерального сервиса b-apteka.ru, выявило, что по данным Яндекс.Метрики, около 10% пользователей, начавших оформление заказа на сайте, бросали его, так как процесс состоял из 5–6 шагов. Поэтому его сократили до двух этапов: выбор аптеки и заполнение поля с номером телефона. Это увеличило конверсию интернет-магазина на 4% от общего числа пользователей.

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

Скриншот из отчёта компании Picom по оценке предпочтений среди потенциальных клиентов мебельной компании

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

Уменьшает затраты на продвижение

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

Согласно исследованиям, проведённым агентством Intechnic, 23% пользователей расскажут 10 и более своим знакомым о позитивном опыте взаимодействия с сайтом. Для сравнения, 13% опрошенных заявили, что поделятся с 15 и более людьми, если получат негативное впечатление от сайта.

Так что UX вносит свой весомый вклад и в создание положительного образа компании, что облегчает маркетинговые усилия при её продвижении.

Снижает расходы на саппорт

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

Например, для сайтов страховых компаний одним из самых важных элементов UX является хорошо подуманная информационная архитектура. Так, агентство Intechnic помогло страховой компании Concordia уменьшить нагрузку на службу поддержки. Специалисты агентства провели для клиента UX-исследование, сделали из трёх разрозненных сайтов общей численностью в 800 страниц один 60-страничный сайт и собрали новую ориентированную на пользователя информационную архитектуру. Таким образом, пользователю стало проще находить нужную информацию на новом сайте, отпала необходимость каждый раз обращаться за ней в службу поддержки. Нагрузка на саппорт снизилась.

От задачи до релиза: где задействован UX

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

1. Этап аналитики: пользовательские исследования и анализ конкурентов

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

Анализ конкурентов

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

Для чего это нужно?

• На уровне идеи, чтобы понять базовый набор функционала для пользователя и оценить свои возможности реализации. К примеру, пользователь привык, что на маркетплейсе можно отправить товары из корзины в папку «Отложенные». Без этой функции ему будет некомфортно.

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

• Перед редизайном сайта, чтобы узнать, какие фичи внедрены у конкурентов и за счёт каких можно выделиться.

Кстати, здесь важно правильно определить, кто является конкурентом, и не забыть рассмотреть не только прямых, но и косвенных. Например, у «Макдоналдс» прямой конкурент — «Бургер Кинг», а косвенный — магазин с готовой едой.

Анализ пользователей

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

Какие именно исследования использовать, выбираем, опираясь на цели и задачи. Чаще всего исходя из тех задач, которые на нас падают, мы проводим глубинные интервью, веб-аналитику, 5-секундный тест, юзабилити-тестирование. Структурируем полученную информацию при помощи шаблона ценностного предложения. Он состоит из двух частей: карты ценностей и профиля потребителя. Мы используем только профиль потребителя, потому что на данном этапе у нас не стоит задачи создать ценностное предложение.

Шаблон ценностного предложения. Карта ценностей слева, профиль потребителя справа

Профиль потребителя включает в себя три части: jobs, pains и gains.

• Jobs — какие у пользователя есть задачи и потребности.
• Pains — с какими проблемами он сталкивается.
• Gains — как он может закрыть свою задачу и какие выгоды от продукта получить.

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

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

Метод персон

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

Вот пример персоны, которую наш UX-дизайнер создал для трансферной компании. Это расширенная версия. Иногда в профиле указывается меньше данных в зависимости от особенностей продукта.

Путь пользователя

Мы изучили, чем живёт и дышит наша целевая аудитория, разработали канвас ценностного предложения и создали личный профиль, на который можем опираться. После этого мы составляем пошаговый маршрут пути пользователя через экраны IT-продукта, начиная с захода на сайт до выполнения целевого действия по определённому сценарию. Такая подробная иллюстрация взаимодействия пользователя с продуктом называется user flow. При составлении сценариев UX-дизайнер работает один или в паре с аналитиком.

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

2. Этап проектирования: информационная архитектура (IA)

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

Наша цель при создании IA — так разложить весь контент по полочкам, чтобы пользователь смог легко найти, что ему нужно.

К основным методам IA можно отнести:

• создание карты сайта, которая отображает верхнеуровневую связь между страницами и контентом;

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

• разработку вайрфлоу — набросков экранов с важными элементами интерфейса, всеми возможными сценариями, статусными сообщениями и ошибками.

Такую интеллект-карту мы разработали для юридического портала:

Это фрагмент вайрфлоу, который мы создали для приложения трансферной компании:

Также спроектировать архитектуру сайта помогает карточная сортировка. Она позволяет объединить разные элементы в несколько категорий по определённым параметрам. В результате UX-дизайнер получает базовую структуру контента, которая служит основой для следующих этапов.

При помощи всех вышеперечисленных методов мы создаем каркас сайта, после чего можно начинать делать прототипы.

3. Прототипирование

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

Какие прототипы бывают:

• текстовый прототип, включающий в себя основные блоки с текстом, заголовки и другие необходимые компоненты. Обычно этим занимается UX-редактор;

• вайрфрейм, набросок экрана, где схематично изображены главные элементы;

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

Такие высокодетализированные прототипы мы подготовили для юридического портала:

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

4. UI-дизайн

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

Что создаётся на этом этапе:

• мудборды — инструменты для вдохновения, определения основных цветов, стиля;
• референсы — примеры, на которые ориентируются при разработке концепции дизайна;
• UI-kit — библиотека, где собраны все UI-элементы, типографика, цвета, компоненты.

Фрагмент UI-кита для одного из наших заказчиков:

Также разрабатываются адаптивы для остальных разрешений. Если придерживаемся mobile first, то делаем адаптив для десктопа и планшета.

После финального этапа остаётся правильно передать макеты разработчикам. Как это можно сделать?

• Договориться с программистами, в каком виде им удобнее получить исходники.

• Заранее обсудить, где лучше оставлять уточнения по важным нюансам (лично мы пользуемся комментированием макетов в Figma).

• Сделать гайд по экранам.

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

• Сформировать UI-библиотеку, где собрать компоненты, которые может использовать разработчик. Отметим, что это сокращает временные затраты на вёрстку, но подходит только для простых рядовых сайтов.

Как повысить конверсию на сайте, а за счет неё и прибыль бизнеса? Велосипед уже давно изобретён: UX для этих целей работает отлично. Заботьтесь о своём пользователе, изучайте его «хотелки» и «боли», общайтесь с ним на его языке, создавайте дружелюбные и понятные интерфейсы. Никто не говорит, что это просто, но оно того стоит. Мы убедились в этом на собственном опыте.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.