UX-дизайн: как идеи анимации приводят к конверсиям на странице оплаты
Моушн-дизайн был с нами в течение многих лет, но только недавно он стал настолько распространенным, и оборудование, которое у нас есть сейчас, может легко поддерживать их. Анимации оживляют статический контент, а их поведение отражает реальную физику, которую люди воспринимают как вторую природу. У нас есть значимые анимации почти для каждого аспекта приложения или веб-сайта, которые актуальны, украшают контент и вызывают восторг у пользователей. Мы видим эти анимации на экранах адаптации, на целевых страницах, на странице продуктов и даже в тележках для покупок, но мы редко видим их на странице оплаты, где происходят конверсии.
Использование движения на странице платежей
Ниже приведены некоторые из причин использования моушн-дизайна на странице оплаты, который может улучшить UX и привести к большему количеству конверсий.
Движение вызывает уверенность
Анимация помогает сориентировать моменты из одного состояния в другое. Если пользователь нажимает кнопку, он должен немедленно узнать по визуальной обратной связи, что кнопка была нажата и что-то вот-вот должно произойти, и все это тонким, но «непропускаемым» способом.
Источник: Dribble.com
Как правило, переход на страницу оплаты для большинства людей является решающим шагом, когда они хотят знать свои данные, а также чувствовать себя в безопасности. После нажатия кнопки «Оплатить» их мозг ожидает немедленной обратной связи. «Правильные отметки» и «зеленый цвет» воспринимаются нашей зрительной корой как положительные и «эй, все прошло хорошо», что вселяет уверенность в пользователях и способствует отличному UX.
Дизайнерам также важно помнить, что не каждое место или каждый момент в процессе оформления заказа нужно анимировать. Иногда пользователь может быть перегружен большим количеством движений, что может свести к минимуму утверждения с его стороны.
Движение представляет собой функциональное изменение
Источник: Dribble.com
Этот процесс оформления заказа представляет собой сочетание плоского и скевоморфного дизайна, который имитирует настоящую дебетовую карту, а размещение чисел, которые вводит пользователь, также аналогично размещению на реальной карте. Обратите внимание, как карта переворачивается для номера CVV, указывая пользователю, где именно искать этот номер на его реальной карте. Флип также означает, что на данный момент все в порядке, и можно продолжать дальше, снова утверждая пользователя еще больше.
Источник: Dribble.com
Еще один пример «функционального изменения» пользовательского ввода на странице платежей – это способность системы определять тип карты (Visa, Mastercard и т.д.) И производить ее визуально. Эта визуальная обратная связь с пользовательским вводом дает им уверенность, просто меняя логотип и цвет карты, например, с American Express на Visa (в приведенном выше примере), когда они вводят первые четыре цифры номера своей карты.
Руководство по анимации «Основные моменты»
Анимация также используется для привлечения внимания пользователя к разделу макета, говорящему пользователю: «Эй, смотри, это может быть важно!».
Пример 1
На странице платежей иногда должно быть важное сообщение, которое имеет решающее значение для каждого держателя карты, например, «карта какого-то банка здесь не работает» – в этом случае, когда пользователь попадает на страницу оплаты, он должен быть направлен на это сообщение тонким образом с помощью анимации. Использование непрерывной точки над полем сообщения чуть ниже панели навигации – хороший способ улучшить важную коммуникацию и постоянно держать пользователя в курсе.
Пример 2
(Если что-то пошло не так). Если при вводе пароля у них есть «заглавные буквы», они должны быть уведомлены при однократном вводе в текстовое поле. В случае неправильной отправки им следует вежливо предупредить их, прежде чем предпринимать вторую попытку.
Анимация прогрессивного раскрытия информации не позволяет им сканировать большой объем контента при первом приземлении.
Когда дело доходит до заполнения форм, один из лучших шаблонов проектирования – это постепенное раскрытие информации. Например. Если у пользователя уже была сохраненная карта на веб-сайте, и он желает использовать ее, ему будет показано только это и, возможно, одно поле, где он может ввести CVV, однако, если он решит не использовать эту карту и ввести данные другой карты., раскрывается новая форма, позволяющая ему ввести именно это.
Визуальная обратная связь в приведенном выше процессе оформления заказа для прогрессивного раскрытия информации указывает пользователю, что установка флажка привела к заполнению еще нескольких полей данных. Медленное затухание анимации из области флажка дает пользователю ощущение относительности в контексте между действиями проверки флажка и полей, появившихся при этом.
Вывод
Когда состояние экрана резко меняется, наш мозг получает для обработки множество аспектов, и мы загружаем наш мозг (ЦП) обработкой контента и причиной, по которой это произошло. Анимация этих переходов от одного состояния экрана к другому требует большой обработки от нашего процессора к нашей зрительной коре (считайте ее графической картой нашего мозга). И теперь, когда и GPU, и CPU распределяют нагрузку, переходы становятся проще для обработки, и контент кажется более актуальным. Вот почему анимация предназначена не только для удовольствия пользователя, но и для того, чтобы держать пользователя в курсе. UX-дизайн – это то, над чем в наши дни должны работать веб-дизайнеры. Это работает лучше, когда вы можете визуализировать дизайн во время кодирования, для чего программное обеспечение для веб-дизайна TemplateToaster это, соответственно, лучший продукт на рынке, позволяющий создавать красивые и удобные для UX-дизайна темы с помощью нескольких щелчков мышью прямо на ходу!
Лучший интерфейс перетаскивания для создания потрясающих тем WordPress
Источник записи: https://blog.templatetoaster.com