Принципы анимации в дизайне интерфейсов: тезисы Animation Handbook

Анимация — далеко не новое явление в веб-дизайне. Уже ни у кого не вызывает отторжения или удивления I-образный курсор в текстовых редакторах или эффект встряски в формах авторизации.

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

Мы только идем к этому. Медленно, но верно.

Зачем нужна анимация

Анимация — совсем необязательный элемент веб-страницы. Ее можно сравнить с усилителем вкуса.

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

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

Но это если говорить в общем. Что еще делает анимация?

Связывает изменения и контекст

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

То есть анимация придает изменениям видимость, «осязаемость», благодаря чему и весь дизайн становится более интуитивным.

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

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

Опять же, здесь имеет место священный принцип веб-дизайна «Не заставляйте меня думать». И, действительно, не надо думать — движущиеся элементы четко и понятно скажут, куда идти и что делать.

Пример. Затемнение кнопки говорит нам о том, что на нее нажали. Или внезапное исчезновение всех элементов сообщает, что изображение развернули во весь экран.

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

Привлекает и направляет внимание

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

Конечно, не стоит впадать в крайности и заменять весь текст на сайте анимированными элементами. Некоторые предупреждения и высказывания все-таки более понятны в текстовом виде.

Помогает передавать эмоции

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

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

Анимация привлекательна, но не слишком реальна — это делает ее идеальным мостиком к незнакомым понятиям.

Пример. Почтовый сервис MailChimp использует анимированные элементы, чтобы подбодрить пользователей при отправке писем.

Так, дрожащая рука рядом с кнопкой «Отправить» намекает, что именно в этот момент переживать и волноваться — это нормально. Особенно если предстоит рассылка на 5000 адресатов. А «Дай пять» красноречивее всяких слов говорит, что задача выполнена успешно.

«Оживляет» сайты и приложения

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

Те же принципы работают и с анимацией. Кроме того, так она делает дизайн более цельным, устраняет барьеры между мыслью и интерфейсом.

Главные принципы анимации в UI-дизайне

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

Удивительно, но факт: отдаленно руку к развитию UI-анимации приложил даже сам великий и ужасный Уолт Дисней!

В 30-е годы он был недоволен качеством анимации в студии. Поэтому вместе с аниматорами Олли Джонстоном и Фрэнком Томасом разработал 12 основных принципов, призванных сделать движущиеся элементы качественнее и выразительнее.

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

Время и темп (Timing and pacing)

Показывают, сколько рисунков или кадров занимает действие.

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

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

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

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

Сценичность (Staging)

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

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

Как это работает в интерфейсах? Возьмем счетчики чисел, которые часто встречаются на разных сайтах.

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

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

Сквозное движение (Follow-through)

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

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

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

Второстепенное движение (Secondary action)

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

Важный момент — это действие не зависит от основного действия. Такие детали не должны отвлекать внимание от основного действия и отменять его. Их главная задача. наоборот, — подчеркивать и дополнять.

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

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

Перекрывающее действие (Overlapping action)

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

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

Пример. Собака бежит по улице. Ее уши как будто живут собственной жизнью: опускаются, когда она прыгает, и взлетают, когда приземляется. Движения в основном следуют за движением тела собаки, но смещены таким образом, что выглядят так, будто «догоняют» ее.

Каскадная загрузка страницы: все элементы одинаково анимированы и четко сгруппированы. Интерфейс совместил в себе второстепенное и совмещенное действие

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

Смещение подчеркивает значимость каждого отдельного элемента, его интерактивность. Однако не стоит сильно увлекаться этим методом. Он подойдет, если объектов немного. Это нормально, если 3-5 шагов, но может быть весьма утомительным для 12.

Привлекательность (Appeal)

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

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

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

Главные выводы

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

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

Конечно, анимация — это прекрасно, но не стоит теперь игнорировать весь остальной контент и «прикручивать» движущиеся элементы к месту и не к месту.

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

И не забывайте о чувстве меры и правиле: хорошая анимация — та, которая ощутима и невидима одновременно.