Мне просто купить цветы: сделали разбор UX/UI приложения Flowwow и показали, как улучшить сервис

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

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

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

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

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

Решение: анализ комментариев и базовые сценарии пути пользователя

Мы начали разбор UX\UI приложения Flowwow с того, что проверили несколько базовых сценариев. После этого собрали их визуально в Figma, чтобы увидеть общую картину и предложить рекомендации. Это первый шаг к услуге аудита дизайна, которую мы проводим: помимо этого, мы анализируем отзывы и конкурентов, определяем более эффективные первостепенные и второстепенные сценарии, оформляем результаты и наши рекомендации в виде презентации

В случае с Flowwow мы увидели, что пользователи жалуются на логику приложения и сбои в его работе. Клиенты компании пишут о конкретных вещах, которые им нравятся или не нравятся. Мы учли часть отзывов и объединили с нашим опытом использования приложения. Расскажем об основных преградах, которые нашли и исправили.

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

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

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

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

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

Из-за такой логики пользователь может долго искать информацию о заказе и не ощутить заботу компании о нём. Это приводит к раздражению и жалобам в чат или в отзывах. Прозрачность процесса покупки и доставки повышает доверие пользователей.

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

После проверки заказа покупатель может сделать ещё один заказ. Для облегчения поиска нужного подарка мы вынесли фильтры сразу под блоком поиска. Раньше они были расположены справа в виде отдельного значка. Пользователь нажимал на него и переходил на экран с фильтрами. Мы предложили сделать их компактнее и расположили сразу под блоком поиска. Так пользователь не уйдёт на отдельный экран и не потеряет время.

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

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

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

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

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

Цель приложения — показать больше информации о продавце. Но для этого не обязательно добавлять отдельный экран. Достаточно добавить блок о магазине в начале экрана с товарами.

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

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

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

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

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

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

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

Мы наконец добрались к самому важному этапу — корзине. Здесь в приложении Flowwow немного элементов и все они выглядят достаточно скромно — это кажется ненавязчивым, но на самом деле сюда закрались неочевидные ошибки. Например, не всегда читаемый шрифт на блоке с бонусами. Пользователи радуются промокодам или другим приятным мелочам, которые помогают сэкономить. Поэтому мы за то, чтобы выделять блоки с бонусами и выносить их не на отдельную страницу, а показывать сразу.

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

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

На экране заказа есть ещё несколько блоков: получатель, дополнительные услуги или комментарий. Это полезно и нужно, но приложение при этом переносит пользователя на новый экран. Это отвлекает от заказа и пользователь вынужден возвращаться назад. А если он случайно нажмёт на возврат пару раз, то совсем уйдёт из корзины.

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

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

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

В процессе анализа пути пользователя переработали приложение и сократили путь пользователя до покупки:

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