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

Внесите ясность

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

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

Вот несколько техник, которые хорошо работают в этом смысле:

• Крупная типографика
• Изображения вместо заглушек в полях (или и то и другое)
• Больше расстояния между полями
• Специальный tabindex для упрощения навигации

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

Иконка кредитной карточки не оставляет сомнений в том какой метод оплаты был выбран. Та же история с иконками в нижней части формы — наглядно показано расположение номеров CVV.

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

Автоматические интервалы при вводе

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

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

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

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

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

Существует множество бесплатных плагинов, которые помогут вам с автоматическим форматированием текста. Большая часть на jQuery, но есть и хорошие решения на JS.

Вот некоторые из них:

• Card.js
• Creditly.js
• jQuery Card Formatter

Упростите действия

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

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

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

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

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

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

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

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

Проводите A/B-тесты, чтобы выяснить что в вашем случае работает лучше. Результаты могут вас сильно удивить.

Резюмирование покупки

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

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

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

Еще один пример от Amazon — матери всех онлайн-магазинов.

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

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

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

Итоги

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

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

Автор статьи Jake Rocheleau

Перевод — Дежурка

Смотрите также:

• Снижаем количество возвратов или как осчастливить покупателя
• Как не помешать онлайн-продажам
• Почему полям заполнения обязательно нужна маска ввода