Как создать пользовательский интерфейс приложения для электронной торговли

25.07.2016 21:56

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

приложения для электронной торговли

 

 

Здесь, на Yalantis наши дизайнеры ориентированы на потребителя. Мы анализируем поведение пользователей и дизайн приложений, удовлетворяющих их потребности. Для этой статьи, мы попросили наш дизайнерский отдел поделиться советами и трюками для создания идеального приложения.

Коммерческие приложения включают три главных компонента:

  • каталог (перечень товаров);

  • поиск и настройки фильтра;

  • и корзина (или заказ).

Каталог или перечень товаров

Как пользователи хотят просматривать каталог вашей продукции? Тестирование A/B позволит увидеть вам, как покупатели предпочитают взаимодействовать с приложением магазином. Вот несколько советов, которые помогут вам спроектировать эффективный каталог:

Упростите меню

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

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

Увеличьте размер объектов и отображайте их по одному за раз

В электронной коммерции, меньше, часто означает лучше. Наше внимание ограничено, и мы не можем адекватно воспринимать большое количество элементов сразу. Исследования, проведенной визуальным оптимизатором веб-сайтов (Visual Website Optimizer), показали, что увеличение размера изображений повышает коэффициент конверсии на 10%.

Фильтры

В приложения моды и стиля, так же, как и в коммерческих, обычно используется 2 типа фильтров. Один общий (например, мужчины/женщины/дети), а другой более конкретный. Ключевая мысль не в том, что фильтры важны, а в том, как их оптимально организовать для роста продаж. Исследования показывают, что кнопка цены, возможно, самая кликабельная среди всех опций фильтра.

Корзина или заказ

Есть четыре шага, которые описывают заключительную стадию любой покупки:

  • добавление элементов в корзину;

  • просмотр корзины;

  • выбор варианта оплаты;

  • и обработка платежа.

Поэтому следующий логический шаг после фильтрации результатов поиска, направить внимание покупателя на кнопку «Добавить в корзину». Выделить ее на фоне всего интерфейса приложения очень важно. Это можно сделать несколькими способами: сосредоточить внимание на размере, цвете, прозрачности или расположить кнопку на главной странице. Размещение «Добавить в корзину» по середине экрана – также хорошее решение, учитывая то, что около 20% покупателей окажутся левшами и такой интерфейс будет удобен каждому.

Корзина

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

Заказ

Клиенты ожидают несколько вариантов оплаты, а также быстрой и безопасной проверки. Почему Apple Pay, а не более традиционные методы оплаты? Причина в том, что Apple Pay требует от клиента меньше шагов, чтобы завершить покупку. Им не требуется вводить информацию о своей кредитной карте (например, ее номер или срок действия). Оплата с помощью Apple Pay требует только выбора кредитки и нажатия кнопки «home», чтобы подтвердить сделку с сенсорным ID.