Анимация интерфейса

«Мягкая» и детально проработанная анимация интерфейса создает не только опыт интуитивной понятности и запоминаемости ресурса, а и эмоциональную связь между сайтом и пользователями.

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

Слово «анимация» происходит от древнего латинского слова «anima», что переводится как «душа». Это означает, что попытки вдохнуть жизнь в неодушевлённые объекты появились тысячи лет назад, когда Пигмалион попробовал пробудить к жизни своё создание – статую Галатеи.

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

Компания Disney занимается анимацией уже много лет, и в 1981 году была опубликована книга «Иллюзия жизни: Анимация Disney», в которой перечислялись 12 принципов анимации. Они описывают то, как использовать анимацию для создания у зрителей, смотрящих на экран, ощущения реального мира.

Как анимация появилась в веб-дизайне?

Анимация появилась в веб-дизайне очень давно. Сначала были крошечные файлы .gif, состоящие из множества картинок, которые обеспечивали своей быстрой сменой эффект движения на изображении. Это были тёмные времена, ознаменованные тоннами мигающих карт, танцующими котами и другими вещами, которые мы бы предпочли больше никогда не видеть. Тогда никто не считал анимацию средством улучшения юзабилити сайта. Она, преимущественно, использовалась в качестве украшения или просто для развлечения.

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

Сегодня для создания анимации frontend-дизайнеры и разработчики используют легковесный JavaScript и CSS кодирования, которые помогают добавлять движущиеся элементы на сайт, не перегружая его при этом. Теперь анимации используются для улучшения юзабилити сайта, а не просто для потехи. Они являются выдающимся инструментом для веб-дизайнеров, помогая делать сайты лучше и проще в использовании.

Улучшение юзабилити при помощи анимации

Анимации должны использоваться, чтобы обеспечивать у пользователей лучшее понимание природы объектов, а также то, как это может быть и должно использоваться в структуре чего-либо.

Во многих случаях анимационные эффекты используются для привлечения пользовательского внимания к важным деталям.

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

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

Движение может рассказать пользователям больше о том, что это за элемент и как его использовать.

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

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

Повествовательный сайт также может извлечь выгоду от внедрения анимации. Она поможет показать посетителям, каким должен быть следующий шаг, как выбрать что-либо или куда двигаться дальше на сайте.

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

Лучше включить анимацию в элементы пользовательского интерфейса, например: в навигационные меню и формы подписки.

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

Frontend-дизайнеры и разработчики нашей Студии используют «мягкую» и детально проработанную анимацию интерфейса, которая позволяет создавать опыт интуитивной понятности и запоминаемости ресурса, а также эмоциональную связь между сайтом и пользователями. На наших сайтах приятно находиться и хочется возвращаться к ним снова и снова. Помимо решения бизнес-задач они приносят удовольствие и создают опыт понимания, интуитивной легкости и восторга. Что в свою очередь, значительно повышает показатели.