Полезный лучше, чем восхитительный.

Если вы читали мою предыдущую статью, вы, вероятно, уже поняли, что я очень люблю анимацию (aka анимационный дизайн). Кроме того, что она вдыхает жизнь в статичное изображение, анимация может помочь вам рассказать историю гораздо эффективнее. Просто посмотрите на миллионы людей, приклеенных к своим экранам, наблюдая за анимационными сериалами (в том числе, и я … wubba lubba dub dub!). Однако, это не все, что может анимация, и именно поэтому я решил написать эту статью.

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

12 основных принципов анимации, красиво анимированных Cento Lodigiani

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

Это был определенно шаг в правильном направлении, но по пути, я думаю, мы случайно наступили на что-то коричневое, и это немного воняет.
ПОДОЖДИТЕ! Пока еще не вытаскивайте вилы и факелы, позвольте мне сначала объяснить, что я имею в виду на примере личной истории.

Давайте вернемся назад в 2003 год. Я только начал работать в графическом дизайне и мало знал о нем. Я помню первый инструмент, который я освоил — Macromedia Freehand, и это было улетно. Возможности были бесконечными. Градиенты, тени, шрифт Comic Sans и я использовал все это вместе. Результат? Ну, как вы, наверное, можете себе представить, это было похоже на беспорядок. Но давайте простим молодому мне неудачный опыт. Я был неконтролируемым ребенком в конфетном магазине, поэтому я съел все конфеты, которые хотел, и все закончилось болью в животе. Как и Джон Сноу, я ничего не знал.

Назад к настоящему. Вы, вероятно, спрашиваете: Как это связано с анимацией? Я думаю, ВСЕМ. Разработчики и дизайнеры — это молодые люди в этой истории, и во многих приложениях и на сайтах они безрассудно используют анимацию, сведя на нет весь смысл улучшения пользовательского опыта с помощью анимации.

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

Начнем с очевидного.

1. Анимация не должна быть запоздалой

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

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

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

Это приводит нас прямо к следующему принципу.

2. Анимация должна служить цели

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

Смягчите резкие переходы

Отсутствие переходов vs Горизонтальной смены слайдов
Отсутствие переходов vs Горизонтальной смены слайдов
Дизайнер вы или нет, мы все знакомы с этим. Вы находитесь на экране «A», вы нажимаете кнопку и БAM! Внезапно появляется совершенно другой экран (B). Тогда вы не удивляетесь, откуда вы пришли? Я нажал правую кнопку? Что теперь? Что делать, если экран «B» визуально похож на «A»? Пользователь может даже подумать, что ничего не произошло. Это показывает нам один из самых подходящих вариантов для анимации — момент перемен. Подумайте о времени, которое требуется, чтобы сделать «путешествие» с экрана «A» на экран «B», какие объекты останутся на экране и показать пользователям, как они туда попали. Не переусердствуйте, хотя, как вы обнаружите дальше, анимацию лучше делать «невидимой».

Обеспечивайте контекст

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

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

Предоставьте ориентацию

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

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

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

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

Обеспечьте мгновенную обратную связь.

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

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

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

Сделайте так, чтобы контент ощущался живым.

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

Рассказ истории.

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

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

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

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

3. Анимация должна отражать бренд

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

Анимация должна отражать бренд
A: Быстро и энергично, B: Плавно и естественно, C: Пружинисто
Возможности бесконечны, но, прежде чем сойти с ума и сделать все ваши переходы, как желатин, подумайте о своем бренде, о вашем пользователе и тоне, который вы хотите передать. Если анимация не соответствует тону, ваши пользователи могут чувствовать себя не в своей тарелке и потерять доверие к вашему бренду. Представьте, что ваше банковское приложение имеет такой же энергичный стиль анимации, как в игре. Могли бы вы доверять такому приложению?

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

4. Анимация не должна быть героем

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

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

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

5. Анимация должна ощущаться естественной

Анимация должна ощущаться естественной
Линейная анимация vs Сдвига туда-сюда
Я знаю, что слово «ощущаться» может быть неоднозначным, подождите минутку. Поскольку пользователь напрямую взаимодействует с пользовательским интерфейсом, есть определенное ожидание того, как пользовательский интерфейс поведет себя, в известной мере, по правилам физики. Список, который реагирует на скорость, с которым вы взаимодействовали — это прекрасный пример, но то же самое относится и к другим объектам.

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

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

6. Анимация не должна попусту тратить время

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

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

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

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

Последние препятствия

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

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

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

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

Переходные интерфейсы от Паскуале Де Сильва
Анимация пользовательского интерфейса и UX: Не такая уж тайная дружба от Валь Хэд
Невидимая анимация от Стивена Фабра
Создавая юзабилити движением: манифест UX в движении от Issara Willenskomer

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

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

Спасибо за прочтение! 🙂

Статьи по теме: