Как сделать идеальное мобильное приложение для интернет-магазина
Специалисты студии WINFOX анализируют приложения крупных интернет-магазинов, а потом вместе с другими разработчиками и представителями онлайн-ретейлеров выбирают лучшие практики
По статистике сегодня 49% людей делают покупки со своего смартфона, а к 2021 году доля мобильной коммерции составит более половины всех продаж через интернет. Компании, которые следят за трендами и чувствуют рынок, активно создают и развивают мобильные приложения, стремясь сделать их максимально удобными для пользователя.
Чтобы сделать хороший сервис, надо понять, какое оно, идеальное для покупателя мобильное приложение интернет-магазина. Мы выбрали 5 крупных онлайн-ретейлеров и посмотрели, как делать хорошо:
- Lamoda;
- Wildberries;
- Ozon;
- «ОКЕЙ»;
- ASOS.
В крупных компаниях обычно есть штат аналитиков, которые тестируют приложения, проверяют пользовательские сценарии и новые фичи, говорят разработчикам, что и как надо исправить, чтобы было еще удобнее. Компании поменьше не могут такое себе позволить — это дорого. Поэтому, чтобы сделать рабочее и удобное приложение, логично ориентироваться на опыт лидеров рынка.
Содержание
Регистрация и авторизация
Во всех приложениях можно искать товары без регистрации, но чтобы сделать заказ, надо залогиниться. Войти можно по номеру телефона, через почту на Google, Mail.Ru или аккаунт в социальной сети «ВКонтакте», Facebook, «Одноклассники».
ASOS еще позволяет использовать аккаунт в Twitter.
Wildberries и Ozon поддерживают авторизацию только по номеру мобильного телефона — это нужно, чтобы потом контролировать систему персональных скидок, и с одного аккаунта покупал только один человек.
Здорово, когда при первом входе в приложение пользователи видят приветственный гайд. Например, Lamoda на слайдах рассказывает, почему выгодно покупать именно здесь.
ASOS показывает имиджевое видео, которое вызывает желание стать похожим на его героев, вести такой же образ жизни и носить такую же одежду.
Это делает приложение более дружелюбным, а человек становится лояльнее к бренду еще до первой покупки.
Лучшие практики
Самое лучшее — быстрая регистрация по номеру телефона. Вбиваешь номер, на него тут же приходит проверочный код, вводишь его и входишь в аккаунт. Не надо придумывать и запоминать длинные пароли.
Авторизация через социальные сети не всегда удобна: пользователь может забыть, через какую сеть входил прошлый раз, и у него появится второй личный кабинет без истории заказов.
При первом входе в приложение мы даем возможность пользователю сначала выбрать товары, добавить их в корзину — и только при оформлении заказа просим оставить контакты, чтобы доставить заказ. Когда человек в следующий раз зайдет в приложение Ozon, он уже будет авторизован под своим номером.
Чем сложнее регистрация и авторизация, тем меньше вероятность, что ее пройдут до конца. Если вы хотите испортить отношения с новым клиентом, попросите его придумать пароль, секретное слово и несколько раз вбить свою почту.
Главный экран
На главном экране во всех приложениях висят баннеры, которые ведут на выгодные акции и специальные предложения, а также подборки тематических товаров, например к Новому году и для активного зимнего отдыха.
У всех, кроме ASOS, вверху закреплена строка поиска — с главного экрана можно сразу найти нужный товар, не надо переходить в каталог.
Главный экран — лучшее место, где можно показать пользователю всю выгоду и удобство покупок именно в этом магазине. Поэтому здесь размещают не только товары.
Зайдя на Ozon, пользователь видит иконки популярных разделов и истории, на Lamoda — полезный контент из блога компании, а на Wildberries — ссылки на социальные сети для быстрой связи.
Удобно, когда с главного экрана можно сразу добавить товар в корзину, как у «ОКЕЙ». Это особенно актуально для продуктового ретейлера: пользователю достаточно увидеть цену, чтобы купить товар, который он обычно выбирает, переходить в карточку товара не нужно.
Лучшие практики
На главном экране лучше всего показывать то, что сейчас особенно важно для ваших покупателей. Сезонные предложения, новогодние, январские и февральские распродажи сильно поднимают LTV и средний чек на этот период.
В приложении Ozon рекомендации меняются в режиме онлайн. Если в текущей сессии пользователь просматривал страницы детского питания, вернувшись на главную, он увидит в подборке товары для детей.
Чтобы подсветить важные акции или новые сервисы, мы используем столь любимый пользователями социальных сетей формат Stories — и видим высокий уровень вовлеченности. Например, мы рассказали в Stories о нашем финансовом продукте Ozon Card — и буквально за пару часов получили несколько сотен заявок.
На каждом этапе выбора и совершения покупки магазин должен предложить функционал и контент, подходящий для конкретного покупателя в конкретный момент времени — от баннеров до персональных предложений. Поэтому в разных регионах пользователи Lamoda видят рекомендации в зависимости от погоды в их городах.
Каталог
Начальный экран каталога представлен в двух видах.
В строчку, как у Lamoda, Wildberries, «ОКЕЙ» и ASOS.
И плиткой, как у Ozon.
Каждый ретейлер по результатам тестирования выбирает тот вид каталога, который удобнее именно для его групп товаров и целевой аудитории.
Лучшие практики
Есть особенности отображения контента для разных категорий каталога. Например, при выборе одежды определяющий фактор — внешний вид товара, поэтому изображения в этом разделе чуть крупнее.
Выделение категорий в каталоге — довольно сложная штука, в ней очень много нюансов и правил. Вот три самых важных, на мой взгляд. Во-первых, товар должен располагаться сразу в нескольких категориях, чтобы у пользователей было больше шансов его найти. Во-вторых, надо придумать категориям понятные и цепляющие называния. А в-третьих, нужно регулярно обновлять и добавлять новые категории: идеи подарков, сезонные предложения, уникальные коллекции и так далее.
Поиск
Введя запрос, пользователь видит наиболее частые запросы по теме и прямые ссылки на категории товаров. Графически эти поисковые подсказки выделены по-разному — интуитивно понятно, куда предлагается перейти. Так покупатель может довериться выбору других людей или пойти в нужную категорию, чтобы продолжить там поиск самостоятельно.
ASOS сразу показывает, сколько запрашиваемых товаров в той или иной категории — в каждой строчке указана цифра. Пользователь понимает, где сможет увидеть больше нужных товаров, и переходит туда.
Поиск по штрихкоду — относительно свежая опция. Покупателю не нужно вбивать артикул товара вручную, достаточно только сфотографировать штрихкод, приложение его обработает и покажет искомый товар, если он есть в каталоге.
Такой поиск предлагает Wildberries и Ozon — иконка расположена над поисковой строкой или прямо в ней.
В приложении «ОКЕЙ» сканер штрихкодов доступен в боковом меню слева.
Еще одна удобная опция для тех, кто продает одежду и обувь — поиск товара по фотографии, как у Wildberries, Lamoda и ASOS. Например, покупатель ищет зеленый свитер. Он его фотографирует или загружает фото из сети — и в результатах поиска видит все зеленые свитера, максимально похожие на его.
Лучшие практики
Поиск в мобильном приложении — это чаще всего и лучше всего строка с полем-подсказкой и лупой, которая уже давно ассоциируется с поиском.
Важно оптимизировать поиск по запросам — на этапе тестирования или в «Яндекс.Вордстат» посмотреть, как и что ищут. У одного товара может быть множество вариаций написания. От верхнего и нижнего регистра до разряда: вилка — столовые приборы и так далее. Бывает, ищешь ножи, а тебе показывают набор, где и ложки, и вилки — и ты тратишь больше времени, чтобы найти то, за чем пришел. Да, кросс-продажи и маркетинг — это хорошо. Но не в поиске.
У пользователя должна быть возможность найти товары по разным критериям. В идеале это поиск и по категориям, и по товарам, и по брендам. Как у ASOS, например.
Сортировка и фильтры
Продуманная сортировка и фильтры помогают пользователю просто и быстро оценить результаты поиска, чтобы выбрать нужный товар.
Кнопки сортировки и фильтров закреплены вверху экрана.
А иногда объединены в одну, как у «ОКЕЙ».
По умолчанию пользователь видит наиболее популярные товары — это мотивирует его выбрать то, что уже купили другие.
Ozon еще показывает товары от спонсоров.
Удобно, когда отсортировать товары можно по рейтингу и скидке, как у Wildberries.
Страница с фильтрами может содержать максимум нужной информации в уже развернутом виде, как на Ozon. Тогда покупателю не надо переходить на следующий уровень — это упрощает навигацию по фильтрам.
Лучшие практики
Фильтров должно быть много. Как и категории, их надо обновлять и регулярно добавлять новые. Например, связанные с использованием товаров или приуроченные к каким-то событиям.
Когда ищешь что-то через поиск, фильтрация должна сохраняться. В идеале, перейдя на товар, ты должен понимать, в какой категории он лежит. Например, человек находит кроссовки, а потом смотрит другие товары.
Карточка товара
Кнопка «Купить» — главный элемент карточки, поэтому она должна быть большой и всегда видной. Все для того, чтобы пользователь мог совершить покупку на любом этапе знакомства с товаром.
Чаще всего кнопка на всю ширину экрана расположена внизу и выделена контрастным корпоративным цветом.
В карточке товара ретейлеры стремятся разместить максимум информации, которая поможет пользователю совершить покупку. Это слайдер с фото, название, доступные размеры, обычная цена и цена со скидкой, если она действует, текстовое описание, характеристики, отзывы, похожие и просмотренные ранее товары.
Удобно, когда сразу можно посмотреть условия доставки — прямо в карточке, без добавления товара в корзину.
Количество фото в карточке зависит от специфики товара. Для продуктов хватит и одной картинки, а для одежды и обуви лучше показать больше. Хорошо, когда товар можно увидеть не просто на белом фоне, но и в интерьере, если это мебель, или на человеке, когда это одежда и обувь.
Особенно наглядно, когда есть видео, как у ASOS и Lamoda. Так пользователь лучше понимает, как будет смотреться на нем платье или джинсы.
Лучшие практики
Если покупатель добрался до карточки, ему важны подробности. Чем больше, тем лучше. Некоторые пришли к тому, что пишут рост и размер модели на фото. Но все зависит от сегмента. Если видео в ASOS — это отличная фича, то 3d-фото пакета молока никому не нужно.
Для сегмента fashion картинка гораздо важнее, чем для других сегментов онлайн-торговли. В этой индустрии товар продает именно его фотография. У нас в Lamoda есть собственная фотостудия. Да, это довольно затратное направление, но оно абсолютно себя оправдывает с точки зрения имиджа и эффективности продаж.
Сейчас многие ретейлеры экспериментируют с новыми технологиями, которые позволяют покупателям получить максимальное представление о вещи до покупки. В 2019 году мы добавили функцию AR-примерки в приложение для iOS. Сейчас она доступна для целого ряда моделей кроссовок: покупатель может прямо в приложении увидеть, как та или иная пара обуви сидит на ноге. Скоро эту функцию смогут использовать и владельцы устройств на Android.
Удобно, когда пользователь может не только быстро купить товар, но и поделиться им с другими. Поэтому в карточку товара для одного из наших последних проектов — интернета-магазина товаров для полости рта White&Smile — мы добавили кнопку, нажав на которую, можно скопировать ссылку на страницу товара, отправить ее в мессенджер или на почту.
Избранное
Гуляя по каталогу, пользователи не сразу готовы купить товар, но могут это сделать в будущем. Поэтому не лишним будет дать им возможность сохранить понравившийся товар или отложить его. Обычно это можно сделать, нажав на «сердечко» со страницы результатов поиска и в карточке товара.
Лучшие практики
Мы мультикатегорийный e‑commerce, и наши пользователи обычно собирают в корзине самые разные товары из 3‑4 категорий — от смартфонов до сыра и крема для лица. При этом есть часто повторяющиеся покупки, например вода, молоко и средства для уборки, а есть более редкие. Поэтому для пользователей актуальна возможность собирать товары из раздела «Избранное» в разные списки: «Еженедельная закупка», «Новый год» и так далее. Или же использовать в качестве избранного корзину, заказывая только часть товаров из нее.
В «Избранное» должно быть легко попасть с главного экрана — в этом разделе товары, которые пользователь вот-вот готов купить.
Люди часто используют избранное, чтобы накидать товары, а потом из них выбрать. Хорошо, когда здесь реализована жестовая навигация и можно быстро удалять или добавлять товары в корзину.
Оформление заказа
Обязательные блоки на этапе оформления заказа — это состав заказа, данные покупателя, скидка или промокод, доставка и сумма покупки. Их можно представить на одной странице со скроллом, как у ASOS.
Или на разных экранах, как у Lamoda.
«ОКЕЙ» предлагает сохранить заказ как шаблон, чтобы в следующий раз не добавлять товары в корзину вручную. Это актуально для продуктовых ретейлеров и магазинов, чьи покупатели регулярно заказывают одно и то же.
Бывает, когда товар не сможет получить тот, кто его заказал. Для этого нелишним будет добавить опцию «Получение товара другим человеком», как сделали Wildberries и Ozon.
Лучшие практики
На этапах оформления заказа пользователю часто показывают похожие и ранее просмотренные товары, спрашивают, не добавить ли в корзину второй товар со скидкой, и используют другие маркетинговые уловки. Все это отвлекает от главного: мы уже добились того, чтобы пользователь захотел отдать нам свои деньги, а теперь всячески оттягиваем этот момент. Вместо того, чтобы нажать «Оформить заказ» и заплатить за него, покупатель может уйти на другие страницы, продолжить выбор и в итоге оставить брошенную корзину. Поэтому лучше все дополнительные предложения показывать после оплаты, например на экране «Спасибо за покупку». Если тестирование этой гипотезы для вашей аудитории не говорит об обратном, конечно.
Процесс оформления заказа, если он реализован на разных экранах, должен отображаться на прогресс-баре — так пользователю будет видно, на каком этапе он сейчас находится. Предложите сохранить введенные данные, например адрес доставки и номер карты, чтобы в будущем можно было оформлять заказы в один клик.
В одном интернет-магазине я увидел опцию «Cвязаться с оператором, чтобы оформить заказ». Мне кажется, это очень удобно, ведь иногда проще проговорить нужные вещи по телефону, чтобы сэкономить время или оформить заказ на ходу. Хорошим тоном сейчас считается добавление вариантов подтверждения заказа: по SMS, почте или с помощью звонка от менеджера.
Оплата
Везде пользователь может выбрать наиболее удобный способ оплаты: наличными или картой при получении, картой онлайн или с помощью платежных систем Apple Pay, «Яндекс.Деньги», PayPal.
После первого использования карты пользователю предлагают ее сохранить — так не придется вводить реквизиты при следующей покупке.
Лучшие практики
В интерфейсе лучше сделать более заметной оплату онлайн, чем наличными при получении — бумажные деньги уже не в моде. В идеале предложить пользователю просканировать карту с помощью камеры и дать возможность проверить реквизиты.
Еще можно подключить оплату с Apple Pay, Google Pay и Mi Pay. Это очень удобно: приложил палец — оплатил покупку. И средний чек в этом случае обычно выше, ведь с электронными деньгами мы расстаемся проще. Но здесь владельцу интернет-магазина надо все считать. Например, с каждой транзакции Apple Pay предприниматель платит до 30% комиссии App Store. При небольших объемах это обычно невыгодно.
Не должно быть никаких скрытых комиссий и платежей — цена должна быть финальной и не зависеть от способа оплаты. А еще не должно быть багов и ошибок. На этом этапе любые заминки очень сильно беспокоят пользователей и вызывают негатив.
Личный кабинет
Стандартная страница личного кабинета — это блок с персональными данными пользователя и его фото, разделы с заказами, возвратами, доставкой, избранными товарами и настройками уведомлений. При этом на самом видном месте, в начале экрана, некоторые ретейлеры, как Ozon, разместили блок с ФИО и фото.
А другие, как Lamoda, сразу показали более важную при покупке информацию — размер персональной скидки.
Прямо в личном кабинете можно показывать персональные рекомендации, как сделал Ozon. Это повышает вероятность совершения новой покупки.
Лучшие практики
Можно мотивировать пользователей полнее заполнять информацию о себе в личном кабинете. Например, попробовать геймификацию из серии: «Заполните профиль на 95% — и получите 500 бонусов на счет». Отдел маркетинга узнал больше о покупателе и выбрал грамотную стратегию коммуникации, а человек смог дешевле купить нужный товар. Все довольны.
На отдельном экране личного кабинета пользователя прежде всего интересуют не данные о нем самом, а адреса доставки. Их может быть несколько: офис, дом, квартира друзей. Важно, чтобы эти данные сохранялись и их можно было быстро выбрать. Также важна история покупок. Удобно, если заказ можно повторить в пару кликов.
Система лояльности
Системы лояльности у всех ретейлеров разные, но, как правило, они дают пользователям персональные скидки и бонусы.
При оформлении первого заказа на Ozon покупатель получает приветственные баллы на счет. Ими потом можно частично оплатить покупку.
Lamoda начисляет баллы за подписку на новости, оформление заказа, участие в акциях. Начисление и списание баллов можно проверить на отдельном экране.
Wildberries и Lamoda рассчитывают персональную скидку исходя из количества выкупленных товаров и общей стоимости покупки. Логика расчета наглядно показана с помощью инфографики и калькулятора — так пользователь проще воспринимает сложные расчеты.
В приложении «ОКЕЙ» можно привязать пластиковую скидочную карту, которую выдают в обычных магазинах, и получать скидки по ней. Такое решение подойдет для тех, кто торгует и онлайн, и офлайн.
Лучшие практики
Система лояльности в приложении должна уничтожить пластик. В идеальном мире можно просто показать смартфон продавцу в магазине, а не искать очередную карту.
С системой лояльности главное не перемудрить. Чем она сложнее, тем больше вероятность, что она обернется против вас. Есть несколько вариантов избежать негатива. Во-первых, суммировать скидки и купоны. Во-вторых, предлагать самые выгодные предложения, то есть подсказывать, какой акцией воспользоваться. И в-третьих, строить систему лояльности не только на скидках, но и предлагать дополнительные возможности, которые позволят клиентам почувствовать себя ценными и уникальными. Это могут быть приглашения на закрытые мероприятия или доступ к секретным предложениям.
Кроме того, система лояльности должна быть омниканальной. Если клиент получил бонусы онлайн, он должен иметь возможность потратить их офлайн. И наоборот.
Система лояльности помогает заинтересовать пользователя в первой покупке. Например, можно предложить небольшой подарок тем, кто сделал заказ в первые сутки после регистрации в приложении.
Обратная связь
Чем проще общаться с брендом, тем больше его любят потребители. Омниканальность, то есть возможность выстраивать коммуникацию с потребителем по разным каналам, уже давно в тренде. Хорошо, когда пользователь сам выбирает, как ему удобнее задать вопрос или оставить жалобу: по почте, в чате или по телефону.
Можно сделать чат с поддержкой прямо в приложении, как у Ozon.
Или перенаправить пользователя в привычный интерфейс мессенджера или социальной сети, как сделал Wildberries.
«ОКЕЙ» предлагает прямо из приложения позвонить в колл-центр и пообщаться с менеджером.
Лучшие практики
Важнее не то, как поддержка реализована в приложении, а то, как быстро она отвечает и насколько хорошо работает. Что касается приложения, у пользователя должна быть возможность отправить и получить данные в одном месте. Самый лучший вариант — это чат-бот. Плохо, когда пользователя отправляют на сайт или в мессенджеры.
Лучше всего сделать отдельный раздел «Чат» и показать там несколько разделов для обращений покупателей с соответствующими запросами. Иконка чата должна быть на видном месте.
После оформления или получения заказа можно попросить покупателя оценить товар и оставить отзыв о приложении. Чем лучше отзывы на App Store и Google Play, тем больше установок. Размещать в магазинах приложений самые лучшие отзывы поможет следующая система. Если пользователь поставил 1-3 звезды из 5, он автоматически перенаправляется на внутреннюю страницу товара в приложении и может оставить отзыв там. А если 4-5 звезд, то переходит в магазин, чтобы высказаться там.
Резюме
Мы изучили приложения топовых ретейлеров, которые имеют все возможности постоянно дорабатывать свои сервисы и улучшать пользовательский опыт, и выбрали лучшие практики. Это поможет малому и среднему бизнесу развивать такой важный канал дистрибуции, как мобильное приложение, без больших вложений.
Если вы хотите высказать свои мысли или поспорить с нами, пишите в комментариях. Давайте обсуждать!
Если порассуждать, озон - это логист. у них ничего кроме доставки и складов нет своего. Отношение к партерам у них мягко говоря так себе, с их огромной комиссией. Но я тут в очередной раз столкнулся с нарушением сроков доставки на 2 дня и теперь вообще произошел разрыв шаблона... к ним приходят за доставкой, в итоге ее нет. решил заказать на вайлбдерис, привезли на следующий день. Да, я все понимаю, бывают всякие форс мажоры.. но они даже не попытались исправить ситуацию и до сих пор отмену заказа не сделали, хотя я уже 10 раз им написал об этом. игнор. ни денег, ни товара. В этом весь озон..
Большая и очень полезная работа! Благодарю за полезную информацию.
How to make the perfect mobile app text for an online store Very Informative Blog