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

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

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

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

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

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

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

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

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

Baymard говорит о 28% отказов из-за обязательной регистрации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вариантов больше 5:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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