Сколько денег теряет бизнес из-за плохого дизайна? Мы посчитали
Факт номер раз — убогий UX приводит к убыткам. Факт номер два — обновление интерфейса стоит миллионы. Часто компании не хотят вкладывать деньги в обновление дизайна. Думают, что и так сойдёт — главное, чтобы приложение вообще было. В итоге продукт теряет тысячи пользователей, тотально переделывается, а бизнес несёт ещё большие издержки.
Мы в Surf проанализировали сотни интерфейсов в ритейле и фудтехе, чтобы выявить частые UX-ошибки и оценить их в денежных потерях. В статье показываем несколько дорогостоящих ошибок в приложениях самых известных компаний.
Отдельно собрали отчёт с самыми дорогими проблемами в UX, где привели реальные примеры, посчитали последствия в деньгах и дали рекомендации по устранению. Забирайте себе, если подозреваете своё приложение в скрытых убытках.
Ошибка №1. Квест на выживание по пути к заказу
Самые частые ошибки UX встречаются на главном экране приложения. Это второй шаг после авторизации, где онлайн-магазины стараются показать как можно больше. Что и запутывает пользователя.
Представьте действия покупателя в приложении ВкусВилл — он очень голодный спешит домой и хочет заказать ужин за пять минут:
- Он попадает на излишне пёстрый главный экран.
- Тапает кнопки и попадает в сторисы с едой блогеров или на баннеры с детским питанием. А ему бы просто пельмени заказать.
- Пытается найти каталог — для этого вчитывается во все подписи. Хорошо, если бесплатная доставка спасёт приложение от закрытия в первый момент поиска.
- После изучения каждого раздела находит каталог на дне экрана.
Время поиска каталога снижает конверсию в покупку. Чем больше лишних элементов, тем ниже шансы дойти до корзины. Если не получится найти нужную кнопку из-за всплывающих баннеров — пользователь уйдёт.
Что можно сделать:
- Переместить кнопку каталога выше, чтобы взгляд сразу упал на неё. Не нужно располагать переход в правом/левом нижнем/верхнем углу или за пределами экрана. Нужно так, как удобно пользователю.
- Разгрузить интерфейс. Вынести выше или ниже рекламу, дать побольше пространства. Сейчас у ВкусВилл сториз занимают треть экрана, а сразу под ними идёт галерея баннеров. Понимаем, что продажи надо поднимать. Но это отвлекает от важного.
- Убрать длинные тексты. Сокращать их или вынести на отдельный экран. Плашку с любимым продуктом вынести ниже — после перехода в каталог.
Пример. У приложения для покупки цветов Flowwow главный экран был разнородный. Мы предложили улучшить: перенесли каталог в центр экрана и не стали разбивать его рекламой. Учли логику подачи информации сверху вниз, изменили размер карточек и выделили самое важное. Эти простые действия могут принести компании увеличение конверсии в просмотр товара примерно на 11%.
Сколько теряет бизнес.
Интуитивный первый экран поднимает конверсию в просмотр товара с 65% до 76%. При среднем числе пользователей в 1,5 миллиона до каталога не доходят 165 тысяч пользователей ежемесячно.
Ошибка №2. Лабиринт рекламы на пути к корзине
Все предложения на одном экране, горящие скидки на туры вперемешку с каталогом… Ещё одна ошибка — в основном у маркетплейсов вроде Озона. Визуальная замусоренность создаёт ощущение рынка с кучей приставучих торговцев. Пользователь тапает по разным кнопкам и не может найти нужное.
Бизнес думает, это выглядит классно и помогает продавать больше. Но чаще всего это работает в обратную сторону.
Что можно сделать.
- Запомнить правило: одно горящее предложение на один экран. Без длинных текстов и с понятным действием. Два баннера и больше вызывают раздражение у клиента.
- Учитывать интересы и ценности пользователей, не «втюхивать» всё и сразу. Здесь поможет персонализация баннеров и каталога. Тогда пользователь видит товары, которые уже смотрел. Это особенно важно для брендов с собственными онлайн-магазинами, так как иначе им не выжить в конкуренции с маркетплейсами. Бренды должны знать свою аудиторию, её привычки и образ жизни. Для этого — приглашать пользователей участвовать в исследованиях и спрашивать их мнение.
Пример. До редизайна приложение LOVE REPUBLIC ничем не отличалось от других брендов: в нём был базовый каталог с одеждой, товары плохо отображались на тёмном фоне, не было избранного. Пользователи низко оценивали его в сторах.
Мы провели исследование, чтобы узнать, чего хотят покупательницы. Выяснили, что они заходят в магазин посмотреть на новинки и примерить их, а заказывать предпочитают с доставкой на дом. Поэтому предложили компании изменить UX: добавили видеобаннеры и сториз, сделали гибкий каталог и упростили путь к заказу.
Теперь покупательницы заглядывают в приложение полистать новинки, как в глянцевом журнале, и получают персональные скидки. На главной вместо кучи предложений — один рекламный баннер на экран. С него переводим сразу в каталог или на конкретную подборку. А каталог можно разглядывать с помощью специального бегунка. Такие решения увеличили конверсию в покупку в 2 раза за первый год после обновления.
Сколько теряет бизнес.
Каждый переход между экранами — потеря от 25% до 40% пользователей. Из 1,5 млн пользователей 600 тысяч человек даже не посмотрят товары или запутаются по пути к корзине.
Ошибка №3. Не дать найти товар
Поиск товаров — боль пользователей маркетплейсов и крупных ритейлеров. Основные ошибки здесь:
- Технические. Например, Озон не всегда даёт искать товары сразу с главной страницы. Пользователя перекидывает на отдельный экран при тапе на поле поиска. Слова сбрасываются, и всё нужно вводить заново.
- Визуальные. Например, в приложении М.Видео сложно увидеть серое поле поиска среди ярких баннеров.
Более понятный пример — у Wildberries. Здесь поиск визуально сделали крупнее, чтобы пользователь не потерялся среди элементов.
Что можно сделать.
- Разместить поиск в каталоге или на главном экране. Фильтры поиска расположить отдельной кнопкой рядом. Бывает, что фильтры вообще не отображаются и «вылезают» за пределы экрана. Так не должно быть.
- Использовать автоматическое заполнение поиска с подсказками. Чтобы пользователь начал вводить слово, а приложение рекомендовало ему нужные варианты из каталога. Юбка — значит «юбка миди», «юбка из шерсти», «юбка летняя».
Пример. В каталоге приложения ВкусВилл можно заранее настроить фильтры по наличию продуктов и их составу, только от магазина или ещё и от других брендов. Это помогает видеть только нужные продукты.
Наличие фильтров помогает пользователям в два раза быстрее делать заказ и в среднем увеличивает конверсию в корзину на 10%.
Сколько теряет бизнес.
Отсутствие автоматизированного поиска снижает конверсию в покупку на 10,7%. Приложение с 1,5 миллионами пользователей теряет 10 тысяч человек.
Ошибка №4. Не пускать пользователя в приложение
Моментальная авторизация — стандарт мобильного приложения. Но и здесь встречаются банальные ошибки: пользователь не видит кнопку входа или не может войти. Например, в банковском приложении нашего клиента (NDA) первая версия выглядела так:
Что здесь происходит:
- При каждом входе пользователь вводит свой логин. Он думает, что нужно заново зарегистрироваться.
- Приложение показывает ошибку, так как логин уже есть.
- Клиент снова вводит логин, и снова ничего не выходит.
И так по кругу. При этом кнопка входа по логину и паролю еле заметна.
Как лучше сделать.
- Не скупиться на современные методы авторизации. Самый классический — One-Time-Password c СМС/push-подтверждением. Это когда при входе вам сразу приходит уведомление с временным паролем. Так делают Т-Банк и Сбер.
- Разделить новых и зарегистрированных пользователей. Для этого расположить способы входа на центральной части экрана. Сократить количество элементов на этом экране, чтобы ничто не отвлекало от главного действия.
- Подсказывать пользователю, куда идти. Можно использовать всплывающие окошки с подсказками или создать короткий набор экранов для обучения.
Пример. Необанк ROWI пускает в приложение с помощью биометрии. А подсказки на первом экране не дают пользователю потеряться.
Сколько теряет бизнес.
Долгая и сложная авторизация снижает конверсию в переход к товарам с 65,37% до 63,66%. При полутора миллионах пользователей до покупки не дойдёт почти 5000 человек.
Ещё больше примеров из реальных приложений ищите в нашем полном отчёте. В нём есть наглядные примеры, реальная стоимость убытков и рекомендации по исправлению. Чтобы скачать его, просто перейдите в бот. Это бесплатно — мы не собираем подписки и данные о вас.
Как считать и выявлять убытки
Смотрим аналитику приложения за период до и после изменений. Это нужно, чтобы видеть динамику между «было» и «стало».
Считаем конверсию после изменений. Для этого смотрим нужный шаг воронки. Если обновили карточку товара, то смотрим конверсию в добавление в корзину. Поменяли корзину — смотрим количество брошенных корзин.
Сравниваем конверсию с аналогичным периодом в прошлом. Так мы исключаем влияние сезонности и других внешних событий: Чёрной пятницы, Нового года или ухода конкурента с рынка. Допустим, конверсия после изменений выросла на 10%, а в прошлом году в тот же период — на 1%. Получается, рост примерно на 9%.
Считаем выручку. Обычно у нас есть данные по выручке за период: тогда мы просто вычитаем одно из другого. Если данных нет, средний чек умножаем на число людей, которые пришли из-за выросшей конверсии. Так же сравниваем с периодом в прошлом.
Используем в расчётах и другие метрики по необходимости:
- Time on Page/in App. Считаем, сколько времени проводит пользователь на разных экранах или в приложении.
- Screens per Session. Сравниваем использование разных экранов в отдельных сессиях.
- Bounce Rate. Смотрим количество отказов, когда пользователи сразу уходят из приложения.
- User Satisfaction и NPS. Проводим исследования поведения реальных пользователей и собираем обратную связь.
Если хотите увеличить прибыль своего приложения, приходите к нам за UX/UI-аудитом. Предложим конкретные способы улучшения логики и поможем превратить убытки в доход, а не просто перекрасим кнопочки.