Содержание
Несложно понять, почему проектирование форм оплаты рассматривают как рутинную работу, время потраченное на которую можно было бы пустить на что-то более интересное. Однако стоит понимать, что интерфейс оплаты — это важный этап в процессе оформления заказа, когда пользователь решает, доверять вам и вашему бизнесу или нет. Взаимодействие пользователя с интерфейсом оплаты должно быть удобным и приятным. Грамотное использование анимаций поможет в этом.
Цель анимаций — не просто развлекать пользователей, они должны помогать более эффективно работать с продуктом и лучше осознавать процесс. Если вы отключите анимацию, интерфейс оплаты должен выглядеть неполным; если же этого не происходит, скорее всего анимация тут лишняя.
Так думаем мы, команда разработчиков Stripe Checkout, поэтому и уделили столько времени и усилий на создание нашего продукта. Мы с первого дня концентрировались на использовании анимаций, так как уверены, что они улучшают общее впечатление от интерфейса. Чтобы продемонстрировать это наглядно, я предлагаю вам ознакомиться с некоторыми из них.
Примечание: кроме гифок рекомендую посмотреть видео-версии с более высокой частотой кадров.
Анимации добавляют контекст
Этот переход между состояниями чекбокса показывает, как анимация может быть полезной для пользователей. Становится ясно, что для шага «Запомнить» (“Remember me”) необходимо ввести телефон, так как при активном чекбоксе появляется поле для ввода номера.
Хорошая встряска
При проектировании форм многие забывают про состояния ошибок. Легко думать о них, как о небольшом препятствии перед достижением результата. Однако, пользователи раздражаются, когда им твердят, что с введенной ими информацией есть проблемы (это ведет к высокому проценту отказов). Мы решили добавить анимацию встряски. Она одновременно смягчает своей причудливостью возможное раздражение и показывает, что что-то пошло не так. По сути форма как бы качает головой, ай-яй-яй :).
Ловкость рук и никакого мошенничества
Анимации могут служить отличным инструментом для того, чтобы ускорить восприятие информации пользователями. Несомненно, когда чего-то ждете, время ползёт очень медленно. Анимация придаёт процессу ожидания некую энергичность, хотя время получения сообщения остается прежним. Скажу по секрету, это всего лишь иллюзия — мы на самом деле не знаем, когда вы получите СМС.
Изменение состояния кнопок
Изящные анимации — мои любимые. Изменение первых двух состояний кнопки (“Payment Info” и “Pay $25.00″) совпадает с изменением деталей оплаты выше. Этот эффект скольжения подчеркивает, что при нажатии на кнопку на каждом шаге выполняются различные действия.
Когда пользователь кликает оплатить (Pay), ненадолго появляется иконка загрузки, а затем мы показываем, что платёж успешно проведён. Я особенно горжусь тем, как выглядит анимация галочки — она вселяет чувство, что вы быстро и без проблем совершили покупку.
Бонус
Эта анимация может показаться излишней, ведь ее можно убрать и эффект не поменяется — что противоречит общему смыслу статьи. Но я считаю, что она полезна, так как улучшает восприятие пользователем процесса оформления заказа.
Как и большинство, я не склонен доверять сайтам, которые с виду были сделаны 10 лет назад. А эта анимация несёт в себе чрезмерное, отполированное чувство совершенства и внимания к деталям, вы просто не сможете усомниться.
Я упомянул эти примеры, чтобы проиллюстрировать те необычные места, где могут быть использованы анимации с целью повышения удобства интерфейса. Какое приложение вы бы не разрабатывали, с помощью правильно использованных анимаций вы можете сделать всё понятнее, показать причинно-следственную связь действий пользователя, изменить восприятие времени, а самое главное — порадовать свою аудиторию. Анимации применимы не только в музыкальных, фото- и приложениях о погоде :).
Это перевод статьи под названием “Improve the payment experience with animations” от Michaël Villar.
