Нужны ли анимации на сайте?

Создание анимации уже является одним из главных этапов разработки сайта, т.к. она притягивает интерес к нему.

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

Большое количество анимации ради эстетики негативно влияет на удобство

В исследование проводилось структурированное интервью пользователей на тему «Почему люди не используют анимацию?». 30% считали, что анимация – это бесполезно. По мнению некоторых участников, анимация бесполезна, если она: «без четкой цели», «быстрая», «навязчивая», «затрудняет видимость основной информации». Один их важных комментариев: «тяжело, когда она используется только для эстетики».
A.Chalbi Neffati, N. Roussel, F. Chevalier: «Понимание и проектирование анимации в пользовательский интерфейс», 2018

Целью исследования университета Манчестера было анализ 2-ух сайтов с одинаковым контентом, но разным стилем интерфейса: множество анимаций, интерактива и их отсутствие. Участники оценивали сайт с точки зрения привлекательности и удобства. По результатам было выявлено, что множество анимационных объектов стали причиной неудобства в использовании: около 10 ошибок произошло при взаимодействии с анимированным интерфейсом (сложность в навигации, отвлекающие от текста факторы, низкая читабельность текста). Анимированный сайт запомнился своей мультимедийностью и проблемностью, в то время как другой сайт с минимум анимации – серьезным дизайном и удобством.
Antonella De Angeli, Alistair Sutcliffe & Jan Hartmann: «Взаимодействие, удобство и эстетика: что влияет на предпочтения пользователей?», 2008

По результатам одного из исследований: 78% участников интервью используют анимацию в своих интерфейсах. Почти для 42% участников запоминающейся была та анимация, которая увеличивала интерес к сайту и не ухудшает удобство: «на сайте хорошо смотрятся структурированные и энергичные переходы, но не быстрые».
A.Chalbi Neffati, N. Roussel, F. Chevalier: «Понимание и проектирование анимации в пользовательский интерфейс», 2018

‍Анимации не должны отвлекать пользователя от контента. Много разных видов анимации на одном сайте только мешает пользователю. Движущиеся эффекты на сайте – это хорошо, но до тех пор, пока они не становятся главным его достоянием.

‍Анимации не делают сайт особенным в использовании

Целью одного из исследований Таллиннского Университета было изучение влияния функциональных анимаций на пользовательский опыт (на примере интернет-магазина). Для исследования был проведен A/B тест: первый сайт был без применения анимаций, второй – с ними.
Результаты: в целом, оба сайта были оценены на одинаково высокие баллы как со стороны привлекательности, так и со стороны удобства. Анимированный сайт был оценен как привлекательный на 71%, в то время как без анимаций – на 78%. Более приятным в использовании оказался анимированный сайт – 91%, без анимаций – 86%. Исследователи сделали важное замечание: разумно использовать только одну анимацию за раз, потому что несколько анимирующих объектов сбивают с толку и запутывают пользователя.
Piret Alvre: «Влияние анимационного интерфейса на пользовательский опыт», 2017

В исследовании американского университета (штат Аризона) был поставлен вопрос: «Влияет ли скорость анимации на удовольствие от использования?». Были разработаны 3 прототипа сайта, на котором участники должны были выполнить заказ, с разной скоростью анимации: 0 мс, 300 мс и 650 мс. По результатам было выявлено, что 68% участников не нашли существенной разницы между 3 скоростями и не определили, какой прототип для них был предпочтительней. Анимация не повлияла на удовольствие от взаимодействия с сайтом. Лишь 27% отметили, что анимированные прототипы со средней скоростью были «более гладкие».
Kusum Ijari: «Понимание эффекта анимации и его последствий. Скорость на наслаждении потребителя», 2019

В исследовании от Финского университета была проверена гипотеза: влияют ли анимированные переходы на пользовательский опыт в реальном времени и перспективе? Участниками были оценены 2 сайта: сайт с множеством анимированных переходов против сайта без использования этих эффектов. Результаты исследования: для пользователя между ними не было никаких различий. Использование анимированных переходов не помогло для улучшения восприятия UX. Разница между сайтами не была статистически значимой: анимированный сайт – 69 б, без анимаций – 57 б.
Sampo Noponen: «Согласуются ли воспоминания с опытом? Изучение временных аспектов гедонизма сайтов UX», 2019

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

‍Резюме

Движущиеся веб-элементы могут добавить визуальный интерес к сайту, но только в том случае, если они используются в небольшом количестве и в соответствующих местах. Важно уметь выдержать этот баланс. Как только анимации начинают появляться везде – они уже раздражают и дезориентируют пользователя.

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

Анимированные веб-элементы хороши в случаях:

1. Когда их немного, и они не мешают пользователю
2. Когда у их применения есть четкая цель