Анимации, которые улучшают пользовательский опыт
Анимация давно уже не просто яркие гифки или видеовставки, а множество других объектов и подходов. Именно благодаря её различным типам, дизайнеры могут создавать потрясающие проекты, пользоваться которыми одно удовольствие. Другими словами, веб-анимация влияет на конверсию. Рассказываем какие её разновидности дают такой эффект!
Анимация: это кто?
Анимацию можно назвать агрегатным состоянием, веб-объект тоже за определенный промежуток времени переходит из одного состояния в другое. Например:
- при наведении курсора меняется цвет
- при скроллинге изображение перемещается по отношению к тексту
- при нажатии кнопки появляются движущиеся рисунки и т.д.
Сегодня нестандартная анимация, уже используется повсеместно, а сайты за свой долгий путь стали уникальнее, атмосфернее и живее. Пользователи могут приходить на сайт только для того, чтобы взаимодействовать с интерфейсом — поиграть с анимированными объектами. Мы и сами так делали в этой статье. Это увеличивает время, которое люди проводят на странице, и даже может поспособствовать тому, чтобы они там задержались. По итогу чем больше человек проводит времени, тем больше у него к вам доверия, что в итоге приводит его к оформлению заявки или заказа.
Веб-анимация продает идею, буквально погружая потенциального покупателя в продукт и атмосферу бренда. Поэтому сегодня невозможно представить себе конкурентоспособный, эргономичный, продающий коммерческий сайт без качественной анимации.
Задачи
Анимированные элементы выполняют следующее:
- Делают интерфейс эргономичнее. Такое проектирование основано на решении конкретных проблем, связанных с взаимодействием человека с программными интерфейсами. Это обеспечивает минимальный процесс ознакомления с продуктом и сокращает время, необходимое для адаптации в работе с ним. Например, без элемента загрузки и выплывающих инструментов управления на том же YouTube, пользователь будет дезориентирован. -”Оно вообще загружается?”
- Расставляют акценты — привлекают внимание к конкретным элементам на странице. Например, при помощи движения, смены размера или оттенка, появления и исчезновения. Незаметно переходя от одного такого акцента к другому, пользователь получает ту информацию которую вы хотите до него донести.
Вы используете передовые технологии? У вас работают высококвалифицированные специалисты и при всём этом самая выгодная цена? Это заметят!
- Упрощают навигацию. Например выпадающее меню, всплывающие подсказки, и т.д. Они отлично помогают пользователю уверенно ориентироваться на страницах, находя именно ту информацию, какая ему нужна.
- Задают настроение и эмоции. Например, при чтении объемного текста удобнее выводить текстовые блоки на экран поэтапно. А если на веб-странице демонстрируется высокотехнологичный товар или услуга, то анимация поможет наглядно продемонстрировать его устройство или принцип работы.
Но как понять где, когда и какой тип анимации применять, чтобы улучшить пользовательский опыт? Об этом далее.
Классификация
Тут обычно прямая закономерность - чем больше у дизайнера творческих идей, тем больше видов анимации, ведь играть на эмоциях невозможно, если эти эмоции не переживаешь сам, верно? Поэтому и классифицируют их по целому ряду признаков.
Назначение
- Эргономичная анимация — помогает пользователям взаимодействовать с объектами интерфейса, отличая функциональные элементы от нефункциональных. Это, например, эффекты смены цвета при наведения курсора на кнопку, появление всплывающих окон, раскрывание списков.
- Эстетическая анимация — делает сайт интереснее, погружает пользователя в его атмосферу, вовлекает во взаимодействие.
Охват
- Глобальный — применяется на всех страницах (прелоадеры, переходы между блоками, эффекты появления контента).
- Частный — анимирование конкретных объектов, которые можно увидеть только в каком-то одном месте сайта.
Последовательность проигрывания
- Групповая — настраивается одинаково для группы объектов.
- Параллельная. На экране с одинаковой скоростью и на протяжении одинакового времени движутся одновременно несколько объектов. Вместе они формируют один движущийся объект.
- С задержкой. Проигрывается постепенно, когда объекты возникают на экране последовательно. Более экономичный, т. к. пользователь не пытается следить за всеми объектами на странице одновременно, а смотрит на них по очереди, по мере появления.
Вид объектов для взаимодействия
- Анимация изображений, включает в себя несколько видов: Появление и исчезновение при прокрутке экрана.Движение с эффектами, как частичными, так и полными.Интерактивные эффекты, такие как анимированные переходы, изменения при наведении курсора.Стоп-моушн, имитирующий мультипликацию или видеоролик, где на последовательных изображениях происходит какое-то действие. Иногда это просто раскадровка видеороликов при прокрутке.
- Анимация фоновых объектов, включает в себя декоративные элементы, направленные на улучшение восприятия контента (акцентируют внимание, разделяют текстовые блоки и т.д.). Эти элементы могут быть и анимированы при взаимодействии с интерфейсом или при прокрутке страницы.
- Анимация текста - может включать появление текста из невидимости, появление по буквам, движение снизу вверх, справа налево, с вращениями, искажениями и т. д. Эта анимация помимо эстетического эффекта и передачи эмоций помогает выделять ключевые моменты и удерживать внимание пользователя.
- Анимация фоновых элементов (паттернов, бекграундов), включающая искажения, параллакс-эффекты, шум и т.п. Объекты могут двигаться по фону стандартным образом, зацикленно или в виде видео.
- Анимация элементов пользовательского интерфейса - кнопки, уведомления, разделы, всплывающие окна, поля ввода и т.д.
- Эффекты режима ожидания, например, прелоадеры. Они сигнализируют пользователю, что вскоре он получит результат, одновременно занимая его внимание. На тяжёлых, по загрузке, решениях важно менять формат прелоадера на тот, который будет демонстрировать стадии процесса иначе пользователь просто не поймет, сколько нужно ждать.
- Карусели и слайдеры, интерактивные объекты, позволяющие удобно представлять информацию поэтапно, экономично показывать содержимое, скрывать ненужное и уменьшать количество скроллинга.
- Анимация, встроенная в объекты или фон (gif, javascript, видеоролики).
- Анимация курсора, хотя сейчас это не самая популярная функция (нестандартный курсор сложно сделать функциональным), но она используется в креативных и демонстрационных проектах. (Да-да, прям как в видео наверху)
Тип эффектов
- Зависимая, или триггерная анимация - при взаимодействии с одним объектом меняется состояние других. Например, если навести курсор на один сплит-экран, фон меняется под всеми.
- Дисторшн — искажаются не размер или форма, а вид объекта через его разрушение.
- Появление и исчезания - в первую очередь работает на повышение эстетичности, улучшает восприятие сайта.
- Циклическая анимация - задает динамику или расставляет акценты.
- Анимация во время скроллинга - на экране движется какой-то предмет, изменения которого привязаны к этапам прокрутки страницы.
- Фиксация - играет и функциональную, и эстетическую роль.
- Наведение - применяется чаще на мелких объектах — кнопках, иконках. Реже используется при работе с карточками товаров и аналогичными блоками.
- Сборка - демонстрация продукта по принципу сторитейлинга по мере того, как пользователь пролистывает страницу. Сборку можно осуществить для продаж одежды, компьютерной техники, кухонных гарнитуров и пр.
- Параллакс — один объект с различной скоростью скользит относительно другого. Так, при скроллинге текст обычно движется быстрее, чем фон.
Чем больше на сайте высококлассных, согласованных друг с другом параллакс-эффектов тем более современным, продвинутым, впечатляющим кажется сайт.
- Трехмерная анимация. Наиболее эффектная, эстетичная, привлекательная, но и наиболее сложная в реализации на всех этапах. Дает эффект внедрения в компьютерную игру или кинофильм, с которым пользователь может полноценно взаимодействовать (например, если используется в качестве фона). Трехмерным также может быть какой-либо объект, детали слайдера или карусели.
По методу создания
- На CSS - аименее затратный и ресурсоемкий, поэтому наиболее простой, понятный.
- На SVG - анимация векторных изображений, которые состоят из точек и линий. Расположение линий и точек задается набором правил, по координатам.
- На JavaScript - наиболее сложный, но самый современный метод. Используется, когда требуется сформировать сильную анимацию, отвечающую за функциональность интерфейса.
- На WebGL - анимируются 3D-объекты или сцены (если точнее, работа идет всё на том же JavaScript, однако на базе библиотек WebGL).
Требования к веб-анимации
Любой анимированный объект будет оказывать на пользователя ожидаемое воздействие, а сайт сделает эффективным и продающим, только если отвечает определенным требованиям.
- Ненавязчивость - анимации на сайте не должно быть слишком много.
- Бесперебойность - не должно быть сильных искажений и торможения иначе, ухудшится восприятие интерфейса и снизится конверсионность.
- Уместность - анимация буквально обязана соответствовать тематике, стилистике, айдентике бренда.
Необходимо быть особенно внимательными при использовании анимации с целью привлечения внимания и украшения. Даже элементы, имеющие функциональное назначение, такие как всплывающие окна, могут вызвать раздражение, если их применение будет излишним.
Соблюдение баланса при использовании веб-анимации приведет к улучшению пользовательского опыта, что в свою очередь повлияет на трафик и конверсию вашего сайта.
Конечно, разобраться в тонкостях применения различных видов анимации без опыта непросто. Вот для этого и существуют профессиональные дизайнеры! Они используют анимированные элементы в том объеме и формате, который наилучшим образом сочетается с конкретным сайтом. Поэтому обратитесь за помощью к специалистам! Они знают толк в своей работе и смогут реализовать каждую вашу задумку правильно.