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

Многие покупатели готовы оставаться верными бренду за качественный и дружелюбный сервис. Те же чувства у клиента должно вызывать и eCom-приложение. Мы «Лайв Тайпинг» – студия мобильной разработки. В этой статье расскажем о некоторых правилах хорошего тона в дизайне мобильных приложений для интернет-магазинов.

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

Содержание:

Почему стоит создавать собственное eCom-приложение для бизнеса

Дизайн в приложениях электронной коммерции

Что такое бест-практис?

1. Упростите регистрацию

2. Не перегружайте экран

3. Используйте правило трёх кликов

4. Определите оптимальную зону взаимодействия

5. Сделайте интуитивно понятную навигацию

6. Расширьте функцию предпросмотра товара

7. Используйте виртуальную реальность

8. Дайте клиенту время подумать

9. Персонализируйте ваш сервис

10. Добавьте рейтинги и отзывы

11. Призывайте к действию

Рынок eCommerce стремительно растёт, и особенно большие темпы показывают маркетплейсы. Так, по данным исследовательского агентства Data Insight, доля Wildberries и Ozon на рынке за 2023 год выросла с 67% до 76%. Однако в декабре 2023 года Tinkoff eCommerce опубликовал результаты опроса покупателей маркетплейсов. Главный вывод – 75% пользователей перед покупкой проверяют товар на сайте продавцов. Вот какие параметры они сравнивают:

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

Кроме того, Data Insight говорит о нишевых маркетплейсах, к которым относится, например, Lamoda и «М.Видео», как о недооценённом сегменте рынка. Агентство отводит для него особое место на российском рынке и прогнозирует рост его объемов до 1 трлн рублей к 2026 году при сохранении текущих темпов развития (27% за 2023 год). Если хотите оказаться в числе компаний, которые разделят эту сумму, вам нужно eCom-приложение. Обратитесь к нам, и мы его сделаем.

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

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

Эти два вида дизайна тесно связаны, так как общая цель у них одна – создать приложение, которым захочется пользоваться. Поэтому часто UX- и UI-дизайнер – это один и тот же человек.

Приведём пример. При наборе текста вы не задумываетесь над расположением символов на клавиатуре. Каждый день вы пишете сообщения, вводите поисковые запросы и ваши пальцы выбирают нужные клавиши интуитивно. С большой вероятностью вы используете раскладку Qwerty. Её изобрели в середине XIX века для печатных машин. Суть изобретения – особое расположение клавиш по двум основным принципам:

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

Печатать стало удобно, поэтому люди быстро привыкли к такой раскладке. Она легко перекладывалась на другие языки и стала популярной во всём мире. Сейчас для компьютерных и виртуальных клавиатур раскладка Qwerty – стандарт. Ведь её главное достоинство в том, что пользователям не нужно переучиваться набирать текст на каждом новом устройстве.

Существует закон Якоба Нильсена (основатель и руководитель компании Nielsen Norman Group), суть которого в том, что большую часть времени пользователи проводят на других сайтах, поэтому предпочитают, чтобы ваш сайт работал так же, как все остальные. Этот закон применим ко всем продуктам digital-рынка.

Резюмируя сказанное, бест-практис – это идеи, которые однажды настолько успешно решили задачу пользователя, что стали внедряться повсеместно. Расскажем, какие бест-практис стоит применить в UX/UI-дизайне eCom-приложения, чтобы использовать его было так же легко, как набирать текст на Qwerty.

Пользователь только зашёл в приложение посмотреть, что вы предлагаете. Последнее, что ему хочется, – заполнять кучу полей, ждать письмо со ссылкой подтверждения регистрации или вспоминать пароль от социальной сети. Он может потерять интерес уже на первом пункте.

Проблема. Регистрация занимает много времени.

Решение. Делаем простую короткую форму регистрации.

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

В приложении «Самокат» для регистрации пользователю достаточно ввести только номер телефона. Этот паттерн поддерживает концепцию сервиса — нажмите кнопку «оплатить» и продукты приедут к вам сами за считанные минуты

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

Проблема. Много лишних картинок, описание товара слишком объемное.

Решение. Делаем содержательную UI-карточку товара:

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

В карточке товара в Ozon карусель из фото на весь экран, а также длинное текстовое описание. В карточке товара в Lamoda на одном экране помещается фото с двух разных ракурсов и размерный ряд с отметками о наличии, а текстовое описание отсутствует

Это негласное правило, суть которого в том, что пользователь должен добраться до любой информации на сайте в 3 клика. Считается, что если потребуется больше, то он уйдёт на другие сайты. Это справедливо и для приложения электронной коммерции (только вместо кликов — тапы).

Проблема. Нужно пролистывать весь каталог, чтобы найти конкретный товар.

Решение. Выстраиваем иерархию поиска товаров:

категория;
подкатегория;
продукт.

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

В приложении «Золотое Яблоко» товары сгруппированы по разным категориями в зависимости от цели поиска. До одного и того же товара можно добраться разными путями, выбирая категории

Согласно исследованию журнала UXmatters, 49% людей проводят все манипуляции в телефоне, держа его одной рукой, и только 15% используют обе. Это значит, что при проектировании eCom-приложения вам нужно расположить его основные кнопки в удобных местах экрана. Так, чтобы пользователю не пришлось задействовать вторую руку для взаимодействия с ними.

Проблема. Приходится работать в телефоне непривычным способом.

Решение. Проверяем, может ли пользователь совершать все действия большим пальцем рабочей руки.

В приложении «Золотое Яблоко» кнопки находятся в зоне большого пальца: основные элементы расположены в нижней части экрана, а каталог товаров начинается с его середины

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

Проблема. Нужно учиться пользоваться новым приложением.

Решение. Ориентируемся на пользовательский опыт:

используем пиктограммы в качестве указателей разделов приложения. Так перемещение по ним станет быстрым и простым;
выбираем шаблонные изображения, знакомые пользователям из других приложений. Переучиваться и запоминать новые обозначения – это дополнительные усилия, которые люди не очень любят прикладывать.

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

В приложении Burger King раздел с программой лояльности размещен в нижней части экрана в центре между меню и купонами. Пользователь интуитивно тапает по «Коронам» и открывает описание условий программы

Хотите чтобы профессионалы сделали все за вас? Просто обратитесь в Лайв Тайпинг! В нашем портфолио множество проектов для екома, среди клиентов: ИЛЬ ДЕ БОТЭ, Sephora, Lime, Melon Fashion Group.
Евгений Бойченко, директор по маркетингу

Один из недостатков онлайн-шопинга – отсутствие физического контакта с товарами. Пользователь лишен возможности потрогать вещь и посмотреть на неё с разных сторон. Вот почему так важно компенсировать это хорошей визуализацией с помощью приёмов UX/UI-дизайна.

Проблема. Пользователь не может адекватно оценить все характеристики товара.

Решение. Предоставляем максимум возможностей для ознакомления:

Адаптируем изображения для мобильных устройств. Они должны помещаться на нём полностью, иметь хорошее качество и опцию просмотра в полноэкранном режиме.
Предусматриваем функцию увеличения размера. Позвольте покупателю рассмотреть все детали, чтобы принять взвешенное решение. Знакомое двойное касание или сжатие двумя пальцами – беспроигрышный вариант.
Делаем проморолики. Это ещё один способ сделать акцент на важных деталях, а также показать товар со всех сторон.
Используем онлайн-показ. Так пользователь сможет не только рассмотреть товар подробно, но и пообщаться с консультантом по видеозвонку.
Сокращаем время загрузки. Долгое ожидание может заставить покупателя отказаться от просмотра товара и в офлайн-шопинге.

В приложении Rendez-Vous в карточке товара есть 2 проморолика: просмотр товара в ракурсе 360° и просмотр товара на модели

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

Проблема. Пользователь не может увидеть себя в новом образе.

Решение. Накладываем 3D-модель на видеопоток с камеры клиента.

В приложении «Мегамаркет» можно «примерить» декоративную косметику, а приложение Hoff позволяет «поставить» мебель в комнате

Часто люди смотрят товары без намерения их купить в тот же день. А кто-то просто не успевает завершить заказ из-за нехватки времени. Бывает, что вещь понравилась, но пользователь не помнит, как её нашел. Или он просто не хочет снова вводить запрос, выставлять фильтры и искать интересующее в списке.

Проблема. Нужно заново погружаться в процесс поиска.

Решение. Организовываем быстрый доступ к понравившимся товарам:

предлагаем отправить товар в вишлист с помощью специальных меток;
увеличиваем время хранения товаров в корзине.

В приложении Rendez-Vous понравившиеся товары добавляются в раздел «Избранное», который находится на основной панели инструментов. А время хранения товаров в корзине не ограничено

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

Проблема. Приходится использовать поиск при формировании каждого заказа.

Решение. Создаём подборки:

из недавних покупок – это позволит быстро собрать корзину вашим постоянным покупателям;
на основе виш листов и поисковых запросов – это продемонстрирует широту вашего ассортимента.

Так пользователь подберёт наиболее подходящий продукт, а вы увеличите продажи.

Приложение «Самокат» предлагает подборки из уже заказанных товаров, а «Золотое Яблоко» — на основе товаров раздела «Избранное» и поискового запроса

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

Проблема. Клиент боится купить кота в мешке.

Решение. Показываем опыт других пользователей, который:

вселяет чувство безопасности;
раскрывает дополнительные детали;
помогает принять решение о покупке.

В приложении «Золотое Яблоко» на основе оценок составляется рейтинг товара. Также пользователь может поделиться личными впечатлениями: оставить текстовый отзыв или фото

Цель любого eCom-приложения – продажа товаров и услуг. Поэтому клиент должен сразу найти нужную кнопку, когда будет готов купить. Механизм работает и в обратном направлении: кнопка подтолкнёт сомневающегося к действию. Чем больше призывов увидит пользователь, тем выше вероятность побудить его сделать заказ. Но не забывайте, что во всём следует знать меру.

Проблема. Пока товар лежит в козине, клиент может изменить намерение.

Решение. Размещаем кнопку призыва к покупке на видном месте.

В приложении Wildberries призыв к покупке размещён в карточке товара и напротив каждого товара в корзине

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

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

Другие статьи об удачных решениях для eCom-приложений: