Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Как сделать удобную платежную форму

5 июля 2017 | Опубликовано в статьюшечки | 19 Комментариев »

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

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




Комментарии

  1. Васнецова Кира
    Thumb up Thumb down 0

    Спасибо за статью!

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

    Жаль, что у Semrush только формы для заполнения нормальны, лучше бы софт таким был.)

    Ответить

  2. Merziuz
    Thumb up Thumb down 0

    V53QCB pills2sale.com viagra online

    Ответить

  3. Donte
    Thumb up Thumb down 0

    I'm happy very good site doxycycline mono 100mg reviews The loans are part of the $130 billion financing acquisitionof the 45 percent stake in Verizon Wireless that it does notalready own from Vodafone Group Plc. The financingpackage launched to top relationship banks last week.

    Ответить

  4. Addison
    Thumb up Thumb down 0

    Yes, I play the guitar pfizer genotropin 36 iu pen The four-week moving average of claims, which evens out week-to-week volatility, fell by 3,750 to 305,000. That’s the lowest level since May 2007, though the most recent four-week period includes weeks when California and Nevada underreported claims because of technical issues.

    Ответить

  5. Dominic
    Thumb up Thumb down 0

    Do you know each other? doterra deep blue rub side effects "I hope that a number of problems that we have unfortunately seen in Roskosmos' activity will be overcome with your appointment, " Medvedev told Popovkin's successor to the post, former deputy defence minister Oleg Ostapenko.

    Ответить

  6. Scott
    Thumb up Thumb down 0

    A law firm weekend prince for sale The local coroner preliminarily ruled his death a suicide by strangulation, prison officials said. They added there was no evidence that Sell's participation in the hunger strike, which the corrections department initially denied, had been a factor.

    Ответить

  7. Stevie
    Thumb up Thumb down 0

    I'm sorry, I didn't catch your name buy cialis 20 mg When the limb can’t be saved, amputation is a very functional option. With the huge technological advances in prosthetic devices, the leg with the prosthetic device can often perform better than a severely mangled extremity that was saved.

    Ответить

  8. Christoper
    Thumb up Thumb down 0

    I'm at Liverpool University carvedilol 12.5 mg precio venezuela Abedin, a top adviser to Hilllary Clinton and long-time family friend, is due to take a lengthy vacation from her job with the former secretary of state and first lady.  It is unclear when she will return.

    Ответить

  9. Ruben
    Thumb up Thumb down 0

    What do you study? para que sirve testrovax She previously filed an appeal to Bali's high court in April, but lost that as well. Sandiford's last option is to now seek a judicial review of her case before appealing directly to the president for clemency, but only if she can produce new evidence or show that the judges in her case were negligent.

    Ответить

  10. Jeremiah
    Thumb up Thumb down 0

    I'm only getting an answering machine benadryl for dogs by weight The restaurant everyone is talking about here is Australasia. The fish is fantastic. One of my favourites is a Chinese called Wings. I have been going there since I was 17. I don’t see much down south but, when I come down, there is a restaurant in Mayfair that is unbelievable, amazing but I’ve forgotten what it is called!

    Ответить

  11. Anna
    Thumb up Thumb down 0

    I'm doing a phd in chemistry ciprofloxacin-hcl cheap Further details of the data lost by the SFO emerged after she tabled a parliamentary question asking if “the identities of any prosecution witnesses and informants were contained” in the evidence that went missing.

    Ответить

  12. Ariel
    Thumb up Thumb down 0

    I've been cut off gout flare up while on allopurinol NEW YORK, Aug 21 (Reuters) — Global equity markets and bondprices slid while the dollar strengthened on Wednesday afterminutes from the latest Federal Reserve policy-setting meetingdid not alter expectations the Fed would eventually begin totrim its bond-buying program.

    Ответить

  13. Werner
    Thumb up Thumb down 0

    I love this site dilantin level with low albumin What happened to the company that not too long ago launched Windows 7, a product that many thought was Microsoft’s best operating system yet? At some point in the last few years, Microsoft decided that its consumer products had to be “touch first.”

    Ответить

  14. Natalie
    Thumb up Thumb down 0

    Yes, I play the guitar promethazine-dm Barclays made the announcement as it reported first-half results which showed a quadrupling of net profit, but the scale and terms of the rights issue drove the price of the shares down by as much as 7 percent.

    Ответить

  15. Andre
    Thumb up Thumb down 0

    Another service? prilosec canadian pharmacy It seems to me that there is in principle nothing wrong with Spain doing rigorous checks to prevent smuggling. The issue is that they have not built the infrastructure nor do they have the manpower to carry out such checks without causing massive delays. I suspect however that if they were told to abandon the rigorous checks or sort out the infrastructure and manpower, they would choose the first.

    Ответить

  16. Sierra
    Thumb up Thumb down 0

    The United States hoodia gordonii wikipedia In 2011 Alexis received an honorable discharge from the Navy Reserve, even though the Navy had been pursuing a general discharge against him on a series of eight to 10 misconduct charges, ranging from traffic offenses to disorderly conduct, a military official said.

    Ответить

  17. Florentino
    Thumb up Thumb down 0

    Looking for a job can i get pregnant first month on clomid Some on the left question why Bachelet didn't implement her current policy proposals during her presidency. That disenchantment has helped smaller party and independent candidates gain clout in this year's campaign.

    Ответить

  18. Emmanuel
    Thumb up Thumb down 0

    What's the last date I can post this to to arrive in time for Christmas? where do i get viagra in chennai The Moscow-Havana flight goes over Europe and the U.S., which could cause complications. Some European countries refused to allow Bolivian President Evo Morales to fly through their airspace on his way home from Moscow last week because of suspicions that Snowden was on his plane.

    Ответить

Оставить ответ


3 + два =

Вставить изображение