Правильный чекаут или как не нагрузить юзера
Не для кого не секрет, что оптимизированый чекаут показывает более высокую конверсию. Под оптимизацией я не имею ввиду скорость загрузки, так как это и так должно быть предусмотрено перед выливкой на продакшен.
Начнём с простых, но не маловажных пунктов.
Отзывчивый дизайн.
Дизайн не должен быть навязчивым, но и не быть слишком олдскульным (так как юзер должен чувствовать, что ваш продук идёт в ногу со временем). Многие пользователи до сих пор думают, что простота символизирует надёжность.
Форма и её поля.
Снова не открою Америку, если скажу, что чем меньше обязательных полей, тем проще вашим кастомерам.
Инпуты и их лейблы. Считаю лучшим решением использовать не плейсхолдеры, а лейблы которые всегда напоминают, что-же именно нужно ввести. В примере с плейсхолдером, юзеру достаточно отвлечься на пару секунд и он уже может и позабыть фамилию или имя тут нужно ввести.
Обязательно повесить маски на номер телефона, или хотя бы предоставить возможность выбрать селектом код страны.
Если zip/postal code является обязательным, не забудьте что в разных странах свои форматы(наличие буквенных символов, а не только цифры).
Выбор страны/региона тут все просто, селекты должно быть редактируемые и должны поддерживать автокомплит.
Переходим к самым важным полям – платежным.
Номер карты. Желательно сразу на фронте повесить регулярку + опознание типа карты. Когда кастомер видит после ввода номера иконку своей Visa, он понимает, что чекаут – не шарашкина контора.
Expired date. Лучшим решением для меня является два селекта для выбора месяца и года. Но в некоторых случаях обходяться одним инпутом, тогда тут обязательна маска и понятный нескрываемый лейбл с форматом даты ввода.
Cvv. Тут все просто, достаточно ограничения в максимальный ввод символов до 4 включительно и номерной формат.
Не забывайте прописать type инпутам, для правильной клавиатуры на мобильных девайсах.
Если у вас есть обязательные чекбоксы/радио-кнопки, сделайте их вменяемого размера, чтобы юзеру не пришлось ‘стрелять в десяточку’. Также можно их подефолту сделать отмеченными.
Иконки сертифакотов. Если почитать статистику, то данная мелочь добавит к вашей конверсие плюс бонусных 5-10%.
Обязательные контакты для связи или чат.
Не забудьте на инпут с количеством единиц товара поставить autocomplete=false. Так как при автозаполнение случаются чудеса, а рефаунды вам не нужны.
Как показывает практика, чем дольше кастомер на чекауте, тем меньше вероятность покупки. Так что иногда нужно немного подтолкнуть затупивших юзеров. Банер с купоном-скидкой, который появляется спустя 2-3 минуты после загрузки страницы.
