Конкурс по машинному обучению
С призовым фондом в 100 млн рублей
Условия
Дизайн
Mojo
5651

Дизайн интернет-магазина: что учесть, чтобы не облажаться — часть шестая

Оформление заказов — последний рубеж. Мы в Mojo собрали для вас лучшие практики и подкрепили их исследованиями.

В закладки
Слушать

В предыдущих сериях

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

В других местах ошибаться тоже не стоит.

  • В третьей статье настало время каталога: фильтрация и карточки. Я рассказал, когда фильтр-бар нужно делать по горизонтали, как делать выпадающие списки и что умеет хорошая карточка в каталоге.
  • В четвертой статье мы продолжили говорить про каталог и обсудили грех быстрого просмотра у WildBerries и Lamoda. Главной тема четвертой статьи — страница продукта.
  • В пятой статье о том, почему 70% товаров остаются в корзине и как мы можем с этим бороться.

Сегодня — оформление заказа

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

Великая стена

Бизнес теряет клиентов из-за необходимости регистрироваться и авторизоваться.

Авторизация

  • Авторизация должна приносить пользу: скидку, акцию или персонализированное предложение. Доносите выгоду до пользователя, иначе авторизовываться для него смысла нет.

  • Авторизация должна быть максимально простой. По данным исследования Оксфорда и Mastercard, примерно треть покупателей не завершает заказ, потому что не помнит пароль. Я, кстати, один из них. А вы?

не завершает заказ, потому что не помнит пароль

Регистрация

Данные Baymard Institute

Минус такой схемы для меня очевиден. Пользователю проще уйти в интернет-магазин без обязательной регистрации.

Решение

Отпусти и забудь. Сделайте регистрацию необязательной и упростите процесс покупки.

Вариант с модальным окном от Farfetch Интeрнет-магазин farfetch.com
Мне больше нравится версия от «М.Видео» Интернет-магазин «М.Видео»

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

Для авторизации упростите ввод логина и пароля, а лучше используйте социальные сети. Объясняйте пользователю выгоду.

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

Общее правило прежнее — заботьтесь об удобстве пользователя. От этого зависят конверсии.

Объявление на vc.ru
Право
Товарные знаки для тех, кто ведёт бизнес в интернете: защищаем домен, управляем отзывами и контролируем конкурентов
Казалось бы, регистрация брендов в Роспатенте — это история про заводы и предприятия: вот наша одежда, еда или…

Сделайте правильные формы

В 2020 году десяти правил хороших форм у Лебедева уже недостаточно. Про правила оформления форм в интернете информации очень много — начните с 17 правил от Эндрю Койла. Я ещё немного их дополню.

Слишком много вопросов

Каждое новое поле — новое страдание и новые сомнения для пользователя. Удалите все, что можете. Форма может оттолкнуть уже самим размером.

Visual Web Optimizer сократил количество полей и повысил конверсию на 35% в кейсе с эдинбургской парковкой у аэропорта.

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

Зависимость конверсии от количества полей в форме Исследование компании HubSpot

Объясните, зачем вам эта информация, если поле обязательно нужно заполнить.

Baymard советует помечать опциональные и обязательные для заполнения поля. Согласно их исследованию, пользователи часто интерпретируют необязательные поля как обязательные, если специально не пометить их.

Показывайте прогресс

При оформлении в несколько шагов прогресс-бар позволит пользователю «контролировать» процесс и не волноваться.

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

Понятно и ярко

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

Легкий доступ

Не перегрузите интерфейс подробной информацией. Хорошее решение — иконки с информацией по наведению для веба и по нажатию для мобилки.

Выпадающие списки

Выпадающие списки появляются и в фильтрах, и в формах. Не используйте их для малого количества вариантов.

  • Замените выпадающий список на обычное поле ввода.
  • Комбинируйте поле ввода и выпадающий список с подсказками.
  • Используйте альтернативы. Например, для дня рождения можно использовать календарь. Всегда сохраняйте маски поля и возможность заполнить его с клавиатуры.
Пример поля ввода с выпадающим списком с подсказок Один из наших проектов

Не используйте выпадающие списки для единственного варианта.

Показывайте итог

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

Один из наших проектов

Откажитесь от капчи

Если можете. Исследование Baymard показывает, что почти все пользователи страдают от неё.

Если отказаться не можете, то:

  1. Не берите капчи с заглавными и строчными буквами.
  2. Не очищайте другие поля, если капча введена неверно.
  3. Требуйте вводить капчу только один раз за сессию.

Страница завершения заказа

Ух, наконец! Он это сделал, купил. Многие дизайнеры и маркетологи забывают о том, что пользователь все еще с вами. Что дальше?
Даже после оплаты не время сдаваться. Теперь мы уже не рискуем потерей оплаты, пора предложить пользователю задержаться.

На странице завершения заказа хорошо предлагать пользователю зарегистрироваться. Еще можно:

  1. Предложить дополнительные товары или услуги.
  2. Предложить подписаться на рассылку. Не забудьте рассказать о преимуществах подписки. Теперь мы можем и такое.
  3. Ударьте контентом. Предложите пользователю видео о товаре, гайд или разбор. В Baymard считают, что это может снизить количество отказов
  4. Предложите поделиться своей покупкой в соцсетях. Как реклама, только бесплатная.
  5. Получите фидбек от пользователя.

Завершение цикла

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

Всегда рады помочь вам с UX. Мы хотим, чтобы мир онлайн-шопинга стал чуть лучше, и будем работать над этим дальше. Цикл «Дизайн интернет-магазина: что учесть, чтобы не облажаться» — попытка сформировать гигиенический минимум.

Мы знаем, что реальный мир жесток и получится реализовать не все. Так происходит и с нашими проектами. Думайте головой, панацеи не существует :)

Что дальше?

Сейчас мы думаем над циклом статей про мобильные интерфейсы интернет-магазинов. «Мобилка» наследует все проблемы десктопа, но уже заработала и свои собственные.

Что думаете?
Цикл про «мобилку» нужен
Итак все понятно, напишу свой вариант в комменты 
Показать результаты
Переголосовать
Проголосовать

Благодарности от автора

Спасибо за то, что читали наши статьи. Ваши комменты грели мне сердечко и мотивировали писать лучше. Вопросы заставляли упражняться и смотреть на вещи по-новому.

Поздравления с завершением цикла по-прежнему принимаются в комментариях.

Подписывайтесь на Mojo и ждите новых статей на следующей неделе.

{ "author_name": "Mojo", "author_type": "self", "tags": [], "comments": 10, "likes": 43, "favorites": 269, "is_advertisement": false, "subsite_label": "design", "id": 133681, "is_wide": true, "is_ugc": true, "date": "Mon, 15 Jun 2020 12:15:52 +0300", "is_special": false }
Объявление на vc.ru
0
10 комментариев
Популярные
По порядку
Написать комментарий...
8

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

Ответить
0

Спасибо большое! Будем радовать вас и дальше)

Ответить
1

Добавлю несколько замечаний:
1. "Треть покупателей не завершает заказ, потому что не помнит пароль".
Пользователь не будет помнить пароль только на тех сайтах, на которых происходит разовая покупка, например интернет-магазин штор, т.к. купив один раз ему не скоро понадобится повторная покупка. Вряд ли вы забыли пароль от "Ситилинка" или личного кабинета банкинга.

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

3. "Каждое новое поле — новое страдание и новые сомнения для пользователя. Удалите все, что можете. Форма может оттолкнуть уже самим размером."
Это не совсем так. Конечно, лучше привести минимальное количество полей, но как показывает практика - пользователи охотно заполняют множество полей, если это увеличение ведет к упрощению информации. Например, адрес доставки можно вписать одной строкой или поделить на улицу, дом, квартиру и даже подъезд и этаж. И поделённый вариант пользователи заполнят охотнее, т.к. им так самим проще расписать.
Поэтому тут все таки стоит исходить из контекста этих полей.

Ну и это, конечно, это неправильный пример, но все таки. Амазон - интернет-магазин, в котором при оформлении нужно заполнить более 20 полей, обязательная регистрация при оформлении заказа и само оформление поделено на несколько этапов. Он собрал весь негатив, который описан в любой статье (не только в этой) и это не мешает ему быть самым крупным интернет-магазином мира.

Ответить
2

1. Я думаю, что здесь можно еще сказать о том, что на своих устройствах пароли сохраняются. Но личный опыт плохой помощник. Статистика лучше.
2. Хорошие данные, спасибо! Мне тоже не нравятся заказы в несколько шагов.
3. Про контекст согласен абсолютно. Все в точку.

Амазон вспоминали и раньше. Еще любят вспоминать про плеер.ру) Посмотрите, если хотите шок-контента.

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

Спасибо вам большое за комментарий. Рад такому подходу! 💙

Ответить
0

Я, например даже от банкинга не помню пароль, я запомнил только один пароль, от хранилища паролей. Это хранилище само генерирует пароли.

Ответить
1

Про мобилку, пожалуйста

Ответить
0

Результаты голосования говорят также) 

Ответить
–3

Ставим самую низкую цену и нах не нужен дизайн ваш.

Ответить
1

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

Ответить
0

Пока вы развиваетесь, я уже зарабатываю, уж извините )

Ответить

Комментарии

null