Анимация в UX должна быть ненавязчивой, краткой и едва заметной. Используйте ее для обратной связи, изменения состояния и метафор навигации, а также для улучшения значимости.
В UX движение и анимация могут быть полезными и коммуникативными, если использовать их сдержанно. Движение чаще всего подходит в качестве формы ненавязчивой обратной связи для мировзаимодействий, а не для того, чтобы вызывать восторг или развлекать пользователей. В этой статье мы рассмотрим цели полезной, ненавязчивой анимации обратной связи. Во второй (готовящейся) статье мы обсудим детали таймингов и движения, чтобы эти анимации выглядели плавными и естественными.
Большим преимуществом (а также недостатком) движения в интерфейсе является то, что оно привлекает внимание пользователя. Наше периферическое зрение (в частности, посредством фоторецепторов сетчатки глаза в форме палочек) отвечает за обнаружение движения. Тот факт, что мы можем обнаружить движение вне центра нашего поля зрения, является, конечно, эволюционным преимуществом: мы можем заметить опасность и защитить себя. Но это означает, что мы чувствительны и склонны отвлекаться на любые движения (значимые или нет). Вот почему движение в интерфейсах может легко стать раздражающим: трудно перестать замечать его, и, если оно не имеет отношения к поставленной задаче, оно может существенно ухудшить пользовательский опыт (как может подтвердить любой веб-пользователь, столкнувшийся с движущейся рекламой).
Хотя анимации могут быть полезны и могут формировать ожидания пользователей в отношении интерфейса, ими не следует злоупотреблять. В первую очередь – это инструмент для предоставления пользователям легко заметной, плавной обратной связи.
Цель анимации интерфейса
Ненавязчивое использование анимации может помочь пользователям сформировать ментальные модели того, как работает система, и как они могут взаимодействовать с ней. Анимации менее критичны для пользовательского опыта, когда они просто заполняют время визуальными стимулами в моменты перехода (на самом деле, именно эти анимации простоя часто раздражают участников тестирования юзабилити). Вместо того, чтобы использовать анимации для обеспечения поверхностного восторга (который быстро проходит), анимации могут быть использованы для юзабилити: как подсказки о том, что в настоящее время происходит с системой, как индикаторы поведения элементов интерфейса, и как легко понятные пространственные метафоры для местоположения пользователя в информационном пространстве.
Движение для обратной связи
Анимации часто полезны, как форма заметной обратной связи о том, что система распознала действие пользователя. Распространенный пример – анимация навигационного меню, скользящего по странице при нажатии на иконку гамбургер-меню. Поскольку наша зрительная система настроена на движение, короткая анимация может гарантировать, что пользователи увидят обратную связь.
Американский музей естественной истории: Если щелкнуть по иконке меню «_Exhibitions» в центре страницы, панель меню смещается с левой стороны вверх над контентом, а не появляется внезапно, как новая страница._
Epicurious для iPhone: функция списка покупок отображает тонкую анимированную обратную связь, когда пользователь добавляет новый элемент в список: после нажатия кнопки «Готово» на клавиатуре только что набранное слово (в данном случае «Coffee») мгновенно становится светло-серым, а затем быстро меняется на черный, чтобы показать, что запрос был принят. В то же время поле ввода одновременно исчезает и опускается вниз, сигнализируя о том, что оно ожидает нового ввода.
Иногда статический визуальный фидбек игнорируется из-за слепоты невнимания. Например, люди могут не заметить обновление значка корзины после нажатия кнопки «Добавить в корзину» в приведенном ниже примере с сайтом Cuisinart. Анимация увеличивает шанс заметить эту обратную связь. (Другой альтернативой было бы сделать статический фидбек более заметным. Например, посредством диалогового окна или с использованием большего значка. Оба решения, вероятно, будут более назойливыми, чем простая анимация).
Cuisinart.com: после того, как пользователь нажимает кнопку «Добавить в корзину», значок корзины просто обновляется без анимации. Поскольку значок маленький и находится далеко от кнопки «Добавить в корзину» (там, где, вероятно, ее ищет пользователь), это изменение легко не заметить. В результате пользователь может добавить один и тот же товар в корзину несколько раз.
Анимации также могут быть использованы в качестве формы обратной связи до того, как пользователь совершит какое-либо действие. Например, предварительный просмотр нового местоположения элемента при использовании перетаскивания для изменения порядка в списке.
Airtable: Когда перетаскивание используется для изменения порядка столбцов в таблице, едва заметная анимация дает предварительный просмотр нового порядка, прежде чем пользователь отпустит курсор и совершит действие.
Движение, чтобы сообщить изменение состояния
Движение может использоваться, чтобы указать, что интерфейс переключился в другое состояние. Например, из-за изменения режима. Режимы часто представляют собой сложную концепцию общения с пользователями, но анимация может помочь двумя способами: (1) сделать заметным изменение режима; и (2) путем предоставления концептуальной метафоры смены режима. Например, изменение значка карандаша на дискету после нажатия на него сигнализирует о переходе из режима редактирования в режим сохранения более отчетливо, чем мгновенное переключение одного значка на другой.
Material Design: значок карандаша, который превращается в значок +, помогает определить разницу между режимом редактирования и режимом добавления нового документа.
Помимо отображения перехода между режимами или представлениями данных, анимации также полезны для сообщения об изменениях состояния, которые не инициируются действиями пользователей. Например, индикаторы загрузки показывают, что система еще не готова принять ввод. Одной из форм этого является «skeleton screen» (интерфейс-плейсхолдер который выглядит как каркас загрузочной страницы без содержимого), который анимируется движущимся по нему легким бликом.
Hipmunk: загружая результаты поиска рейсов, сайт Hipmunk предлагает несколько анимированных подсказок. Во-первых, анимированный бурундук, притворяющийся, что летит. (Несмотря на то, что бурундук симпатичен, он не важен для обратной связи, но полезен для определения тона бренда). Однако в то же время возникают другие, более коммуникативные анимации: число результатов рейсов постоянно увеличивается от 0 до 754 – это указывает на то, что система выполняет несколько федеративных поисков одновременно. Кроме того, плейсхолдер показывает, где контент будет отображаться при загрузке результатов рейсов. Индикатор выполнения, вместе с двумя анимированными эллипсами показывает, что результаты все еще загружаются. Наконец, по мере загрузки новых результатов и изменения порядка релевантности едва заметная анимация показывает новые результаты, появляющиеся в списке, и должна сообщить, что порядок результатов поиска динамически изменяется. Однако количество одновременных анимаций подавляет: сила любой из этих анимаций, привлекающих внимание пользователя, уменьшается из-за конкуренции с остальными.
Движение для пространственных метафор и навигации
Структура сложного информационного пространства часто затрудняет общение с пользователями, не обременяя их когнитивные ресурсы и не занимая слишком много места на экране. Сканирование с помощью навигационных меню, древовидных диаграмм или даже хлебных крошек, чтобы выяснить, где вы находитесь в информационной иерархии, представляет собой сложный тип когнитивной работы. Хотя анимация сама по себе не является подходящей заменой видимой навигации с четкими метками без маркировки, она может сигнализировать пользователям о направлении, в котором они движутся в рамках процесса или иерархии. Эта дополнительная подсказка может сделать навигацию по сложной информационной архитектуре более интуитивно понятной.
Анимации масштабирования могут помочь пользователям понять направление своего путешествия в иерархическом информационном пространстве, не глядя на древовидную диаграмму. Уменьшение показывает меньше деталей, но больше объектов, что предполагает, что пользователь перемещается вверх по иерархии, в то время, как увеличение показывает больше деталей, но меньше объектов, создавая впечатление углубления в иерархию.
Приложение iOS Фото использует метафору зума, чтобы показать местоположение пользователя в информационном пространстве (в данном случае, представленную бесконечной библиотекой фотографий моей собаки Дафны). Переход между годами, месяцами и днями имеет ненавязчивую анимацию увеличения или уменьшения масштаба, которая помогает пользователям понять, идут ли они вверх или вниз по иерархии фотографий. Такой подход помогает удерживать внимание пользователя на контенте (милые фотографии собаки), а не на навигационном chrome.
Аналогично, скользящая анимация помогает установить, что пользователь движется вперед или назад в таком процессе, как оформление заказа.
Amtrak показывает тонкую скользящую анимацию, чтобы указать, что пользователь продвигается вперед через процесс бронирования билета на поезд.
Анимации также могут предотвращать дезориентацию и сообщать людям, находятся ли они на той же странице или перешли на другую – особенно на мобильных устройствах, где контекст может быть потерян из-за небольшого размера экрана. Аккордеоны, якорные ссылки и оверлей-меню могут дезориентировать или сбивать с толку, если изменения появляются мгновенно. Поскольку оверлей-меню заполняет весь экран, взаимосвязь между оверлеем и базовой страницей (например, «является ли этот контент новой страницей или чем-то еще?») трудно понять без анимированной подсказки. (Зачем, если пользователи знают, где они находятся? Если они думают, что находятся на новой странице, у них часто возникает искушение использовать кнопку «Назад» для перехода к предыдущему представлению. К сожалению, в случае оверлеев или аккордеонов это действие уберет их со страницы вместо простого закрытия элемента).
WebMD: при открытии аккордеона связанный контент немедленно отображается вверху экрана (без анимации). Пользователь может подумать, что новый контент находится на новой странице. Анимация прокрутки (показывающая, как страница перемещается таким образом, что аккордеон оказывается в верхней части экрана), за которой следует расширение, может помочь пользователю понять, что это не полностью новая страница, а аккордеон в содержимом страницы.
MetMuseum: якорные ссылки часто сбивают с толку или дезориентируют пользователей, но в этом случае якорные ссылки используют анимацию с плавной прокруткой, чтобы показать (1), что весь контент содержится на одной странице и (2) где он находится на этой странице.
Движение, как индикатор
Анимации помогают пользователям понять, как взаимодействовать с элементами пользовательского интерфейса. Направление (или другие атрибуты) движения обозначает тип допустимых действий. Например, карточка, которая расширяется от нижней части экрана к верхней части, сигнализирует пользователю, что ее можно закрыть, потянув вниз. Новая карточка, которая появляется справа от экрана, сигнализирует, что ее можно закрыть, проведя пальцем вправо.
Apple Music для iPhone: карточка «Сейчас играет» анимирована таким образом, чтобы помочь пользователю понять, что это представление можно отклонить, потянув вниз, а не проведя пальцем влево или вправо по краю.
Car2Go для iPhone: анимация короткого отскока – это индикатор того, что пролистывание элементов списка, покажет варианты.
Положительные и отрицательные аспекты привлечения внимания
Поскольку зрительная система человека очень чувствительна к движению (в частности, к движению, которое кажется одушевленным), анимация может использоваться для привлечения внимания пользователей, как в положительном ключе, так и в отрицательном. С одной стороны, это может сделать едва заметный признак очевидным, но с другой стороны, бесполезная анимация отвлекает и раздражает пользователя. Кроме того, использование анимации для того, чтобы привлечь внимание пользователей или вызвать страх потери – это темный паттерн: неэтичное применение принципов пользовательского опыта и когнитивной психологии, чтобы заставить пользователей делать то, чего они обычно не делают.
Полезный аспект: Refinery29 внедряет опрос в середине истории о влиянии психического здоровья в социальных сетях и показывает сияющий ореол на ручке слайдера, чтобы усилить значение и привлечь внимание пользователя. Такое ограниченное использование анимации является относительно полезным (хотя в большинстве случаев бесполезным) способом привлечения внимания пользователя. Если бы анимации были широко распространены по всему сайту, эта анимация была бы отвлекающей проблемой юзабилити.
Отвлекает внимание: движущаяся закорючки на страницах контента сайта Outline не приносит никакой пользы, но излишне отвлекает внимание пользователя от контента.
Темный паттерн: мигающие часы обратного отсчета на сайте warmlydecor.com указывают на то, что распродажа близится к концу (по удивительному совпадению, чуть менее чем час для каждого продукта на сайте, независимо от того, когда вы его посещаете). Часы активируют мощный инстинкт отвращения к потерям у пользователей, и очень трудно избежать его мигания (с небольшим увеличением цифр, когда они мигают).
Таким образом, когда анимации интерфейса являются ненавязчивыми и краткими, они могут улучшить опыт пользователя и могут передавать обратную связь и изменения состояния, предотвращать дезориентацию и усиливать значения. Но их не следует чрезмерно использовать, поскольку они могут легко стать подавляющими и отвлечь пользователей.
Перевод статьи nngroup.com
Найстарші коментарі (0)