На обложке: Материальная анимация Google (источник)
В настоящее время анимация становится все более важным аспектом взаимодействия человека и компьютера. Благодаря растущим вычислительным возможностям устройств дизайнеры могут рассчитывать на плавное выполнение сложных движений. Тем не менее, с великой силой приходит великая ответственность. Хотя большинство дизайнеров это понимает и не нагружает интерактивный дизайн изощренной анимацией, вопрос о том, как более эффективно и успешно использовать движения, все еще стоит ребром.
Руководство
Один из способов навести дизайнера на мысль об ответственном и логичном использовании анимации — установить ряд правил.
В компании Apple рекомендации относительно анимации в визуальном дизайне прописаны в Human Interface Guidelines — анимация в iOS несет скорее эстетическую и визуальную функцию, чем важную для разработки UX. В отличие от них, Google имеет гораздо более полный раздел, где на тему движения в дизайне пишутся материалы и составляются доклады. Они стараются установить общие стандарты для всех приложений, разработанных для Android. Google разработал 4 основных принципа: адаптивный, естественный, сознательный и обдуманный.
Адаптивный дизайн (источник: Google)
Естественный дизайн (источник: Google)
Сознательный дизайн (источник: Google)
Обдуманный дизайн (источник: Google)
В рамках этих базовых тезисов компания составила список рекомендаций и предложений об использовании анимации в Material Design (Материальном дизайне). Они вводят в употребление множество различных терминов, таких как Material Response, Point of Origins, Delightful Details и другие.
Основная концепция Материального дизайна — соблюдать правила трехмерного пространства и придавать объектам и персонажам соответствующий вид посредством визуализации объема и веса. Некоторое время назад скевоморфизм был популярной тенденцией в дизайне. И хотя теперь это не так, в анимации он все еще сохраняется: в дизайне движений имитируют законы физики и последствия действий пользователей.
Движение на языке Материального дизайна Google
Замечания
Хотя вышеупомянутые рекомендации составлены авторитетными людьми из Силиконовой Долины, это всего лишь ориентиры, которые поддаются критике. Есть люди, принципиально не согласные с некоторыми положениями Материального дизайна. Так, например, Google предлагает ускорять все предметы, выходящие из экрана. По словам ведущего разработчика Материального дизайна Джона Шлеммера, неважно, где именно они остановятся.
«В руководстве по Материальному дизайну Google, похоже, думают, что вы должны только ускоряться при выходе из экрана», — Паскаль Д’Сильва (источник)
Конечно, мнения могут разниться, но лично мне кажется, что спать по ночам будет легче, зная: то, что вы вытолкнули из экрана, все же однажды остановится. Кроме того, соблюдение принципов Google уравнивает всех дизайнеров. В таком случае выделиться на фоне остальных и сделать креативную анимацию вряд ли получится. Если движения будут одинаковыми во всех приложениях, возможно ли будет удержать пользователя и отличаться чем-то от конкурентов?
Анимация в приложении о фильмах. Несмотря на то, что подобная демонстрация отличает приложение, она не может быть нейтральной — либо привлекает, либо отталкивает.
Другие принципы
Однако же руководящие принципы составляют не только «гиганты» отрасли. Исара Виленскомер в статье «12 принципов UX в движении» оглашает ряд правил разработки анимации, основываясь на принципах Disney и своем 15-летнем стаже. Возможно, вы уже прочли его статью, поэтому возьмем случайный фрагмент, который поразил меня. После объяснения особенностей анимации в UI и UX и важности их различения, Виленскомер для примера отмечает разницу между действием в реальном времени и в статичном режиме, говоря о том, каким образом отличается работа с движением в каждом из этих случаев.
Действие в реальном времени
Статичный режим
С точки зрения UX-дизайна, подумать о различиях и о том, что они значат для пользователя, действительно важно. Это актуально для клиентского цикла обратной связи. Поэтому, независимо от предложений Google по разработке разных видов анимации, важно понимать, почему компания предлагает такие модели. Какая теоретическая база стоит за этим? Почему определенное движение работает хорошо только при определенном взаимодействии? Почему важно использовать анимацию в первую очередь, если «хороший дизайн — практически полное его отсутствие»? Именно такие размышления заставят относиться к возможностям анимации ответственно. Если вы не знаете того, что делаете, лучше не делать этого совсем.
В примере выше показаны иконки, которые появляются в области просмотра построчно. Тем не менее каждая кнопка — отдельная единица и выполняет определенную роль, потому было бы логичнее разработать индивидуальное движение для каждой из них. Подобная анимация противоречит поведению и, соответственно, ментальной модели пользователя. Такие детали легко упускаются из вида, однако же имеют большое значение для UX-дизайна. Принципы, аналогичные тем, что описаны в статье Виленскоммера, помогают задуматься о том, что вы разрабатываете и как на самом деле элементы вашего дизайна должны двигаться.
Чрезмерная анимация воздействует на восприятие, увеличивает скорость приложения и привлекает излишнее внимание пользователя. Неправильно использованные пространственные шаблоны заставляют клиентов чувствовать себя потерянными
Последствия неправильного или чрезмерного использования анимации в приложении могут быть довольно серьезными. Излишняя анимация разочарует пользователей: неоправданное привлечение внимания вызовет противоречия между использованными пространственными шаблонами, непоследовательными движениями и ментальной моделью пользователей. Также это может негативно отразиться на общем фоне: приложения, направленные на медитацию и самосознание, должны содержать гораздо менее быструю анимацию, чем приложения, направленные на продуктивность и производительность. Более того, они должны дать пользователям расслабиться.
Шаблон дизайна анимации для присвоения рейтинга в приложении мероприятий на открытом воздухе
В свою очередь, продуманная и логичная анимация позволит пользователям понять, откуда появляются определенные элементы, что наоборот — укрепит их ментальную модель. Подобная анимация погрузит клиента в спокойствие — пользователь будет думать, что контролирует процесс и знает, что происходит.
Примечание. В этом примере шаблон, присваивающий звезды, — возможно, не самый лучший выбор, тем не менее, он ясно показывает движение.
Таким образом, можно смело сказать, что анимация может повлиять на проблемы UX-дизайна, даже самого лучшего.
“Где анимация служит цели, основанной на обратной связи с пользователем” — Марк Ди Сквилло (источник)
Способ сокращения времени загрузки
Uber как пример использования анимации, чтобы сократить время загрузки в восприятии пользователей
На мой взгляд, лучший способ решить UX-проблему — соотнести анимацию со временем. Загрузочные экраны будут восприниматься пользователем проще, если будут дополнены движениями — вне зависимости от характера анимации. Такой подход основан на теории о том, что восприятие времени — субъективный опыт (источник). Статья показалась мне довольно интригующей, в ней автор подробно описывает время в контексте UX- и UI-дизайна.
Пример сочетания анимации, которое делает приложение отличительным и узнаваемым, а также условно сокращает время загрузки и направляет внимание пользователей на определенные элементы (источник)
Инструменты
Поскольку анимация в приложениях становится явлением все более частым, мы наблюдаем возникновение инструментов прототипирования и тестирования движений в приложениях — такие как Principle или Lottie от Airbnb — что значительно облегчает перенос готовой анимации в приложение или веб.
Lottie от Airbnb
Подобные инструменты упрощают технологию и позволяют дизайнерам пофантазировать над движением и анимацией в дизайне приложений, а также позволяют узнать о лучших практиках, принципах и рекомендациях относительно дизайна движений.
Резюме
Вкратце: в 2018 году важно, чтобы UX-дизайнеры понимали разработку анимации и учились делать ее правильно, основываясь на базовых принципах и рекомендациях. Кроме того, важно помнить, что есть ряд случаев, когда анимация — едва ли не лучшее решение UX-проблемы, как в примере с сокращением времени загрузки приложения. Также стоит отметить доступность инструментов для создания движений, что еще раз подчеркивает значимость ответственности и правил использования анимации в UX-дизайне.
