Постоянно происходят какие-то изменения. Сильная конкуренция не дает стоять на месте тенденциям развития интернет-маркетинга.
Если, например, вчера кнопка «заказать звонок» была неким привлекательным новшеством, то сегодня она есть уже везде и ни одного потребителя ею не удивишь. Именно поэтому владельцы ведущих интернет-магазинов находятся в постоянном поиске новых идей и новых «фишек». Причем зачастую так получается, что далеко ходить не приходится – порой достаточно простого «косметического» редизайна.
Сегодня мы поговорим о, казалось бы, такой простой вещи, как оформление заказа в интернет магазине. На каждом сайте есть такой раздел. Однако далеко не каждый сайт может похвастаться, что работа этой функции у него отлажена идеально и приносит максимум покупателей. Чаще всего случается как-раз-таки наоборот: магазины вообще «не заморачиваются» по этому поводу. Ну, есть форма заказа и есть, что еще надо.
Так вот, это очень большое заблуждение. Чем сложнее и непонятнее как сделать заказ тем больше шансов, что порядка 2/3 посетителей не станут вообще «заморачиваться» с приобретением товара в Вашем интернет магазине.
Основные правила форма оформления заказа
Начнем с того, что всегда необходимо указывать, во сколько этапов происходит оформление заказа и сколько времени это все займет. Так, например, фраза «три простых шага и несколько минут Вашего времени» увеличивает шанс того, что покупатель совершит заказ и до конца его оформит.
Когда человек уже нажал « и находится в процессе совершения покупки, он должен понимать, на какой стадии он находится, и сколько этапов ему еще предстоит преодолеть. Лучше всего не использовать спецсимволы, иконки или какие-то картинки для обозначения дальнейших шагов. Клиент может трактовать их неправильно. Надежнее и правильнее писать все словами: «выбор способа доставки» или «подтвердить заказ». Рядом с кнопками, обозначающими действие, не следует размещать ничего лишнего. Пусть она будет одна в свободном пространстве, но видна, доступна и понятна.
С точки зрения человеческой психологии и привычки, кнопки положительного действия («оформить заказ», «подтвердить» и пр.) должны располагаться справа и быть привлекательными и заметными для глаз клиента. Кнопки серии «возврат», «отмена» и др. должны быть слева и не должны выделяться на общем фоне, чтобы не было стимула их нажимать.
Если при заполнении формы Вы просите от клиента какие-то его личные данные, всегда объясняйте, для чего они необходимы: имя и фамилия – для оформления документов на товар, номер телефона – для связи по вопросам доставки, электронный адрес – для подтверждения заказа.
Процесс оформления должен быть последовательным. Нельзя допускать того, чтобы во время какого-то из этапов, покупателю пришлось бы прервать свои действия и отправится, например, регистрироваться. Вряд ли после этого он продолжит свой заказ, останется в Вашем интернет-магазине или придет туда снова. Не должно быть причин по которым покупателю пришлось бы прервать свой процесс заказа.
Перед Вами образец неправильного оформления, где в процессе покупки требуется внезапная регистрация. Но это Ozon.ru- самый крупный гипермаркет России и здесь он диктует свои правила.
Еще одна распространенная ошибка, которая часто встречается на сайтах и с которыми Вы наверняка сталкивались. Итак, Вы заполнили множество различных полей с указанием многих данных о Вас, это заняло некоторое время, нажимаете кнопку «далее» и тут система выдает Вам ошибку, что, например, в каком-то поле Вы не до конца или неправильно что-то написали. И тут Вы видите, что для исправления это ошибки, Вам надо заполнять все формы сначала! Как минимум, это раздражает. Максимум – клиент уходит с Вашего сайта. Не допускайте такого печального недоразумения.
Не забывайте, на всех этапах оформления заказа должна быть видна наиболее важная информация: стоимость и состав заказа, условия доставки и способы оплаты.
И, наконец, самый идеальный вариант – это когда Вы конкретно указываете все сроки доставки, ее конкретную стоимость. Другими словами, фраза «доставка осуществляется в течение 5-15 дней» звучит неопределенно, не вызывая никаких положительных эмоций. Надпись же «товар будет доставлен 1 сентября» порадует покупателя гораздо больше. К примеру, мне очень нравиться в интернет магазинах такой прием, когда поле доставки автоматически определяет по IP адресу мой город и сразу расчитывается стоимость доставки товара и время.
Работа над сайтом интернет-магазина – это долгая и кропотливая работа. Необходимо продумывать каждую деталь и каждую мелочь в этой детали, внедрять новые «фишки», анализировать, изменять и дорабатывать.
Ресурс компании ASOS предоставляет посетителям прекрасный пользовательский опыт благодаря грамотно продуманной процедуре оформления заказа (checkout). В этой статье мы расскажем, почему их корзина работает так эффективно, и продемонстрируем несколько трендовых методик, которые позволят вам прокачать вашу собственную страницу оплаты.
Говоря в общем, успех корзины данного интернет-магазина диктуется одним простым фактором — прозрачностью. Иными словами, на странице заказа пользователи видят всю ключевую информацию: наличие товара на складе/период резервирования, варианты доставки, бонусные предложения, условия возврата, меры предосторожности, а также доступные способы оплаты. Это позволяет посетителям чувствовать себя увереннее и подталкивает их к завершению покупки.
Прямо к корзине или остаемся на странице продукта?
Если хотите, чтобы ваши клиенты покупали несколько товаров за раз, откажитесь от автоматического перехода в корзину при добавлении каждого продукта. Вместо этого, разместите на странице интерактивную вкладку, которая всегда будет отображать пользователям содержимое их корзины.
Таким образом, клиенты смогут постоянно отслеживать свои покупки, а переход покупателя к корзине станет добровольным, сознательным решением.
Как ASOS побуждает к оплате на 50% больше новых покупателей?
Между изначальной версией checkout-страницы ASOS и обновленным дизайном есть одно существенное отличие: если ранее клиентам нужно было регистрироваться для оформления заказа, то сейчас разработчики не акцентируют внимание на создании аккаунта. Вместо этого, они просят покупателей нажать соответствующую кнопку для продолжения.
Бывший eCommerce директор компании ASOS Джеймс Харт (James Hart) рассказал, как им удалось достичь такого улучшения:
«В целом, мы практически не изменяли функционал этапа покупки на данной стадии, но после череды длительных сплит-тестов был доработан экран входа в систему. В результате, мы добились снижения числа отказов на 50%».
Взгляните на обновленную страницу оплаты заказа на сайте ASOS:
А теперь на ее предыдущую версию:
Тестирования, проведенные в eCommerce-сегменте, показывают, что пользователи не желают проходить через процедуру создания аккаунта, когда их к этому принуждают. Покупатели не хотят выполнять никаких дополнительных действий, и уж тем более, указывать свою личную информацию, чтобы завершить покупку, поскольку все это отнимает у них драгоценное время.
На самом деле, большинство клиентов утверждает, что в идеале при оформлении заказа они ограничились бы лишь выбором пароля. Далее вы увидите, что ASOS все еще просят покупателей регистрироваться, но кроме стандартных требований (контактного имени и email-а), пользователям достаточно указать пароль.
Лучшие практические методики оформления заказа
Ниже мы выделили несколько ключевых элементов покупательского опыта на сайте ASOS, которые соответствуют лучшим методикам и поддерживают сосредоточенность клиентов на завершении покупки.
1. Пошаговая процедура оформления заказа
Обновленное оформление заказа от ASOS показывает, насколько простым может быть этот процесс, если вы скроете от пользователей все отвлекающие факторы.
2. Гарантия безопасности
Помимо логотипа и названия этапа, на котором находится человек, ASOS размещает в хедере страницы только информацию о безопасности вводимых данных. Это важно для повышения чувства доверия, особенно в сегменте розничной торговли, и может быть взято на вооружение менее известными ритейл-сервисами.
3. Четкий индикатор прогресса
Индикатор прогресса выполнен с учетом всех нюансов:
1. Минималистичность дизайна.
2. Он четко показывает, на какой стадии оформления заказа вы находитесь.
3. Количество шагов четко определено.
4. Абсолютно понятно, что до подтверждения у вас будет возможность просмотреть заказ.
4. Наличие разъясняющих подсказок
Возле некоторых полей, таких как email, пароль и пол, разработчики разместили вспомогательную информацию, чтобы пользователи понимали, зачем компании понадобились эти данные. В идеале, данный прием следует применять и для даты рождения, но до этого мы еще доберемся.
5. Понятный главный CTA-элемент
На каждой странице оформления заказа основная CTA-кнопка, которая позволяет пользователю перейти к следующему шагу, является наиболее заметным элементом. В то время как многие ритейл-сервисы до сих пор задействуют на своих сайтах весьма спорные призывы к действию, ASOS заботится о том, чтобы их клиенты могли с легкостью перейти к следующему этапу процесса.
6. Ручной ввод адресных данных
Для подавляющего большинства посетителей возможность ручного ввода адресной информации имеет огромное значение. К тому же, при наличии этой опции интернет-магазин получает от покупателей более достоверную информацию.
Ввиду некоторых причин, к примеру, в случае переезда в новый жилищный комплекс, многие клиенты не могут пользоваться автоматическим подбором адреса. Это значит, что вы должны по максимуму упростить для них процедуру заполнения полей.
7. Наличие адреса для отправки счета
Для большинства ритейл-сервисов эта опция уже превратилась в некий стандарт, но ее все еще можно доработать. В данном случае, если посетитель использует один и тот же адрес (для доставки товара и счета), ASOS сразу перенаправляет его непосредственно к оплате заказа, тем самым предоставляя ему еще более быстрый, а значит, более позитивный пользовательский опыт.
Если же вас интересует альтернативное решение, вы можете отправлять ваших клиентов на страницу оформления доставки и только после этого спрашивать, хотят ли они использовать дополнительный платежный адрес.
8. Изменение полей оплаты на основе выбора карты
В какой-то степени команде ASOS удалось реализовать этот подход, но все же с наличием дополнительных полей в форме можно поспорить. Если они необязательны, то исключив их, вы избавите ваших клиентов от излишних раздумий, которые отдаляют их от завершения покупки.
9. Полный предпросмотр и редактирование заказа до его подтверждения
Как видно из индикатора прогресса, ASOS предоставляет посетителям критически важную возможность пересмотра и редактирования всей информации до подтверждения заказа.
В то время как некоторые интернет-магазины ожидают от клиентов подтверждения сразу же после ввода платежных реквизитов, ASOS разделяют два самых важных решения, которые человеку приходится принимать во время оформления заказа. Более того, они также обеспечивают гибкость редактирования информации для внесения возможных изменений.
10. Различные варианты доставки, перечисленные в удобном формате
ASOS не только предлагает клиентам множество вариантов доставки, но и демонстрирует их в удобном формате. Как правило, такую информацию размещают в выпадающих вкладках, однако методика от ASOS позволяет посетителям одновременно видеть все доступные тарифы, благодаря чему они могут принимать более взвешенные решения относительно способа доставки.
11. Возможность вернуться назад без потери информации
Хотя ASOS и не предоставляет покупателям кнопку «назад» во время оформления заказа, чтобы не отвлекать их самого процесса, многие клиенты все равно могут захотеть вернуться на предыдущую страницу, чтобы проверить или изменить свои данные.
На большинстве eCommerce ресурсов такое действие может привести к появлению предупреждений и требований повторной отправки информации, но ASOS избавили своих посетителей от этих надоедливых сообщений.
Пути для дальнейшего улучшения
- Используйте описательные индикаторы прогресса: замените надпись «Продолжить» на «Просмотреть мой заказ» и т.д.
- Объясните посетителям, почему они должны указывать в форме дату рождения.
- Используйте более человечные сообщения об ошибках, которые не заставят ваших пользователей уйти.
- Предоставьте покупателю достойную причину, по которой вам понадобится номер его мобильного (например, вы отправляете клиентам текстовые уведомления о статусе их заказа).
- Предоставьте людям возможность вернуться на предыдущую страницу, когда они находятся в процессе оформления заказа. Это позволит им внести важные изменения, даже если вспомнят о своей ошибке слишком поздно.
И никакого контактного номера?
Компания ASOS действительно не указывает на своем сайте никаких контактных номеров — они общаются с клиентам при помощи социальных сетей, справочных страниц и формы обратной связи.
Благодаря усилиям, которые эта команда приложила на улучшение покупательского опыта, им удалось существенно уменьшить количество потенциальных причин обращения в службу поддержки. В результате, покупатели очень редко просят о помощи, так как во время оформления заказа они не хотят переключаться на заполнение сторонней формы.
Клиенты ASOS уже знают, что товары в их корзине будут зарезервированы не дольше 60 минут, поэтому ожидать ответа от службы поддержки на протяжении нескольких часов (до 4 часов) для них было бы попросту бессмысленно.
Подводя итоги
Хотя приведенный в качестве примера подход компании ASOS далеко не идеален, вам определенно стоит попробовать описанные здесь приемы на вашем сайте, чтобы убедить клиентов в целесообразности завершения сделки.
Совместив указанные методики с дополнительными рекомендациями, вы сможете оптимизировать покупательский опыт и свести к минимуму число «брошенных корзин».
Согласно данным SaleCycle, во всем мире практически три четверти корзин интернет-магазинов бросают еще до покупки. Оптимизируя процесс оформления заказа, можно вернуть много денег, потерянных ранее. Легкое и интуитивное оформление поможет получить потребительскую лояльность и подтолкнуть клиентов к повторным покупкам.
В этой статье представлены важные советы для оформления корзины сайта, которые помогут повысить коэффициент их конверсии.
1. Весь процесс оформления заказа сделать на одной странице
Такой вариант предполагает, что клиенты завершат процесс покупки на одной странице. Все больше сайтов используют эту стратегию, поскольку покупатели стремятся к простоте.
Процесс оформления покупки на одной странице обеспечивает следующие преимущества:
- Выглядит компактно, чем поощряет покупателей, у которых мало времени для завершения покупки;
- Покупатели не уходят из-за того, что переход с одной страницы на следующую может занимать слишком много времени.
- Требует меньшего количества кликов – исследование показывает, что в идеале для завершения покупки должно потребоваться не более семи кликов.
Пример одностраничной формы
Многие крупные интернет-магазины используют этот вариант, чтобы упростить жизнь покупателей. Это не только сокращает количество кликов, которые пользователь должен сделать для оформления покупки, но и улучшает опыт клиентов. На одной странице клиенты могут проверить, правильно ли они ввели адрес доставки, платежные и другие данные.
Некоторые платформы электронной коммерции, в том числе и , предлагают быстрые одностраничные варианты форм оформления заказов, которые достаточно просто будет заполнять любому пользователю.
Несколько подсказок для оптимизации страницы оформления заказа:
- Разместить такие поля, как имя и адрес, с правой стороны страницы;
- Добавить возможность использования расчетного адреса в качестве адреса доставки;
- Расположить содержание заказа в правой стороне страницы;
- Включить способы оплаты;
- Поместить понятную кнопку призыва к действию, например, «Сделать заказ».
Предполагается, что продажи через мобильные устройства к концу 2017 года достигнут объема в 700 миллиардов долларов, что на 300% больше показателей прошлых четырех лет. Однако здесь выше количество брошенных корзин – возможно, потому, что люди делают покупками на ходу и их сильнее отвлекает окружающая среда. Поэтому 84% мобильных покупателей бросают корзины в процессе оформления.
Советы по мобильной оптимизации процесса:
- Сделать кликабельные кнопки крупнее и заметнее;
- Уменьшить размер изображений, чтобы уменьшить время загрузки;
- Отображать индикаторы доверия, такие как «Это безопасная оплата с использованием 256-битного SSL шифрования»;
- Вертикально выровнять формы, чтобы упростить навигацию;
- Убрать отвлекающие факторы, такие как объявления и всплывающие окна, чтобы покупателям ничто не мешало завершить процесс;
- Рассмотреть прием более простых вариантов мобильного платежа вроде Apple Pay, где пользователи могут рассчитываться с помощью отпечатка пальца.
Мобильные формы, простые в заполнении, повышают конверсии
Учитывая существенное развитие мобильной торговли из года в год, оптимизация процесса оформления заказа на мобильных устройствах будет разумным вкладом.
Добавление полей формы оформления заказа, которые не имеют никакого отношения к сделке, таких как «Компания», отбивают у клиентов желание закончить покупку. Такие формы содержат в среднем 23,88 полей, даже при том, что идеальное количество для увеличения коэффициента конверсии равняется 12.
Стоит пересмотреть свою форму заказа.
Поля, которые можно убрать:
- вторая адресная строка;
- название;
- отчество;
- отчество / инициалы.
Заодно стоит рассмотреть использование Google Autofill. Значительное число клиентов использует Chrome и Android, чтобы делать покупки. Их персональная информация, скорее всего, сохранена в Google, чтобы сэкономить время на введении данных. Использование Google Autofill поможет магазину приблизиться к сайтам, которые позволяют совершать покупку в один клик благодаря сохраненной информации.
Google Autofill помогает клиентам быстро оформить заказ
Функция автоматического заполнения помогает клиентам экономить время, особенно мобильным покупателям. Печатая на мобильных устройствах, можно сделать ошибки, расстроиться, и, возможно, бросить эту идею. Google Autofill решает эту проблему, автоматически заполняя поля формы данными, которые клиенты вводили ранее.
Требование регистрации от всех пользователей – серьезный барьер для конверсий, особенно для небольших сайтов. Многим покупателям не хочется создавать учетную запись на сайте, особенно если они делают заказ там впервые.
Каждый 4-й пользователь бросит свою корзину, если от него потребуют зарегистрироваться. Вместо этого стоит предложить клиентам оформление заказа в качестве гостя.
Многие большие бренды предоставляют такую возможность.
Гостевое оформление заказа — опция, предлагаемая новым клиентам
Как только клиенты кликают по этой опции, необходимо сразу перевести их на страницу оформления заказа. После того, как они завершат транзакцию, нужно дать им возможность сохранить их данные, но не принуждать их зарегистрироваться. Вместо этого стоит спросить: «Хотите ли вы сохранить свои данные на следующий раз?». Это увеличивает вероятность, что клиенты согласятся для более быстрого оформления заказа на случай, если в будущем они снова сделают покупку в этом магазине.
5. Отображать знаки безопасности во время оформления покупки
До этого речь шла о скорости и простоте, однако покупатели часто бросают корзины еще и из-за соображений безопасности. Они могут уйти к конкурентам, если не увидят на странице оформления заказа знаки доверия, которые есть у большинства крупнейших интернет-магазинов.
Необходимо отображать знаки безопасности, такие как логотип Verisign или Norton Secured. Они указывают, что интернет-магазин безопасен и надежен. Исследование показывает, что 6 из 10 покупателей бросили свои корзины именно из-за отсутствия гарантий безопасности.
Наблюдали ли вы когда-нибудь в «Вебвизоре» запись, как клиент добавляет товар в корзину, начинает заполнять данные заказа и… покидает сайт? Эта сцена по драматичности может сравниться с финальными кадрами «Титаника». Сегодня поговорим о том, что заставляет пользователя покинуть сайт без покупки и как это исправить.
Согласно исследованию Baymard Institute «Cart Abandonment Rate Statistics» более 68% процентов заказов, которые попадают в корзину, не завершаются покупкой и оплатой.
Почему пользователь отказывается от намеченной покупки?
Чек-лист: как сделать, чтобы купить в интернет-магазине было удобно
1. Добавление в корзину
1.1. После нажатия на кнопку «Купить» или «В корзину» показывайте пользователю, что товар добавлен
После клика по кнопке «В корзину» до появления обратной связи с сообщением о добавлении товара, кнопка должна быть неактивной, чтобы избежать повторного добавления в корзину. Предложите во всплывающем окне оформить покупку или продолжить шоппинг.
1.2. При наведении и нажатии на кнопку «В корзину» она должна подсвечиваться или изменять цвет
Если кнопка не изменяет свой вид, пользователь по ошибке может добавить несколько одинаковых товаров в корзину.
При наведении на кнопку «Купить» в «Розетке» кнопка становится ярче:
Изменение внешнего вида кнопки в «Алло» после нажатия:
1.3. Укажите, какой порядок возврата и обмена товара
Особенно актуально для магазинов одежды и обуви, где вероятность прогадать с размером велика. Пользователь хочет быть уверен, что у него будет возможность получить нужный размер в конечном итоге.
Информация о доставке на страницах «Алло»:
На сайте «Фотомаг» детальная информация открывается по клику на ссылке «Подробнее»:
2. Внутри корзины
2.1. В корзине давайте подробную информацию о заказанных товарах
Чтобы пользователь смог проверить правильность своего заказа и отказаться от товаров, которые он поместил в корзину только ради сравнения, давайте исчерпывающую информацию о заказе:
- изображение товара (при наведении фото должно увеличиваться),
- при клике по изображению должна отображаться подробная информация о товаре,
- укажите количество единиц в наличии,
- если товар есть в офлайн-магазинах, покажите, где его можно забрать самостоятельно.
2.2. Кнопка для перехода к следующему шагу оформления должна визуально выделяться
Кнопка «Продолжить оформление заказа» на сайте «Лебутик» продублирована и выделена цветом среди других элементов:
Кнопку «Оформить заказ» на сайте «Дешевше» тоже трудно не заметить:
2.3. Корзина должна «запоминать» заказ
Возможно, по техническим или другим причинам пользователь не может совершить покупку за одну сессию. Когда он приходит на сайт повторно, то вновь искать и добавлять товары будет неудобно. Большая вероятность, что потенциальный покупатель махнет рукой на повторные манипуляции, поэтому сайт должен запоминать содержимое корзины.
2.4. Добавьте кнопку удаления товара из корзины
Например, возможность удаления товара из корзины на сайте магазина «Мобиллак» представлена в виде небольшой ссылки:
2.5. Промокоды и скидки
Разместите поля для ввода скидочных купонов и промокодов на странице корзины.
Они не должны быть активны и видны по умолчанию. Это отвлекает пользователя, который уже готов купить, от процесса оформления и мотивирует покинуть сайт в поисках информации по получению скидки.
Поле для промокода в «Алло» по умолчанию скрыто:
И открывается только по нажатию:
А вот на сайте «Фокстрот» поле для промокода по умолчанию видно. Кроме того, на странице корзины предлагается проверить баланс бонусного счета, перейдя на другой сайт:
Пусть название поля для ввода будет интуитивно понятным. Размытое «Ваучер» лучше заменить на «У вас есть промокод?».
3. Регистрация
3.1. Дайте пользователю возможность купить без регистрации
Пользователи не любят регистрироваться при первой покупке. Во-первых, они не уверены, что станут постоянными клиентами. Во-вторых, никто не хочет получать назойливый спам на почту. А, в-третьих, регистрация ассоциируется с заполнением десятков полей, восстановлением пароля и прохождением капчи.
Функция «Купить в один клик» в «Фотомаг». Пользователь оставляет только номер телефона, остальную информацию уточняет менеджер. Кнопка для осуществления «быстрого заказа» визуально выделена среди других элементов, а кнопка для оформления заказа самостоятельно незаметна и даже кажется неактивной:
«Лебутик» предлагает альтернативу регистрации - вход при помощи аккаунта социальной сети:
Удалите из процесса оформления подтверждение контактной информации (переход по ссылке из письма или ввод кода из смс). Если подтверждения нужно ждать слишком долго, пользователь просто уйдет, не завершив покупку.
Если предоставляете возможность заказа без регистрации - сделайте эту функцию заметной на странице.
При заказе без регистрации функционал не должен быть урезан. Если без регистрации невозможен какой-то способ оплаты, предупредите об этом заранее. Опишите выгоды от регистрации и различия функционала для пользователей с разными статусами.
3.2. Фоновая регистрация
Зачастую данных для оформления заказа достаточно для регистрации. Сообщайте об автоматической регистрации пользователю письмом. Конечно, такой способ имеет свои недостатки, например, сгенерированный автоматически пароль, зато пользователь экономит время, а магазин получает нового подписчика.
Вот как это реализовано в «Розетке»:
Или предложите пользователю зарегистрироваться уже после покупки на основе введенной им информации.
3.3. После регистрации должна проходить автоматическая авторизация и продолжение оформления заказа
3.4. Предложите использовать в качестве логина адрес электронной почты или телефон
Если представить, на скольких ресурсах зарегистрирован обычный пользователь, и сколько пар логинов и паролей ему необходимо помнить, то нежелание регистрироваться еще раз становится понятным. Номер телефона и адрес почты - данные, которые клиент всегда помнит.
Предоставляйте возможность восстановления пароля на странице авторизации.
«Розетка» узнает пользователя по электронной почте и помогает вспомнить пароль «не отходя от кассы»:
3.5. Сохраняйте в поле логина заполненную информацию
При повторном посещении клиент, как правило, перебирает в голове несколько «стандартных» логинов или вообще не помнит, что уже регистрировался на сайте. Подсказывайте клиенту, оставляя в поле логина данные.
3.6. Не подписывайте зарегистрировавшихся на рассылку автоматически
Большинство клиентов интернет-магазинов уже устали получать горы ненужных им писем по почте. Опишите явные выгоды от подписки и спросите, хочет ли пользователь получать от вас письма.
3.7. Минимизируйте количество полей ввода
Если город и район пользователя можно определить автоматически, пусть система заполнит их самостоятельно. При этом у пользователя должна быть возможность проверить и редактировать все поля.
На сайте «Лебутик» выпадающий список помогает выбрать код оператора мобильной связи из списка.
3.8. Проверка корректности вводимых данных должна осуществляться во время заполнения формы, а не после отправки
После отправки формы с некорректными данными, заполненная информация должна сохраняться заполненной.
Проверка на странице сайта «Дешевше» происходит после отправки формы, в которой после обновления не сохраняются введенные данные:
3.9. Сообщения об ошибке должны быть однозначными и пояснять, как можно решить сложившуюся проблему
Сообщение об ошибке ввода на сайте «Алло» предельно подробно описывает, как исправить конфуз:
«Лебутик» подсказывает пользователю, как ввести корректный адрес почты:
4. Доставка
4.1. Показывайте склады самовывоза на карте и списком
«Розетка» предоставляет возможность выбрать точки выдачи по адресу в списке или найти ближайшее отделение на карте:
4.2. Предлагайте пользователю выбрать адрес из списка или ввести вручную
Ввод или выбор адреса на сайте «Фотомаг»:
4.3. Указывайте стоимость доставки во время выбора способа доставки
Для покупателя может стать сюрпризом увеличение общей суммы заказа при получении, что приведет к отказу. Сообщайте, что доставка оплачивается покупателем и рассчитывайте приблизительную стоимость.
Удобное отображение стоимости в зависимости от способа доставки на сайте «Дешевше»:
Стоимость доставки видна при ее выборе из списка на сайте «Алло»:
На сайте «Фотомаг» мы не видим конечной суммы, но узнаем, когда сможем уточнить итоговую стоимость:
5. Оплата и реквизиты
5.1. Указывайте способы оплаты в порядке убывания популярности
«Алло» предлагает выбрать способ оплаты:
Выводите рядом с названием иконки платежных систем.
5.2. Разбейте способы оплаты на группы по смыслу:
- предоплата банковской картой,
- оплата наличными при получении,
- электронные платежи,
- оплата через терминал.
Выбор способа оплаты в «Розетке»:
5.3. Укажите комиссию каждого способа оплаты
При выборе способа оплаты итоговая сумма на странице сайте «Дешевше» меняется:
«Мобиллак» мотивирует клиентов рассчитываться картой:
5.4. Если ваш продукт покупают регулярно, сохраните платежные данные, чтобы пользователю оставалось положить товар в корзину и нажать «Оплатить»
5.5. Не спрашивайте тип платежной системы у пользователя, если от выбора не зависит размер комиссии
Первые цифры номера карты однозначно определяют платежную систему: Виза, Мастеркард и т.д. Если при оплате любой картой цена не меняется, определяйте автоматически систему той карты, которую вводит пользователь.
5.6. При вводе номера карты поле ввода должно визуально повторять цифры номера на самой карте
Шестизначные номера разбиваются на 4 блока по 4 цифры. После заполнения каждого блока переход к следующему должен осуществляться автоматически
Обратите внимание, что существуют карты с количеством цифр, отличным от шестнадцати. Карты «Маэстро» могут иметь 13 или 16 или 19 цифр. Если ваш процессинг принимает к оплате карты с разным количеством цифр в номере, позаботьтесь о том, чтобы поле ввода подстраивалось под вводимые данные. По первым шести цифрам можно определить название платежной системы, и, если в этой системе другое количество цифр в номерах карт, поле должно измениться.
5.7. Собирайте платежные данные на сайте магазина
Если после нажатия на кнопку «Оплатить», пользователь попадает на страницу платежного ресурса, то это сбивает с толку. Даже опытные интернет-пользователи чувствуют себя некомфортно, оставляя платежную информацию вне пределов магазина.
Если нет возможности заполнить данные в форме на сайте, позаботьтесь, чтобы на странице оплаты сохранялся стиль сайта.
Оставьте на платежной странице возможность перейти назад на сайт магазина без оплаты. Здесь же указывайте информацию о заказе (сумма заказа и содержимое корзины).
5.8. Предоставляйте информацию о безопасности платежа на странице оплаты
- безопасное соединение https,
- логотипы платежных систем и сертификаты безопасности.
- если не требуется подтверждение платежа СМС, сообщите пользователю, что платеж осуществлен без технологии 3DSecure.
5.9. Если платеж не удалось обработать, должно появляться сообщение об ошибке
Если после того, как платеж не прошел, пользователя просто перекидывает на страницу оплаты или корзину, то понять, успешно была произведена оплата или нет - трудно.
Сообщение о том, что оплату произвести не удалось, на странице «Алло»:
Предложите альтернативные варианты оплатить покупку.
5.10. Общайтесь с клиентом на понятном языке
Замените технические и редко используемые термины более привычными.
- «Аутентифкация» - «Введите код из СМС»,
- «Динамический пароль» - «Код из СМС».
5.11. Код подтверждения должен располагаться в начале СМС, чтобы его можно было прочитать, не открывая сообщение
6. Подтверждение заказа
На странице подтверждения заказа выводите полную информацию:
- Наименование товара,
- Количество,
- Цену,
- Стоимость доставки,
- Способ доставки,
- Комиссию платежной системы,
- Контактные данные получателя.
Дайте возможность пользователю редактировать информацию на странице подтверждения.
Подтверждение заказа при оформлении на сайте «Мобиллак»:
7. «Спасибо за покупку»
Располагайте на странице «Спасибо за покупку» информацию о заказе.
Сообщение на финальной странице покупки в магазине «Дешевше» весьма лаконично:
«Фотомаг» указывает еще и номер заказа:
«Алло» дает подробную информацию:
Продублируйте полную информацию о заказе на электронный ящик клиента.
Поместите на страницу подтверждения заказа возможность распечатать данные.
Если продукт электронный, расскажите, как его можно скачать.
Повторим пройденное
Корзина:
- добавление в корзину не должно содержать лишних шагов,
- выводите информацию, что товар добавлен в корзину,
- внутри корзины отображайте подробную информацию о товарах,
- кнопка продолжения покупки должна быть заметной и называться в соответствии с ожиданиями пользователя,
- поле ввода промокода по умолчанию должно быть скрыто,
- добавьте кнопку удаления товара из корзины,
- корзина должна запоминать заказ.
Авторизация:
- добавьте возможность купить без регистрации,
- добавьте фоновую регистрацию,
- сделайте адрес почты или телефон логином.
Оплата:
- используйте интуитивно понятные названия способов оплаты с иконками,
- выводите способы оплаты в порядке убывания популярности,
- предупреждайте о комиссиях платежных систем,
- поля для ввода данных банковской карты должны визуально повторять расположение информации на физической карте,
- позволяйте пользователю вернутся на страницу магазина без оплаты,
- сообщайте подробную информацию, если платеж был отклонен.
Доставка:
- определяйте адрес автоматически с возможностью редактирования,
- отображайте склады самовывоза на карте и списком,
- указывайте ориентировочную стоимость доставки.
Страница «Спасибо за покупку»:
- выводите номер заказа,
- дублируйте информацию о заказе на электронную почту,
- расскажите клиенту, как события будут развиваться дальше.
Post Scriptum
Существует множество вариантов реализации одной и той же функции, и выбор зависит от вашей ниши, целевой аудитории и платформы сайта.
Главной посыл исследования и нашей статьи - почти всегда можно сделать покупку на сайте удобнее.
Кстати, специалисты Авеб написали книгу о юзабилити интернет-магазинов. Просто инструкция по применению - только конкретные рекомендации и примеры. Вы ее уже читали? Если нет, то обязательно скачайте и прочитайте.
Какие усовершенствования корзины значительно увеличивали конверсию на вашем сайте? Чему советуете уделить внимание?
