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