[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","stripe","\u0444\u043e\u0440\u043c\u044b","\u0444\u043e\u0440\u043c\u044b_\u043e\u043f\u043b\u0430\u0442\u044b","\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438_\u0432_\u0444\u043e\u0440\u043c\u0430\u0445_\u043e\u043f\u043b\u0430\u0442\u044b","\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438_\u0432\u0435\u0431_\u0444\u043e\u0440\u043c"], "comments": 11, "likes": 20, "favorites": 0, "is_advertisement": false, "section_name": "default", "id": "4241" }
Alexander Lashkov
11 264

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы #stripe #формы #формы_оплаты #анимации_в_формах_оплаты #юзабилити_веб_форм

Статьи по теме
CTO Stripe: Как правильно составлять письма с предложением о работе в компании
Почему пользователи вводят меньше данных, если в форме есть обязательные поля
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления