Простой и понятный путь пользователя к заказу — критический фактор при при разработке дизайна мобильного приложения. Просто представьте — вы заходите в приложение забронировать отель на Booking.com, и вместо выбора отелей вам показывают «Остался всего 1 номер!» или «25 человек смотрят этот отель прямо сейчас!». Баннеры, призванные подстегнуть продажи, зачастую превращают поиск идеального места для отдыха в нервную гонку на выживание. По пути к кнопке «Заказать» пользователь теряется и уходит из сервиса.

Я — Юлия Чистякова, UX/UI-дизайнер компании Surf. В этой статье покажу 5 неудачных UX-решений при создании дизайна приложения, из-за которых пользователь не совершает покупку или не оформляет заказ. На их примере расскажу, как создать интерфейс, который не давит, а помогает пользователям возвращаться снова и снова.

Как UX-дизайн приложений повышает лояльность клиентов и влияет на продажи

User Experience (UX) — непосредственно пользовательский опыт, который отвечает за взаимодействие ваших клиентов с приложением. Он включает в себя такие элементы:

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

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

Пример 2. Каталог онлайн-магазина бывает «набит» однотипными карточками товаров. Такое бывает у Wilberries или Ozon. В результате товары сливаются перед глазами и пользователь теряется. Так было и у fashion-бренда LOVE REPUBLIC до трансформации приложения: пользователь не мог разглядывать товары подробнее, а каталог отображался однотипно на тёмном фоне.

В процессе прототипирования каталога в приложении LOVE REPUBLIC наши UX-дизайнеры сделали карточки товаров масштабируемыми с помощью ползунка. Такая опция даёт пользователю выбор: вдумчиво рассмотреть один товар или сравнить разные варианты. Это пример адаптивности в UX — пользователь сам выбирает, как ему удобнее смотреть товары на витрине.

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

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

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

Частые ошибки в UX дизайне приложений, из-за которых вы теряете пользователей

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

Ошибка 1. Длинные тексты в интерфейсе отвлекают пользователей

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

❌Неудачный пример: Dropbox. Длинный текст в поле для заполнения читается как заголовок. Он неинформативен — мы ничего не узнаём о том, что произойдет при нажатии на кнопку или почему элемент интерфейса неактивен.

👉Как исправить: заменить длинный текст в интерфейсе на ёмкий и лаконичный. Объяснить пользователю, почему он не может выполнить действие. А длинный, маркетинговый текст можно перенести в заголовок или убрать.

Ошибка 2. Поиск без подсказок снижает конверсию в покупку

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

👉 Как исправить. Продумать, как ещё пользователь может найти товар, не зная его названия. Например, реализовать контекстный поиск: если вы напишете «лекарство от аллергии» вместо «цетиризина гидрохлорид», поиск подскажет конкретные позиции.

Хороший UX дизайн мобильного приложения — забота о пользователе. Например, в приложении для сети аптек «Ригла» мы сделали поиск по симптомам. Пользователь сразу найдёт нужное лекарство, прислушиваясь только к своему самочувствию.

Ошибка 3. Лишние шаги в навигации приводят к оттоку пользователей

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

❌Неудачный пример: Sainsbury’s. На главном экране нет категорий — их скрывает кнопка Browse. Пользователь должен сперва нажать на неё, затем уже выбрать категорию и только потом товар. Не все пользователи пройдут такой длинный путь.

👉Как исправить: отображать категории товаров на «домашнем» экране. Этот UX-паттерн часто встречается в приложениях с каталогом: e-commerce-проектах, системах бронирования и маркетплейсах. Его используют неспроста — опыт показывает, что доступность категорий увеличивает конверсию.

Например, в приложении «Бетховен» мы добавили категории в первый ряд «домашнего» экрана. Теперь пользователи могут сразу сориентироваться в навигации и начать поиск. В итоге грамотные решения уменьшили стоимость создания приложения и увеличили частотность покупок в приложении «Бетховен» в 3 раза. Простая навигация по каталогу — одно из удачных UX-решений, которое помогло нам достичь конверсии в покупку 15% даже в MVP. О других решениях рассказали в кейсе.

Ошибка 4. Большое количество фильтров перегружает внимание пользователей

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

❌Неудачный пример: Booking.com. Фильтров слишком много, их очерёдность нелогична. Пользователь устаёт пролистывать ленту, а нужную категорию легко пропустить из-за низкого контраста разделителей. К тому же часть фильтров скрыта за кнопкой Show more — информация теряется.

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

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

Ошибка 5. Непонятное следующее действие

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

❌Неудачный пример: Mirror Palais. Надпись в каталоге говорит, что новая коллекция доступна к предзаказу. А кнопка в карточке товара — что позицию уже раскупили. Чему верить, непонятно.

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

Как избежать ошибок в UX дизайне мобильного приложения

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

1. Избегайте предположений о поведении пользователей без проведения исследований на реальных клиентах. Узнавайте потребности своей целевой аудитории и предлагайте им стать частью вашего продукта даже на этапе проектирования. Например, приглашайте их для опросов или оценки практичности прототипа приложения.
2. Упрощайте логику приложения. Вместе с дизайнерами проверяйте, насколько интуитивно понятно будет пользоваться приложением. Сокращайте тексты и разгружайте пользователя от избытка информации на одном экране.
3. Оптимизируйте UX дизайн приложений под мобильные устройства. За 2024 год траты на покупки в мобильных приложениях составили не менее 800 млрд долларов. Помните — то, что подходит для ноутбука, не обязательно отображается идентично в мобильной версии.

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

Почему стоит доверить UX дизайн мобильного приложения нам. В нашей команде — UX-дизайнеры уровня senior, с более чем 200 проектов за плечами. Они знают специфику ритейла, финтеха, фудтеха и банкинга и вместе с разрботчиками создали приложения для Бургер Кинга, Риглы, LOVE REPUBLIC, Банка ЗЕНИТ и других крупных российских компаний. Мы добиваемся устойчивых результатов для бизнес — например, увеличили конверсию в покупку до 16,5% в новом приложении для Бетховена.

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