Создавая дизайн интерфейсов для онлайн магазина, важно ориентироваться на конечного потребителя. Чтоб получить качественный продукт, мы должны проанализировать поведение покупателя. Базируясь на полученных данных, рисуем дизайн приложения, который удовлетворит запросы потенциальных пользователей.
Каталог продукции
Представьте себе, как именно покупателям будет удобно изучать ассортимент. Вот несколько приёмов, котрые помогут вам создать дизайн каталога, который будет работать:
Сделайте меню проще
Согласно закону Хика, каждый последующий дополнительный выбор увеличивает время, необходимое человеку для приянтия решения. Уменьшив количество элементов в меню, вы можете значительно повысить показатель конверсии сайта. Организуйте его по принципу визульной иерархии.
С помощью цвета, контрастов, текстуры, форм, положения и размера вы можете организовать элементы на странице так, чтобы пользователи смогли мгновенно понять, какой объект для них является наиболее важным.
Увеличьте элементы и отображайте их по одному за раз
В электронной торговле часто “меньше” означает “лучше”. Наше внимание имеет лимит и мы не можем адекватно воспринимать целую сетку продуктов на экране. В результате исследований было доказано, что увеличение отдельных элементов может повысить конверсию интернет-магазина на 10%. Рассматривая по одной единице товара за раз (как в примере), мы можем сконцентрировать достаточно внимания на каждой вещи.
Дизайн каталога продукции для интернет-магазина одежды
Фильтры
В приложениях, посвященных моде, как и в приложениях интернет-магазинов, как правило используют два вида фильтров. Один из них достаточно обобщенный (например, для женщин, для детей, для мужчин). Второй – уже более конкретный. Главный вопрос не в том, насколько важны фильтры, но в том, как их организовать максимально эффективно, чтоб увеличить продажи.
Если вы посмотрите на тепловую схему экрана приложения, вы увидите, что кнопка будет самой яркой из всех. То есть, именно эта кнопка является самой кликабельной.
В приведенном ниже примере, цвет, размер и цена указаны в одной строке и получили равный визуальный акцент. Такой фильтр очень прост в применении.
Страница заказа
Любой опыт приобретения товара онлайн состоит из 4 шагов: добавление товара в корзину, просмотр содержимого корзины и страницы заказа, выбор способа оплаты и обработки платежа.
По логике, следующим важным моментом, который необходимо продумать до мелочей, является кнопка Добавить в корзину. Необходимо выделить эту кнопку на фоне всего приложения. Для этого у вас есть несколько вариантов – сосредоточить внимание либо на размере кнопки, либо на цвете, прозрачности, или положении на странице.
В примере ниже использована зеленая кнопка на белом фоне. Белый фон часто является лучшим выбором для интерфейса приложений электронной коммерции, так как он защищает ваше приложение от загромажденности и беспорядка.
Для кнопки Добавить в корзину был использован именно Зеленый цвет, потому что он подсознательно ассоциируется с положительными эмоциями и одобрением.
Из пользователей приложения, примерно 20% окажутся левшой. Учитывая это, размещение кнопки “Добавить в корзину” в середине экрана также может быть мудрым выбором. Разместив кнопку в центре, вы делаете приложение одинаково удобным как для праворуких, так и леворуких пользователей.
Корзина
Конечный пункт назначения для клиента в любой электронной коммерции приложение является корзина. Тележка является чрезвычайно важным элементом, поскольку он является ключевым моментом, на котором клиенты могут отказаться от своих мобильных покупок. Если слишком много времени требуется в тележке, то клиенты могут оставить приложение. Когда это произойдет, то, скорее всего, что они не вернутся, и выполнить заказ позже.
Какие элементы хорошо спроектированной корзины? Ваша корзина должна включать в себя такие элементы, как краткое изложение продукта, поле для промо-кодов, несколько вариантов оплаты, несколько способов доставки, окончательные цены, а также кнопки, чтобы продолжить покупки или перейти к оформлению заказа. В зависимости от платформы ваше приложение работает на и вашего целевого рынка, вы можете выбрать, чтобы включить другие элементы, а также, но это базовый набор функций, которые представляют собой начальную точку.
Анимация выше иллюстрирует хорошо продуманный дизайн корзины покупок: это дает ощущение просторный магазин, наполненный предметами роскоши. Спокойная, тонкая цветовая схема идеально подходит для женской моды покупок.
Оплата заказа
Клиенты ожидают несколько вариантов оплаты. Они также ожидают быстрой и безопасной проверки. Анимация выше, предполагает, что клиент будет платить за свои товары с Apple, Pay.
Почему Apple не платить и некоторые более традиционные варианты оплаты? Одна из причин в том, что компания Apple Pay требует меньше шагов для клиента, чтобы завершить покупку. Клиенты не нужно вводить всю информацию о своей кредитной карты (например, номер кредитной карты и срок ее действия). Оплата с помощью компании Apple Pay требует только выбора кредитной карты и нажав кнопку домой, чтобы подтвердить сделку с сенсорным ID.
Почему упрощает процесс оплаты так важно для мобильного электронной коммерции?
Люди, которые делают покупки с помощью своих мобильных телефонов не хотят быть обременены трудоемкий процесс регистрации новой учетной записи. Недавнее исследование поведения клиентов показал, что 14 процентов пользователей не хотят, чтобы создать учетную запись с интернет-магазином и 11 процентов не хотят делиться много личной информации. Длинный и короткий его в том, что если вам требуется ваших клиентов, чтобы зарегистрировать информацию о своей кредитной карты или оставить их по электронной почте, прежде чем они могут даже добавить товар в корзину, коэффициент конверсии будет иметь катастрофические последствия.
Какие важные советы о мобильных дизайн электронной коммерции, вы должны забрать домой?
- Упрощение меню.
- Выбираю меньшего количества изображений большего размера.
- Тщательно продумайте, какие фильтры являются наиболее важными для вашей продукции, а затем сделать их выделиться.
- Используйте визуальную иерархию, чтобы сделать вашу кнопку Добавить в корзину невозможно пропустить.
- Определить наиболее удобные варианты оплаты для своих клиентов (запустить тестирование \ б, если вы не уверены).
- Используйте смелые уведомления или анимацию, чтобы указать, что заказ обрабатывается. Люди хотят знать, в каждом конкретном случае, что ваше приложение не разбился, и что-то происходит – особенно, когда их оплата обрабатывается.
