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

Закулисный обзор Stripe Checkout
100

Вы читаете перевод статьи Микаэля ВиллараImprove the payment experience with animations”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Интересуетесь свежими статьями на эту тему? Вступайте в группу UxJournal на Facebook

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

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

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

Примечание: посмотрите mp4-версии анимаций в более высоком качестве.


Анимации обеспечивают контекст

Play MP4

Этот переход показывает, насколько полезной может быть анимация для пользователя. Сразу понятно, что телефонный номер требуется, только если нужно “запомнить” пользователя — поле для ввода телефона появляется в ответ на действие пользователя (выбор опции “Запомнить меня”).

Трясем-трясем

Play MP4

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

Ловкость рук

Play MP4

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

Переходы кнопок

Play MP4

Легкие анимации — мои самые любимые. Переход между первыми двумя состояниями (“Детали платежа” и “Оплатить $25.00”) соответствует переходу, который мы использовали для деталей платежа, которые расположены над формой. Это подчеркивает, что действие, происходящее на экране, связано с нажатием кнопки.

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

Бонусный раунд

Play MP4

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

Я, как и многие другие люди, не доверяю сайтам, которые выглядят, будто созданы 10 лет назад. Излишняя отточенность этой анимации усиливает пользовательский опыт: перфекционизм и внимание к деталям располагают пользователя к доверию.


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


Спасибо Кэт, Людвигу и Лэчи, что внесли правки в мой ужасный английский.

Читайте меня в Твиттере.



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Примеры анимаций в интерфейсе

Посты в категории Анимация

Как правильно использовать анимации в интерфейсе

Ольга Жолудова

8 января 2019

Посты в категории Анимация

Анимация в интерфейсах: 12 принципов UX-анимации

Ринат Шайхутдинов

26 сентября 2018

Посты в категории Анимация

Как сделать хорошую UI-анимацию отличной

Ольга Жолудова

26 июля 2018