Вы читаете перевод статьи Микаэля Виллара “Improve the payment experience with animations”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Зачастую бывает, что проектирование форм воспринимается как нудная рутина, которая отвлекает нас от более интересных дизайнерских занятий. А с другой стороны, если задуматься, платежная форма — это часть процесса оплаты. Это тот момент, когда пользователь вот-вот будет готов вынести вам и вашему бизнесу вотум доверия. Этот пользовательский опыт должен быть максимально хорошим, а правильное использование анимаций способно существенно его улучшить.
Цель анимаций не только в том, чтобы развлечь пользователя, а скорее в том, чтобы помочь ему понять, что происходит на экране и как максимально эффективно использовать продукт. Отключение анимаций должно “ломать” процесс; если этого не происходит, значит ваши анимации, возможно, излишни.
Именно так мы — команда, создавшая Stripe Checkout — смотрим на этот вопрос. По крайней мере, по этой причине мы вложили много времени и усилий в разработку формы Checkout. Мы с самого первого дня держали курс на использование в Checkout анимаций, поскольку они обогащают ключевой опыт пользователя. Чтобы проиллюстрировать этот эффект, давайте рассмотрим несколько анимаций, которые мы уже реализовали.
Примечание: посмотрите mp4-версии анимаций в более высоком качестве.
Анимации обеспечивают контекст
Этот переход показывает, насколько полезной может быть анимация для пользователя. Сразу понятно, что телефонный номер требуется, только если нужно “запомнить” пользователя — поле для ввода телефона появляется в ответ на действие пользователя (выбор опции “Запомнить меня”).
Трясем-трясем
При создании формы мы часто упускаем то, как пользователем воспринимаются ошибки. Нам проще рассматривать ошибки просто как возможные исходы процесса. Однако именно в этот момент — когда пользователь обнаруживает, что введенные данные по какой-то причине не приняты приложением, он чувствует максимальное расстройство (и, следовательно, готов прервать процесс оплаты). Поэтому мы добавили небольшую “трясущуюся” анимацию. Своей причудливостью она мгновенно смягчает расстройство пользователя, и в то же время подчеркивает, что что-то пошло не так. По сути форма отрицательно трясет головой. 🙂
Ловкость рук
За счет анимации можно добиться ощущения, что процессы происходят быстрее, чем это есть на самом деле. Всем знакомо это чувство: когда чего-то ждешь, время тянется особенно медленно. Небольшая анимация на рисунке выше создает ощущение ускоренного процесса, хоть и ни капли не сокращает время ожидания смс-подтверждения. Не важно, что эффект анимации полностью иллюзорен — мы ведь не знаем, когда на самом деле придет смс.
Переходы кнопок
Легкие анимации — мои самые любимые. Переход между первыми двумя состояниями (“Детали платежа” и “Оплатить $25.00”) соответствует переходу, который мы использовали для деталей платежа, которые расположены над формой. Это подчеркивает, что действие, происходящее на экране, связано с нажатием кнопки.
Когда пользователь нажимает “Оплатить”, ненадолго появляется загрузочная вертушка, а потом отображается кнопка с подтверждением. Мне особенно нравится, какой получилась эта анимация с галочкой — она создает ощущение легкой покупки.
Бонусный раунд
Эта анимация кажется немного излишней — ведь ее можно убрать, не сломав процесс, что противоречит основной идее этой статьи. Но мне она кажется полезной, поскольку она улучшает процесс.
Я, как и многие другие люди, не доверяю сайтам, которые выглядят, будто созданы 10 лет назад. Излишняя отточенность этой анимации усиливает пользовательский опыт: перфекционизм и внимание к деталям располагают пользователя к доверию.
На этих примерах я хотел показать вам, в каких неожиданных местах интерфейса можно использовать анимации, чтобы улучшить пользовательский опыт. Не важно, какое приложение вы создаете — с правильными анимациями все будет понятнее, действия пользователя будут связаны с их результатами, изменится ощущение времени и, что самое главное, пользователь станет счастливее. Анимации нужны не только приложениям для музыки, фотографий или прогноза погоды.
Спасибо Кэт, Людвигу и Лэчи, что внесли правки в мой ужасный английский.