Компания
36,77
рейтинг
8 июня 2015 в 12:38

Дизайн → Козырная карта Интернет­-магазина: исследование юзабилити процесса покупки онлайн

Не нужно проводить исследования и сложные подсчёты — достаточно оглянуться вокруг — все больше времени люди проводят с гаджетами и электронными устройствами. Так, только обладателей смартфонов в России насчитывается около 30 миллионов. При этом структура использования становится все более интересной и многообразной: пользователи имеют несколько аккаунтов, синхронизируют устройства, продолжают прерванные сессии на другом гаджете. Эта тенденция оказывает серьезное влияние и на всю сферу электронной коммерции — люди все больше не только выбирают товары в Интернете и читают отзывы о них, но и совершают покупки онлайн. Всю серьезность роста интернет-торговли подтверждают усилия, которые предпринимают крупнейшие корпорации для обслуживания подобных сделок: ярким примером могут служить Яндекс.Маркет, Google Play и активное развитие сервисов онлайн-рекламы.



Что может быть прекраснее шоппинга в любое время и в любом месте, когда под рукой есть любимый девайс и банковская карта с положительным балансом? В сети выбирают и покупают все: электронику, товары народного потребления, лекарства, еду, спортинвентарь, билеты, музыку, софт и многое другое. Кажется, это быстро, достаточно безопасно и удобно — нужно выбрать покупку, заказать, оплатить и дождаться звонка курьера в дверь или, максимум, дойти до службы доставки. Однако 68% заказов в российских Интернет-магазинах не завершаются покупкой.

Исследование особой важности


MasterCard и UsabilityLab заинтересовались существующей проблемой и провели профессиональное исследование, результаты и выводы которого позволят сотням владельцев Интернет-магазинов, эквайерам и процессинговым компаниям оптимизировать весь процесс покупки и получить больше клиентов, которые в итоге дошли до страницы «Спасибо!».

Немного о ходе исследования. Респонденты заходили на страницы различных сайтов с разных платформ (смартфоны, планшеты, десктопные компьютеры) и выполняли предложенные кейсы. Кейсами служили не мудреные задания, а самые обычные жизненные ситуации, в которые попадают ежедневно миллионы россиян: заказать букет в офис к юбилею шефа или выбрать пару билетов на концерт. Респондентам нужно было оформить заказ на сайте или в приложении и оплатить его с помощью банковской карты, попутно делясь впечатлениями. Всего в исследовании принял участие 51 человек в платежеспособном возрасте 21-60 лет, 28 женщин и 23 мужчины. Профессиональные модераторы фиксировали всю информацию, чтобы обобщить её и получить полезные результаты, которые способны значительно повлиять на состояние электронной коммерции в России.

В эксперименте участвовали популярные Интернет-магазины, которыми ежедневно пользуется огромное количество россиян. Так, были совершены покупки на сайтах и в приложениях Связного, Ситилинка, Юлмарта, Спортмастера, Enter, ivi, Holodilnik, Kassir, М.Видео, РивГош, Аэроэкспресс, Ведомости, Афиша и других. Такое распределение по сферам Интернет-покупок позволило всесторонне подойти к различным потребностям, которые ежедневно удовлетворяются в Сети. Полный список сайтов-участников, а также процессинговых операторов и использованных платформ можно увидеть в таблице ниже: зеленым цветом отмечены сервисы, тестирование которых проводилось на основном сайте, голубым – на мобильном сайте, оранжевым – в мобильном приложении сервиса. В ячейках указано количество респондентов, тестировавших сервис на той или иной платформе.



Строим гипотезу


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

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

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

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

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

Этапы покупки как объекты тестирования


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

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

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

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

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

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

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

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

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

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

Делимся результатом


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

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

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

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

  • Последовательность шагов должна быть очевидна для пользователя.

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

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

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

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

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

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

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

Готовы менять процесс покупки к лучшему?


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

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

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

Посмотреть исследование (PDF, 15МБ, 203 страницы)

Спасибо за внимание, продолжение следует
Автор: @s0brov01
Mastercard
рейтинг 36,77

Комментарии (7)

  • –1
    51 человек? Дальше не читал.
    • +4
      ну и зря, там дальше много всего интересного (-:
  • +2
    Думал, в PDF речь пойдёт поверхностно и о чём-то абстрактном, а оказалось очень даже интересно, но на одном дыхании не осилил =) Спасибо!
  • 0
    PDF действительно интересный
  • 0
    Отличный pdf и всё такое, но, раз уж выборка исследования московская (понятно, что участвовали магазины, которые позволяют оплачивать)
    Мастеркард, обратите внимание на процент магазинов вообще позволяющих оплачивать покупки онлайн.
    Не уверен, что лишний клик настолько критичен, в сравнении с невозможностью оплатить онлайн :)
  • +3
    Вау. Круто! Мастеркардам зачот.
    Прошелся по всем рекомендациям, примерно 90% у меня уже было сделано, внедрил почти все оставшееся. Заняло 2 дня времени %)
    Спасибо!
  • 0
    Очень крутой анализ! Огромное спасибо! :)
    Начали причесывать свой магазин на соответствие всем требования опубликованного чек-лиcта, отчет в блоге...

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

Самое читаемое Дизайн