Лого vc.ru

UI-дизайнер Stripe: Как улучшить юзабилити форм оплаты с помощью анимаций

UI-дизайнер Stripe: Как улучшить юзабилити форм оплаты с помощью анимаций

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

Поделиться

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

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

Дополнительная информация

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

Оповещения об ошибках

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

Помощь в ожидании

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

Переключение состояний кнопок

В форме оплаты Stripe реализована анимация, которая переключает состояние кнопок — если пользователь кликнет на надпись «Информация о платеже» (“Payment Info”), то увидит необходимую к оплате сумму (“Pay $25.00”), по нажатию на которую будет совершена оплата и продемонстрировано соответствующее сообщение. Таким образом человек всегда понимает, почему ему показывают ту или иную информацию — все изменения интерфейса вызваны его собственными действиями.

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

Впечатление современности

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

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

Статьи по теме
CTO Stripe: Как правильно составлять письма с предложением о работе в компании20 июня 2014, 14:40
Почему пользователи вводят меньше данных, если в форме есть обязательные поля30 апреля 2014, 13:56
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Анимация управляет фокусом пользователя круче цвета и формы — бесспорный факт. Инструмент мощный, от то и опасный.
В разделе «Дополнительная информация», например, весь фокус собирается на появившемся сообщении и поле для телефона. Ссылки Terms и Privacy при этом появляются очень тихо и для кого-то подло под блоком, вытолкнутые анимацией глубоко вниз.
С разделом «Переключение состояний кнопок» я вообще не согласен. Безобидная кнопка навигации вперед может подменяться следующей такой же кнопкой — но плавненько и безшовно на ее место подставлять «Оплатить» не стоит. Опустив вопросы морали, остается проблема с тем, что пользователи ожидают от нее отличность и строгость, и будут решать в уме вопрос: «это перейти к оплате или уже оплата на самом деле?»

0

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

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

0

Мужики, кто программист, а не подскажите, где на php найти анимацию, приведенную тут?

0

На php такого не сделать. Такое можно на js и html5 и css3

А есть примеры и ссылки? Буду очень благодарен

0

Это JS, погугли jquery easing или jquery animate

Окей, а теперь главный вопрос - какой реально процент увеличения конверсии? Про это нет ни слова. Чуваки нормально упоролись, но был ли в этом вообще какой-то практический смысл?

0

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

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Stas Sokolov
Hands4U

Как соберете, рядовой, скиньте на мыло майор(сАбака)очевидность.ру На первый второй рассчитайсь!

«Одноклассники» запустили денежные переводы администраторам сообществ
0
Данил Петрусёв

Какая комиссия сервису за такую услугу?

Суд отменил арест 9 млрд рублей IKEA после вмешательства бизнес-омбудсмена Бориса Титова
0
Елена Богатырева

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

DamProdam — сайт покупки-продажи подержанной техники
0
Данил Петрусёв

Сук, я так себе велосипед не закажу никогда такими темпами

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Pavel Molchanov
SoftProducers

Я клиент Агавы

Регистратор Reg.ru приобрёл старейшего российского хостинг-провайдера Agava
0
Показать еще