Анимация в UX-Дизайне
В мире дизайна анимацию используют для описания пространственных отношений и функциональности продукта, не забывая при этом об эстетической составляющей.
На первый взгляд это может показаться сложной задачей, однако при правильном использовании данного инструмента анимация смотрится максимально естественно.
Итак, давайте поговорим об основных составляющих моушн-дизайна, когда и в каких целях он может быть необходим, и как он может улучшить UX вашего продукта.
Моушн-дизайн
Используя анимацию в дизайне, можно рассказать целую историю, описать, как устроено приложение и какие имеет функции. С ее помощью можно буквально «управлять» всем пользовательским интерфейсом, придать навигации более естественный формат, что выводит интерактивный дизайн уже на новый уровень. За каждым кликом и переходом страницы следует история, и грамотный моушн-дизайн помогает ее рассказать.
Мы все хотим рассказать большую историю на маленьких экранах, и анимация дает нам эту возможность. Источник: icons8.com
Почему так важна анимация?
Когда пользователи взаимодействуют с вашим продуктом, они задают следующие вопросы:
- «Что здесь самое важное?»
- «Как мне понять, что делать дальше?»
- «Как я узнаю, что закончил задание?»
Подобные вопросы позволяют в полной мере раскрыть возможности анимации, а именно оптимизировать полученные данные UX и выполнять следующие функции:
- Привлечь внимание пользователя и показать, что произойдет при нажатии определенной кнопки.
- Помочь пользователю ориентироваться в интерфейсе и концентрироваться на отдельных объектах.
- Обеспечивать визуальную обратную связь.
Кроме того, моушн-дизайн позволяет привнести еще одну важную деталь в UX: удовольствие. Нам свойственно отдавать предпочтение «эмоциональным» продуктам в отличие от скучных и заурядных. Поэтому дизайнерам не стоит бояться экспериментов и находить решения, пробуждающие в пользователе эмоциональную связь с данным продуктом.
Язык Анимации
Анимация способствует более комфортному и понятному взаимодействию с продуктом. Элементы моушн-дизайна могут проявляться в разнообразных формах, включая анимацию, переходы и даже 3D анимацию.
Стоит отметить, что ничего не должно отвлекать внимание пользователей от их главной цели — того, для чего они используют то или иное приложение.
Анимация должна способствовать, а не отвлекать от цели
Привлечение внимания пользователя
Неудивительно, что анимация может как заострить внимание пользователя на каком-то объекте, так и отвлечь. С помощью грамотного моушн-дизайна можно сделать пользовательский интерфейс более предсказуемым и управляемым. С его помощью легко увидеть, каким образом появляется новый объект и как скрыть ненужный. Это также дает пользователю понимание, какие действия будут следующими.
Все доступные кнопки и панели не должны вызывать никаких трудностей с управлением и быть заметными. Источник: icons8.com
Структура пользовательского интерфейса должна быть логичной
Изменения в пользовательском интерфейсе часто сопровождаются резкими переходами по умолчанию, что может вызвать трудности в эксплуатации приложения. В когнитивной науке этот термин получил название «слепота к изменениям» — это неспособность обнаружить значительные перемены в поле зрения. Пользователи все же должны понимать, откуда возник тот или иной объект, и где его можно найти повторно, без резких переходов.
Моушн-дизайн заполняет пробел путем определения пространственной взаимосвязи между экраном и элементами. Это позволяет пользователям ориентироваться в интерфейсе и устанавливать визуальную связь с продуктом.
Проектируйте слои пользовательского интерфейса таким образом, чтобы переходы были продуманными и осмысленными. Грамотно созданные переходы помогут сориентировать пользователя довольно быстро.
Подтверждение действий
Анимация способна стимулировать каждое действие пользователя. На каждый клик или переход можно воздействовать с помощью моушн-дизайна. Это может повысить вовлеченность и эмоциональную составляющую. К примеру, посмотрим, как анимация может помочь при вводе неверного пароля на IOS:
IOS использует горизонтальную дрожащую анимацию при вводе неверного пароля. Когда пользователи видят анимацию, они сразу же осознают, что надо сделать.
На первый взгляд может показаться, что данная анимация занимает больше времени, нежели всплывающая иконка ошибки. Однако в действительности, у пользователя может уйти несколько секунд на определение ошибки по сравнению с мгновенной реакцией на анимацию и, как следствие, понимание проблемы.
Эмоциональная связь с продуктом
Анимация может положительно влиять на эмоции пользователя. Как дизайнер вы должны привносить частицу себя и сделать ваш продукт привлекательным и запоминающимся. Путем внедрения анимации в ваш дизайн вы можете заставить пользователей думать, что они взаимодействуют с чем-то индивидуальным.
Даже незначительные элементы, такие как анимированные иконки, могут вызывать положительные эмоции. Источник icons8.com
Заключение
Анимация — это новый век технологий. Это естественный способ взаимодействия с объектами и в то же время совершенно критический в отношении дизайна будущего. Нам придется попрощаться со статичными интерфейсами и создавать более реалистичные и живые. Создание языка анимации для вашего приложения улучшит ваш продукт и дизайн в целом.
Источник: Ник Бабич — разработчик программного обеспечения и автор блога о юзабилити
