Библиотека маркетолога

Процесс оформления покупки в интернете: обзор и лучшие практики

MasterCard и UsabilityLab

Оглавление

Об исследовании

Во время исследования мы протестировали 24 сервиса и магазина, 14 платежных провайдеров и банков, участники платили во время исследования картами 12 банков.

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

Корзина

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

Критичность: низкая

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

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

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

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

М.Видео: Этап добавления в корзину реализован с лишним шагом. Со страницы невозможно сразу перейти к оформлению заказа.

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

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

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

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

Информация о том, что товар добавлен в корзину, должна быть очевидна для пользователя

Критичность: средняя

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

Кнопка добавления в корзину должна визуально меняться при добавлении нового товара

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

Foodpanda: Кнопка добавления в корзину практически не меняется при добавлении

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

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

Спортмастер: При добавлении товара в корзину вид кнопки меняется, но она все равно остается активной.

На сайте магазина Enter при нажатии на кнопку «В корзине» название меняется, и кнопка становится неактивной. Возможность повторного добавления сведена к минимуму.

Enter: При добавлении товара в корзину, кнопка сразу же меняет свое название. При повторном нажатии на кнопку происходит переход в корзину.

Повторное нажатие на кнопку «В корзину» не должно добавлять товар в корзину. Повторное нажатие на кнопку должно осуществлять переход на страницу корзины

На сайте магазина Ozon при добавлении товара в корзину название кнопки изменяется на «В корзине», повторное нажатие на кнопку переводит в корзину.

Ozon: Кнопка добавления в корзину меняет название и при нажатии переводит на страницу корзины.

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

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

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

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

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

Критичность: высокая

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

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

РИВГОШ: Описание товара в корзине не полное и не содержит важной для принятия решения информации. Наименование товара и фотография не являются ссылками.

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

Наименование товара должно быть кликабельным. При нажатии должна открываться страница с его подробным описанием

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

В корзине, как и на странице товара, должна быть представлена информация о наличии товара

Большинство магазинов информирует пользователя о том, какое количество товаров доступно для заказа.

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

На сайте магазина РИВГОШ пользователь узнает о том, что товара вообще нет в наличии в его городе, только после авторизации при выборе способа доставки.

РИВГОШ: Пользователь узнает о том, что товара нет в наличии в магазинах его города только после авторизации на сайте при выборе способа доставки.

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

Zara: Информация о том, что товар есть в наличии представлена на странице корзины.

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

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

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

Ситилинк: На странице корзины указана информация о наличии товара в магазинах.

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

Кнопка продолжения оформления заказа должна быть визуально выделена на странице

Критичность: средняя

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

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

Ситилинк: Кнопка продолжения оформления заказа не выделена на странице.

На сайтах магазинов Buket и РИВГОШ кнопки с разными действиями визуально практически не отличаются друг от друга. Понять, какая из кнопок продолжает оформление заказа, можно только прочитав текст на кнопке.

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

РИВГОШ: Кнопки не отличаются друг от друга, не прочитав текст на кнопках, невозможно определить их назначение.

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

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

Действие, которое произойдет при нажатии на кнопку, должно быть очевидно для пользователя

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

РИВГОШ: На странице три кнопки оформления заказа. Для пользователя не очевидно, совершают ли они одинаковые действия.

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

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

Критичность: средняя

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

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

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

РИВГОШ:

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

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

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

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

Критичность: средняя

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

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

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

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

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

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

Утконос: На странице корзины есть пометка о том, что стоимость заказа указана без стоимости доставки.

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

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

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

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

Возможность воспользоваться скидкой или промкодом должна находиться на странице корзины

Критичность: средняя

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

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

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

Buket: Поле ввода купона находится на последнем шаге оформления заказа.

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

Поле ввода подарочной карты, промокода или скидки не должно быть открыто по умолчанию

Критичность: низкая

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

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

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

Lamoda и Утконос: Поле промокода открыто по умолчанию, пользователи ищут возможность получить промокод и переходят на сторонние сервисы.

На сайте магазина Enter поле ввода скидки выделено на странице и привлекает внимание пользователей.

Enter: Поле ввода скидочных купонов открыто по умолчанию и выделено на странице.

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

Enter: Поле ввода карты лояльности выделено радиокнопкой, пользователи не понимают, как отказаться от ее использования.

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

М.Видео: Поле ввода промокода скрыто за ссылкой. Внимание пользователей, у которых нет скидки, не привлекается.

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

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

Критичность: низкая

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

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

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

Ситилинк, Спортмастер, Lamoda: Рядом с полем ввода промокода нет информации о том, как его получить.

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

Wikimart: Рядом с возможностью ввода промокода указана подсказка о том, как именно можно ее получить.

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

Наименование поля для ввода промокода или карты лоялности должно передавать суть поля

Критичность: низкая

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

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

Например, на сайте сервиса Foodpanda поле ввода купона названо «Voucher», большинство респондентов не понимали, что именно требуется ввести. Так как в подсказке написано слово «Код», два респондента ввели в него код безопасности банковской карты.

Foodpanda: Наименование поля написано по-английски и не передает суть поля.

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

Ситилинк, М.Видео и Lamoda: Респонденты без труда понимают название поля.

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

ТОвары должны сохраняться в корзине до завершения оформления заказа

Критичность: высокая

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

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

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

Также товары должны сохраняться в корзине при временном выходе пользователя с сайта.

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

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

Критичность: средняя

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

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

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

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

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

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

Примеры ниже взяты с сайтов магазинов Wikimart и Enter.

Wikimart и Enter: Удаление из корзины находится рядом с изменением количества товаров в корзине.

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

На сайте сервиса Foodpanda удалить товар из корзины можно только изменив количество товаров в корзине до 0. Респонденты не сразу находили эту возможность.

Wikimart и Enter: Функция удаления из корзины находится рядом с изменением количества товаров в корзине.

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

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

Авторизация

На сайте должна быть реализована возможность заказа без регистрации

Критичность: средняя

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

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

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

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

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

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

Необходимость переходить в почту или вводить СМС-код для подтверждения регистрации замедляет оформление заказа и отвлекает пользователя.

Подтверждение контактных данных связано с риском технических проблем и тем, что заказ не будет оформлен. На сайте Ticketland подтверждение номера телефона обязательно для продолжения заказа. Во время исследования один из респондентов столкнулся с тем, что СМС-сообщение с кодом подтверждения не приходило в течение 40 минут, из-за чего респондент не смог завершить заказ.

Ticketland: Все контактные данные должны быть подтверждены кодом.

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

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

Kassir: Реализована возможность заказа без регистрации. Подтверждение контактных данных для оформления заказа не требуется.

Возможность заказа без регистрации должна быть заметна на странице

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

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

Holodilnik: Возможность совершения заказа без регистрации находится внизу страницы.

На сайте магазина Спортмастер также есть возможность заказа без регистрации. Однако как и все остальные опции на сайте, когда она не выбрана, покупка без регистрации оформлена незаметно (серым шрифтом на сером фоне), а потому кажется пользователям неактивной.

Спортмастер: Функция заказа без регистрации кажется пользователям неактивной.

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

М.Видео: Возможность заказа без регистрации заметна и выделена на странице как одна из основных.

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

Регистрация пользователя может осуществляться автоматически на основании введенных контактных данных

Критичность: средняя

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

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

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

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

При покупке электронных товаров регистрация должна происходить автоматически, «фоново» при первой покупке

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

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

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

На сайте магазина ЛитРес регистрация происходит автоматически при первой покупке. Это остается незаметным для пользователя, так как никаких уведомлений о регистрации во время и после покупки не возникает.

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

При всех перечисленных достоинствах у фоновой регистрации есть ряд недостатков.

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

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

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

Функционал заказа "без регистрации" не должен быть ограничен

Критичность: средняя.

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

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

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

Holodilnik: Варианты оплаты заказа ограничены для незарегистрированных пользователей.

Если какой-то из видов оплаты не доступен без регистрации, необходимо сообщать об этом заранее

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

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

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

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

Все способы авторизации должны быть заметны на одной странице

Критичность: средняя

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

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

Ticketland: Опции регистрации и входа через социальные сети не представлены на странице.

На сайте магазина М.Видео на странице авторизации отсутствует ссылка на регистрацию. Респонденты находили ее только в верхней части страницы.

М.Видео: На странице присутствуют не все виды авторизации.

На странице должны быть описаны преимущества различных типов авторизации

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

На сайте магазина Holodilnik описаны разные типы авторизации и их преимущества, но текст не структурирован и набраны мелким шрифтом, из-за чего никто из респондентов их не прочел.

Holodilnik: Описание преимуществ регистрации плохо структурировано и набрано мелким текстом.

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

Аэроэкспресс: Описаны недостатки покупки без авторизации. Отсутствует возможность зарегистрироваться.

На сайте магазина Связной перед выбором способа авторизации описаны преимущества регистрации.

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

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

Регистрация должна быть встроена в процесс оформления заказа

Критичность: средняя

Отделённая от покупки регистрация на сайте не создает ощущения приближения к покупке.

На сайте магазинов Утконос, М.Видео, Ticketland процесс регистрации не встроен в процесс оформления заказа, для регистрации на сайте нужно совершать отдельные действия (например, перейти по ссылке наверху страницы). Все это отнимает время пользователя, кажется тратой времени.

Регистрация должна привести к автоматической авторизации, после чего необходимо продолжить оформление заказа

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

Аэроэкспресс: Вход не осуществляется автоматически после регистрации.

Если для регистрации необходимо подтвердить контактные данные, этот этап также должен быть встроен в процесс регистрации

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

Утконос: Для подтверждения номера телефона после регистрации нужно совершать лишние действия.

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

Ticketland: Получение кода подтверждения встроено в процесс регистрации.

После завершения регистрации содержимое корзины должно сохраняться

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

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

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

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

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

Критичность: высокая

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

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

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

М.Видео: Регистрация на сайте возможна на странице подтверждения заказа.

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

М.Видео: На странице авторизации присутствует вариант «Продолжить без регистрации», но нет возможности зарегистрироваться.

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

Та же ситуация на сайте Wikimart, при этом у пользователей не возникает проблем с регистрацией, так как слово «Регистрация» не используется на этапе ввода контактных данных.

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

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

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

Критичность: высокая

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

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

Аэроэкспресс: В регистрационной форме используется поле «Логин».

Практически на всех остальных сайтах основным идентификатором для входа является адрес электронной почты.

Поле для авторизации должно называться не «Логин», а «Адрес электронной почты» или «Телефон»

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

Ozon: В качестве идентификатора пользователя используется адрес электронной почты, но поле называется «Логин».

Вывод. Основным идентификатором для регистрации в сервисе должен быть адрес электронной почты или телефон. Поле ввода должно называться «Адрес электронной почты» или «Телефон». Для поля «Телефон» при авторизации необходимо указывать формат ввода.

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

Критичность: низкая

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

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

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

Утконос: Сообщение об ошибке дает нерелевантные пользовательской ситуации инструкции.

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

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

На странице ввода логина и пароля для входа на сайт должна быть предоставлена возможность восстановления забытого пароля

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

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

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

Рядом с полем ввода контактных данных доолжна присутствовать уточняющая информация

Критичность: средняя

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

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

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

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

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

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

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

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

М.Видео: Согласие на рассылку скрыто в условиях соглашения на обработку персональных данных и является обязательным пунктом для продолжения оформления заказа.

Утконос: Невозможно зарегистрироваться, не согласившись на рассылку, спрятанную в соглашении о персональных данных.

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

Выбор способа оплаты

Название способа оплаты должно передавать его суть

Критичность: средняя

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

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

Название вида оплаты должно быть однозначным

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

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

Ведомости: Название пункта в списке неоднозначно.

Варианты способов оплаты должны быть сгруппированы: предоплата, оплата при получении товара и кредит

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

Связной: Список опций не структурирован, выбор нужного варианта вызывает затруднения.

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

Enter: Способы оплаты разделены на группы.

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

Способы оплаты должны быть отсортированы по популярности

Критичность: низкая

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

По популярности должны быть отсортированы как типы оплат, так и конкретные виды внутри них.

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

Сотмаркет: Варианты в списке отсортированы по популярности.

Способы оплаты должны быть разделены на смысловые группы

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

ЛитРес: Варианты разделены на группы. Наименования групп не соответствуют их содержанию.

Самый популярный способ оплаты может быть выбран по умолчанию

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

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

Ivi: Выбор сделан по умолчанию, у пользователей нет необходимости совершать лишние действия.

На сайте Афиши при оплате возможны два варианта: «Банковской картой» и через сервис «Деньги@МаИ.Р1и», но наиболее распространенный способ оплаты выбран по умолчанию.

Афиша: В списке по умолчанию выбрана наиболее популярная опция.

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

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

Steam: По умолчанию пользователю предлагается оплатить покупку «привязанной» картой.

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

Пользователь должен быть предупрежден о возможном изменении общей суммы заказа при разных способах оплаты

Критичность: высокая

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

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

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

М.Видео: При оплате картой предоставляется скидка, но эта информация на странице отсутствует

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

Zara: В приложении не указана комиссия при оплате.

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

Holodilnik: Рядом с наименованием платежного сервиса указана комиссия.

На сайте магазинов Юлмарт и Enter представлена информация даже о нулевой комиссии.

Юлмарт: Размер комиссии указан для всех платежных сервисов, включая те, которые не взымают комиссию.

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

Вывод. Нужно заранее предупреждать покупателя о возможных изменениях в сумме заказа, как о скидках, так и о комиссиях.

Рядом со способами оплаты можно располагать пиктограммы и логотипы платежных сервисов

Критичность: низкая

Наличие пиктограмм и логотипов сервисов для оплаты облегчает восприятие и сокращает время выбора.

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

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

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

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

Buket: Выбор способа оплаты облегчается за счет использования логотипов финансовых сервисов.

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

ЛитРес: Выбор представлен только пиктограммами, это облегчает поиск в большом списке.

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

Не следует предлагать выбор платежной системы при выборе способа оплаты банковской картой

Критичность: низкая

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

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

Эта проблема встретилась в приложениях Steam и Zara. В приложении Steam выбор осложнен из-за использования мелкого текста в списке и отсутствия логотипов платежных систем.

Steam: При выборе способа оплаты необходимо выбрать тип банковской карты.

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

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

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

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

Афиша: При выборе способа оплаты необходимо выбрать только тип платежа.

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

Выбор способа доставки

Количество полей вводв в адресе доставки должно быть минимизировано

Критичность: средняя

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

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

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

ZARA: Из-за наличия поля «Индекс» пользователи считают, что заказ будет доставлен почтой.

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

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

Enter: Станция метро определяется автоматически, но при этом пользователь может отредактировать это поле.

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

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

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

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

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

Критичность: высокая

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

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

Не на всех сайтах была возможность найти пункт самовывоза на карте. В приложении магазина Ozon, например, возможные пункты представлены списком с одинаковыми названиями. Различия между ними не были понятны, приходилось несколько раз нажимать на иконку «Информация», чтобы узнать, где находится тот или иной пункт.

Ozon: Пункты самовывоза представлены огромным списком, все названия в котором одинаковые.

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

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

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

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

Ozon: В списке представлена цветовая индикация линий метро, список отсортирован по алфавиту по названиям станций.

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

Поле ввода адреса должно позволять ввод адреса вручную и выбор из списка адресов

Критичность: средняя

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

Необходимо дать возможность завершить оформление заказа, даже если адрес доставки не распознан системой.

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

Ситилинк: При вводе адреса в нестандартном формате нельзя продолжить оформление заказа

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

Enter: Адрес можно как напечатать вручную, так и выбрать из списка. Рядом с формой адреса представлена карта, пользователь может убедиться, что адрес определен верно.

В списке адресов не должно быть дублирующихся названий улиц и номеров домов

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

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

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

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

Критичность: средняя

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

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

Юлмарт: В списке отмечены магазины, в которых можно забрать товар прямо сейчас.

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

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

Ориентировочная стоимость доставки должна быть указана на этапе выбора способа доставки

Критичность: высокая

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

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

Enter: Стоимость доставки не указана на этапе выбора способа доставки.

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

М.Видео: На странице уведомление об изменении цены появляется только после выбора способа доставки.

Вывод. Необходимо уведомлять пользователя о том, что цена заказа ©изменится при выборе способа доставки. Делать это необходимо как при выборе способа доставки, так и в начале оформления заказа.

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

Критичность: низкая

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

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

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

Поле ввода имени получателя должно быть предоставлено только после выбора предоплать

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

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

Юлмарт: Форма ввода данных получателя появляется после перехода к оплате и ассоциируется у пользователей с вводом данных плательщика с банковской карты. На странице нельзя отметить,что плательщик и получатель одно лицо.

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

Связной: После выбора онлайн-оплаты необходимо указать имя получателя товара.

Рядом с полем ввода имени получателя должна быть представлена возможность отметить, что получатель и плательщик одно лицо. Формулировка должна быть понятна и очевидна для пользователя

Чаще всего получает товар именно тот человек, который его заказывает. Для облегчения работы клиента с формой можно рядом с полем ввода поместить уточнение, «Я сам буду получать заказ».

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

Holodilnik: На сайте есть возможность отметить, что получатель и плательщик -одно лицо, но она незаметна и ее назначение не очевидно для респондентов.

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

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

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

Подтверждение заказа

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

Критичность: средняя

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

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

Информация, которую необходимо поместить на страницу:

  1. Состав заказа и итоговая сумма
  2. Контактные данные получателя
  3. Информация о способе и сроках доставки
  4. Способ оплаты

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

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

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

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

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

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

Юлмарт: Инструкция на странице не соответствует выбранному способу доставки.

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

Критичность: средняя

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

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

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

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

Утконос: На странице можно изменить только номер телефона.

На сайте магазина Buket можно изменить все параметры заказа. Пользователю не нужно возвращаться на предыдущие шаги для редактирования.

Buket: Отредактировать можно всю введенную информацию.

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

Ввод реквизитов карты и оплата

Формат ввода данных банковской карты должен соответствовать их формату на карте

Критичность: средняя

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

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

Для карт с 16 цифрами номер карты должен отображаться при наборе блоками по 4 цифры

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

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

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

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

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

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

Цифры разделены пробелами, пользователю легко проверить корректность введенных данных.

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

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

Приложение Steam: Цифровые блоки не разделены пробелами, на экране смартфона сложно проверить правильность ввода.

Приложение Zara: Номер карты разделен на цифровые блоки.

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

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

Формат ввода данных карты должен изменяться в соответствии с типом карты

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

ЛитРес: Отображение формата ввода данных не меняется в зависимости от типа карты.

Ввод месяца должен быть реализован полем ввода, а не выпадающим списком

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

Формат ввода месяца должен соответствовать формату на карте. Месяц должен быть введен двумя цифрами

На банковских картах месяц окончания срока действия зашифрован двумя цифрами, а не названием месяца.

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

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

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

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

Формат ввода данных о сроке действия карты (год) должен быть ограничен двумя цифрами

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

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

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

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

Аэроэкспресс: Формат ввода года не соответствует формату на карте. Респонденты это не замечают, в результате не могут оплатить билет.

Имя и фамилия должны быть указаны в одном поле

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

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

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

Большинство форм оплаты используют написание имени в одно поле. Пример ниже взят с сайта Аэроэкспресса.

Имя и фамилия владельца набираются в одно поле.

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

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

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

"Мне писать маленькими буквами или большими?"

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

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

RuRu: Буквы автоматически набираются заглавными и заменяются на соответствующие им на клавиатуре буквы латинского алфавита.

Аналогичная реализация на сайте магазина ЛитРес. Вводимые в поле «Имя» символы транслитерируются и вводятся прописными буквами независимо от того, нажата клавиша CapsLock или нет.

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

ЛитРес: Буквы автоматически переводятся в заглавные. При наборе кириллицей текст автоматически транслитерируется.

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

Банковская карта должна быть визуализирована на странице оплаты

Критичность: средняя

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

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

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

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

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

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

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

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

Расположение полей ввода соответствует полям на карте.

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

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

Критичность: низкая

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

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

Естественная траектория взгляда при просмотре реквизитов карты в реальной ситуации:

  1. Номер карты
  2. Срок действия
  3. Имя владельца карты
  4. Защитный код
(обратная сторона)

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

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

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

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

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

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

Заполнение формы прерывается вводом дополнительной информации.

Поля форм на странице должны быть визуально объединены и выделены

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

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

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

Поле ввода защитного кода карты не находится на траектории взгляда пользователя и не выделено на странице.

На платежной странице сервиса PayOnline поле «Ваш Email» попадает на траекторию взгляда пользователя. Поле ввода защитного кода карты также заметно во время заполнения формы, но его расположение не соответствует последовательности заполнения карты.

Поле «Ваш Email» визуально не выделено, но попадает в траекторию движения взгляда. Поле ввода защитного кода находится на траектории взгляда, но последовательность заполнения полей не соответствует естественной.

Удачный пример - платежная страница на сайте магазина РИВГОШ. Ввод данных с карты не прерывается вводом дополнительной информации и соответствует их расположению на карте.

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

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

Рамблер.Касса: В форме вовсе нет полей ввода данных, необязательных для проведения платежа.

При использовании клавиши Tab для перехода в следующее поле последовательность переходов также должна соответствовать последовательности просмотра и заполнения полей

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

Запрашивайте необходимую информацию только один раз

Критичность: средняя

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

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

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

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

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

Поля имя, электронная почта и телефон заполнились автоматически, но пользователям все равно приходится перепроверять информацию.

Сервис должен запрашивать только необходимую информацию

Критичность: средняя

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

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

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

На платежной странице представлено излишнее с точки зрения пользователя количество полей.

На платежной странице представлено излишнее с точки зрения пользователя количество полей.

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

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

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

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

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

Примеры дополнительных полей форм:

Тип карты: Приложения Ozon и Steam, сайты магазина РИВГОШ и издания Ведомости.

PayU: Тип карты определяется автоматически по мере ввода.

Информация о банке: PayOnline и ChronoPay.

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

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

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

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

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

Подписи к полям форм должны быть понятны и содержать подсказки по заполнеению

Критичность: средняя

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

Не используйте низкочастотных и технических терминов в наименованиях полей и подсказках

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

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

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

Поле ввода номера карты названо технической аббревиатурой PAN.

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

Чаще используется наименование «номер карты», с ним у пользователей не возникает проблем.

У поля ввода нет названия, но его назначение очевидно из контекста.

Поле ввода защитного кода карты наиболее сложно для понимания, с ним возникает намного больше затруднений. Мало кто из респондентов во время исследования использовал аббревиатуры CVV/ CVC. Даже опытные пользователи использовали понятие «Код», «3 цифры с задней стороны карты».

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

В приложениях Steam и Zara нет никакой подсказки о том, где находится защитный код карты.

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

А в платежной форме на скриншоте ниже вообще не используется название CVV/CVC. При этом в сочетании с визуальными и вербальными подсказками назначение поля становится очевидным.

Сервис не использует непонятных пользователям наименований полей.

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

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

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

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

Приложение Steam: Поле ввода не содержит подсказки о том, где на карте находится код.

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

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

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

В некоторых случаях даже при наличии подсказки по заполнению пользователь все равно может ее не заметить и ввести информацию в поле в нестандартном формате (номер телефона в 10 цифрах вместо 11 или номер карты с пробелами).

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

Подсказка по заполнению поля должна располагаться рядом с полем ввода

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

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

Подсказка находится справа от поля ввода.

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

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

Рядом с полем «Имя» должна быть представлена инструкция по оплате неименной картой

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

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

Размер полей должен соответствовать вводимой в них информации

Критичность: средняя

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

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

Размер поля значительно превышает возможное количество символов защитного кода карты.

Поле ввода защитного кода соответствует количеству вводимых в него символов.

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

Размер поля ввода номера карты недостаточен.

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

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

Критичность: низкая

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

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

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

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

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

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

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

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

Невозможно проверить параметры билета перед оплатой.

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

М.Видео: Платежная форма (азпромбанка встроена на страницу сайта магазина.

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

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

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

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

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

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

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

На платежной странице должна быть реализована возможность возврата на сайт магазина без оплаты

Критичность: средняя

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

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

На сайте магазина Утконос есть возможность вернуться на сайт магазина без оплаты, но название ссылки возврата пугает пользователей, так как предполагает «отмену» заказа.

Утконос: На странице оплаты есть возможность возврата на сайт магазина, но ее название неоднозначно.

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

На платежной странице можно вернуться на сайт магазина без оплаты.

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

На платежной странице должна быть представлена информация о безопасности платежа

Критичность: средняя

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

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

Форма ввода реквизитов карты должна находиться на странице с безопасным соединением

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

Наличие индикатора безопасного соединения в строке браузера вызывает ощущение безопасности платежа.

На странице формы оплаты должны присутствовать логотипы платежных систем или пиктограммы сервисов двухфакторной аутентификации (например, MasterCard SecureCode)

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

"Они для красоты, я думаю. В смысле, чтоб внушать уважение"

"Я знаю, что что-то проверяли и выдали этот сертификат. Что это еще один плюсик в безопасность."

Наличие пиктограмм платежных систем увеличивает доверие к сервису.

При отсутствии проверки через 3DSecure необходимо предупреждать об этом на странице ввода реквизитов карты

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

При этом опытные пользователи, которые ориентировались на логотипы платежных систем и метки (MasterCard Secure Code, Verified by Visa) были озадачены тем, что при оплате не был запрошен одноразовый пароль.

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

ЛитРес: На платежной странице нет информации об отсутствии проверки через одноразовый пароль.

Обратная связь о неверном заполнении полей должна быть оперативной, информативной и заметной

Критичность: высокая

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

Проверка корректности введенной в поля информации должна производиться во время заполнения, а не после отправки формы

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

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

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

В большинстве протестированных сервисов проверка корректности производится после отправки формы.

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

Wargaming: Сообщение об ошибочном заполнении поля появляется до отправки формы, но при этом сообщение отдалено от поля, в котором возникла ошибка.

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

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

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

Информация об ошибках появляется рядом с полем ввода.

После отправки формы введенная в поля информация должна сохраняться, даже если некоторые поля были заполнены неверно

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

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

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

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

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

Примеры неудачных сообщений об ошибках.

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

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

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

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

При отмене операции должен происходить переход на страницу с информацией об отклоненном платеже

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

Робокасса: На странице отклоненного платежа представлена краткая информация о том, что платеж не прошел, и инструкции о том,что делать дальше.

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

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

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

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

Steam и Аэроэкспресс: Сообщение о том, что оплата не прошла, не описывает причин возникших проблем.

При отсутствии дополнительной аутентификации через одноразовый СМС-пароль должна предоставляться информация о том, что платеж не прошел

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

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

Страница шлюза банка-эквайера

На странице ввода одноразового пароля информации о сумме списания и поле ввода пароля должны быть выделены

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

На странице должна быть выделена информация о сумме списания и поле ввода одноразового пароля

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

Компоновка неудачная, необходимая информация не выделена.

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

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

Действие подтверждения операции должно быть выделено на странице

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

Кнопки находятся слишком близко и практически неотличимы друг от друга.

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

Кнопка продолжения визуально выделена на странице.

Кнопка подтверждения должна находиться справа от поля ввода одноразового пароля

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

Кнопка продолжения расположена справа,на мобильных устройствах клавиатура ее не перекрывает.

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

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

Критичность: средняя

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

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

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

Инструкция о том, где именно искать «Код активации» скрыта за ссылкой «Что это?». Неопытные пользователи тратят дополнительное время на поиск информации о дальнейших действиях и не всегда уверены, что понимают все верно.

На странице отсутствуют инструкции по необходимым действиям.

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

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

Не используйте низкочастотные и технические формулировки

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

Формулировка «Аутентификация клиента» может быть непонятна пользователям.

Формулировка «Динамический пароль» не является распространенной, она может быть непонятна пользователям.

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

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

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

Код подтверждения должен находиться в начале текста СМС-сообщения

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

Одноразовый код находится в конце сообщения, он не виден в краткой сводке вверху экрана.

Более удобно это реализовано в СМС-сообщениях двух других протестированных банков. Код подтверждения находится в начале сообщения. Пользователю не нужно тратить время и открывать СМС-сообщение.

Код подтверждения находится в начале сообщения.

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

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

Страница "Спасибо за покупку"

На странице подтверждения заказа должна быть предоставлена вся информация о заказе

Критичность: высокая

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

  1. Номер заказа.
  2. Состав заказа (наименования товаров, количество и цены товаров каждого типа и сумму заказа).
  3. Информацию о выбранных способах доставки и оплаты.
  4. Контактную информацию получателя и адрес доставки.
  5. Информацию о возможности возврата товаров (для некоторых категорий товаров).

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

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

Enter: Вкладка опции заказа без регистрации кажется пользователям неактивной.

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

Юлмарт: На странице указаны все важные параметры заказа:

  1. Номер заказа
  2. Информация о доставке
  3. Информация об оплате
  4. Контактные данные пользователя

Вывод. На странице «Спасибо за покупку» должна быть представлена полная информация о заказе: его состав, способ доставки и оплаты, а также условия возврата.

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

Критичность: высокая

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

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

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

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

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

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

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

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

Steam: После покупки на странице подтверждения предлагается установить купленные игры.

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

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

Критичность: высокая

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

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

Спортмастер: В письме, подтверждающем заказ, не указана важная для покупателя информация.

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

Ситилинк: В письме указана вся информация о заказе.

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

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

Критичность: низкая

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

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

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

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

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

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

Критичность: низкая, актуально не для всех магазинов.

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

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

Утконос: На странице есть возможность печати состава заказа, но ее название не передает суть функции.

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

Lamoda: Несмотря на отмену оплаты, заказ оформлен. Оператор связывается с покупателем для уточнения нового способа оплаты.

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

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

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

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

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

Общие рекомендации

Процесс оформления заказа должен быть линейным и предстказуемым

Критичность: высокая

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

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

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

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

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

При оформлении заказа на сайте Аэроэкспресса процесс линеен и предсказуем, у пользователей не возникает трудностей в ориентировании.

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

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

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

Критичность: средняя

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

Шаг добавления товара в корзину не должен быть реализован отдельной страницей на сайте. Если после добавления товара в корзину осуществляется переход на другую страницу - это должна быть страница корзины

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

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

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

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

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

Юлмарт: Дополнительная страница заполнения информации о покупателе включена в процесс оформления заказа, но кажется респондентам лишней.

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

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

Критичность: высокая

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

Ozon: Стоимость заказа меняется из-за платной доставки, но покупатель может этого не заметить.

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

Enter: Стоимость доставки указана только после выбора способа, даты и времени доставки.

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

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

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

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

Утконос: Стоимость доставки рассчитать заранее невозможно, но рядом с суммой есть пометка, что доставка в ней не учтена.

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

Во время оформления заказа основная навигация сайта должна быть скрыта

Критичность: средняя

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

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

Holodilnik.ru: На сайте представлено три типа навигации: по каталогу, по личному кабинету и по оформлению заказа - все они отвлекают покупателей.

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

Связной: Основная навигация по сайту скрыта во время оформления заказа.

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

Последовательность шагов должна быть очевидна для пользователя

Критичность: средняя

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

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

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

Holodilnik.ru: В навигационной цепочке представлен только текущий и предыдущие шаги оформления заказа.

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

Утконос: В навигации по разделу представлены все шаги оформления заказа.

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

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

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

Названия этапов должны быть понятны и отражать их суть

На сайтах многих протестированных магазинов встречались неоднозначные или бессмысленные названия этапов оформления заказа. Например, на сайте магазина Buket.ru все шаги оформления заказа названы «Оформление заказа Шаг Х из 3».

Buket.ru: Название шагов оформления заказа неинформативны и не отражают наполнение страницы.

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

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

На сайте магазина Утконос, информация о шагах оформления заказа представлена как в навигационной цепочке, так и на кнопках продолжения оформления заказа.

Утконос: Наименования разделов представлены как в навигационной цепочке, так и на кнопках продолжения оформления заказа.

Шаги оформления заказа должны быть разделены на четкие этапы

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

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

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

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

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

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

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

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

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

Элементы отдельных шагов оформления заказа не должны быть смешаны

Критичность: высокая

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

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

Чаще всего на сайтах магазинов представлена четкая последовательность шагов оформления заказа, они не смешаны.

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

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

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

 

 

 

 

 

 

 

М.Видео: Граница первого экрана, iPhone4S.

 

 

 

 

 

 

М.Видео: Выбор способа доставки расположен под корзиной и кнопкой оформления заказа.

 

 

 

 

 

М.Видео: Выбор способа оплаты заказа картой находится в самом низу страницы.

 

 

 

 

Эта проблема актуальна и для других магазинов. На сайте магазина РИВГОШ выбор способа доставки также осуществляется на странице корзины и незаметен.

РИВГОШ: Выбор способа доставки на странице Корзины.

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

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

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

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

Критичность: средняя

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

Не рекомендуется использовать слишком общие или неоднозначные названия кнопок

Например, на сайте магазина Buket.ru назначение кнопок указано только мелким серым шрифтом в подписях под ними, но не на самих кнопках. Из-за этого у пользователей нет понимания того, какие шаги оформления заказа предстоят и что будет происходить дальше.

Buket.ru: Названия кнопок не отражают сути действия и страницы, на которую осуществляется переход. Назначение кнопки представлено только в мелкой серой подписи под кнопкой.

М.Видео: Нажимая на кнопку «Оформить заказ», покупатель предполагает завершение оформления заказа, а не переход к дополнительным шагам.

Наименования кнопок должны соответствовать выполняемым ими действиям

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

Утконос: Наименование кнопки не соответствует совершаемым с ее помощью действиям.

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

Кнопка основного действия должна быть визуально выделена на странице

Критичность: высокая

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

Основное действие должно иметь визуальный приоритет над остальными элементами страницы

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

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

Onlime: Кнопка целевого действия не выделена на странице и теряется на фоне более ярких элементов.

Buket.ru: Все кнопки на страницах выглядят одинаково. Главное действие «Подтвердить заказ» не выделено на странице.

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

М.Видео: Кнопка оформления заказа визуально выделена на странице.

Важные действия должны располагаться на траектории движения глаза пользователя

На сайте магазина РИВГОШ при добавлении товара в корзину выбор дополнительных характеристик расположен не на траектории движения взгляда пользователя. Из-за этого большинство респондентов ошиблись с выбором, так как не смогли найти возможность выбрать объем флакона.

РИВГОШ: Выбор дополнительной характеристики товара находится не на траектории движения взгляда пользователя.

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

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

Критичность: средняя

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

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

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

РИВГОШ, Ситилинк и Юлмарт: До завершения покупки у пользователя запрашивают информацию, которая кажется несвязанной с оформлением заказа.

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

Сервис не должен запрашивать информацию, которую можно определить автоматически

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

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

Юлмарт: На странице имеется поле «Индекс», которое заполняется автоматически, но все равно вызывает сомнения у респондентов.

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

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

М.Видео: Даже после выбора города на главной странице магазина, при добавлении адреса все равно нужно его указывать.

Enter: Станция метро не определяется автоматически. Город доставки при этом определен автоматически.

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

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

На страницах с автопереходом не должно быть представлено важной информации

Критичность: высокая

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

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

Спортмастер: На странице с автоматическим переходом к опалате представлена важная информация о номере заказа, а также большое количество текста.

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

Lamoda: На странице с автоматическим переходом представлено минимальное количество информации.

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

Сообщения об ошибках должны быть понятны и содержать рекомендации по устранению проблемы

Критичность: высокая

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

Сообщения об ошибках должны быть выделены на странице

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

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

Ситилинк: В поле "электронный адрес" допущена ошибка, но никакой индикации этого на странице нет.

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

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

Удачный пример на сайте магазина М.Видео на скриншоте ниже.

М.Видео: Проверка правильности заполнения полей происходит сразу после перехода в другое поле.

При проверке поля также полезно добавлять индикацию того, что поле заполнено верно, как на скриншоте из магазина М.Видео ниже.

М.Видео: Проверка правильности заполнения полей происходит сразу после перехода в другое поле.

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

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

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

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