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

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

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

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

Иными словами, с помощью анимации элемент переходит от одного состояния к другому. Например: резкая смена цвета, размера, формы или движение по интерфейсу. Внимание пользователей привлекает сам процесс, когда происходит что-то неожиданное, появляются новые элементы или другие «вау-эффекты».

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

Основная доля анимаций в интерфейсе выпадает на микровзаимодействия — это незначительные движения, которые глобально не влияют на состояние интерфейса, но для пользователя играют одну из важных ролей:

• Подтверждают действия пользователя и показывают изменения, которые он запустил.
• Отображают статус системы. Микровзаимодействия запускают движение элементов и дают понять, что процесс идет и сайт не «завис».
• Подсказывают, какие действия можно совершать. Если кнопка подсвечивается или увеличивается при наведении курсора, значит она активна.

Пример микровзаимодействий от Brightlab
‍

Важное правило микровзаимодействий — они должны состоять из одного простого движения.

Основные задачи более крупной анимации:

• Вовлечение пользователя. Анимация способна удерживать внимание человека и вовлекать его в процесс. Из интереса он остается на сайте — и как результат, конверсия повышается.
• Заполнение времени ожидания. При длительной загрузке страницы многие пользователи закрывают сайт. Наблюдать за статичным экраном не так интересно, как за интригующей анимацией.
• Активное взаимодействие с аудиторией. Визуальная обратная связь (уведомления об ошибках, предупреждения, приветствие) создает эмоциональный контакт между пользователем и интерфейсом.
• Скроллинг. Длинную и загруженную контентом ленту пользователь может листать с помощью эффектов анимации.

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

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

Тайминг и скорость

Соблюдайте комфортный для пользователя темп. Из-за высокой скорости человек может вообще не заметить изменений, а слишком низкая скорость будет похожа на глюк системы или ее «зависание». Оптимальное время для экранного перехода  — 200-500 миллисекунд. Обращайте внимание на то, что скорость зависит от разрешения экрана — чем больше экран, тем скорость ниже, и наоборот.

Сайт: MultiversX

Последовательность

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

Логика

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

Сценичность и внимание

Основная цель этого принципа — привлечь внимание пользователя к тому, что важно прямо сейчас, сосредоточить его на ключевом моменте. Если присутствует иерархия элементов, следует выделить ведущий элемент с помощью анимации.

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

Сайт: Dior

Привлекательность и харизма

Здесь проявляются уникальные черты интерфейса — то, что будет отличать вас от конкурентов и за что полюбят вас читатели. Этот принцип выражается в нестандартных решениях, ярких деталях, необычных иконках и шрифтах. Он дает понять, что не каждый элемент должен приносить пользу и быть функциональным. Например, к привлекательным элементам можно отнести «лайк» в социальных сетях или «свайп» — это то, что особенно любят пользователи и благодаря чему сеть держит свою популярность, но особой важности эти элементы не несут.

Cамые распространенные случаи, когда без анимации не обойтись:

• Улучшение юзабилити: анимация наглядно объясняет, какую кнопку нажать и что делать дальше.
• Визуальная эстетика, которая может сохранить вовлеченность на долгое время. Но даже визуальный эффект должен следовать своим задачам: быть забавным или строгим, предлагать уникальный контент, чтобы пользователь поделился со своей аудиторией и т. д.
• Коммуникация с носителями разных языков.
• Снижение умственной нагрузки: анимация способна облегчить сложное содержание и предложить пользователю уже готовые варианты решений.

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

1. Анимация объекта или микроанимация

Данный вид используется для обозначения элементов: кнопок, иконок, ссылок.

Задача: подтолкнуть пользователя к простому действию, о котором он мог не подумать. Например, поставить оценку сайту, нажать на кнопку или навести курсор в нужное поле.

Пример микроанимаций от Luiza Hryckiewicz

2. Анимация изображения

К этому виду можно отнести слайд-шоу из фотографий, яркие рекламные баннеры, «ожившие» картинки — это делает интерфейс креативным, заметным и запоминающимся.

Анимация: UPROCK

3. Анимация текста

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

4. Анимация при загрузке

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

Сайт: AI Takes Over

5. Анимация при навигации

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

6. Анимация пошаговых действий пользователя

Это мотивирует человека завершить действие и создает ощущение реального общения с сайтом.

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

• Плавное перемещение

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

• Параллакс

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

Анимация: UPROCK
‍

• Маскировка или перекрывающее действие

Одно изображение частично перекрывает другое, при этом они не зависят друг от друга. Эффект отлично подходит для случаев, когда пользователь ознакомился с одними блоками и уже открывает новые, при этом старые можно замаскировать.

Сайт: Muchacha

‍

• Затемнение и осветление

Эффект, который выручает в случаях, когда необходимо сместить фокус внимания с одного объекта на другой, при этом оба оставить на экране. Если вы хотите выделить конкретный объект, достаточно затемнить все остальные элементы.

• Морфинг

Это превращение одного объекта в другой на глазах у пользователя. Используется при загрузке страницы или при смене иконок.

Сайт: Motion Design Principles

‍

• Сквозное движение

Эффект придает интерфейсу реалистичности — объекты плавно передвигаются и немного отклоняются от заданной точки, что создает ощущение, будто они имеют вес и подчиняются законам физики.

Сайт: The Wall

Кто создает веб-анимацию

Программист или дизайнер — вот в чем вопрос. В каждой компании есть свой функционал и распределен он согласно внутреннему уставу.

Чаще всего анимацию на сайте создает специально обученный человек: разработчик, программист. В этом случае необходимо составить четкое задание и объяснить специалисту, что вы хотите от него получить — это задача дизайнера.

Есть несколько вариантов, как составить четкое ТЗ:

• Самый популярный способ — подобрать референсы (образцы), которые наиболее приближены к вашей задумке, и передать их разработчику.
• Второй вариант — отрисовать анимацию в специальной программе (Adobe Animate, Adobe After Effects и др.), после чего отправить видео разработчику, на основе которого он будет осуществлять эту идею.

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

Работа над анимацией: с чего начать

Прежде чем начать проектирование анимации, необходимо определить:

1. количество времени, которое она будет длиться,
2. скорость процесса: в каком темпе анимация начнется, будет длиться и с какой скоростью закончится.

• Длительность анимации

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

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

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

• Скорость анимации

Выше мы уже говорили об этом важном принципе. Рассмотрим его подробнее.

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

0,2 – 0,5 с (200 – 500 мс)

Эта скорость подходит для того, чтобы анимировать текст, всплывающие элементы или списки.

0,1 – 1 с (100 – 1000 мс)

Эта скорость подходит для небольших изменений: переключение вкладок, перелистывание).

Эти данные обнародовала компания Nielsen Norman Group (научно-исследовательская и консалтинговая компания по изучению пользовательского опыта) в процессе исследования модели человеческого процесса.

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

Если говорить о влиянии анимации на пользователя, можно выделить несколько важных моментов:

1. Анимация помогает ориентироваться на сайте: с анимацией пользователь быстрее дойдет до нужной задачи.
2. Развлекает и вызывает интерес. Однообразные интерфейсы не интересны, поэтому важно добавлять интригу, рассказывать истории при помощи анимации.
3. Усиливает бренд. Людям нравится идти в ногу со временем, поэтому бренды, которые используют современные тренды, укрепляют связь со своими пользователями.
4. Демонстрирует изменения. Когда пользователь не понимает, выполняется его действие или нет — он раздражается, ему необходимо точно знать, что все работает и система отвечает на его действия. Анимация помогает понять пользователю, что происходит на сайте, что система отвечает на его действия.
5. Мотивирует на совершение целевых действий. Есть множество способов организовать мотивацию, например, после каждого пройденного шага при регистрации добавлять подбадривающую анимацию, которая будет вдохновлять завершить действие до конца.

Используйте анимацию в меру

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

Отслеживайте качество

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

Соблюдайте иерархию и единый стиль

Сначала идет основной заголовок, затем подзаголовок — следите за тем, чтобы они появлялись с одним эффектом.

Следите за ритмом

Анимация не должна быть слишком затянутой — это лишнее ожидание может стоить потери пользователя. Но и слишком короткой не стоит делать анимацию — так она будет незаметна.

Адаптируйте анимацию

Весь контент: фотографии, текстовые блоки, эффекты и другие элементы должны одинаково хорошо отображаться на любом носителе.

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

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

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