Основные принципы использования анимации в UX

Колонка UX-дизайнера SoftServe — о скорости и продолжительности анимации, видах движения объектов.

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

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

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

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

Material Design Guidelines предлагает дизайнерам ограничивать продолжительность анимации до 200-300 мс на мобильных устройствах. Если речь идет об анимации на планшетах, то продолжительность должна быть на 30% длиннее, то есть 400-450 мс.

Причина проста: поскольку размер экрана большой, то и объекты при изменении положения преодолевают долгий путь. Соответственно на носимых устройствах (wearbables) анимация должна быть короче на 30% — от 150 до 200 мс, поскольку путь для изменения короче из-за малого размера экрана.

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

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

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

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

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

Если происходит столкновение объектов, то, в соответствии с физическими законами, энергия удара должна равномерно распределиться между объектами. Не стоит использовать эффект подпрыгивания (bounce effect). Это имеет смысл разве что в исключительных случаях, когда нужно привлечь дополнительное внимание или подчеркнуть брендинг.

Движение объектов должно быть четким, поэтому не нужно использовать эффект размытия (motion blur). Простите, пользователи After Effects, не в этот раз. Он вообще не используется в интерфейсной анимации, поскольку его трудно воспроизвести даже на современных мобильных устройствах.

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

Смягчение помогает изобразить движение объекта естественнее. Это один из основных принципов анимации, его подробно описали в книге "The Illusion of Life: Disney Animation" Олли Джонстон и Франк Томас — одни из ведущих аниматоров студии Disney.

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

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

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

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

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

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

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

В конце концов, экспериментируя с кривой, можно максимально уподобить движение объекта к реальному миру.

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

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

Объекты, которые движутся согласно этой кривой, сначала набирают скорость, а затем медленно сбрасывают ее. Этот тип движения чаще всего используется в анимации интерфейсов. Мой совет: если сомневаетесь, какой тип движения использовать в вашей анимации, применяйте ease-in-out.

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

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

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

Отсюда следует очень важное правило, которым пренебрегают многие дизайнеры, — анимация появления элементов на экране не равна анимации их исчезновения. Что касается случая с боковым меню — оно появляется по кривой ease-out, а исчезает по ease-in-out. Согласно рекомендациям Google Material Design, время появления объекта должно быть длиннее, чтобы привлечь больше внимания пользователя к новому состоянию объекта.

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

С помощью функции cubic-bezier () нам остается описать всего две точки на графике, которые задаются четырьмя аргументами: первые два — координаты x и y первой точки, вторые два — координаты x и y второй точки.

Для удобной работы с кривыми предлагаю использовать сайты easings.net и cubic-bezier.com. На первом есть перечень самых популярных кривых, параметры которых вы можете скопировать в свою программу для прототипирования. На втором — можно просто поиграть с различными параметрами кривой и увидеть, как будет двигаться объект.

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

Разделяют два типа хореографии — равноправное и подчиненное взаимодействия.

Суть этого типа — подчинить появление всех объектов одному определенному правилу.

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

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

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

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

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

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

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

Способ движения объекта вдоль кривой должен совпадать с основной осью скроллинга интерфейса. Например, на следующем примере интерфейс скролиться вверх-вниз, то и соответственно карточка разворачивается по способу vertical out — движется сначала направо, а потом вниз. Обратное движение происходит наоборот, то есть карта сначала поднимается вертикально и заканчивает движение горизонтально.

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

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

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

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

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