Советы по юзабилити: страничка оформления заказа в интернет-магазине. В несколько шагов. Указать количество шагов и времени на оформление заказа
На протяжении 4-х лет я занимаюсь e-commerce. Запустил несколько собственных интернет-магазинов, а так же создал web-студию, которая занимается организацией интернет- продаж и реализовал уже более 50 успешных проектов.
И так, начнем. Контент, который важен на странице доставки.
1. Регионы доставки
Самое первое, что ваши покупатели должны видеть — это регионы доставки. Как пример вы можете коротко и ясно написать, что доставляете по всей России заголовком страницы.
2. Способы доставки
Ваши покупатели должны видеть на странице доставки доступные для выбора способы. По каждому способу доставки желательно писать следующую информацию:
- Название транспортной компании/вида доставки,
- Средние сроки и стоимость доставки. Желательнее калькулятор или таблицу со стоимостью.
- Регионы, в которые отправляются заказы данным способом.
- Сроки передачи заказа на доставку данным видом доставки.
3. Склад и адреса отправки
Если есть возможность приложите фото склада или вашего магазина. Укажите адрес, с которого будет производится отправка и на который можно отправить товары по гарантии и возврат.
4.Стоимость и сроки доставки
Обязательно укажите в течении какого срока вы отправляете заказ со склада.
Если на сайте работает автоматический расчет сроков и стоимости доставки, то опишите это.
Если расчет стоимости выполняет менеджер после получения заказа, то нужно написать об этом и приложить наиболее популярные примеры расчета стоимости, к примеру “Доставка заказа в Москву в среднем занимает 2- 3 рабочих дня и стоит 700 — 100 RUB”
5. Не забывайте о клиенте после отправки.
Укажите, что вы присылаете трек номер, опишите, когда стоит ждать покупателю трек номер и как (смс или email). Укажите как покупатель узнает о том, что заказ пришел к нему.
6. В заключении
Прикладываю пример прототипа правильно оформленной страницы доставки.
P/S Надеюсь, информация была вам полезной. Пишите свои вопросы, я на них с радостью отвечу.
” вызвала интерес со стороны читателей, поэтому решил продолжить подобную серию статей. И сегодня мы углубимся в способы упрощения процедуры оформления заказа в вашем интернет магазине. Применив решения из этой статьи, вы с легкостью сможете оптимизировать свою страницу или страницы оформления заказа.
Само собой, каждый интернет магазин по своему уникален и не существует оптимального для всех случаев варианта. Поэтому я постараюсь привести общие, проверенные мной, рекомендации, а вы уже сами решите что для вас подходит, а что нет.
- Зачем вообще все это?
- Типы оформления заказа;
- Оптимизация оформления заказа;
- Запрашиваем данные с покупателя;
- 2 рабочих варианта реализации;
- Аналитика;
- Заключение и небольшой подарок!
Зачем вообще все это?
Перед тем как мы начнем, давайте ответим на вопрос зачем вообще оптимизировать процесс оформления заказа в интернет магазине:
- Сделать процесс простым для посетителя;
- Начав оформление заказа, не дать посетителю прервать его;
- И, самое главное, по этому процессу.
Каким бы хорошим не был ваш сайт, через процедуру оформления заказа проходят все будущие покупатели. И именно поэтому так важно, чтобы этот процесс был прост, быстр и не вызывал негативных эмоций у посетителя. Если вы будете придерживаться определенных правил, то результат не заставит себя ждать.
Типы оформления заказа
Существует три базовых типа оформления заказа, каждый из которых имеет свои плюсы и минусы.
1. В несколько шагов
Наиболее распространенный вариант, который по умолчанию встроен в большинство . Функционально прост и тривиален: на странице корзины есть кнопка “Оформить заказ”, при нажатии на которую покупатель начинает оформление заказа за несколько шагов. Для каждого типа запрашиваемой у покупателя информации есть свой шаг.
Каждый шаг собирает определенную информацию с покупателя;
Покупателя просят предоставить информацию порционно и он не пугается от большого количества полей на одной странице;
Лучше всего подходит для тех интернет магазинов, которые запрашивают много информации с покупателя;
Все-таки несколько шагов и нежелание заполнять десятки полей.
2. В один шаг
Второй по популярности вариант, крайне редко встречается в CMS по умолчанию, хотя легко добавляется с помощью модулей. При нажатии кнопки “Оформить заказ” в корзине, покупателю предлагается заполнить все данные на одной странице вместо нескольких.
Все данные собираются на одной странице;
Оптимальное решение для большинства интернет магазинов;
Если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Поэтому необходимо оптимизировать количество полей (будет рассмотрено ниже).
3. На странице корзины
Вариант, который встречается реже всего. Отдельной страницы для процесса оформления заказа не предусмотрено, все происходит непосредственно на странице корзины.
Все данные собираются на одной странице с ;
Лучше всего работает с минимальным набором полей на странице (см. скриншот выше)
Аналогично если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Аналогично необходимо оптимизировать и снизить количество полей для заполнения.
Рассматривая интернет магазин в классическом его понимании, имеет смысл брать в расчет лишь три основных варианта. Предлагаю перейти к выбору наиболее оптимального.
Какой же из трех вариантов выбрать?
Сразу скажу, что никаких четких правил и предписаний в плане выбора способа оформления заказа я не видел. Поэтому отталкиваюсь лишь от собственного опыта. С моей точки зрения, наиболее оптимальный вариант: отдельная страница оформления заказа в один шаг . Подобный вариант легко оптимизируется и может быть запросто масштабирован практически под любой проект.
Оптимизация оформления заказа интернет магазина
В этой главе я подскажу вам наиболее простые и элегантные решения (остальные, более функциональные решения, я внедряю только по своей ). Только не забудьте их внедрить, а не просто прочитать и отложить “на завтра” .
Нам много не надо! Снижаем нагрузку на покупателя
Предлагаю начать оптимизацию не с перестановки элементов или добавки функционала, а, наоборот, с сокращения количества запрашиваемых данных. Не следует просить покупателя вводить вообще все данные: имя, фамилию, отчество, телефон, email, страну, регион, город, улицу, дом, корпус, квартиру, индекс и многое другое. Это его отпугнет, поэтому предлагаю упростить задачу.
Давайте подумаем какую информацию на сайте необходимо собирать, а какую вовсе необязательно?
|
Тип данных |
Необходимость запроса на сайте |
| Фамилия и Имя | Необходимо . |
| Отчество | Необязательно , можно уточнить по телефону. Требуется для отправки почтового отправления. |
| Необходимо для отправки данных заказа и добавления в подписчики. | |
| Телефон | Необходимо для контакта с покупателем. |
| Индекс | Необязательно , оператор может уточнить самостоятельно по адресу. |
| Город | Желательно . Для понимания часового пояса покупателя. |
| Адрес | Необходимо . В одно поле. Если есть , автоматически подставляйте адрес самовывоза в это поле при его выборе. |
| Страна | Необязательно. Требуется только при работе на несколько стран. |
| Комментарий к заказу | Необходимо . |
Таким образом необходимо запрашивать следующие данные:
- Фамилию и Имя.
Пример: “Андрей Родионов ” - E-mail.
Пример: ” - Телефон:
Пример: “+7-123-456-78-90 ” - Адрес для или почтовой доставки:
Пример: “Санкт-Петербург, Невский пр, дом 1, кв 1 ”. Предлагать заполнять в одно поле , не следует делать отдельное поле для улицы, отдельное для дома и отдельное для квартиры. - Комментарий к заказу.
Всего получилось пять полей для заполнения. Запросив эти данные, вы с легкостью сможете:
- Связаться с покупателем;
- Внести его в базу подписчиков;
- Отправить заказ.
Согласитесь, что все стало гораздо проще, хотя информация запрашивается ровно та же. Так как вы в любом случае подтверждаете заказ по телефону, то всю необходимую для вас информацию вы сможете выяснить уже устно.
Теперь, оптимизировав сбор данных покупателя, давайте рассмотрим несколько вариантов оформления заказа на базе рекомендации выше.
Вариант №1. Просто и со вкусом.
Данный вариант подходит тем, кто хочет малой кровью оптимизировать оформление заказа и по этой странице. Самое главное, примите рекомендацию по поводу сокращения полей для сбора информации с покупателя и выведите варианты доставки и оплаты.
В результате вы должны получить примерно следующую картину:
Согласитесь, что данная форма заказа проста и незатейлива, но при этом эффективно готова выполнять свою задачу? При необходимости, добавьте рядом со их стоимость.
Теперь предлагаю рассмотреть второй вариант, в который можно вместить куда больше функционала и удобства для покупателя.
Вариант №2. Стильно и функционально.
Если в первом варианте у нас вся информация собиралась в одном месте, то во втором варианте мы с вами попробуем разделить сбор данных и сделать его более наглядным.
Шаг 1. И начнем со сбора данных покупателя. Учтем опыт первого варианта и много просить не будем
Шаг 2. Выбор способа доставки .
Если у вас как минимум 2 способа доставки, очень хорошо работает разделение вариантов по вкладкам чтобы покупатель сразу сконцентрировался на нужном ему варианте.
Вот таким образом можно предложить выбрать курьерскую доставку:
Внимательный читатель заметит, что адрес запрашивается дважды, но это специально сделано для наглядности. В конечном варианте этого нет.
А вот так самовывоз:
Доставка Почтой России:
Согласитесь, что вся эта информация, выведенная без вкладок, не читалась бы так легко. А так все выглядит чистенько и аккуратно.
Шаг 3. Выбор способа оплаты.
Здесь тоже постараемся сделать все максимально просто и наглядно.
Теперь посмотрим как все будет выглядеть в сборе.
Уютно выглядит, правда?
Важное уточнение : подобная форма заказа сформировалась не просто так из головы, а на основе собственных исследований юзабилити форм и работы со многими интернет магазинами. И именно подобная форма сейчас внедряется в разрабатываемый мною детский интернет магазин. Как только он будет готов, я с радостью поделюсь с вами ссылкой.
Конечная реализация, конечно же, за вами, но вы с легкостью можете взять за основу предложенный мною вариант. А чтобы понять насколько хорошо работает ваше оформление заказа, следует прибегнуть к аналитике.
Аналитика формы отправки заказа
В этом нам помогут два незаменимых инструмента:
- Google Analytics. Визуализация последовательностей .
- Яндекс.Метрика. Вебвизор + Аналитика Форм .
Google Analytics
В этой системе мы будем использовать “Визуализацию последовательностей”. Подобное отслеживание будет наиболее эффективно для интернет магазинов с оформлением заказа в несколько шагов. Выглядеть это будет примерно следующим образом (кликните по изображению для увеличения):
На изображении выше показаны несколько шагов оформления заказа от корзины до страницы “Спасибо за покупку”. Как думаете, почему на предпоследнем шаге такое большое количество отказов?
Что вам даст эта статистика:
- Понимание с какого шага уходит покупатель;
- Понимание куда уходит покупатель из оформления заказа.
Как настроить подобный инструмент рассказано .
Яндекс.Метрика
Многие слышали про Вебвизор, но не все слышали про Аналитику Форм. Для того чтобы велось отслеживание этой статистики, у вас должен быть включен ВебВизор и внедрен соответствующий код Яндекс.Метрики на сайт. Взгляните на пример отчета по одному шагу оформления заказа (клик для увеличения):
Что вам даст эта статистика:
На основе этих данных вы с легкостью поймете в какую сторону стоит думать в плане дальнейшей оптимизации страницы оформления заказа.
Заключение
Сегодняшняя статья раскрыла для вас один из самых простых путей увеличения конверсии вашей страницы оформления заказа. Рассмотрим ваши дальнейшие варианты действий:
- Бездельникам . Ничего не делать и наслаждаться текущими показателями конверсии;
- Начинающим . Провести аналитику больных мест оформления заказа и подготовить список изменений;
- Опытным . Провести аналитику, подготовить ТЗ на изменения, дать задачу программисту;
- Профессионалам . Провести аналитику, подготовить ТЗ на изменения, дать задачу программисту, отследить выполнение и провести аналитику по обновленной странице.
И да, первым двум желающим я готов бесплатно провести аудит их оформления заказа. Для этого достаточно дать ссылку на свой интернет магазин в комментарии и ожидать тестового заказа
26.09.2013 Мини аудиты
Любой аудит должен быть основан в первую очередь на данных систем аналитики и статистики поведения покупателей. Ввиду того, что этих данных у меня нет, сильно сужается область работы.
Wool day.
Начну с того, что крайне смущает скорость работы сайта. Проверял с нескольких компьютеров, везде поведение одинаково медленное.
Учетная запись.
Как вы считаете, не слишком ли много на один небольшой участок вариантов оформления заказа?
Не уверен, что предлагаю оптимальное решение для вашей ситуации, но мое ощущение, что на скриншоте ниже все выглядит несколько чище:
Допустим, я хочу совершить заказ без регистрации и нажимаю на соответствующую кнопку. Вносим коррективы:
- “Почтовый ящик” переименовать в E-Mail
- “Имя Отчество” и “Фамилия” объединить в одно и назвать “Имя”
- Если очень хочется спросить дату рождения, то оставьте только день и месяц. Не все любят сообщать год рождения.
- Зачем вам 2 рассылки? Какая мотивация подписаться на 2 рассылки?
Следующий шаг.
- Хорошо бы этот шаг объединить с предыдущим чтобы при виде пустых полей у покупателя не возникало негативных мыслей
- Индекс желательно убрать или как минимум сделать НЕобязательным для заполнения
- Согласно странице “Доставка”, вы доставляете по всей России. Так зачем еще раз предлагать страну?
- Что вам даст заполнение региона? Его же можно узнать самостоятельно.
- Кнопка “Сохранить” приводит к тому, что наконец-таки стало возможно выбрать тип оплаты. Можно отказаться от подобного нетривиального способа?
- Если я уже изъявил желание оформить без регистрации, зачем вы снова предлагаете “Войти в аккаунт”?
Способы доставки .
- Не сразу понятно, что самовывоз бесплатный. Напишите “Бесплатно” или “0 руб.”
Способы оплаты .
- Можно ли их сделать чекбоксами? В нынешнем исполнении по клику ожидается не переход на следующий шаг, а дополнительная информация по типу оплаты. Если сделаете чекбоксами, то и не надо будет еще один шаг оформления заказа добавлять.
Пользовательское соглашение .
- Вот это настоящий “убийца конверсии” в подавляющем большинстве случаев. Вердикт: убрать.
Тема правильного оформления страницы доставки актуальна всегда. Алгоритмы поисковых систем обновляются каждый месяц, и ключевые страницы сайтов (а среди них и «Доставка») обрастают все новыми фишками и функционалом. Можно реализовать сотню лайфхаков в борьбе за место в ТОП 10 выдачи, однако если на сайте будет непрозрачная, неинтересная или неполная информация о доставке, все равно на нем вряд ли сделают покупку. Сегодня важно уже не наличие страницы доставки на сайте, а то, завоюет ли она доверие посетителей. Чек-листом по оформлению страницы доставки Ксения Ситникова , менеджер отдела поискового продвижения i-Media, поделилась с SEOnews.ru .
Представьте, что вы разработали информативный и красочный макет главной страницы, сделали перелинковку, правильно структурировали и залили ассортимент, оформили интерактивный каталог с проработанными карточками товаров…
И на этапе покупки выясняется, что о доставке покупатель узнает только при звонке в колл-центр по мобильному номеру. Или, например, типовая страница ‒ это полотно текста на шесть тысяч символов.
Уйдете вы с такого сайта или останетесь?
«А у вас в магазине доставка есть?»
Коллеги-маркетологи из Baymard Institute провели глобальное исследование ста крупнейших интернет-магазинов, в которое также вошел контент-анализ описаний дополнительных услуг. Выяснилось, что оформление страницы доставки сильно влияет на конверсию и поведенческие факторы.
С учетом собственного опыта и мнения зарубежных коллег я подготовила список самого необходимого для страницы доставки, чтобы пользователь беспрепятственно дошел до этапа оплаты.
1. Прозрачная стоимость доставки
Следите за новостями диджитал-индустрии в наших аккаунтах в
Наблюдали ли вы когда-нибудь в «Вебвизоре» запись, как клиент добавляет товар в корзину, начинает заполнять данные заказа и… покидает сайт? Эта сцена по драматичности может сравниться с финальными кадрами «Титаника». Сегодня поговорим о том, что заставляет пользователя покинуть сайт без покупки и как это исправить.
Согласно исследованию 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
Существует множество вариантов реализации одной и той же функции, и выбор зависит от вашей ниши, целевой аудитории и платформы сайта.
Главной посыл исследования и нашей статьи - почти всегда можно сделать покупку на сайте удобнее.
Кстати, специалисты Авеб написали книгу о юзабилити интернет-магазинов. Просто инструкция по применению - только конкретные рекомендации и примеры. Вы ее уже читали? Если нет, то обязательно скачайте и прочитайте.
Какие усовершенствования корзины значительно увеличивали конверсию на вашем сайте? Чему советуете уделить внимание?
Друзья, приветствую. Дико извиняюсь за то, что за два прошедших месяца у меня всего две статьи. Просто дело в том, что в конце сентября у меня родился сын и я только сейчас потихоньку привык к новому ритму жизни.
Сегодня статья на тему “Возьми и быстро внедри !”. И, казалось бы, при чем тут простыня в картинке слева? Скоро узнаете
И сегодня хочу затронуть тему, связанную с текстовым и графическим оформлением страниц с информацией о доставке. Ведь это одна из немногих страниц, которая формирует окончательное решение у посетителя о покупке в вашем интернет магазине и многие просто недооценивают её важность.
Уж сколько вариантов подачи этой информации я видел, все больше убеждаюсь, что фантазия ничем не ограничивается.
О чем мы поговорим:
- Постановка задачи;
- Как НЕ СТОИТ делать;
- Простая подача информации (выберите свой вариант внедрения);
- Хорошие примеры для подражания;
- Заключение.
А вообще почему это так важно?
Я неспроста заостряю ваше внимание на странице “Доставка”, так как читая эти страницы, посетитель зачастую принимает окончательное решение покупать в вашем интернет магазине или нет. И наша задача сделать так, чтобы это чтение было для него легким и не вызывало сложностей. Не стоит недооценивать контент-маркетинг (которому в моей уделяется достаточное внимание) даже на странице доставки.
Когда встает вопрос о подаче той или иной информации, сразу начинаем думать как это лучше сделать.
Например, я в этом блоге в каждой статье с трудом сдерживаю себя от перенасыщения информацией своих читателей. Практически любую статью после написания я несколько раз редактирую и сокращаю объем выдаваемой информации для лучшего усвоения и минимизации “каши”. Да, на написание каждой статьи в сумме уходит около 10 часов времени, но, уверен, лучше так, чем выдавать каждый день по статье-полуфабрикату.
Поэтому каждый раз когда вы соберетесь на сайт выложить какую-либо информационную страницу (речь не идет о статьях в блоге интернет магазина), то постарайтесь уложить максимум информации в минимум слов или еще лучше графики .
И сегодня мы с вами попробуем уложить эту информацию так, что только при одном взгляде посетитель поймет, что вы успешно доставляете товар в его город или поселок.
Плохой пример
Не самый лучший пример для подражания.
Слева от этого текста вы видите уменьшенный в несколько раз скриншот страницы “Доставка и оплата” с сайта ProSkater.ru.
Скорее всего, эта страница обновлялась по мере поступления информации и открытия новых направлений в доставке, но когда страница в высоту более 13000 пикселей (более 10 экранов длиной!), это уже не кажется смешным.
В данном случае этот интернет магазин может себе позволить подобное, так как уже имеет огромную армию покупателей и последователей, которые уже наизусть помнят все условия и правила доставки с оплатой.
Первый пример четко показывает самую распространенную ошибку при составлении подобного типа страниц: вместить как можно больше информации и получить в итоге нечитаемую простыню текста .
Резюме: не стоит валить все в одну кучу, структурируйте информацию!
Но это все общие советы, которые ничего не значат пока мы не приступим к делу. В следующей главе начнем строить костяк этой страницы и найдем несколько действительно стоящих решений.
Простая подача информации
У каждого интернет магазина свои типы доставки и единого решения, которое покроет все варианты попросту не существует.
Рассмотрим наиболее часто встречающиеся варианты:
Единые правила для всех
Первое впечатление.
При первом же взгляде на страницу “Доставка” у посетителя сразу должно быть понимание того, вы в его город или нет.
Если у вас фиксированная или вовсе бесплатная доставка по всей России, то вам подойдет подобное элегантное решение (живой пример в конце статьи):
Несложно догадаться, что только при одном взгляде на эту страницу станет ясно, что интернет магазин предоставляет доставку по всей стране и абсолютно бесплатно. Да, можно об этом написать и текстом, но изображением куда эффективнее, да и пользователи-визуалы вас тоже оценят по достоинству
Призыв к действию!
В конце страницы обязательно разместите ссылку или кнопку, призывающую к дальнейшим действиям. Обычно это простая ссылка с текстом “Перейти к покупкам”, которая ведет на главную страницу.
Вариант №1. Только курьер.
Если у вас только курьерская доставка по своему и дополнительным городам, то зачастую достаточно просто перечислить эти города в тексте описания.
Пользователь, попадая на эту страницу, сразу видит карту с нанесенными на неё городами. И если он видит свой город, то взгляд падает ниже, где уже стоят ссылки на подробные условия по каждому городу, которые расположены на этой же странице чуть ниже.
Если вы решите использовать интерактивные Google карты, то имеет смысл воспользоваться Info Windows для Google Maps. Пример:
В каждом городе, где есть курьерская доставка, разместите подобный маркер и во всплывающем окошке вы можете разместить любую информацию: скорость доставки, время доставки и прочие условия. Более подробно о Google Maps API можно почитать .
К счастью, мало кто из интернет магазинов работает только с курьерской доставкой и обычно видов доставки существенно больше. В следующем примере мы добавим .
Вариант №2. Курьер и самовывоз.
В случае если вы работаете как с курьерской доставкой, так и с самовывозами по всей стране, то предлагаю слегка модифицировать первый вариант.
В этом случае можно, скорее всего, тоже обойтись текстовой страницей с интерактивной картой в самом начале.
Опять же посетители после попадания на страницу будут видеть интерактивную карту, на которой отмечены города. Кликнув на свой город, посетитель сразу может посмотреть какие опции для него доступны: курьер, самовывоз или и то, и другое.
Вариант №3. Курьер, самовывоз и почта.
Сами понимаете, что размещать на карте все почтовые отделения смысла нет и здесь уже необходимо какое-то иное решение.
Изменения:
- При попадании на страницу доставки пользователь должен сразу понимать, что доставка осуществляется по всей России;
- Давайте сразу отделим Почтовую доставку от других способов. И для этого разделим информацию на вкладки.
Первая вкладка “Курьерская доставка и самовывоз” полностью взята из варианта №2. А вот вторая вкладка полностью подготовлена для Почты России:
Те, кто живет в отдаленных регионах, знают, что к ним, в основном, возит только Почта России. И именно поэтому мы сразу предлагаем посмотреть:
- Стоимость доставки;
- Условия доставки;
- А также контрольные сроки доставки на схеме.
То есть при попадании на эту страницу мы ответим на вопросы пользователя еще на первом экране монитора. Это ведь прекрасно!
Иные схемы доставки.
Эта статья покрывает общий случай, но все равно у каждого интернет магазина свои способы доставки до покупателя и на всех сразу не напасешься
Поэтому вот несколько советов, которые помогут оптимизировать подачу информации:
- Основная рекомендация: используйте вкладки для разделения информации. Если вы хотите добавить описание доставки транспортными компаниями, то лучше разместить эту информацию на отдельной вкладке;
- По опыту, чем проще общая схема доставки, тем легче работать. Некоторые внедряют калькуляторы доставки Почтой России и упорно для этого забивают вес товаров в , а некоторые просто ставят фиксированную стоимость доставки Почтой России. Средняя себестоимость доставки у обоих получается примерно одинаковая;
- Старайтесь сделать так, чтобы при первом взгляде на страницу доставки у пользователя сразу был ответ на его вопрос: “Доставите ли вы в мой город?”;
- В конце страницы разместите ссылку “Перейти к покупкам”.
Несколько хороших примеров
Думаю, что будет неплохо разместить в конце несколько отличных примеров реализации страниц “О доставке”:
Ecco
Система вкладок в действии. Ссылка .
Здесь уже несколько иной подход. Достаточно ввести свой индекс или город и интернет магазин выведет все возможные способы доставки. Ссылка .
Exclusivedog
Посмотрите как элегантно описана доставка. При одном взгляде на баннер, других вопросов просто не возникает . Ссылка .
Лишним тому подтверждением будет карта скролла этой страницы:
Как видите, большинству пользователей достаточно графического отображения условий доставки и до подробных условий доставки не все доходят. Тем более что в этом интернет магазине они очень просты.
Заключение
Очень вам советую не пренебрегать страницей “Доставка” и полноценно её оформить. Эту страницу изучают практически все, кто хочет совершить заказ в вашем интернет магазине.
Поэтому проведите её аудит и сразу же воспользуйтесь рекомендациями из только что прочитанной статьи. Сделайте доброе дело своим посетителям