Пользовательский опыт интернет-магазинов: эффективное оформление заказов от ASOS. Советы по юзабилити: страничка оформления заказа в интернет-магазине

Процедура покупки товара в нашем Интернет-магазине очень проста и состоит из нескольких шагов.

1. Выбор товара

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

2. Добавление товара в корзину

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

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

3. Оформление и подтверждение заказа

После того как Вы окончательно сформировали и проверили свой заказ нажмите на кнопку «Оформить заказ».

Введите информацию :

* ФИО получателя,
* адрес доставки,
* контактные данные.

Выберите вариант доставки и способ оплаты . Поля, помеченные звездочками, обязательны для заполнения. Далее, для завершения процедуры оформления заказа Вам нужно нажать кнопку «Оформить заказ» .

Внимание! Неправильно указанный номер телефона, неточный или неполный адрес могут привести к дополнительной задержке! Пожалуйста, внимательно проверяйте Ваши персональные данные при оформлении заказа.

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

Оплата покупателем счета продавца автоматически означает согласие покупателя с приведенными правилами приобретения товара в фирме «Сезон».

4. Работа с заказом

Заказы обрабатываются с 10.00 до 18.00.

В выходные и праздники возможна задержка обработки заказа.

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

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

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

Важно! Срок оплаты товара - сутки с момента подтверждения заказа операторм интернет-магазина. На это же время резервируется товар. По истечении этого срока, если от Вас не поступит оплата, резерв товара аннулируется.

Наблюдали ли вы когда-нибудь в «Вебвизоре» запись, как клиент добавляет товар в корзину, начинает заполнять данные заказа и… покидает сайт? Эта сцена по драматичности может сравниться с финальными кадрами «Титаника». Сегодня поговорим о том, что заставляет пользователя покинуть сайт без покупки и как это исправить.

Согласно исследованию 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

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

Главной посыл исследования и нашей статьи - почти всегда можно сделать покупку на сайте удобнее.

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

Какие усовершенствования корзины значительно увеличивали конверсию на вашем сайте? Чему советуете уделить внимание?

Постоянно происходят какие-то изменения. Сильная конкуренция не дает стоять на месте тенденциям развития интернет-маркетинга.

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

Сегодня мы поговорим о, казалось бы, такой простой вещи, как оформление заказа в интернет магазине. На каждом сайте есть такой раздел. Однако далеко не каждый сайт может похвастаться, что работа этой функции у него отлажена идеально и приносит максимум покупателей. Чаще всего случается как-раз-таки наоборот: магазины вообще «не заморачиваются» по этому поводу. Ну, есть форма заказа и есть, что еще надо.

Так вот, это очень большое заблуждение. Чем сложнее и непонятнее как сделать заказ тем больше шансов, что порядка 2/3 посетителей не станут вообще «заморачиваться» с приобретением товара в Вашем интернет магазине.

Основные правила форма оформления заказа

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

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

С точки зрения человеческой психологии и привычки, кнопки положительного действия («оформить заказ», «подтвердить» и пр.) должны располагаться справа и быть привлекательными и заметными для глаз клиента. Кнопки серии «возврат», «отмена» и др. должны быть слева и не должны выделяться на общем фоне, чтобы не было стимула их нажимать.

Если при заполнении формы Вы просите от клиента какие-то его личные данные, всегда объясняйте, для чего они необходимы: имя и фамилия – для оформления документов на товар, номер телефона – для связи по вопросам доставки, электронный адрес – для подтверждения заказа.

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

Перед Вами образец неправильного оформления, где в процессе покупки требуется внезапная регистрация. Но это Ozon.ru- самый крупный гипермаркет России и здесь он диктует свои правила.

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

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

И, наконец, самый идеальный вариант – это когда Вы конкретно указываете все сроки доставки, ее конкретную стоимость. Другими словами, фраза «доставка осуществляется в течение 5-15 дней» звучит неопределенно, не вызывая никаких положительных эмоций. Надпись же «товар будет доставлен 1 сентября» порадует покупателя гораздо больше. К примеру, мне очень нравиться в интернет магазинах такой прием, когда поле доставки автоматически определяет по IP адресу мой город и сразу расчитывается стоимость доставки товара и время.

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

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

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

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

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

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

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

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

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

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

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

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

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

Важно доходчиво разъяснить детали , а не просто указать цену и переложить остальное на сотрудников кол-центра.

«Доставка ‒ 450 рублей в пределах МКАД, но это если сейчас закажете, а если через час, то стоимость будет уже 600, а если вы за МКАДом, то 1200. Как, вам еще нужно привезти в определенное время с подъемом на 7 этаж и за МКАД? Тогда вам надо почитать о специальных тарифах в pdf-файле. Да, скачиваете ‒ и на четвертой странице таблица с тарифами…» (Из разговора с оператором кол-центра интернет-магазина бытовой техники и электроники).

Избегайте монолитных текстов не только в каталоге и карточках товаров, но и на странице доставки. Как лучше не делать:

И так тоже:

Минусы оформления из последнего примера:

• Страны по зонам (Европейская 7, 8, UK без Шотландии, UK завтра, UK послезавтра), а не тариф для отдельной страны или даже города ‒ все в одном;
• Слишком много текста (на скриншоте уместилось только 30% информации, размещенной на странице!);
• Нет данных о формировании стоимости (почему именно 40 фунтов, конечная ли это цена) и точной даты (7-14 дней ‒ довольно сильный разброс).

Если магазин отправляет грузы в разные регионы, необходимо разработать адекватный функционал для клиентов на сайте. Например, на сайте Lamoda это реализовано так: выбираешь город, затем способ доставки (курьер, самовывоз, почта), выбираешь время (сегодня, завтра, послезавтра), смотришь на условия и сумму заказа. Если она выше 2 000 рублей ‒ приятный бонус: доставка бесплатна, если нет ‒ все еще остается выбор из двух вариантов.

Помимо прочего, это преимущество прямо указано в шапке сайта: «Доставка на следующий день в 60 городах России».

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

2. «Бесплатная доставка», «Срочная доставка» ‒ выделить!

Это то, что вызывает доверие и мотивирует смотреть каталог дальше, делает магазин конкурентным на рынке, цепляет пользователя с первых секунд. Не забывайте, что нужно ярко выделять слова БЕСПЛАТНО и СРОЧНО. Пример: сайт Drugstore.com («Бесплатная доставка на заказы от 25 долларов ‒ КАЖДЫЙ ДЕНЬ!»).

Еще один удачный пример реализации страницы доставки ‒ на сайте Eapteka.ru:

• можно выбрать удобный интервал времени доставки;
• есть информация о ценах в зависимости от времени и удаленности от МКАД;
• выделены в отдельный блок преимущества круглосуточной доставки;
• есть бесплатная доставка при заказе на сумму от 1500 руб.;
• есть информация о самовывозе.

3. Адреса пунктов самовывоза: главное ничего не забыть

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

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

В случае если филиалов больше 10, лучше оставить на странице доставки только карту (см. п. 4) или хотя бы прикрутить поиск по городу/метро (но ни в коем случае не текст с вертикальной полосой прокрутки!). Это позволит при выборе определенного филиала получить подробную информацию о нем.

4. Карта для наглядности

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

5. Способы оплаты (коротко)

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

6. Простой калькулятор доставки

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

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

7. Не забудьте удостовериться, что страница существует

Например, на момент написания статьи на сайте «Евросети» выдавалась 404-я ошибка при попытке открыть страницу «Доставка и оплата». Но сейчас проблема решена.

Лайфхаки, связанные с доставкой

1. Увеличиваем средний чек

Как только вы нажмете на кнопку «Добавить в корзину» на сайте BrewDog.com, всплывет интерактивная форма. Она наглядно показывает, что доставка в любом случае обойдется вам в 5 фунтов ‒ так почему бы не купить до 24 товаров с доставкой всего за 5 фунтов?

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

2. Покупатели любят выбирать из нескольких вариантов

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

Вот решение, которое предлагает Amazon, но оно доступно и многим средним сайтам. Во-первых, покупатели сайта Amazon в США могут вступить в Amazon Prime Community ‒ специальный привилегированный клуб ‒ и получать товары бесплатно уже на следующий день после заказа. Во-вторых, им дают возможность самим выбрать удобное соотношения скорости, цены и времени доставки.

3. Сообщите о доставке везде, где это уместно!

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

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

• Главная страница:

• Страница доставки:

• Страница каталога:

• Страница карточки товара:

Выводы

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

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

Сайт ‒ это только первая остановка на пути пользователя к доверительным отношениям с вашим брендом. Реальное взаимодействие начинается после фразы «Ваш заказ успешно оформлен».