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

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

Оформление заказов — последний рубеж. Мы в 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. Мы хотим, чтобы мир онлайн-шопинга стал чуть лучше, и будем работать над этим дальше. Цикл «Дизайн интернет-магазина: что учесть, чтобы не облажаться» — попытка сформировать гигиенический минимум.

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

Что дальше?

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

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

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

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

Источник: vc.ru

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

Adblock detector