Сколько денег теряет бизнес из-за плохого дизайна? Мы посчитали27.02.2025 15:01

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

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

Ошибка №1. Квест на выживание по пути к заказу

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

Представьте действия покупателя в приложении ВкусВилл — он очень голодный спешит домой и хочет заказать ужин за пять минут:

• Он попадает на излишне пёстрый главный экран.

• Тапает кнопки и попадает в сторисы с едой блогеров или на баннеры с детским питанием. А ему бы просто пельмени заказать.

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

• После изучения каждого раздела находит каталог на дне экрана. 

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

Что можно сделать:

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

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

3. Убрать длинные тексты. Сокращать их или вынести на отдельный экран. Плашку с любимым продуктом вынести ниже — после перехода в каталог.

Ошибка №2. Лабиринт рекламы на пути к корзине

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

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

Что можно сделать. 

1. Запомнить правило: одно горящее предложение на один экран. Без длинных текстов и с понятным действием. Два баннера и больше вызывают раздражение у клиента.

2. Учитывать интересы и ценности пользователей, не «втюхивать» всё и сразу. Здесь поможет персонализация баннеров и каталога. Тогда пользователь видит товары, которые уже смотрел.
   Это особенно важно для брендов с собственными онлайн-магазинами, так как иначе им не выжить в конкуренции с маркетплейсами. Бренды должны знать свою аудиторию, её привычки и образ жизни. Для этого — приглашать пользователей участвовать в исследованиях и спрашивать их мнение. 

Ошибка №3. Не дать найти товар

Поиск товаров — боль пользователей маркетплейсов и крупных ритейлеров. Основные ошибки здесь:

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

2. Визуальные. Например, в приложении М.Видео сложно увидеть серое поле поиска среди ярких баннеров.

Более понятный пример — у Wildberries. Здесь поиск визуально сделали крупнее, чтобы пользователь не потерялся среди элементов.

Что можно сделать. 

1. Разместить поиск в каталоге или на главном экране. Фильтры поиска расположить отдельной кнопкой рядом. Бывает, что фильтры вообще не отображаются и «вылезают» за пределы экрана. Так не должно быть.

2. Использовать автоматическое заполнение поиска с подсказками. Чтобы пользователь начал вводить слово, а приложение рекомендовало ему нужные варианты из каталога. Юбка — значит «юбка миди», «юбка из шерсти», «юбка летняя».

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

Наличие фильтров помогает пользователям в два раза быстрее делать заказ и в среднем увеличивает конверсию в корзину на 10%.

Ошибка №4. Не пускать пользователя в приложение

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

Что здесь происходит:  

• При каждом входе пользователь вводит свой логин. Он думает, что нужно заново зарегистрироваться. 

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

• Клиент снова вводит логин, и снова ничего не выходит.

И так по кругу. При этом кнопка входа по логину и паролю еле заметна.

Как лучше сделать. 

1. Не скупиться на современные методы авторизации. Самый классический — One-Time-Password c СМС/push-подтверждением. Это когда при входе вам сразу приходит уведомление с временным паролем. Так делают Т-Банк и Сбер.

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

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

Пример. Необанк ROWI пускает в приложение с помощью биометрии. А подсказки на первом экране не дают пользователю потеряться.

Мы собрали отчёт с самыми частыми ошибками в UX. В нём есть наглядные примеры, реальная стоимость убытков и рекомендации по исправлению. Чтобы скачать его, переходите в бот. Это бесплатно — мы не собираем подписки и данные о вас.

Как считать и выявлять убытки

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

Считаем конверсию после изменений. Для этого смотрим нужный шаг воронки. Если обновили карточку товара, то смотрим конверсию в добавление в корзину. Поменяли корзину — смотрим количество брошенных корзин.

Сравниваем конверсию с аналогичным периодом в прошлом. Так мы исключаем влияние сезонности и других внешних событий: Чёрной пятницы, Нового года или ухода конкурента с рынка. Допустим, конверсия после изменений выросла на 10%, а в прошлом году в тот же период — на 1%. Получается, рост примерно на 9%.

Считаем выручку. Обычно у нас есть данные по выручке за период: тогда мы просто вычитаем одно из другого. Если данных нет, средний чек умножаем на число людей, которые пришли из-за выросшей конверсии. Так же сравниваем с периодом в прошлом.

Используем в расчётах и другие метрики по необходимости:

• Time on Page/in App. Считаем, сколько времени проводит пользователь на разных экранах или в приложении.

• Screens per Session. Сравниваем использование разных экранов в отдельных сессиях.

• Bounce Rate. Смотрим количество отказов, когда пользователи сразу уходят из приложения.

• User Satisfaction и NPS. Проводим исследования поведения реальных пользователей и собираем обратную связь.