Дизайн интернет-магазина: что учесть, чтобы не облажаться — часть шестая
Оформление заказов — последний рубеж. Мы в Mojo собрали для вас лучшие практики и подкрепили их исследованиями.
В предыдущих сериях
- В первой статье я рассказал, как сильно влияет дизайн на восприятие магазина пользователем. В конце статьи вас ждут универсальные советы с минимальной стоимостью.
- Во второй статье мы начали долгий путь с навигации в интернет-магазине. Ошибешься в навигации — будет плохо всю дорогу. Бонусом я рассказал про обратную связь.
В других местах ошибаться тоже не стоит.
- В третьей статье настало время каталога: фильтрация и карточки. Я рассказал, когда фильтр-бар нужно делать по горизонтали, как делать выпадающие списки и что умеет хорошая карточка в каталоге.
- В четвертой статье мы продолжили говорить про каталог и обсудили грех быстрого просмотра у WildBerries и Lamoda. Главной тема четвертой статьи — страница продукта.
- В пятой статье о том, почему 70% товаров остаются в корзине и как мы можем с этим бороться.
Сегодня — оформление заказа
Вы выиграли, пользователь начал оформлять заказ. Это финальный босс, и награждение никто не гарантирует. Начнём с козырей.
Великая стена
Бизнес теряет клиентов из-за необходимости регистрироваться и авторизоваться.
Авторизация
Авторизация должна приносить пользу: скидку, акцию или персонализированное предложение. Доносите выгоду до пользователя, иначе авторизовываться для него смысла нет.
Авторизация должна быть максимально простой. По данным исследования Оксфорда и Mastercard, примерно треть покупателей не завершает заказ, потому что не помнит пароль. Я, кстати, один из них. А вы?
⅓
Регистрация
Baymard говорит о 28% отказов из-за обязательной регистрации.
Минус такой схемы для меня очевиден. Пользователю проще уйти в интернет-магазин без обязательной регистрации.
Решение
Отпусти и забудь. Сделайте регистрацию необязательной и упростите процесс покупки.
Лучший момент для регистрации — страница «Спасибо за заказ» или «Ваш заказ подтвержден» — лучше всего предлагать регистрацию после оплаты заказа.
Для авторизации упростите ввод логина и пароля, а лучше используйте социальные сети. Объясняйте пользователю выгоду.
Общее правило прежнее — заботьтесь об удобстве пользователя. От этого зависят конверсии.
Сделайте правильные формы
В 2020 году десяти правил хороших форм у Лебедева уже недостаточно. Про правила оформления форм в интернете информации очень много — начните с 17 правил от Эндрю Койла. Я ещё немного их дополню.
Слишком много вопросов
Каждое новое поле — новое страдание и новые сомнения для пользователя. Удалите все, что можете. Форма может оттолкнуть уже самим размером.
Visual Web Optimizer сократил количество полей и повысил конверсию на 35% в кейсе с эдинбургской парковкой у аэропорта.
Заполнение формы не должно становиться сложной задачей. Если поле не обязательно, то стоит подумать о его необходимости.
Объясните, зачем вам эта информация, если поле обязательно нужно заполнить.
Baymard советует помечать опциональные и обязательные для заполнения поля. Согласно их исследованию, пользователи часто интерпретируют необязательные поля как обязательные, если специально не пометить их.
Показывайте прогресс
При оформлении в несколько шагов прогресс-бар позволит пользователю «контролировать» процесс и не волноваться.
Прогресс можно показывать даже на одностраничном оформлении заказа. Тогда прогресс-бар выступит в первую очередь геймификационной техникой.
Понятно и ярко
Все советы из первой статьи актуальны на этом этапе как никогда. CTA должны светиться, а текст объяснять любое потенциально непонятное место.
Легкий доступ
Не перегрузите интерфейс подробной информацией. Хорошее решение — иконки с информацией по наведению для веба и по нажатию для мобилки.
Выпадающие списки
Выпадающие списки появляются и в фильтрах, и в формах. Не используйте их для малого количества вариантов.
- Замените выпадающий список на обычное поле ввода.
- Комбинируйте поле ввода и выпадающий список с подсказками.
- Используйте альтернативы. Например, для дня рождения можно использовать календарь. Всегда сохраняйте маски поля и возможность заполнить его с клавиатуры.
Не используйте выпадающие списки для единственного варианта.
Показывайте итог
На протяжении заказа показывайте пользователю текущую стоимость. Особенно важно показывать её перед оплатой и при выборе платных опций — например, доставки.
Откажитесь от капчи
Если можете. Исследование Baymard показывает, что почти все пользователи страдают от неё.
Если отказаться не можете, то:
- Не берите капчи с заглавными и строчными буквами.
- Не очищайте другие поля, если капча введена неверно.
- Требуйте вводить капчу только один раз за сессию.
Страница завершения заказа
Ух, наконец! Он это сделал, купил. Многие дизайнеры и маркетологи забывают о том, что пользователь все еще с вами. Что дальше?
Даже после оплаты не время сдаваться. Теперь мы уже не рискуем потерей оплаты, пора предложить пользователю задержаться.
На странице завершения заказа хорошо предлагать пользователю зарегистрироваться. Еще можно:
- Предложить дополнительные товары или услуги.
- Предложить подписаться на рассылку. Не забудьте рассказать о преимуществах подписки. Теперь мы можем и такое.
- Ударьте контентом. Предложите пользователю видео о товаре, гайд или разбор. В Baymard считают, что это может снизить количество отказов
- Предложите поделиться своей покупкой в соцсетях. Как реклама, только бесплатная.
- Получите фидбек от пользователя.
Завершение цикла
Простая мысль в каждой статье формулируется так: забота о пользователях увеличивает конверсию. Первое, о чем нужно думать, — качество клиентского опыта, или CX.
Всегда рады помочь вам с UX. Мы хотим, чтобы мир онлайн-шопинга стал чуть лучше, и будем работать над этим дальше. Цикл «Дизайн интернет-магазина: что учесть, чтобы не облажаться» — попытка сформировать гигиенический минимум.
Мы знаем, что реальный мир жесток и получится реализовать не все. Так происходит и с нашими проектами. Думайте головой, панацеи не существует :)
Что дальше?
Сейчас мы думаем над циклом статей про мобильные интерфейсы интернет-магазинов. «Мобилка» наследует все проблемы десктопа, но уже заработала и свои собственные.
Благодарности от автора
Спасибо за то, что читали наши статьи. Ваши комменты грели мне сердечко и мотивировали писать лучше. Вопросы заставляли упражняться и смотреть на вещи по-новому.
Поздравления с завершением цикла по-прежнему принимаются в комментариях.
Подписывайтесь на Mojo и ждите новых статей на следующей неделе.