Вы читаете перевод исследования от компании Nielsen Norman Group “The Role of Animation and Motion in UX”. Над переводом работали: Анастасия Свеженцева, Ольга Жолудова.
В UX движение и анимация могут приносить пользу и транслировать послания, если использовать их правильно. Анимация чаще всего нужна для незаметной обратной связи во время микровзаимодействий, а не просто как способ развлечь пользователей. В этой статье мы исследуем цели, которые помогает достичь полезная, ненавязчивая анимация.
Большим преимуществом (и одновременно недостатком) UI-анимации является то, что она привлекает внимание пользователей. Наше периферическое зрение (в частности, через палочкообразные фоторецепторы в сетчатке глаза человека) отвечает за обнаружение движения. С эволюционной точки зрения тот факт, что мы можем обнаружить движение вне нашего фокуса внимания, конечно, является преимуществом: мы можем распознать опасность и защитить себя. Но это также означает, что мы склонны и отвлекаться на любые типы движений (значимые или нет). Вот почему UI-анимация в пользовательских интерфейсах может сильно раздражать: трудно же перестать обращать на нее внимание. А если анимация еще и не упрощает решение задачи, важной для пользователя, то она скорее всего существенно ухудшает пользовательский опыт (любой посетитель сайта наверняка кивнет на эту фразу, если хотя раз сталкивался с шевелящейся с краю рекламой).
Хоть анимации и могут быть полезны в захвате внимания пользователей и формировании впечатления от UI, не стоит ими борщить – в первую очередь анимации нужно использовать именно для притягательного и плавного взаимодействия с продуктом.
Какую роль играет UI-анимация
Правильное применение анимации помогает пользователям построить ментальную модель того, как работает система и ускорить взаимодействие с ней. Анимация важна именно для усиления пользовательского опыта, а не просто как способ заполнить время необходимое для загрузки (на самом деле, именно эти анимации больше всего не любят участники тестирования юзабилити). Вместо того, чтобы использовать анимации для создания поверхностного впечатления (которое быстро портится), их лучше всего использовать в качестве инструментов улучшения юзабилити: отображение текущего состояния системы, индикаторы поведения элементов UI, и в качестве маркеров текущего местонахождения пользователя в системе.
Движение и взаимодействие
Анимация часто полезна как форма легкой обратной связи, как намек, что действие было распознано системой. Повсеместный пример – анимация навигационного меню, выезжающего при нажатии на бургер-кнопку (hamburger icon). Так как наши визуальные системы настроены на ловлю движения, короткая анимация сможет гарантировать, что пользователи увидят результат срабатывания кнопки.
American Museum of Natural History: Если тапнуть по значку меню, оно выедет с левой части страницы, а не появится внезапно.
Счастливый день для iPhone: у списка покупок есть небольшая анимация, когда пользователь добавляет новый элемент: после нажатия кнопки «Готово» только что набранное слово (в данном случае «Кофе») мгновенно становится светло-серого цвета, а затем быстро меняется на черный, чтобы показать, что он был добавлен в список. Одновременно с этим поле ввода сдвигается вниз, сигнализируя об ожидании ввода.
Иногда пользователи просто не замечают статическую визуальную обратную связь из-за выпадания из фокуса внимания (change blindness) и в таких случаях анимация особенно кстати. Например, посетители сайта могут не замечать обновление иконки корзины после нажатия кнопки «Добавить в корзину» в Примере Cuisinart ниже. Анимация увеличивает шанс заметить эту обратную связь. (Альтернативой было бы сделать обратную связь заметнее — например, с помощью диалогового окна или с помощью увеличения бейджика. Оба решения, вероятно, будут более навязчивыми, чем простая анимация.)
Анимации также могут быть использованы в качестве формы обратной связи до того, как пользователь совершит какое-либо действие по типу предварительного просмотра нового местоположения элемента при перетаскивании для изменения порядка в списке.
Когда перетаскивание используется для изменения порядка в таблице, маленькая анимация даёт возможность посмотреть на новый порядок.
Анимация сообщает об изменении интерфейса
Анимация может применяться для акцентирования внимания на том, что интерфейс переключился в другой режим. Режимы часто являются сложной концепцией для взаимодействия с пользователями, но анимация может тут помочь двумя способами: (1) сделать заметным изменение режима; и (2) Показать метафору перехода к другому режиму. Например, изменение значка карандаша после нажатия на него сигнализирует о переходе из режима редактирования в режим сохранения.
Значок карандаша, превращающийся в «+», помогает определить разницу между режимом редактирования и режимом добавления.
Помимо отображения перехода между режимами или представлениями данных, анимации также полезны для сообщения об изменениях состояния, которые не вызваны действиями пользователей. Например, индикаторы загрузки показывают, что система еще не готова к вводу данных. Одной из форм этого является "каркасный экран" (интерфейс-заполнитель, который выглядит как каркас загрузочной страницы без содержимого), который анимируется легким бликом, перемещающимся по нему.
Hipmunk: при загрузке результатов поиска рейсов Hipmunk предлагает несколько анимированных подсказок. Во-первых, есть анимированный бурундук, играющий в летчика. (Бурундук решает здесь задачу коммуникации бренда с потребителем, налаживаем контакт и задает тон общения) В то же время возникают и другие анимации связанные с задачей напрямую: число результатов полета неуклонно растет от 0 до 754, что указывает на то, что система выполняет одновременно несколько задач поиска. Кроме того, заполнитель показывает, где будет отображаться содержимое при загрузке результатов полета. Индикатор выполнения вместе с двумя анимированными эллипсами показывает, что результаты всё ещё загружаются. Наконец, по мере загрузки новых результатов и изменения порядка релевантности тонкая легкая анимация подкидывает новые результаты в список сообщает о том, что порядок результатов поиска изменился. Хоть количество одновременных анимаций огромно: сила любой из этих анимаций, привлекающих внимание пользователя, уменьшается из-за конкуренции со всеми остальными. Поэтому вместе они как оркестр играют гармонично.
Анимация для пространственных метафор и навигации
Сама структура информационного пространства часто затрудняет связь с пользователями: напрягает их когнитивные ресурсы, занимает слишком много места на экране – вообщем очень сложно понять, где вы находитесь в системе. В итоге вы пытаетесь определить это по меню, диаграммам, или даже хлебным крошкам. Хотя анимация сама по себе не является подходящей заменой видимой навигации с четкими метками без маркировки, она может сигнализировать пользователям о направлении, в котором они перемещаются в рамках процесса или иерархии; дополнительные визуальные сигналы могут сделать навигацию по сложной IA (информационной архитектуре) интуитивнее и понятнее.
Галерея IOS использует метафору масштабирования (зума), чтобы показать местоположение пользователя в информационном пространстве (в данном случае, представленную моей бесконечной библиотекой фотографий моей собаки, Дафны). Переход между годами, месяцами и днями поддержан небольшой анимацией увеличения или уменьшения масштаба, которая помогает пользователям понять, идут ли они вверх или вниз по иерархии фотографий. Такой подход помогает удерживать внимание пользователя на контенте (милых фотографиях собачки), а не на навигации.
Аналогично, скользящая анимация помогает понять, что пользователь идёт в правильном направлении, например при оформлении заказа.
Amtrak показывает скользящую анимацию, чтобы указать, что пользователь, бронируя билет на поезд, двигается в правильном направлении.
Анимация также может предотвратить потерю ориентиров на пути к цели и сообщить людям, находятся ли они на той же странице или перешли на другую — особенно на мобильных устройствах, где контекст может быть потерян из-за небольшого размера экрана. Выпадающие списки, якорные ссылки, и наложения меню могут сбивать с толку, появляясь мгновенно. Поскольку меню занимает весь экран, взаимосвязь между ним и страницей (например, «является ли это содержимое новой страницей?») трудно понять без анимационной подсказки. (Почему пользователю важно знать, где оно располагается? Если он думает, что находится на новой странице, то он по ошибке может нажать «Назад» для перехода к предыдущему виду.)
WebMD: Когда вы открываете выпадающий список на странице, он сразу же появляется вверху экрана (без анимации). Пользователь может подумать, что новый контент находится на новой странице.
MetMuseum: Якорные ссылки часто сбивают с толку или дезориентируют пользователей, но в этом случае у них есть анимация, чтобы показать, что весь контент содержится на одной странице и где он находится.
Анимация как знак
Анимации помогают пользователям понять, как взаимодействовать с элементами пользовательского интерфейса (UI-элементами). Направление (или другие атрибуты) движения обозначают тип допустимых действий. Например, карта, которая расширяется от нижней части экрана к верхней сигнализирует пользователю, что его можно закрыть, свайпнув вниз. Новая карта, которая выезжает из правой части экрана сигнализирует о том, что ее можно убрать, свайпнув вправо.
Вкладка «Сейчас играет» анимирована таким образом, чтобы помочь пользователю понять, что её можно закрыть, потянув вниз.
Анимация отскока – признак того, что при пролистывании элемента списка отображаются параметры.
Привлечение и захват внимания
Поскольку зрительная система человека очень чувствительна к движению, анимацию можно применить для привлечения внимания пользователей. Главное не забывать, что наша задача быть полезными, а не отвлекать. Плюс не стоит забывать, что применение анимации для привлечения внимания – далеко не самый лучший сценарий на практике (так делают в основном в рекламе).
Refinery29 проводят опрос о влиянии соц.сетей на психическое здоровье: показывают пульсирующее свечение на ползунке, с целью привлечь внимание пользователя и повысить важность. Если бы анимации были широко распространены по всему сайту, они были бы отвлекающей проблемой.
Отвлечение: Перемещение контента на страницах не приносит никакой пользы, а только отвлекает от него пользователя.
Темный паттерн: Обратный отсчет указывает на то, что распродажа близится к концу. Часы активируют мощный инстинкт отвращения к потерям у пользователей, который очень трудно игнорировать.
В итоге, когда UI-анимации быстрые и ненавязчивые, они могут улучшить взаимодействие с пользователем и уберечь от блужданий. Но их нужно использовать с умом, поскольку ими легко отвлечь внимание пользователей.