Дизайн интерфейсов eCommerce-приложений

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

Хороший UI-дизайн создаётся на основе поведения пользователей и закрывает их потребности. В этой статье мы поделимся советами и хитростями, помогающими создать идеальное eCommerce-приложение.

eCommerce-приложения включают в себя три обязательных компонента: каталог, систему фильтров и сортировки и корзину.

Дизайн каталога товаров

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

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

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

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

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

В сфере eCommerce лучше — не значит больше. У человеческого внимания есть пределы, которые не дают адекватно воспринимать таблицу из большого количества объектов. Исследование в сфере eCommerce, проведённое Visual Website Optimizer, показало, что увеличение размеров изображения товара может увеличить коэффициент конверсии на 10%.

Фильтры и сортировка

В приложениях для сферы моды и магазинов одежды, как и в eCommerce-приложениях, обычно два типа упорядочивания контента: фильтрация и сортировка. Фильтрация очень широка («мужские», «женские», «для детей»), а сортировка, напротив, предельно конкретна. Ключевой вопрос в том, как оптимально организовать фильтрацию и сортировку, чтобы они увеличивали продажи.

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

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

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

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

Посмотрите на дизайн пользовательского интерфейса приложения на картинке ниже, где дизайнеры сделали зелёную кнопку на белом фоне. Чаще всего в eCommerce-приложениях белый цвет — наилучший выбор для фона, потому что белый не засоряет ваше приложение цветами и формами; кроме того, белый цвет фона не искажает соседние цвета. Зелёный подсознательно ассоциируется с положительными эмоциями и одобрением, так что кнопку «Добавить в корзину» дизайнеры сделали для того, чтобы стимулировать наших клиентов делать покупки.

Зелёная кнопка «Добавить в корзину» — это не правило, которое нужно неукоснительно соблюдать. При выборе цвета кнопок также стоит руководствоваться общей стилистикой приложения. Поэтому та же кнопка «Добавить в корзину» может быть и чёрной, и красной, и синей.

Расположение кнопки «Добавить в корзину» посередине экрана тоже может быть разумным решением, если учесть, что 20% пользователей — левши. Расположить кнопку по центру — значит сделать её одинаково удобной и для правшей, и для левшей.

Экран корзины и оплата

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

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

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

Клиенты ожидают от вас возможности оплатить покупку быстро и безопасно с помощью нескольких платёжных систем.

Почему Apple Pay, а не более традиционные способы оплаты? Одна из причин — Apple Pay требует от клиента меньшего количества шагов для завершения покупки. Нужно только выбрать кредитную карту и нажать на кнопку Home — и никакого ввода информации о кредитной карте.

Почему упрощение процесса оплаты важно для eCommerce-приложений? Люди, использующие мобильные телефоны для покупок, не хотят утруждать себя регистрацией нового аккаунта. Согласно недавнему исследованию поведения клиентов, 14% пользователей не хотят создавать аккаунты в онлайн-магазинах, а 11% не хотят делиться личной информацией. Короче говоря, если вы потребуете от своих клиентов заполнять информацию о кредитной карте или вписывать адрес электронной почты перед тем, как они смогут добавить в корзину товар, ваш коэффициент конверсии будет низким.

Какие важные выводы о дизайне мобильных eCommerce-приложений стоит сделать?

⦁ Упрощайте меню.

⦁ Лучшее меньшее количество изображений, но большего размера.

⦁ Как следует продумайте, какие фильтры наиболее важны для ваших товаров, и визуально выделите их.

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

⦁ Определите, какие варианты оплаты наиболее удобны для ваших клиентов (если не уверены, проведите A/B тестирование).

⦁ Используйте оповещения с выделением текста жирным и анимацию для того, чтобы показать пользователю, что заказ принят на обработку. Люди хотят быть абсолютно уверены, что приложение не зависло и что всё в порядке, особенно во время обработки платежа.

Дизайн мобильного интерфейса приложений в сфере eCommerce и моды — это, в первую очередь, превращение онлайн-шоппинга в приятное времяпрепровождение, которым является обычный шоппинг в магазинах одежды и аксессуаров. Из-за ограниченных размеров экранов на мобильных устройствах дизайнерам приходится как следует думать, как сделать простой и понятный интерфейс шоппинг-приложений.

Наши дизайнеры познакомились с этими принципами на своём опыте, так что следуйте их советам, и ваши клиенты будут довольны вашим мобильным магазином!

Если вы ищете команду, которая сделает дизайн приложения для вашего интернет-магазина, напишите нам.