Главное Свежее Вакансии Образование
Выбор редакции:
1 193 8 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Улучшаем форму оплаты с помощью дизайна и анимации

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

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

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

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

Перейдем от теории к практике и рассмотрим несколько примеров удачной анимации от команды разработчиков сервиса по приему платежей Stripe.

Анимация, добавляющая контекст

1167372b1a314504a88f890e32d6f9e4.gif

Клик по чекбоксу открывает дополнительную информацию с полем для ввода номера мобильного телефона. Это пример полезной для пользователя анимации. Форма выглядит очень легкой и не занимает полезное пространство, а также не нагружает пользователей, которым не интересна функция «Запомнить», ненужной информацией, а лишь концентрирует внимание на кнопке оплаты. Тем же, кто захочет «запомниться», достаточно активировать чекбокс и ввести необходимые данные.

Анимация «качание»

3609b5dd075a41adb8d109b10793dc16.gif

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

Анимация «качание», с одной стороны, своей игривостью смягчает возможное раздражение клиента, а с другой — указывает на допущенные при заполнении полей ошибки, как бы покачивая головой и говоря: «Что-то не так, проверь введенные данные».

Ловкость рук

02ac08e9fef44f85899d2d4f8e632ad6.gif

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

Трансформирующиеся кнопки

da5ae800967a4790bbd89e371f474c36.gif

В данной анимации переходу между двумя состояниями кнопок («Информация об оплате» и «Заплатить $25,00») соответствует также изменение деталей платежа (над кнопкой появляются поля для ввода платежных реквизитов). Т.о., кнопка и форма объединены одной анимацией, и при переходе на следующий шаг оплаты пользователь понимает, что он совершает новое действие.

Когда пользователь нажимает «Заплатить», ненадолго появляется индикатор загрузки (для придания всему процесса большей динамики), после чего на форму выводится иконка, информирующая пользователя об успешном завершении операции. Анимированная галочка дает ощущение того, что вы легко и быстро совершили покупку.

Бонус

52281d93ab7341538742eb7f1710a838.gif

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

Инструментарий

Создание анимации интерфейса — это сплоченная работа дизайнера-аниматора и разработчика. Придумав идею, дизайнер рисует раскадровку анимации и должен объяснить разработчику, как ее необходимо реализовать, можно и на словах, но в большинстве случаев этого недостаточно. Для таких случаев используется один из существующих инструментов для создания анимации, вот некоторые из них: After Effects, Facebook Origami, Pixate, Google Form, Framer, Flinto, Composite, Precursor.

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

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

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

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

Подписывайтесь на наш блог на Spark, а также на рассылку на нашем сайте, впереди еще много интересных постов о платежных сервисах, разработке, финтех стартапах и не только.

-1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Мария Сорокина
Добавлю еще важную вещь: реально не хватает разделения номера карты на блоки (обычно на 4 блока по 4 цифры) и автоматического перевода курсора после заполнения. Вообще удобно, когда все поля для ввода информации о карте визуально расположены так же, как и на карте.

Мастеркард и ЮзабилитиЛаб проводили целое исследование о том, как сделать проще для пользователя оплату в интернет-магазине. Там целая книга получилась, довольно объемная. Оставлю здесь ссылку на "выжимку" из исследования http://blog.aweb.ua/dajte-vozmozhnost-kupit-u-vas-yuzabiliti-oformleniya-zakaza-v-internet-magazine/
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Виталий Цигулев
Спасибо за хорошее замечание, действительно на себе даже замечал, что когда мерчант автоматически разделяет цифры на разряды мне намного удобнее. А про это исследование мы тоже писали - http://web-payment.ru/article/83/10-prostyh-pravil-platezhnyh-interfejsov/

Стараемся ничего такого не упускать ;)
Ответить
Мария Сорокина
Ребята из ЮзабилиЛаб постарались просто на славу! И мы с вами тоже молодцы ;)
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Виталий Цигулев
Да, только как я понял ваш пост он на основе другого исследования от Baymard Institute или не так?
Ответить
Мария Сорокина
Чтобы углубиться в тему, я изучила и первоисточники, которые использовали в обсуждаемом исследовании. Посмотрите перечень литературы в оригинальном пдф, там много еще интересного.
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Виталий Цигулев
А вам было бы интересно разместить эту свою статью от своего имени на нашем сайте http://Web-payment.ru?
Ответить
Мария Сорокина
Да, конечно. Как с вами можно связаться не в комментариях? :)
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.