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

А ещё поделюсь опытом и примерами: расскажу о типичных UX-ошибках и антипаттернах, которые мы в Surf замечаем в реальных приложениях.

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

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

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

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

Рассмотрим еще один пример — обобщённый. Он показывает, как расположение элементов навигации относительно положения пальцев влияет на пользовательский опыт: 

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

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

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

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

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

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

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

Длинные тексты заставляют пользователя отвлечься от цели и потратить время на понимание смысла. Пользователь сбивается с пути.

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

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

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

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

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

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

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

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

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

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

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

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

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

Опасность в том, что количество фильтров растёт вместе с количеством товаров. Возникает бесконечная лента чекбоксов, как в приложении Booking.com.

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

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

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

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

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

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

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

Поможем избежать ошибок в UX

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

Почему стоит доверить UX-дизайн вашего приложения Surf: В нашей команде UX-дизайнеры уровня senior. Мы работаем с проектами из ритейла, финтеха, фудтеха и других областей; создали приложения для Burger King, Delivery Club, Росбанка. Увеличили конверсию в покупку до 16,5% в новом приложении Бетховена.