Как улучшить юзабилити страницы оформления заказа в интернет-магазине, добавив зависимость вывода полей. После оформления заказа выдается информативное сообщение. Добавление товара в корзину

Ресурс компании 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 избавили своих посетителей от этих надоедливых сообщений.

Пути для дальнейшего улучшения

1. Используйте описательные индикаторы прогресса: замените надпись «Продолжить» на «Просмотреть мой заказ» и т.д.
2. Объясните посетителям, почему они должны указывать в форме дату рождения.
3. Используйте более человечные сообщения об ошибках, которые не заставят ваших пользователей уйти.
4. Предоставьте покупателю достойную причину, по которой вам понадобится номер его мобильного (например, вы отправляете клиентам текстовые уведомления о статусе их заказа).
5. Предоставьте людям возможность вернуться на предыдущую страницу, когда они находятся в процессе оформления заказа. Это позволит им внести важные изменения, даже если вспомнят о своей ошибке слишком поздно.

И никакого контактного номера?

Компания ASOS действительно не указывает на своем сайте никаких контактных номеров — они общаются с клиентам при помощи социальных сетей, справочных страниц и формы обратной связи.

Благодаря усилиям, которые эта команда приложила на улучшение покупательского опыта, им удалось существенно уменьшить количество потенциальных причин обращения в службу поддержки. В результате, покупатели очень редко просят о помощи, так как во время оформления заказа они не хотят переключаться на заполнение сторонней формы.

Клиенты ASOS уже знают, что товары в их корзине будут зарезервированы не дольше 60 минут, поэтому ожидать ответа от службы поддержки на протяжении нескольких часов (до 4 часов) для них было бы попросту бессмысленно.

Подводя итоги

Хотя приведенный в качестве примера подход компании ASOS далеко не идеален, вам определенно стоит попробовать описанные здесь приемы на вашем сайте, чтобы убедить клиентов в целесообразности завершения сделки.

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

” вызвала интерес со стороны читателей, поэтому решил продолжить подобную серию статей. И сегодня мы углубимся в способы упрощения процедуры оформления заказа в вашем интернет магазине. Применив решения из этой статьи, вы с легкостью сможете оптимизировать свою страницу или страницы оформления заказа.

Само собой, каждый интернет магазин по своему уникален и не существует оптимального для всех случаев варианта. Поэтому я постараюсь привести общие, проверенные мной, рекомендации, а вы уже сами решите что для вас подходит, а что нет.

1. Зачем вообще все это?
2. Типы оформления заказа;
3. Оптимизация оформления заказа;
4. Запрашиваем данные с покупателя;
5. 2 рабочих варианта реализации;
6. Аналитика;
7. Заключение и небольшой подарок!

Зачем вообще все это?

Перед тем как мы начнем, давайте ответим на вопрос зачем вообще оптимизировать процесс оформления заказа в интернет магазине:

1. Сделать процесс простым для посетителя;
2. Начав оформление заказа, не дать посетителю прервать его;
3. И, самое главное, по этому процессу.

Каким бы хорошим не был ваш сайт, через процедуру оформления заказа проходят все будущие покупатели. И именно поэтому так важно, чтобы этот процесс был прост, быстр и не вызывал негативных эмоций у посетителя. Если вы будете придерживаться определенных правил, то результат не заставит себя ждать.

Типы оформления заказа

Существует три базовых типа оформления заказа, каждый из которых имеет свои плюсы и минусы.

1. В несколько шагов

Наиболее распространенный вариант, который по умолчанию встроен в большинство . Функционально прост и тривиален: на странице корзины есть кнопка “Оформить заказ”, при нажатии на которую покупатель начинает оформление заказа за несколько шагов. Для каждого типа запрашиваемой у покупателя информации есть свой шаг.

Каждый шаг собирает определенную информацию с покупателя;
Покупателя просят предоставить информацию порционно и он не пугается от большого количества полей на одной странице;
Лучше всего подходит для тех интернет магазинов, которые запрашивают много информации с покупателя;
Все-таки несколько шагов и нежелание заполнять десятки полей.

2. В один шаг

Второй по популярности вариант, крайне редко встречается в CMS по умолчанию, хотя легко добавляется с помощью модулей. При нажатии кнопки “Оформить заказ” в корзине, покупателю предлагается заполнить все данные на одной странице вместо нескольких.

Все данные собираются на одной странице;
Оптимальное решение для большинства интернет магазинов;
Если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Поэтому необходимо оптимизировать количество полей (будет рассмотрено ниже).

3. На странице корзины

Вариант, который встречается реже всего. Отдельной страницы для процесса оформления заказа не предусмотрено, все происходит непосредственно на странице корзины.

Все данные собираются на одной странице с ;
Лучше всего работает с минимальным набором полей на странице (см. скриншот выше)
Аналогично если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Аналогично необходимо оптимизировать и снизить количество полей для заполнения.

Рассматривая интернет магазин в классическом его понимании, имеет смысл брать в расчет лишь три основных варианта. Предлагаю перейти к выбору наиболее оптимального.

Какой же из трех вариантов выбрать?

Сразу скажу, что никаких четких правил и предписаний в плане выбора способа оформления заказа я не видел. Поэтому отталкиваюсь лишь от собственного опыта. С моей точки зрения, наиболее оптимальный вариант: отдельная страница оформления заказа в один шаг . Подобный вариант легко оптимизируется и может быть запросто масштабирован практически под любой проект.

Оптимизация оформления заказа интернет магазина

В этой главе я подскажу вам наиболее простые и элегантные решения (остальные, более функциональные решения, я внедряю только по своей ). Только не забудьте их внедрить, а не просто прочитать и отложить “на завтра” .

Нам много не надо! Снижаем нагрузку на покупателя

Предлагаю начать оптимизацию не с перестановки элементов или добавки функционала, а, наоборот, с сокращения количества запрашиваемых данных. Не следует просить покупателя вводить вообще все данные: имя, фамилию, отчество, телефон, email, страну, регион, город, улицу, дом, корпус, квартиру, индекс и многое другое. Это его отпугнет, поэтому предлагаю упростить задачу.

Давайте подумаем какую информацию на сайте необходимо собирать, а какую вовсе необязательно?

Таким образом необходимо запрашивать следующие данные:

1. Фамилию и Имя.
   Пример: “Андрей Родионов ”
2. E-mail.
   Пример: ”
3. Телефон:
   Пример: “+7-123-456-78-90 ”
4. Адрес для или почтовой доставки:
   Пример: “Санкт-Петербург, Невский пр, дом 1, кв 1 ”. Предлагать заполнять в одно поле , не следует делать отдельное поле для улицы, отдельное для дома и отдельное для квартиры.
5. Комментарий к заказу.

Всего получилось пять полей для заполнения. Запросив эти данные, вы с легкостью сможете:

• Связаться с покупателем;
• Внести его в базу подписчиков;
• Отправить заказ.

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

Теперь, оптимизировав сбор данных покупателя, давайте рассмотрим несколько вариантов оформления заказа на базе рекомендации выше.

Вариант №1. Просто и со вкусом.

Данный вариант подходит тем, кто хочет малой кровью оптимизировать оформление заказа и по этой странице. Самое главное, примите рекомендацию по поводу сокращения полей для сбора информации с покупателя и выведите варианты доставки и оплаты.

В результате вы должны получить примерно следующую картину:

Согласитесь, что данная форма заказа проста и незатейлива, но при этом эффективно готова выполнять свою задачу? При необходимости, добавьте рядом со их стоимость.

Теперь предлагаю рассмотреть второй вариант, в который можно вместить куда больше функционала и удобства для покупателя.

Вариант №2. Стильно и функционально.

Если в первом варианте у нас вся информация собиралась в одном месте, то во втором варианте мы с вами попробуем разделить сбор данных и сделать его более наглядным.

Шаг 1. И начнем со сбора данных покупателя. Учтем опыт первого варианта и много просить не будем

Шаг 2. Выбор способа доставки .

Если у вас как минимум 2 способа доставки, очень хорошо работает разделение вариантов по вкладкам чтобы покупатель сразу сконцентрировался на нужном ему варианте.

Вот таким образом можно предложить выбрать курьерскую доставку:

Внимательный читатель заметит, что адрес запрашивается дважды, но это специально сделано для наглядности. В конечном варианте этого нет.

А вот так самовывоз:

Доставка Почтой России:

Согласитесь, что вся эта информация, выведенная без вкладок, не читалась бы так легко. А так все выглядит чистенько и аккуратно.

Шаг 3. Выбор способа оплаты.

Здесь тоже постараемся сделать все максимально просто и наглядно.

Теперь посмотрим как все будет выглядеть в сборе.

Уютно выглядит, правда?

Важное уточнение : подобная форма заказа сформировалась не просто так из головы, а на основе собственных исследований юзабилити форм и работы со многими интернет магазинами. И именно подобная форма сейчас внедряется в разрабатываемый мною детский интернет магазин. Как только он будет готов, я с радостью поделюсь с вами ссылкой.

Конечная реализация, конечно же, за вами, но вы с легкостью можете взять за основу предложенный мною вариант. А чтобы понять насколько хорошо работает ваше оформление заказа, следует прибегнуть к аналитике.

Аналитика формы отправки заказа

В этом нам помогут два незаменимых инструмента:

1. Google Analytics. Визуализация последовательностей .
2. Яндекс.Метрика. Вебвизор + Аналитика Форм .

Google Analytics

В этой системе мы будем использовать “Визуализацию последовательностей”. Подобное отслеживание будет наиболее эффективно для интернет магазинов с оформлением заказа в несколько шагов. Выглядеть это будет примерно следующим образом (кликните по изображению для увеличения):

На изображении выше показаны несколько шагов оформления заказа от корзины до страницы “Спасибо за покупку”. Как думаете, почему на предпоследнем шаге такое большое количество отказов?

Что вам даст эта статистика:

1. Понимание с какого шага уходит покупатель;
2. Понимание куда уходит покупатель из оформления заказа.

Как настроить подобный инструмент рассказано .

Яндекс.Метрика

Многие слышали про Вебвизор, но не все слышали про Аналитику Форм. Для того чтобы велось отслеживание этой статистики, у вас должен быть включен ВебВизор и внедрен соответствующий код Яндекс.Метрики на сайт. Взгляните на пример отчета по одному шагу оформления заказа (клик для увеличения):

Что вам даст эта статистика:

На основе этих данных вы с легкостью поймете в какую сторону стоит думать в плане дальнейшей оптимизации страницы оформления заказа.

Заключение

Сегодняшняя статья раскрыла для вас один из самых простых путей увеличения конверсии вашей страницы оформления заказа. Рассмотрим ваши дальнейшие варианты действий:

1. Бездельникам . Ничего не делать и наслаждаться текущими показателями конверсии;
2. Начинающим . Провести аналитику больных мест оформления заказа и подготовить список изменений;
3. Опытным . Провести аналитику, подготовить ТЗ на изменения, дать задачу программисту;
4. Профессионалам . Провести аналитику, подготовить ТЗ на изменения, дать задачу программисту, отследить выполнение и провести аналитику по обновленной странице.

И да, первым двум желающим я готов бесплатно провести аудит их оформления заказа. Для этого достаточно дать ссылку на свой интернет магазин в комментарии и ожидать тестового заказа

26.09.2013 Мини аудиты

Любой аудит должен быть основан в первую очередь на данных систем аналитики и статистики поведения покупателей. Ввиду того, что этих данных у меня нет, сильно сужается область работы.

Wool day.

Начну с того, что крайне смущает скорость работы сайта. Проверял с нескольких компьютеров, везде поведение одинаково медленное.

Учетная запись.
Как вы считаете, не слишком ли много на один небольшой участок вариантов оформления заказа?

Не уверен, что предлагаю оптимальное решение для вашей ситуации, но мое ощущение, что на скриншоте ниже все выглядит несколько чище:

Допустим, я хочу совершить заказ без регистрации и нажимаю на соответствующую кнопку. Вносим коррективы:

1. “Почтовый ящик” переименовать в E-Mail
2. “Имя Отчество” и “Фамилия” объединить в одно и назвать “Имя”
3. Если очень хочется спросить дату рождения, то оставьте только день и месяц. Не все любят сообщать год рождения.
4. Зачем вам 2 рассылки? Какая мотивация подписаться на 2 рассылки?

Следующий шаг.

1. Хорошо бы этот шаг объединить с предыдущим чтобы при виде пустых полей у покупателя не возникало негативных мыслей
2. Индекс желательно убрать или как минимум сделать НЕобязательным для заполнения
3. Согласно странице “Доставка”, вы доставляете по всей России. Так зачем еще раз предлагать страну?
4. Что вам даст заполнение региона? Его же можно узнать самостоятельно.
5. Кнопка “Сохранить” приводит к тому, что наконец-таки стало возможно выбрать тип оплаты. Можно отказаться от подобного нетривиального способа?
6. Если я уже изъявил желание оформить без регистрации, зачем вы снова предлагаете “Войти в аккаунт”?

Способы доставки .

1. Не сразу понятно, что самовывоз бесплатный. Напишите “Бесплатно” или “0 руб.”

Способы оплаты .

1. Можно ли их сделать чекбоксами? В нынешнем исполнении по клику ожидается не переход на следующий шаг, а дополнительная информация по типу оплаты. Если сделаете чекбоксами, то и не надо будет еще один шаг оформления заказа добавлять.

Пользовательское соглашение .

1. Вот это настоящий “убийца конверсии” в подавляющем большинстве случаев. Вердикт: убрать.

В этой статье, расскажу про такую важную штуку для юзабилити интернет-магазина, как взаимозависимость полей на странице оформления заказа в корзине.

На примере объясню что это такое. Предположим ваш интернет-магазин территориально расположен в Питере, там у вас есть пункт самовывоза или офлайновый магазин. По Петербургу вы делаете доставку курьером и даете возможность самовывоза. Но кроме этого вы осуществляете доставку на всю Россию. Как в этом случае реализовать правильное оформление заказа на сайте, чтобы было удобно всем, и тем вашим клиентам, которые находятся с вами в одном городе (могут воспользоваться самовывозом или курьерской доставкой) и другим, которые могут получить свой заказ только через почтовые службы.

Получается что всех клиентов можно условно разделить на две группы — местные (из Спб.) и иногородние (из любого другого города России).

Зная это, давайте определим какой минимальный набор полей в форме оформления заказа будет нужен в вашем магазине для каждой из этих групп.

Как видите, поля оформления заказа отличаются для местных покупателей интернет-магазина и для иногородних.

Это как раз и есть та самая зависимость полей в корзине, о которой я говорил вначале. После того как покупатель указал свой город, с учетом этого города мы даем ему для заполнения только поля, которые в данном случае нужны и даем на выбор только те способы оплаты и доставки, которые можем принять и осуществить.

Проще говоря, магазин не должен показывать покупателю поля, которые не нужно чтобы он заполнял или выбирал. Например, если магазин осуществляет доставку в Москву только через почтовые службы, но не может сделать доставку курьером, то показывать способ доставки «Курьером» для города Москва не нужно. Далее, если при выборе способа доставки «Грузовозофф» вы технически не можете принять оплату «Наложенным платежом», то не нужно показывать этот способ оплаты для способа доставки через «Грузовозофф». Думаю логика тут понятна.

То же самое с «местными». Не гуманно местного покупателя, который хочет сам заехать за заказом (если он выбрал «Самовывоз») заставлять заполнять поля «Адрес» и «Индекс». Далее, когда «Самовывоз» выбран, мы не должны показывать этому покупателю способы оплаты, недоступные при самовывозе. Будет странно если при самовывозе покупатель выберет способ оплаты наличными через Евросеть.

Несмотря на то что на первый взгляд эта взаимосвязь полей может показаться запутанной, на деле все очень просто. Особенно если такая возможность поддерживается в CMS. Так, в любимой мной CMS 1С-Битрикс, подобное оформление заказа в интернет-магазине, настраиваются мышкой за 10-15 минут. Без проблем можно указать для какого города какие поля выводить, какие службы доставки и способы оплаты подключать и т. п. При этом зависимость необязательно должна быть именно от города из которого покупатель. Зависимость может быть от способа доставки. Выбрал «Самовывоз» — не увидишь в способах оплаты лишних полей. При этом со стороны клиента все логично выглядит, нет вопросов «зачем я заполняю адрес» если заберу заказ сам и т. д.

У «связанных полей» применение может быть не только в улучшении юзабилити оформления заказа. Можно для разных городов выводить разные способы доставки. Например, есть удобная служба доставки, которая возит только в 15 городов-миллионников — можно настроить чтобы только для покупателей из этих городов была доступна эта служба.

Казалось бы, сказанное выше — очевидные вещи. Но во многих интернет-магазинах эти очевидные вещи не применяются и как результат, прием и оформление заказа имеет такое количество полей, заполнив которые можно не только заказать красовки, но и получить загранпаспорт:-).

Все, наверное, читали популярные кейсы, в которых в крупных американских магазинах (Амазон, Заппос, Ебей), поменяв местами две формы, увеличили конверсию в десятки раз. Обычно такие примеры приводят в пользу необходимости делать как можно меньше полей при оформлении заказа.

Кейсы красивые и вызывают интерес. Но в них обычно не бывает предыстории. Возьмем пример, где на странице оформления заказа поменяли две формы местами.

Как вы думаете, их ведь не наугад поменяли, а основываясь на каком-то предположении?

Давайте попробуем привести пример подобного предположения. Как думаете (вспомнив сказанное выше про взаимозависимость полей), есть разница, что нужно выводить на странице оформления заказа в первую очередь поле «Индекс» или поле «Город»? На первый взгляд, разницы нет.

Теперь добавим исходных данных из описанного выше примера, когда магазин находится в Питере. Есть самовывоз, делает доставку курьером только по Питеру, а в другие города отгружает заказы через почтовые и транспортные компании (курьерской доставки нет). Теперь есть разница, какое поле будет первым, индекс или город?

Да, теперь есть. Более того, новая информация сильно влияет на весь процесс оформления заказа. Теперь мы должны сделать ряд полей зависимыми. А именно поле «Город» должно быть первым. Пока поле «Город» не заполнен, поля «Индекс», «Адрес», «Способы доставки» и «Способы оплаты» не показываем. Они появятся только после того, как будет выбран любой город кроме «Санкт-Петербург». Потому что в Питере, как мы говорили выше, магазин доставляет только по самовывозу и курьером. А раз так, то ему не нужны от клиента его индекс и адрес (сразу на два поля меньше заполнять) .

Смотрим дальше, что еще у нас улучшилось. Еще мы не показываем все способы доставки и способы оплаты, а показываем только те, которые реально можем принять. Для Питера, как уже говорилось выше в примере, это при получении оплата наличными или по банковской карте. Для иногородних, чьи заказы будут отгружены через транспортную компанию, оплаты «наличными при получении» конечно не будет. Так мы избавили клиента от лишней путаницы с выбором из вариантов, которые ему заведомо недоступны, а менеджера магазина избавили от лишних, с этим связанных вопросов и недовольств покупателей.

Таким образом, просто добавив на страницу оформления заказа взаимосвязь полей, можно для ряда пользователей сократить количество полей, нужных для заполнения, уменьшить негатив связанный с непониманием некоторых пунктов по оплате и доставке и в результате увеличить конверсию корзины. Никто ведь не сомневается что количество продаж связано с юзабилити корзины?

Посмотрите пост про оформление заказа без регистрации в Битрикс. Он отлично дополняет эту статью.

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

Сегодня статья на тему “Возьми и быстро внедри !”. И, казалось бы, при чем тут простыня в картинке слева? Скоро узнаете

И сегодня хочу затронуть тему, связанную с текстовым и графическим оформлением страниц с информацией о доставке. Ведь это одна из немногих страниц, которая формирует окончательное решение у посетителя о покупке в вашем интернет магазине и многие просто недооценивают её важность.

Уж сколько вариантов подачи этой информации я видел, все больше убеждаюсь, что фантазия ничем не ограничивается.

О чем мы поговорим:

1. Постановка задачи;
2. Как НЕ СТОИТ делать;
3. Простая подача информации (выберите свой вариант внедрения);
4. Хорошие примеры для подражания;
5. Заключение.

А вообще почему это так важно?

Я неспроста заостряю ваше внимание на странице “Доставка”, так как читая эти страницы, посетитель зачастую принимает окончательное решение покупать в вашем интернет магазине или нет. И наша задача сделать так, чтобы это чтение было для него легким и не вызывало сложностей. Не стоит недооценивать контент-маркетинг (которому в моей уделяется достаточное внимание) даже на странице доставки.

Когда встает вопрос о подаче той или иной информации, сразу начинаем думать как это лучше сделать.

Например, я в этом блоге в каждой статье с трудом сдерживаю себя от перенасыщения информацией своих читателей. Практически любую статью после написания я несколько раз редактирую и сокращаю объем выдаваемой информации для лучшего усвоения и минимизации “каши”. Да, на написание каждой статьи в сумме уходит около 10 часов времени, но, уверен, лучше так, чем выдавать каждый день по статье-полуфабрикату.

Поэтому каждый раз когда вы соберетесь на сайт выложить какую-либо информационную страницу (речь не идет о статьях в блоге интернет магазина), то постарайтесь уложить максимум информации в минимум слов или еще лучше графики .

И сегодня мы с вами попробуем уложить эту информацию так, что только при одном взгляде посетитель поймет, что вы успешно доставляете товар в его город или поселок.

Плохой пример

Не самый лучший пример для подражания.

Слева от этого текста вы видите уменьшенный в несколько раз скриншот страницы “Доставка и оплата” с сайта ProSkater.ru.

Скорее всего, эта страница обновлялась по мере поступления информации и открытия новых направлений в доставке, но когда страница в высоту более 13000 пикселей (более 10 экранов длиной!), это уже не кажется смешным.

В данном случае этот интернет магазин может себе позволить подобное, так как уже имеет огромную армию покупателей и последователей, которые уже наизусть помнят все условия и правила доставки с оплатой.

Первый пример четко показывает самую распространенную ошибку при составлении подобного типа страниц: вместить как можно больше информации и получить в итоге нечитаемую простыню текста .

Резюме: не стоит валить все в одну кучу, структурируйте информацию!

Но это все общие советы, которые ничего не значат пока мы не приступим к делу. В следующей главе начнем строить костяк этой страницы и найдем несколько действительно стоящих решений.

Простая подача информации

У каждого интернет магазина свои типы доставки и единого решения, которое покроет все варианты попросту не существует.

Рассмотрим наиболее часто встречающиеся варианты:

Единые правила для всех

Первое впечатление.
При первом же взгляде на страницу “Доставка” у посетителя сразу должно быть понимание того, вы в его город или нет.

Если у вас фиксированная или вовсе бесплатная доставка по всей России, то вам подойдет подобное элегантное решение (живой пример в конце статьи):

Несложно догадаться, что только при одном взгляде на эту страницу станет ясно, что интернет магазин предоставляет доставку по всей стране и абсолютно бесплатно. Да, можно об этом написать и текстом, но изображением куда эффективнее, да и пользователи-визуалы вас тоже оценят по достоинству

Призыв к действию!
В конце страницы обязательно разместите ссылку или кнопку, призывающую к дальнейшим действиям. Обычно это простая ссылка с текстом “Перейти к покупкам”, которая ведет на главную страницу.

Вариант №1. Только курьер.

Если у вас только курьерская доставка по своему и дополнительным городам, то зачастую достаточно просто перечислить эти города в тексте описания.

Пользователь, попадая на эту страницу, сразу видит карту с нанесенными на неё городами. И если он видит свой город, то взгляд падает ниже, где уже стоят ссылки на подробные условия по каждому городу, которые расположены на этой же странице чуть ниже.

Если вы решите использовать интерактивные Google карты, то имеет смысл воспользоваться Info Windows для Google Maps. Пример:

В каждом городе, где есть курьерская доставка, разместите подобный маркер и во всплывающем окошке вы можете разместить любую информацию: скорость доставки, время доставки и прочие условия. Более подробно о Google Maps API можно почитать .

К счастью, мало кто из интернет магазинов работает только с курьерской доставкой и обычно видов доставки существенно больше. В следующем примере мы добавим .

Вариант №2. Курьер и самовывоз.

В случае если вы работаете как с курьерской доставкой, так и с самовывозами по всей стране, то предлагаю слегка модифицировать первый вариант.

В этом случае можно, скорее всего, тоже обойтись текстовой страницей с интерактивной картой в самом начале.

Опять же посетители после попадания на страницу будут видеть интерактивную карту, на которой отмечены города. Кликнув на свой город, посетитель сразу может посмотреть какие опции для него доступны: курьер, самовывоз или и то, и другое.

Вариант №3. Курьер, самовывоз и почта.

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

Изменения:

1. При попадании на страницу доставки пользователь должен сразу понимать, что доставка осуществляется по всей России;
2. Давайте сразу отделим Почтовую доставку от других способов. И для этого разделим информацию на вкладки.

Первая вкладка “Курьерская доставка и самовывоз” полностью взята из варианта №2. А вот вторая вкладка полностью подготовлена для Почты России:

Те, кто живет в отдаленных регионах, знают, что к ним, в основном, возит только Почта России. И именно поэтому мы сразу предлагаем посмотреть:

1. Стоимость доставки;
2. Условия доставки;
3. А также контрольные сроки доставки на схеме.

То есть при попадании на эту страницу мы ответим на вопросы пользователя еще на первом экране монитора. Это ведь прекрасно!

Иные схемы доставки.

Эта статья покрывает общий случай, но все равно у каждого интернет магазина свои способы доставки до покупателя и на всех сразу не напасешься

Поэтому вот несколько советов, которые помогут оптимизировать подачу информации:

1. Основная рекомендация: используйте вкладки для разделения информации. Если вы хотите добавить описание доставки транспортными компаниями, то лучше разместить эту информацию на отдельной вкладке;
2. По опыту, чем проще общая схема доставки, тем легче работать. Некоторые внедряют калькуляторы доставки Почтой России и упорно для этого забивают вес товаров в , а некоторые просто ставят фиксированную стоимость доставки Почтой России. Средняя себестоимость доставки у обоих получается примерно одинаковая;
3. Старайтесь сделать так, чтобы при первом взгляде на страницу доставки у пользователя сразу был ответ на его вопрос: “Доставите ли вы в мой город?”;
4. В конце страницы разместите ссылку “Перейти к покупкам”.

Несколько хороших примеров

Думаю, что будет неплохо разместить в конце несколько отличных примеров реализации страниц “О доставке”:

Ecco

Система вкладок в действии. Ссылка .

Здесь уже несколько иной подход. Достаточно ввести свой индекс или город и интернет магазин выведет все возможные способы доставки. Ссылка .

Exclusivedog

Посмотрите как элегантно описана доставка. При одном взгляде на баннер, других вопросов просто не возникает . Ссылка .

Лишним тому подтверждением будет карта скролла этой страницы:

Как видите, большинству пользователей достаточно графического отображения условий доставки и до подробных условий доставки не все доходят. Тем более что в этом интернет магазине они очень просты.

Заключение

Очень вам советую не пренебрегать страницей “Доставка” и полноценно её оформить. Эту страницу изучают практически все, кто хочет совершить заказ в вашем интернет магазине.

Поэтому проведите её аудит и сразу же воспользуйтесь рекомендациями из только что прочитанной статьи. Сделайте доброе дело своим посетителям

Тема правильного оформления страницы доставки актуальна всегда. Алгоритмы поисковых систем обновляются каждый месяц, и ключевые страницы сайтов (а среди них и «Доставка») обрастают все новыми фишками и функционалом. Можно реализовать сотню лайфхаков в борьбе за место в ТОП 10 выдачи, однако если на сайте будет непрозрачная, неинтересная или неполная информация о доставке, все равно на нем вряд ли сделают покупку. Сегодня важно уже не наличие страницы доставки на сайте, а то, завоюет ли она доверие посетителей. Чек-листом по оформлению страницы доставки Ксения Ситникова , менеджер отдела поискового продвижения i-Media, поделилась с SEOnews.ru .

Представьте, что вы разработали информативный и красочный макет главной страницы, сделали перелинковку, правильно структурировали и залили ассортимент, оформили интерактивный каталог с проработанными карточками товаров…

И на этапе покупки выясняется, что о доставке покупатель узнает только при звонке в колл-центр по мобильному номеру. Или, например, типовая страница ‒ это полотно текста на шесть тысяч символов.

Уйдете вы с такого сайта или останетесь?

«А у вас в магазине доставка есть?»

Коллеги-маркетологи из Baymard Institute провели глобальное исследование ста крупнейших интернет-магазинов, в которое также вошел контент-анализ описаний дополнительных услуг. Выяснилось, что оформление страницы доставки сильно влияет на конверсию и поведенческие факторы.

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

1. Прозрачная стоимость доставки

Следите за новостями диджитал-индустрии в наших аккаунтах в