Что такое пользовательский интерфейс, который работает? Это UI, который помогает пользователю быстро выполнить задачу и делает взаимодействие комфортным. Интерфейс, который с этим не справляется, может обойтись бизнесу в десятки миллионов. Достаточно вспомнить кейс Amazon: из-за кнопки «Зарегистрироваться» при оформлении заказа компания теряла 300 млн долларов в год — пользователи просто не хотели создавать аккаунт. Когда текст поменяли на «Продолжить», продажи пошли вверх.

За 14 лет работы над мобильными и веб-приложениями мы не раз видели, как ошибки в UX/UI дорого обходились компаниям. В статье, полезной для владельцев продуктов и UX/UI-дизайнеров, расскажем о сигналах о том, что интерфейс приложения пора менять. Объясним, почему путь пользователя играет важную роль при разработке интерфейса.

Когда UX/UI-дизайн требует доработки

Для начала определим, в чём разница между UI и UX.

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

Пользовательский опыт или UX (User Experience) включает весь путь пользователя и его эмоциональную реакцию на продукт. Он зависит от функциональностей и механик приложения и простоты прохождения пользовательских сценариев. Хороший UX напрямую влияет на бизнес-метрики: снижает затраты на обслуживание клиентов, увеличивает конверсию и повышает долгосрочную лояльность. Исследования показывают, что компании, которые инвестируют в развитие UX, возвращают х10—100 от вложенной суммы. Довольные пользователи возвращаются снова, а их рекомендации стимулируют органический рост аудитории продукта.

Дизайн требует доработки, когда продукт очевидно выглядит непривлекательным. Иногда проблемы в UI видны невооруженным глазом. Например, на картинке — типичные ошибки при проектировании пользовательского интерфейса в приложении для поиска подработок «Моя Смена».

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

Низкая конверсия

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

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

• Карточки были перегружены элементами, не давая полноценно рассмотреть продукт и быстро добавить его в корзину или избранное. Из-за этого корзина оставалась пустой у 60% пользователей.
• Экран оформления заказа был переполнен однообразными иконками и не давал чёткой информации об ограничениях по минимальной стоимости заказа. В результате корзину бросали 42% пользователей. Наши аналитики подсчитали, что из-за этого магазин недополучал 62,3 млн рублей выручки в месяц.

Снижение трафика

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

53% пользователей покинут сайт, если его загрузка занимает более 3 секунд. В глобальном масштабе онлайн-ритейл теряет от этого около 2 миллиардов долларов. А вот «ремонт» пользовательского опыта значительно улучшает скорость загрузки, повышает трафик и снижает отказы. Так, Continental Office увеличил трафик на 103% после редизайна сайта. Ускорение загрузки также поднимает уровень доверия к бренду, что важно для индустрий с высокой конкуренцией.

Неадаптивность

В конце 2024 на долю мобильных устройств приходилось 64% всего глобального интернет-трафика. Неадаптированный для смартфонов пользовательский интерфейс — одна из самых дорогостоящих ошибок, которые можно совершить в 2025 году при разработке сайта или приложения. Если пользователям не могут пройти весь путь с телефона, компания рискует упустить 145 млн рублей в год.

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

• С телефонов зачастую совершаются импульсивные покупки «на бегу», поэтому важно максимально ускорить оформление заказа. Многие покупки совершаются под влиянием информации из соцсетей, поэтому интеграция sharing-механик может повлиять на трафик и продажи на платформе.
• Ноутбуки и ПК чаще используются для совершения дорогостоящих покупок, требующих времени для выбора товаров. Функциональность для сравнения товаров и удобство чтения отзывов и просмотра видео на большом экране обеспечат высокую конверсию десктопного шопинга даже при меньшем объёме трафика в сравнении с мобильными устройствами.

Устаревший дизайн

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

• Анимации. Делают пользовательский опыт более ярким и иммерсивным.
• Жирная типографика и плавные градиенты. Привлекают внимание и подчёркивают современность ИТ-продукта.
• Персонализация. От воспоминаний о том, что постил пользователь в этот день год назад, до персональных подборок товаров в интернет-магазине, пользовательские интерфейсы все больше адаптируются под предпочтения пользователей.
• 3D-графика. Получает всё большее распространение одновременно с развитием AR и VR-технологий.
• Быстрые способы аутентификации и онбординга. Призваны избавить от необходимости помнить множество паролей и улучшить пользовательский путь как новичков, так и постоянных клиентов.
• Геймификация. Превращает рутинные задачи в увлекательные приключения с помощью систем вознаграждений и сторителлинга. Делает пассивного пользователя увлечённым участником истории, созданной брендом.

Зачем и как изучать пользовательские сценарии

Чтобы создать качественный пользовательский интерфейс, важно понимать, как клиенты будут использовать приложения, что им важно и чего они ждут. Например, они заходят на главную страницу, вбивают в поле поиска нужный товар, смотрят карточку и кладут нужную вещь в корзину. Это базовый сценарий, у которого есть множество вариантов. Поэтому перед разработкой интерфейса зовут на помощь исследование пользовательских сценариев, или Customer Journey Map (CJM).

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

Разработка CJM состоит из трёх шагов:

1. Создание персонажей пользователей. Аналитик (BA) смотрит, что мотивирует людей обращаться к сервисам и продукции компании: какие у них запросы и потребности. Затем он анализирует демографические данные: местоположение, возраст, семейный статус и уровень дохода. В результате отвечает на вопрос: «кто наш покупатель?»
2. Выявление ключевых этапов. Аналитик определяет, какие стадии входят в цикл взаимодействия пользователя с продуктом или сервисом, от знакомства до совершения целевого действия. Так он отвечает на вопрос: «что делает покупатель?»
3. Отрисовка визуальной карты. Вместе с дизайнерами, BA создает графическое представление CJM — отрисовывает все этапы, эмоции и действия, которые пользователь проходит, испытывает и предпринимает в процессе использования сайта или приложения. В итоге понимает, «как выглядит путь покупателя».

При проведении аудита приложения «Моя Смена» мы детально разобрали путь пользователя, включающий 23 действия и запроса. Выявили основные проблемные зоны в устаревшем Android-приложении: слишком сложный онбординг, проблемы с бронированием смен и лишние уведомления. Затем мы выделили 9 стандартных этапов, через которые проходит пользователь сервиса.

Детальный CJM помог нам правильно упросить процесс авторизации, переработать календарь и сделать отображение доступных поблизости смен на карте нагляднее. Устранив UX/UI-проблемы, мы сохранили фирменную цветовую гамму. Редизайн повысил ценность приложения для пользователей и компаний-партнёров.

Принципы хорошего пользовательского интерфейса

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

1. Минимум шагов до целевого действия

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

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

В результате конверсия в покупку выросла, а приложение стало самым скачиваемым в App Store и Google Play в своей категории и выиграло два золота в номинациях «Приложение бренда» и «Торговля и услуги» в Рейтинге Рунета 2024.

2. Найти нужный товар или услугу легко

Эффективный UX/UI предоставляет удобные инструменты для поиска и даёт подсказки в процессе. Чем проще найти нужный товар или услугу, тем выше вероятность покупки. Так, в мобильном приложении LOVE REPUBLIC мы добавили динамичные подсказки, предугадывающие запрос, а в приложении аптеки «Ригла» — удобный поиск по симптомам.

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

3. Контент не мешает и не отвлекает

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

4. Интерфейс не перегружен

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

Так, при разработке мобильного приложения для строителей «Петрович.BRO» важно было сделать внесение данных в сметы «на бегу» удобным. Мы использовали объектно-ориентированный подход — создали иерархию всех сущностей приложения, распределили их по ролям: смета, объект, исполнитель, адреса и документы.

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

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