На рынке eCommerce приложений очень серьезная конкуренция. Многие компании предлагают низкие цены и быструю доставку — этим никого не удивишь. Поэтому отзывчивая служба поддержки и хорошо продуманный интерфейс – это те преимущества, которые помогут вам выделиться среди конкурентов. Если в вашем приложении сложно разобраться и сделать заказ, то пользователь просто скачает другое.
В Purrweb мы знаем, насколько важно изучить целевую аудиторию и протестировать интерфейс перед запуском стартапа. Почему мы собрали 5 советов по UI/UX дизайну, которые помогут вашему приложению электронной коммерции стать #1 в AppStore и GooglePlay. Плюс, рассказываем про ошибки, которых нужно избегать, и приводим примеры удачных элементов. Уэлком!
Кому пригодится эта статья?
- Если у вас есть крутая идея для eCommerce стартапа и вы хотите покорить рынок с хорошо продуманным и удобным приложением.
- Если у вас уже есть работающее приложение интернет-магазин, но вы хотите увеличить продажи и лояльность покупателей.
- Если вы задумываетесь о том, чтобы зайти на рынок приложений электронной коммерции, но не знаете, как сделать решение удобным для пользователей.
В этой статье мы рассказываем про юзер-френдли элементы UI дизайна. Но если вы хотите больше узнать о процессе разработки и стратегиях монетизации eCommerce приложений, читайте нашу статью в блоге.
Почему UI важен для eCommerce приложений?
Давайте по-честному, тренд на создание eCommerce платформ существует давно, и за это время на рынке появилось множество приложений. Чтобы выделиться среди толпы конкурентов, необходимо уделять пристальное внимание UI (дизайну пользовательского интерфейса).
Продуманный и интуитивно понятный интерфейс сделает взаимодействие между пользователями и вашим приложением максимально комфортным. А если процесс заказа прошел гладко и клиент получил положительные эмоции от использования вашего приложения, он может стать постоянным покупателем.
Несмотря на то, что количество приложений растет, качество их UI/UX дизайна иногда оставляет желать лучшего. Чтобы помочь вам избежать частых ошибок и сэкономить время на составление ТЗ, мы написали эту статью. Её можно использовать как руководство по дизайну пользовательского интерфейса в мобильных приложениях для торговли.
1. Быстрая и плавная регистрация
Совет #1 – создать простую и короткую форму для регистрации в системе. Во-первых, мы рекомендуем спрашивать только самую необходимую информацию. Имя, адрес электронной почты, номер телефона и адрес доставки — да. Как о вас узнали, код приглашения, средний доход пользователя — нет. На этапе входа в систему пользователи еще не готовы выложить все карты на стол и доверить персональные данные – они хотят как можно быстрее зарегистрироваться, чтобы сделать заказ. Если вам нужно собрать данные для анализа аудитории, вы всегда сможете сделать это позже.
Во-вторых, все элементы и кнопки должны быть выделены цветом и располагаться по центру, чтобы привлечь внимание пользователя. Если какие-то поля обязательны для заполнения, а какие-то — нет, это тоже нужно пометить.
Главное правило — при создании интерфейса ориентироваться на удобство пользователя. Элементы дизайна должны сами подсказывать, куда нажимать дальше.
Вот пример того, как насколько важна простота формы для регистрации.
Страница регистрации должна быть оформлена в едином стиле. Никаких разных шрифтов, рекламных баннеров и «кодов приглашения»
Существует несколько типов регистрации, которые вы можете использовать для своего приложения электронной коммерции.
- Отложенная регистрация. Не просите пользователей сразу делиться своими данными. Вместо этого позвольте им свободно просматривать ваш каталог товаров. И только когда они будут готовы сделать заказ, попросите зарегистрироваться или ввести логин и пароль.
- Интеграция с социальными сетями. Возможность входа с помощью Google, Facebook или Instagram делает процесс более быстрым и естественным. Статистика показывает, что чем меньше времени пользователи тратят на регистрацию, тем больше они довольны сервисом стартапа.
- Автозаполнение полей. Эту функцию необходимо учитывать и при разработке приложений для Android, и для iOS. Система предложит пользователю автоматически заполнить контактную информацию, если он включил эту возможность в своих настройках.
- Режим гостя. Некоторые пользователи вообще не хотят создавать личный кабинет, поэтому для них тоже есть решение. Они могут сделать заказ в режиме гостя и предоставить минимальное количество данных. Согласно исследованиям, 37% пользователей не завершают оформление заказа из-за того, что им предлагают зарегистрироваться в системе, и они не хотят тратить на это время. Но у режима гостя есть недостаток: без полного входа в систему клиенты не смогут просматривать историю своих заказов или добавлять товары в избранное.
Чтобы мотивировать пользователей регистрироваться в приложении, вы можете предложить им дополнительные бонусы в виде купонов на скидку и персональных рекомендаций.
2. Правило большого пальца
Второй лайфхак — расположить все кнопки в «зоне большого пальца». Хотите знать, где она находится? Просто возьмите телефон в руку и проверьте, до каких углов дисплея вы можете дотянуться только большим пальцем.
При создании ТЗ для дизайнеров важно учитывать, что вашим приложением будут пользоваться и правши, и левши.
Для плавной и естественной работы приложения мы рекомендуем размещать важные кнопки в «зоне большого пальца»
Несмотря на то, что «зона большого пальца» еще официально не включена в гайдлайны для разработчиков от Apple и Google, создавать приложения электронной коммерции без её учета — дурной тон.
Мы не советуем размещать важные кнопки в верхней части экрана — пользователю будет неудобно до них тянуться.
3. Умный поиск товаров
Третий совет от Purrweb — добавить в приложение умный поиск. Чем меньше времени пользователи тратят на поиски нужной им вещи, тем быстрее они принимают решение о покупке. Вот 6 примеров умного поиска, которые вы можете добавить в свое приложение электронной коммерции.
- По названию. Пользователям достаточно ввести название товара в строке поиска и увидеть результаты.
- По изображению. Например, если пользователю понравился какой-либо товар в Instagram или TikTok, но не знает точного названия продукта или бренда, он может просто сделать скриншот и использовать поиск в каталоге по изображениям.
- Голосовой поиск. Современные пользователи слишком заняты, чтобы печатать, поэтому нужно дать им возможность использовать голосовой поиск.
- По штрих-коду. Эта функция позволяет пользователям искать продукт по номеру штрих-кода. Например, по UPC (универсальный код продукта), EAN13 или ISBN для книг и других печатных материалов.
- По категориям. Чтобы показать, что вы позаботились о своих пользователях и их времени, мы рекомендуем разделить все товары на категории. Тогда клиенты смогут сразу просматривать отдельные части каталога, которые им нужны. Например, категории могут включать электронику, косметику, одежду, игрушки или товары для дома.
В Amazon есть функция поиска по фотографии. Например, если пользователю понравился лук блогера, и он хочет такой же, ему будет легко найти одежду по скриншоту.
Панель поиска должна располагаться в центре страницы и подсказывать пользователям, как искать товары. Не забудьте добавить фильтры, чтобы товары можно было сортировать по цене, цвету, марке и другим характеристикам.
4. СTA, которые призывают к действию
Для высокой конверсии вашему приложению понадобятся CTA (call-to-action) — кнопки призыва к действию. Они должны быть разными, в зависимости от того, на какой стадии находится пользователь и насколько он готов совершить покупку.
Например, когда клиент добавляет товар в корзину, вы можете мягко предложить ему посмотреть общую сумму с помощью кнопок «Перейти в корзину» или «Оформить заказ» вместо того, чтобы сразу же предложить «Выбрать способ оплаты».
Еще один совет от нас — CTA должны выглядеть как кнопки. Звучит слишком очевидно, но про это часто забывают. Кнопки должны иметь границы, тени и быть закрашенными цветом, чтобы выделяться в интерфейсе. Убедитесь, что главные и второстепенные кнопки тоже отличаются друг от друга. Это будет направлять пользователей в их путешествии по приложению. Например, CTA может быть черным или красным, а второстепенная кнопка — прозрачной с контуром.
Вот пример из нашего личного опыта. Когда мы делали дизайн платформы для покупки билетов на музыкальные фестивали, мы решили поместить цену на CTA-кнопку, чтобы пользователь заранее знал о потенциальных затратах.
Делая CTA-кнопку, в первую очередь думайте о пользователях и о том, что будет им интересно и полезно.
5. Корзина
Процесс оформления заказа должен быть таким же быстрым, как и регистрация. По статистике, большинство пользователей не завершает покупку из-за слишком высоких комиссий и сложности оформления заказа. Кроме того, убедитесь, что клиент точно увидит итоговую стоимость с доставкой, прежде чем перейдет непосредственно к оплате. Около 83% людей отказываются от оформления покупки из-за слишком дорогой доставки (или из-за того, что она не включена в стоимость).
Еще один совет от нас: кнопка «Оплатить» или «Купить» должна быть расположена в «зоне большого пальца» в центре экрана. Старайтесь придерживаться минималистичного дизайна и не перегружать страницу элементами, чтобы внимание пользователя было сконцентрировано на стоимости и оплате.
Чтобы страница не выглядела перегруженной, многие компании используют функцию прогрессивного раскрытия информации. Этот шаблон проектирования позволяет упорядочить информацию на нескольких экранах или наборах. Пользователь может просто нажать на значок плюса или на кнопку «Далее», чтобы получить дополнительную информацию о заказе.
Итоги
Успех приложения электронной коммерции зависит, в том числе, и от качества UI/UX дизайна. На таких густонаселенных рынках, как диджитал торговля, клиенты всегда будут выбирать того, кто предлагает лучшие цены вместе с удобным и интуитивным приложением. Исследования показывают, что грамотный UI дизайн интерфейса увеличивает продажи и коэффициент удержания клиентов.
Правильное распределение элементов предотвратит возможные проблемы с навигацией в интерфейсе. Например, яркая главная кнопка «Добавить в корзину» на контрасте с менее заметной второстепенной кнопкой «Сохранить в виш-лист» смотивирует пользователей оформить заказ и направит их непосредственно в корзину.
Еще больше полезных материалов в нашем Telegram-канале Стартап-пикап.
ПодписатьсяОсновные выводы статьи
Исследования показывают, что 76% пользователей уходят к конкуренту после того, как сталкиваются с одной проблемой в приложении. Это означает, что у новых стартапов практически нет шанса на ошибку. Готовьтесь к релизу заранее, изучайте аудиторию и тщательно тестируйте интерфейс вашего приложения перед выпуском. Мы собрали 5 советов как повысить производительность вашего приложения электронной коммерции с помощью UI элементов и минимизировать риск негативного опыта у пользователей.
- Для быстрой регистрации создайте простую и короткую форму. Используйте одни и те же шрифты, размер букв и цвета;
- Размещайте важные кнопки в «зоне большого пальца». Учитывайте, что покупатели будут использовать разные модели телефонов. Например, зоны, удобные для большого пальца на iPhone 12 и 12 Pro Max, будут совершенно разными из-за размеров экрана;
- Используйте умный поиск по товарам и делите их на категории для удобства пользователей;
- Создавайте разные CTA-кнопки для разных страниц, в зависимости от готовности пользователя к покупке;
- Показывайте пользователю итоговую сумму заранее и максимально упростите процесс оплаты.
Для разработки приложения для интернет магазина мы работаем с React Native. Этот фреймворк использует общую кодовую базу для разработки приложений для iOS и для Android. За счет этого наши клиенты экономят время и деньги — не нужно нанимать две команды разработчиков.
Не важно, есть у вас уже готовое решение или вы только готовитесь взорвать рынок своим стартапом — мы готовы помочь с интуитивным и понятным UI/UX дизайном для вашего приложения. Наше портфолио с предыдущими работами по разработке пользовательского интерфейса можно посмотреть на Dribbble .
Задайте нам любые вопросы о UI/UX дизайне для eCommerce приложений и мы ответим менее чем за 12 часов.
