- PVSM.RU - https://www.pvsm.ru -
После долгого перерыва мы в PayU решили возобновить ведение блога на Хабре. Тут не будет рекламы сервиса, зато будут рассказы о разработке новых продуктов, обзоры рынка и исследования.
Начать мы решили c 7 типичных ошибок в проектировании процесса оформления покупки на сайтах интернет-магазинов. Хочу отметить, что список далеко не полный и в комментариях я с удовольствием обсужу другие примеры.
Анализ составлен на основе крупнейших в рунете магазинов из ТОП100. Для этих ребят ошибки в проектировании процесса оформлении заказа стоят миллионы недополученных рублей. Итак, приступим.
Внимание пользователя очень легко потерять, особенно если на странице помимо кнопки «Оплатить» или «Перейти к следующему шагу» есть дополнительные кнопки. Даже если кнопка заметно отличается по стилю от основной, у пользователя нет понимания к чему приведет нажатие, перезагрузится ли страница полностью? Или только область? Что произойдет с данными в других полях?
Решение: используйте автообновление на основе введенных в поле данных вместо кнопки «Применить».
Часто интернет-магазины пытаются получить как можно больше информации от пользователя, при этом совершенно не объясняют зачем эта информация требуется. Иногда в обязательном порядке необходимо ввести одни те же данные по несколько раз.
Решения:
Хороший пример:
В России для большинства магазинов эта проблема не стоит остро — обычно для оплаты пользователь переходит на платежную страницу эквайринга банка или процессингового центра. Однако крупные магазины часто предпочитают не отправлять своих пользователей на сторонний сайт и запрашивают карточные данные непосредственно во время процесса оформления заказа. В ряде случаев это играет против магазина, т.к. для пользователя форма ввода реквизитов карты не выглядит защищенной, она никак не выделяется среди других элементов и полей на странице.
Решения:
Хороший пример:
Доля платежей в интернете растет достаточно быстро (исследование на тему [1]). Растет количество как за счет увеличения сервисов с оплатой онлайн, так и за счет притока новых пользователей в интернет, которые до этого никогда онлайн ничего не оплачивали. И вот им предлагают выбрать в выпадающем списке месяц и год окончания срока действия карты, которых нет на карте, а есть 4 цифры разделенные по два слешом. Я проверял, моя мама не знала, что это месяц и год. Однако даже если пользователь попался опытный, считать какой Октябрь месяц по счету в году точно не входило в его планы.
Итак, плохо:
Лучше:
Хорошо:
Совсем хорошо:
Хорошие примеры:
При проектировании шагов оформления заказа следует избегать нелинейности. В каждый момент времени пользователь должен понимать где он находится, что еще осталось заполнить и какие шаги уже пройдены. Одной из самых часто встречающихся ошибок является требование зарегистрироваться где-то в середине процесса, когда пользователь уже ввел данные о себе, выбрал способ доставки и т.д. Некоторые проявляют особый цинизм и заставляют заново выбрать товары и заново ввести все данные.
Очень часто кнопка назад в браузере просто не работает и корзина очищается:
Иногда нелинейности получается избежать путем запроса недостающей информации во всплывающих окнах:
Решения:
Позитивным примером, как не странно, может быть сайт РЖД. Для покупки билета необходимо авторизоваться, однако это не обрывает процесс.
Базовое правило верстки любых форм очень часто нарушается и при верстке платежных форм. При расположении полей ввода в две или более колонок алгоритм их заполнения становится неочевидным, что приводит к игнорировании второй колонки, или пользователи переходят во вторую и перестают заполнять первую. Вариантов масса:
Решение: избегать множественных колонок,
есть 2 исключения:
Исключениями они стали потому, что фактически являются частями одного целого. Понятие ФИО — это одно значение, которое часто разбивают на 3 поля просто для удобства ввода, с датой рождения тоже самое.
Что именно вам дадут эти советы? Я не знаю, может конверсия увеличится, а может и нет. Единственный способ это выяснить – проводить А/В тесты! Недавно на вебсарафане [2] был небольшой обзор систем тестирования, выбирайте что вам по душе.
Мы PayU не выводим ни одно изменение без проведения нескольких A/B тестов по каждому элементу страницы, у нас запрещено принимать в расчет собственные суждения при проектировании интерфейсов. Платежная страница PayU сейчас выглядит так:
Как видите даже на ней еще есть ряд ошибок, но мы продолжаем тесты и вводим изменения последовательно. Вживую со страницей повзаимодействовать можно здесь [3], критика более чем приветствуется.
Тема проведения A/B будет рассмотрена в одном из следующих постов.
Автор: budyakov
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/79971
Ссылки в тексте:
[1] исследование на тему: http://www.businessinsider.com/the-future-of-the-payments-industry-2014-slide-deck-2014-7#this-deck-is-downloadable-as-a-ppt-for-bi-intelligence-members-click-below-for-a-free-trial-1
[2] на вебсарафане: http://websarafan.ru/2014/07/09/2083/
[3] здесь: http://demo.payu-api.ru/LU/2/
[4] Источник: http://habrahabr.ru/post/248215/
Нажмите здесь для печати.