Пользовательский опыт интернет-магазинов: эффективное оформление заказов от ASOS. Инструкция оформления заказа Используются «помощники» для заполнения полей

Выбор товара

Найти товар на сайте «М.Видео» можно несколькими способами: окно поиска в правом верхнем углу, меню, каталог, сравнение нескольких товаров, подбор товара по параметрам.

Если вам нужна помощь в выборе товаров, почитайте наши .

Способ 1. Поиск на сайте

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

Способ 2. Фильтры

Чтобы сузить круг результатов, используйте фильтры, а чтобы найти нужный товар быстрее — сортировку.

· по производителю;

· по цене;

· по акциям.

Способ 3. Товарный каталог

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

Способ 4. Подбор по параметрам

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

Способ 5. Сравнение товаров

Чтобы сравнить несколько товаров, отметьте каждый из них галочкой в поле «Сравнить» и нажмите кнопку «Сравнить» — вы увидите таблицу, показывающую различия и сходства в характеристиках между выбранными товарами. В таблицу можно добавить не более 5 товаров.

Оформление заказа

Шаг 1

Необходимо выбрать город, в котором вы находитесь или хотите совершить покупку.

Шаг 2

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

Шаг 3

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

Шаг 4

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

Зарегистрированные пользователи могут:

· отслеживать статус заказа;

· получать спецпредложения и приглашения на закрытые распродажи;

· накапливать и списывать Бонусные рубли;

· оформлять кредит онлайн;

· сохранять историю заказов.

· добавлять товар в избранное.

Шаг 5

Укажите номер Бонусной карты — и мы начислим Бонусные рубли за вашу покупку.

Не забудьте проверить, зарегистрирована ли ваша карта.

Выберите способ получения заказа и тип оплаты.

Шаг 6

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

В этом случае нужно оформить заказы последовательно.

Шаг 7

Проверьте данные и нажмите на кнопку «Закончить оформление».

Готово: ваш заказ создан!

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

Шаг 8

Как это сделать?

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

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

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

Если есть сомнения в подходах - .

Что делает оформление заказа приятным?

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

Полезные фичи:

• • Поиск адреса или предиктивный ввод текста.

• • Копирование адреса доставки в адрес платёжных данных.

• • Просьба создать аккаунт появляется в конце, когда пользователь готов сделать покупки.

• • Оформление заказа без регистрации.

• Понятные сообщения об ошибках, чтобы пользователь быстро смог исправить их.

Источники проблем:

• • Принуждённая регистрация перед оформлением заказа.

• • Слишком много шагов.

• • Ненужные поля формы.

• • Непонятные сообщения об ошибках.

• Проблемы с подтверждением формы. Например, строгие правила формата времени.

Лучшие примеры форм оформления заказа

Domino’s

Сайт Domino’s сделал упор на мобильность. Он распознаёт типы устройств и адаптируется под них.

Форма оформления заказа — приятная и легкая в использовании: нет регистрации, простые поля заполнения, сохранённые платёжные данные для повторных покупателей.

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

Также у них есть приложение, в котором можно сделать заказ одним щелчком. Просто открываете приложение, ждёте 10 секунд, и ваша пицца направляется к вам.

Lowe’s

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

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

Предложите зарегистрироваться в конце процесса оформления заказа. На сайте Lowe’s можно зарегистрироваться, перед тем как нажать на кнопку ‘сделать заказ’. Здесь не должно возникнуть трудностей.

Threadless

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

Вся форма оформления заказа находится на одной странице. И это очень удобно.

Amazon

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

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

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

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

Schuh

Их команда отлично понимает важность юзабилити и постоянно улучшает её.

Посмотрите на скриншот ниже, в чём прелесть данной страницы:

• • Безопасность. Вверху размещено подтверждение о безопасности страницы и контактные данные компании.

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

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

• • Простая регистрация. Schuh не интересна регистрация на данном этапе, он предложит её позже.

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

• • Способы оплаты. Визуальное напоминание о том, с помощью чего пользователи могут оплатить заказ.

• Форма по центру. На странице есть несколько отвлекающих элементов, но фокус сконцентрирован на совершении покупки.

Crate & Barrel

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

Nordstrom

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

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

Superbalist.com

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

Потом пользователя просят создать пароль, прежде чем продолжить.

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

Что примечательно, на сайте Superbalist добавлено много мелкого текста, который объясняет условия доставки и что вписывать в поля.

AO.com

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

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

Joseph Joseph

Еще один сайт с красивым дизайном формы оформления заказа — Joseph Joseph . Страница, которая была выбрана в качестве примера — форма регистрации/оформление заказа без регистрации.

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

Хорошие примеры, но есть куда расти…

Сайт Zappos — хороший пример, они уделяют внимание обслуживанию и лояльности клиентов.

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

Возможно, в случае компании Zappos, репутация бренда снимает этот барьер. Интересно, пробовали ли они что-то другое.

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

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

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

Boots

Эта форма оформления заказа — самая худшая из представленных.

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

Заключение

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

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

Есть ли у вас примеры форм оформления заказа лучше представленных? Если да, поделитесь ими с нами в комментариях под постом…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но так ли обстоят дела на самом деле? Предлагаем вам ознакомиться с некоторыми формами оформления заказа на коммерческих сайтах.

Примеры страниц оформления заказа на коммерческих сайтах

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

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

Данную информацию у пользователя можно запросить на странице подтверждения заказа, автоматически сгенерировать и только потом предложить пользователю «создать пароль». И зачем вынуждать пользователя регистрироваться еще до решения что-либо у вас купить, когда весь процесс можно «провернуть» почти незаметно в ходе оформления заказа?
Вот пример того, как компания «ASOS» упростила свою регистрационную страницу с:

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

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

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

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

Компания «Macy’s»
Вот еще один прекрасный пример – приятная, понятная и не перегруженная страница, которая обращает внимание пользователей на ключевые моменты:

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

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

Компания «Walmart»
На своей странице оформления заказа компания «Walmart» предлагает гостям опции по созданию аккаунта либо по дальнейшему оформлению заказа без его создания. Т.е. у нового покупателя есть выбор – сэкономить время «здесь и сейчас» либо в будущем:

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

Компания «Sears»
Интересный подход к данному вопросу проявила компания «Sears», которая решила, что страница входа в систему для постоянных клиентов им не нужна. Поэтому компания отправляет всех своих пользователей сразу на страницу оформления заказа.
Так выглядела их страница оформления заказа раньше:

А так она выглядит сейчас:

Все предельно понятно (необходимо ввести адрес доставки, имя получателя и email), нет никаких барьеров для оформления покупки.

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

(Рис. Пользователя просят ввести email и ненавязчиво спрашивают, есть ли у него пароль для входа на сайт)

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

(Рис. Войти, введя адрес эл. почты и пароль. Зарегистрироваться, введя адрес эл. почты, почтовый код и номер клубной карты)

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

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

(Рис. Пользователя просят ввести email, на который будет выслана ссылка по дальнейшему оформлению заказа)

Компания «Boots»
Ранее мы уже рассматривали сайт компании «Boots», у которой обязательная регистрация перед оформлением заказа может быть одним из факторов, негативно отражающимся на уровне продаж:

(Рис. Войти в систему оформления заказа через email и пароль или зарегистрироваться на сайте, прежде чем начать делать покупки)

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

(Рис. Посетителю предлагают ввести электронный адрес и указать, является он новым покупателем (тогда надо щелкнуть по ниже располагающейся желтой кнопке) или уже пользовался услугами «Amazon» (тогда вводится пароль)).

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

(Рис. Нового покупателя просят ввести имя, адрес эл. почты, номер контактного телефона (опционально) и пароль).

Компания «House of Fraser»

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

(Рис. Просят войти или продолжить оформление заказа в качестве гостя, указав для начала лишь свой email).

Компания «American Apparel»

Компании «American Apparel» удалось на одной страничке разместить не только информацию о заказах (список покупок) и их стоимости, но и функцию «войти через свой логин» и оформление заказа в статусе гостя.
Однако все это сделано настолько «вкусно», что покупатель нисколько не запутается и его ничто не будет отвлекать от покупки:

(Рис. Оформление заказа: 1) список и стоимость заказа; 2) войти через свой логин или в качестве гостя указать детали доставки)

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

Например, если не брать во внимание ввод номера с клубной карты (что в любом случае опционально), формы по оформлению и подсчету стоимости заказа таких компаний, как «House of Fraser» и «Tesco», требуют введения одинаковой информации.

Вот только «Tesco» своей манерой реализации превратили это в барьер, а «House of Fraser» не создают никаких препятствий и направляют всех пользователей сразу на страницу оформления заказа без обязательной регистрации. Какая тактика лучше? Как по мне, вторая…

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