Как сделать понятный и удобный дизайн для eCommerce-приложения

Привет, мы — «Лайв Тайпинг»: разрабатываем мобильные приложения и рассказываем, какая от них польза для вашего бизнеса. Из этой статьи вы узнаете, почему кнопки в приложении для шоппинга должны быть внизу экрана и как продуманный дизайн может подтолкнуть пользователя к покупке.

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

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

P.S. Нет времени читать? Срочно нужен дизайн или разработка приложения? Пишите нам! Все расскажем, покажем, проконсультируем. Поможем даже если вы не станете нашим клиентом.

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

UX-дизайн

UX-дизайн (user experience или пользовательский опыт) — это проектирование взаимодействия пользователя с интерфейсом для выполнения его же пользовательских задач. Здесь важно, как быстро они выполняются и какие впечатления человек получит от этого процесса. На этапе создания UX-дизайна продумываются функции сайта или приложения, как пользователь будет между ними навигировать и какие действия на странице ему необходимо предпринять, чтобы решить задачу.

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

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

Задача UX-дизайнера — сделать удобный дизайн, в котором легко разберутся как новички, так и пользователи, которые работают с приложением постоянно. Юзабилити (удобная навигация, аккуратная верстка), текстовый контент — все это разрабатывает и улучшает UX-дизайнер.

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

UI-дизайн

Если UX-дизайн приложения — решение задач, то визуальный дизайн или дизайн пользовательского интерфейса — коммуникация между пользователем и приложением.

UI-дизайн (UI — user interface) — это создание внешнего вида продукта и того, как он ощущается: это правильный подбор цветов, форм, композиции и шрифтов. Текст в приложении должен быть легко читаемым, а само приложение — выглядеть современно. Отображение множества разных видов контента требует творческого подхода. У дизайнеров, у которых это получается, за плечами обычно как минимум несколько лет опыта.

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

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

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

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

1. Закон Хика

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

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

2. Закон Парето или правило 80/20

Это правило гласит, что 20% усилий дают 80% результата. Если подумать, то мы используем далеко не все приложения на наших смартфонах — большинство из них запускаются очень редко.

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

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

3. Правило большого пальца

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

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

В дизайне user flow необходим, чтобы сфокусироваться на создании понятного интерфейса и подобрать эффективные способы решения тех или иных задач. Благодаря этому создается дизайн конкретно для пользователя, а не ради галочки в процессе разработки.

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

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

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

Самые важные виды сортировок — цена, размер, цвет и материал. Чаще всего пользователи сортируют товары именно по цене. А в избранное пользователи добавляют товары, которые им понравились, но которые люди пока не готовы купить.

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

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

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

Финальная стадия покупки в eCommerce-приложении — это корзина. После добавления покупки в корзину очень много пользователей выходят из приложения, и конверсия падает. Средний процент составляет 69,8%. Однако не стоит пугаться: значение примерное и составлено на основе анализа тысячи розничных магазинов.

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

Задача дизайнера — создать условия, в которых пользователь сфокусируется на процессе и дойдёт до оплаты.

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

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

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

Больше интересного про разработку ecom-приложений:

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

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

10 главных метрик для аналитики ecommerce-приложений: рассказали, как оценить эффективность ecom-приложения.

Бест-практис в дизайне eCommerce-приложений: как произвести хорошее впечатление с первой встречи.