Как произвести хорошее впечатление с первой встречи: бест-практис в дизайне eCommerce-приложений
Многие покупатели готовы оставаться верными бренду за качественный и дружелюбный сервис. Те же чувства у клиента должно вызывать и eCom-приложение. Мы «Лайв Тайпинг» – студия мобильной разработки. В этой статье расскажем о некоторых правилах хорошего тона в дизайне мобильных приложений для интернет-магазинов.
Современный пользователь избалован хорошими digital-продуктами на рынке eCommerce-приложений. В среднем ему достаточно трёх посещений для принятия решения, будет ли он дальше пользоваться скачанным сервисом. Если он не сочтёт приложение удобным, то с большой вероятностью сразу удалит. Под неудобством подразумевается не только не отлаженная работа, но и непродуманный пользовательский интерфейс. Здесь речь пойдёт о том, как расположить к себе покупателя с помощью дизайна приложения.
Содержание:
Почему стоит создавать собственное eCom-приложение для бизнеса
Рынок 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.
1. Упростите регистрацию
Пользователь только зашёл в приложение посмотреть, что вы предлагаете. Последнее, что ему хочется, – заполнять кучу полей, ждать письмо со ссылкой подтверждения регистрации или вспоминать пароль от социальной сети. Он может потерять интерес уже на первом пункте.
Проблема. Регистрация занимает много времени.
Решение. Делаем простую короткую форму регистрации.
Запросите минимум данных для создания учётной записи – хватит имени и номера телефона. Остальную информацию пользователь внесёт позднее в личном кабинете.
2. Не перегружайте экран
Приложения электронной коммерции создаются для небольших экранов мобильных устройств. Поэтому нужно уловить тонкую грань между информативностью и загромождением пространства контентом. Пользователь хочет быстро найти ответы на вопросы, которые возникают по мере изучения товара.
Проблема. Много лишних картинок, описание товара слишком объемное.
Решение. Делаем содержательную UI-карточку товара:
- демонстрируем общий вид товара и важные детали;
- выстраиваем правильную последовательность изображений;
- избегаем пространных описаний;
- распределяем информацию по блокам.
3. Используйте правило трёх кликов
Это негласное правило, суть которого в том, что пользователь должен добраться до любой информации на сайте в 3 клика. Считается, что если потребуется больше, то он уйдёт на другие сайты. Это справедливо и для приложения электронной коммерции (только вместо кликов — тапы).
Проблема. Нужно пролистывать весь каталог, чтобы найти конкретный товар.
Решение. Выстраиваем иерархию поиска товаров:
- категория;
- подкатегория;
- продукт.
Если у вас не получается распределить товары по указанным блокам, сделайте больше. Будет хуже, если продукт окажется в неожиданном месте и пользователь его не найдёт. Просто помните, что категории упрощают поиск.
4. Определите оптимальную зону взаимодействия
Согласно исследованию журнала UXmatters, 49% людей проводят все манипуляции в телефоне, держа его одной рукой, и только 15% используют обе. Это значит, что при проектировании eCom-приложения вам нужно расположить его основные кнопки в удобных местах экрана. Так, чтобы пользователю не пришлось задействовать вторую руку для взаимодействия с ними.
Проблема. Приходится работать в телефоне непривычным способом.
Решение. Проверяем, может ли пользователь совершать все действия большим пальцем рабочей руки.
5. Сделайте интуитивно понятную навигацию
Привычные символы помогают нам ориентироваться в непривычных ситуациях. Мы видим значок чемодана и идём по указателям на выдачу багажа. Высматриваем букву «М», когда ищем станцию метро в незнакомом городе. Человеческий мозг обрабатывает изображения в тысячи раз быстрее, чем текст, поэтому ключевые элементы приложения обычно обозначаются картинками.
Проблема. Нужно учиться пользоваться новым приложением.
Решение. Ориентируемся на пользовательский опыт:
- используем пиктограммы в качестве указателей разделов приложения. Так перемещение по ним станет быстрым и простым;
- выбираем шаблонные изображения, знакомые пользователям из других приложений. Переучиваться и запоминать новые обозначения – это дополнительные усилия, которые люди не очень любят прикладывать.
Если вы хотите создать раздел с уникальными предложениями, то лучше поместить соответствующую кнопку рядом с уже известными. В этом случае к значкам можно добавить подписи. Так пользователю будет легче разобраться с новыми функциями.
Хотите чтобы профессионалы сделали все за вас? Просто обратитесь в Лайв Тайпинг! В нашем портфолио множество проектов для екома, среди клиентов: ИЛЬ ДЕ БОТЭ, Sephora, Lime, Melon Fashion Group.
6. Расширьте функции предпросмотра товара
Один из недостатков онлайн-шопинга – отсутствие физического контакта с товарами. Пользователь лишен возможности потрогать вещь и посмотреть на неё с разных сторон. Вот почему так важно компенсировать это хорошей визуализацией с помощью приёмов UX/UI-дизайна.
Проблема. Пользователь не может адекватно оценить все характеристики товара.
Решение. Предоставляем максимум возможностей для ознакомления:
- Адаптируем изображения для мобильных устройств. Они должны помещаться на нём полностью, иметь хорошее качество и опцию просмотра в полноэкранном режиме.
- Предусматриваем функцию увеличения размера. Позвольте покупателю рассмотреть все детали, чтобы принять взвешенное решение. Знакомое двойное касание или сжатие двумя пальцами – беспроигрышный вариант.
- Делаем проморолики. Это ещё один способ сделать акцент на важных деталях, а также показать товар со всех сторон.
- Используем онлайн-показ. Так пользователь сможет не только рассмотреть товар подробно, но и пообщаться с консультантом по видеозвонку.
- Сокращаем время загрузки. Долгое ожидание может заставить покупателя отказаться от просмотра товара и в офлайн-шопинге.
7. Используйте виртуальную реальность
Это инструмент поможет сделать онлайн-шопинг похожим на настоящий. Виртуальная примерка не только поможет определиться с выбором, но и развлечёт пользователя новой формой взаимодействия. А при заказе крупногабаритных товаров это единственный способ посмотреть на них в интерьере, не занося в дом.
Проблема. Пользователь не может увидеть себя в новом образе.
Решение. Накладываем 3D-модель на видеопоток с камеры клиента.
8. Дайте клиенту время подумать
Часто люди смотрят товары без намерения их купить в тот же день. А кто-то просто не успевает завершить заказ из-за нехватки времени. Бывает, что вещь понравилась, но пользователь не помнит, как её нашел. Или он просто не хочет снова вводить запрос, выставлять фильтры и искать интересующее в списке.
Проблема. Нужно заново погружаться в процесс поиска.
Решение. Организовываем быстрый доступ к понравившимся товарам:
- предлагаем отправить товар в вишлист с помощью специальных меток;
- увеличиваем время хранения товаров в корзине.
9. Персонализируйте ваш сервис
Клиенты будут чаще пользоваться вашим сервисом, если вы будете предугадывать их желания. Одно дело – задать критерии поиска и найти в списке продукт, который им полностью соответствует. Другое – открыть приложение и сразу увидеть нужный товар. А лучше пойти дальше и предложить клиенту сопутствующие товары.
Проблема. Приходится использовать поиск при формировании каждого заказа.
Решение. Создаём подборки:
- из недавних покупок – это позволит быстро собрать корзину вашим постоянным покупателям;
- на основе виш листов и поисковых запросов – это продемонстрирует широту вашего ассортимента.
Так пользователь подберёт наиболее подходящий продукт, а вы увеличите продажи.
10. Добавьте рейтинги и отзывы
Наличие отзывов повышает доверие покупателей к бренду. В описании товара вы расскажете о его преимуществах, но лучше, если это подтвердят те, кто уже его приобрёл.
Проблема. Клиент боится купить кота в мешке.
Решение. Показываем опыт других пользователей, который:
- вселяет чувство безопасности;
- раскрывает дополнительные детали;
- помогает принять решение о покупке.
11. Призывайте к действию
Цель любого eCom-приложения – продажа товаров и услуг. Поэтому клиент должен сразу найти нужную кнопку, когда будет готов купить. Механизм работает и в обратном направлении: кнопка подтолкнёт сомневающегося к действию. Чем больше призывов увидит пользователь, тем выше вероятность побудить его сделать заказ. Но не забывайте, что во всём следует знать меру.
Проблема. Пока товар лежит в козине, клиент может изменить намерение.
Решение. Размещаем кнопку призыва к покупке на видном месте.
Эти практики используются в большинстве приложений электронной коммерции сегодня. Однако они тоже когда-то были нововведением. Если у вас есть идея, как сделать более совершенный сервис для пользователей, мы готовы обсудить её в комментариях.
Другие статьи об удачных решениях для eCom-приложений:
- 5 лучших решений в ecom-приложениях, которые мы сделали для наших клиентов
- Очень подробно про дизайн нового мобильного приложения Zarina
- Какие тренды электронной коммерции взять в своё мобильное приложение в 2024 году
- Топ-10 функций для мобильного приложения розничного магазина
- 📱 Создаем мобильное приложение: 5 видов программ лояльности в ритейле
Здравствуй эко-воины! Знаете, что общего между пакетом «биоразлагаемого» пластика и обещанием Илона колонизировать Марс к 2030? Оба — красивая сказка. Разбираю, почему скоро «зелёный» маркетинг начнёт курить собственные бамбуковые стаканчики.
— Смотри на Арсена Маркаряна — парень рубит бабки миллионами. 70.000 человек и каждый платит по 1500 рублей в месяц! — А почему бы и нам так не зарабатывать?
Вопрос не в том, можно ли, а в том, КАК?— и эта статья вам все расскажет
Несколько цитат из его интервью журналисту Александру Плющеву.
Персонаж, с которым приходят — уже любимчик компании. К нему нужно с уважением и внимательно. Поэтому за слайдом про понимание задачи мы показываем, что заметили и как почувствовали