Иссар Вилленскомер, редактор UX in Motion, разрабатывает руководства для UX&UI дизайнеров по After Effects, проводит тематические воркшопы и пишет статьи на тему анимации и юзабилити в User Experiences на www.uxinmotion.net. Telegraf публикует 1 часть перевода его статьи Creating Usability with Motion: The UX in Motion Manifesto.
Этот манифест представляет мой ответ на вопрос: «Как мне, UX или UI дизайнеру, понять, в каком месте и когда можно внедрить анимацию для поддержки юзабилити?»
За последние 5 лет для меня было честью стать коучем и ментором UX & UI дизайнеров в 40 странах, в сотнях топ-компаниях и фирмах по дизайн-консультированию через свои воркшопы и уроки по UI анимации.
После изучения анимации в разработке пользовательских интерфейсов на протяжении 15 лет, я пришел к выводу, что есть 12 конкретных возможностей поддерживать юзабилити в ваших UX проектах, используя моушн. Я называю эти 12 возможностей «12 принципов UX в моушн». Они могут накапливаться и комбинироваться синергетически в бесчисленное множество новых способов.
Я разделил манифест на 5 частей:
- Уделять внимание теме UI анимации — это не то, о чем вы подумали
- Взаимодействия в реальном vs. в нереальном времени
- Четыре способа поддержки юзабилити через анимацию
- Принципы, техники, свойства и значения
- 12 принципов UX в анимации
Короткое замечание, если вы хотите, чтобы я выступил на вашей конференции или провел воркшоп на месте для вашей команды на интересную тему по анимации и юзабилити, переходите сюда. Если вы хотите посетить занятие в вашем городе, вам сюда . И наконец, если вы хотите, чтобы я проконсультировал ваш проект, переходите сюда. Чтобы добавиться ко мне в лист видеоуроков, переходите сюда.
Дело не в UI анимации
Поскольку тема анимации в пользовательских интерфейсах большей частью понимается дизайнерами как «UI моушн» , которой она не является, я чувствую себя обязанным немного обрисовать контекст, прежде чем приступить к 12 принципам.
Обычно дизайнеры представляют «Ui анимацию», как нечто, что сделает опыт пользователя прекрасней, но в целом не добавит ему большой ценности. Поэтому к UI моушн часто относятся как к внебрачному ребенку UX (приношу извинения внебрачным детям всего мира). Обычно к нему приступают, если приступают вообще, в конце, и отводят роль финального мазка помады в макияже.
Также, анимация в контексте пользовательских интерфейсов по понятным причинами руководилась «12 принципами анимации» компании Disney, которые я оспариваю в своей статье «Принципы UI анимации – Disney мертв».
В своем манифесте я буду доказывать, что UI моушн имеет такое же отношение к «12 принципам в дизайне анимации», как строительство к архитектуре.
Под этим я подразумеваю, что в то время, как конструкцию нужно физически соорудить, чтобы она существовала (отсюда потребность в строительстве), руководствующая рука, определяющая, что нужно строить – это парафия Принципов.
В анимации все упирается в инструменты. Принципы – это практическое применение идей, которые руководят использованием инструментов как таковых, Принципы предоставляют широкий выбор возможностей для дизайнеров.
То, что большинство дизайнеров представляют под «UI анимацией» на самом деле является исполнением высшей методики дизайна: временное поведение объектов интерфейса в реальном времени и процессы в нереальном времени.
Взаимодействия в реальном & нереальном времени
На этом пересечении, важно различать «состояние» и «действие». Состояние чего-то в UX статично, как финальный макет. Действие чего-то в UX временно и основано на моушне. Объект может быть в состоянии маски или в процессе нанесения маски. Во втором случае мы знаем, что анимация вовлечена таким образом, чтобы поддерживать юзабилити.
Также все временные аспекты взаимодействия могут восприниматься как происходящие в реальном или нереальному времени.
Реальное время подразумевает, что пользователь напрямую взаимодействует с объектами в пользовательском интерфейсе.
Нереальное время подразумевает, что поведение объекта пост-интерактивное: оно происходит после действия пользователя и является переходным.
Это важное отличие.
Взаимодействия в режиме реального времени также могут восприниматься как «прямые манипуляции», так как пользователь взаимодействует с объектами интерфейса напрямую и немедленно. Поведение интерфейса происходит, когда пользователь его использует.
Взаимодействия в нереальном времени происходят только после ввода информации пользователем и обладают эффектом короткого исключения пользователя из юзер експирианс до момента завершения перехода.
Эти различия дадут нам преимущества в нашем путешествии в мир «12 принципов UX в анимации».
Анимация поддерживает юзабилити в четырех направлениях.
Эти четыре столпа представляют собой четыре способа, в которых временное поведение пользовательского опыта поддерживает юзабилити.
Ожидание
Ожидания делятся на две области – как пользователи воспринимают, что представляет собой объект, и как он себя ведет. Другими словами, как дизайнеры, мы хотим минимизировать разрыв между ожиданиями пользователей и их опытом.
Непрерывность
Непрерывность аппелирует одновременно к флоу юзера и к системности опыта пользователя. Непрерывность может быть рассмотрена в терминах «интра-непрерывности» – непрерывности в рамках сцены (scene), и «интер-непрерывности» – непрерывности в пределах серии сцен, которые составляют общий пользовательский опыт.
Рассказ
Рассказ – это линейная прогрессия процессов в пользовательском интерфейсе, результатом которой является временная / пространственная структура. Это можно рассматривать как серию незаметных моментов и событий, которые соединяются друг с другом во всем пользовательском интерфейсе.
Отношения
Отношение относится к пространственным, временным и иерархическим представлениям между объектами интерфейса, которые управляют процессом понимания и принятия решений юзером.
Принципы, техники, свойства и значения
Тайлер Уэй рассказывает не хуже, чем пишет: «Принципы … являются основополагающими пунктами и правилами функции, порождающими любое количество техник. Эти элементы остаются неизменными в любом случае». Следует повторить, что Принципы являются независимыми от дизайна.
Так мы можем представить иерархию с принципами наверху, ниже них техники, дальше свойства и значения внизу.
Техники (Techniques) можно рассматривать как различные и неограниченные исполнения Принципов и / или комбинации Принципов. Я рассматриваю технику как что-то сродни «стилю».
Свойства (Properties) – это конкретные параметры объекта, которые анимируют для создания этой техники. Они включают (и не ограничиваются) положением, непрозрачностью, масштабом, вращением, опорной точкой, цветом, шириной кисти, формой и т. д.
Значения (Values) – это фактические числовые значения свойств, которые изменяются со временем, чтобы создать то, что мы называем «анимацией».
Поэтому, чтобы приземлиться здесь (и немного перескочить вперед), мы можем заметить, что гипотетический референс UI анимации использует Принцип Затемнения с приемом «Размытое стекло (blurred glass)», который влияет на свойства размытия и непрозрачности при значении 25 пикселей и 70% соответственно.
Теперь у нас есть несколько инструментов для работы. И что еще более важно, эти лингвистические инструменты независимы от любого конкретного инструмента для создания прототипов.
12 принципов UX в моушн
Динамика (Easing) и Offset & Delay (Смещение&отмена) связаны с таймингом. Parenting (группирование) относится к связи объекта. Transformation (преобразование), Value Change (смена значения), Masking (накладывание маски), Overlay (верхний слой), and Cloning (дублирование) – все это относится к продолжительности объекта. Parallax (фокусирование) относится к временной иерархии. Obscuration (затемнение), Dimensionality (протяжность) и эффект Dolly & Zoom относятся к пространственной непрерывности.
Принцип 1: Easing (Динамика)
Поведение объекта должно соответствовать ожиданиям пользователя при возникновении временных процессов.
Все объекты интерфейса, демонстрирующие временное поведение (как в реальном, так и в нереальном времени), становятся более динамичными. Easing создает и усиливает «естественность», присущую безпрепятственности пользовательского опыта, и создает ощущение непрерывности, когда объекты ведут себя так, как того ожидают пользователи. Кстати, Дисней ссылается на этот принцип как “slow in and slow out (замедление и отставание)”.
Пример выше имеет линейное движение и выглядит «плохо».
Второй пример имеет линейное движение и выглядит «плохо». Первый пример вверху стал более динамичным и выглядит «хорошо».
Все три вышеприведенных примера имеют точное количество кадров и происходят в течение того же самого количества времени. Единственное различие заключается в их динамике.
Как дизайнеры, занимающиеся юзабилити, нам нужно быть строгими к себе и задавать себе вопрос, помимо эстетики, какой пример больше поддерживает юзабилити?
Кейс, который я описываю, свидетельствует о том, что динамике присуща определенная степень скеоморфизма. Легко представить «градиент динамики», в котором поведение выходит за рамки ожиданий пользователей и приводит к меньшим взаимодействиям с меньшей юзабилити. В случае с моушн с правильной динамикой, пользователи прочувствуют моушн гладко и в основном незаметно – что хорошо, так как это не отвлекает. Линейный моушн визуально очевиден и чувствуется немного не в тему, незавершенным, диссонирующем и отвлекающим.
Теперь я собираюсь полностью противоречить себе и поговорить о примере справа. Анимация не является гладкой. По сути, она обладает “спроектированным” ощущением. Мы замечаем, как объект приземляется. Он чувствуется по-другому, но он все еще более «правильно», чем пример с линейной анимацией.
Можно ли внедрить динамику(easing), которая не поддержит (или даже хуже, ухудшит) юзабилити? Ответ – да, и для этого есть несколько способов. Один из них – тайминг. Если он слишком медленный (нежный, чтобы заимствовать у Pasquele) или слишком быстрый, вы можете разбить ожидания и отвлечь внимание пользователя. Аналогично, если динамика не соответствует с брендом или общему опыту, это также может негативно повлиять на ожидания и целостность.
То, что я хочу открыть вам, – это мир возможностей, когда дело касается eased motion. Есть буквально бесконечное количество «easings», которые вы, как дизайнер, можете создавать и внедрять в своих проектах. Каждый easing обладает ожидаемыми реакциями, которые он вызывает у пользователей.
Подводя итог: когда использовать easing? Всегда.
Вы можете узнать больше о моей гипотезе динамики в моей статье «Ирония юзабилити и линейного моушна».
Принцип 2: Offset & Delay (Смещение и отмена)
Определяет связи объектов и иерархии при введении новых элементов и сцен.
Offset & Delay – второй из всего лишь двух принципов UX в моушн, на который влияют Принципы анимации Disney, в данном случае это «Сквозное движение и захлест действия».
Однако важно отметить, что его воплощение, хотя и похоже по исполнению, отличается по цели и результату. В то время, как принципы Диснея приводят к «более привлекательным анимациям», принципы анимации пользовательского интерфейса приводят к большему количеству полезного опыта.
Значение этого принципа заключается в том, что он предосознанно настраивает пользователя на успех, «рассказывая» ему что-то о природе объектов интерфейса. Рассказ в приведенной выше ссылке состоит в том, что два верхних объекта объединены, а нижний объект отделен. Возможно, верхние два объекта могут быть неинтерактивным изображением и текстом, а нижний – кнопкой.
Даже до того, как пользователь опознает эти объекты, дизайнер – через моушн – уже сообщил ему, что объекты каким-то образом отделены. Это чрезвычайно мощно.
В вышеприведенном примере плавающая кнопка действия (floating action button – FAB) преобразуется в элементы навигации хедера, состоящую из трех кнопок. Поскольку кнопки временно «смещены» друг от друга, они в конечном итоге поддерживают юзабилити через их «раздельность». Другими словами, дизайнер использует само время, чтобы сказать,что объекты являются отдельными еще до того, как пользователь опознает их. Это обладает эффектом, когда пользователю доносится часть природы объектов интерфейса совершенно независимо от визуального дизайна.
Чтобы лучше продемонстрировать, как это работает, я приведу пример, который нарушает принцип смещения и отмены.
В приведенном выше примере статический визуальный дизайн сообщает, что на фоне есть значки. Предполагается, что иконки все отделены друг от друга и исполняют разные функции. Однако моушн противоречит этому.
Временно, иконки сгруппированы в ряды и ведут себя как отдельный объект. Их названия также сгруппированы в ряды, и также ведут себя как отдельный объект. Анимация сообщает пользователю что-то отличительное от того, что он видит глазами. В этом случае можно сказать, что временное поведение объектов в интерфейсе не поддерживает юзабилити.
Принцип 3: Parenting (группирование)
Создает пространственные и временные иерархические отношения при взаимодействии с несколькими объектами.
Принцип 3: Parenting (группирование)
Создает пространственные и временные иерархические отношения при взаимодействии с несколькими объектами.
Группирование – это мощный Принцип, который «связывает» объекты в пользовательском интерфейсе. В приведенном выше примере свойство «масштаба» и «положения» верхнего или дочернего объекта привязано к свойству «расположения» нижнего или «родительского» объекта.
Группирование – соединение свойств объекта со свойствами другого объекта. Это создает связи объектов и иерархий таким образом, который поддерживают юзабилити.
Группирование также позволяет дизайнерам лучше координировать временные процессы в пользовательском интерфейсе, одновременно сообщая пользователям характер отношений объектов.
Вспомните, что свойства объекта включают в себя следующие параметры: Масштаб, Непрозрачность, Положение, Вращение, Форму, Цвет, Значение и т. д. Любое из этих свойств может быть связано с любыми другими свойствами для создания синергетических моментов в пользовательском интерфейсе.
В примере выше свойство “y-оси” элемента “face” является дочерним по отношению к свойству “x-оси” для родительского элемента round. Когда круглый индикаторный элемент перемещается вдоль горизонтальной оси, его «дочерний» элемент перемещается вместе с ним по горизонтали и вертикали (в то время как пребывает под Маской – другой принцип).
Результатом является иерархическая временная структура рассказа, которая происходит то же время со всеми процессами. Следует отметить, что объект «face» работает как серия «зависаний», поскольку на каждом номере «face» видно полностью, а не частично. Пользователь испытывает это беспрепятственно, хотя мы можем заявить, что в этом примере есть тонкий «читинг юзабилити».
Группирование функционирует лучше всего во взаимодействиях реального времени. Поскольку пользователь непосредственно управляет объектами интерфейса, дизайнер сообщает пользователю – через анимацию – как объекты связаны, и какая взаимосвязь между ними.
Группирование проходит в 3-х формах: «прямое группирование» (см. два примера выше – прямое группирование. Примеры ниже — «отложенное группирование» и «обратное группирование» ).
Принцип 4:Transformation (Преобразование)
Создает непрерывное состояние потока нарративов, когда изменяется служебная программа объекта.
Принцип 4:Transformation (Преобразование)
Создает непрерывное состояние потока нарративов, когда изменяется служебная программа объекта.
О UX в преобразовании в моушне уже написано много. В некотором смысле это самый очевидный и видимый из принципов анимации.
Трансформация наиболее заметна, во многом потому, что она выделяется. Кнопка “submit”, (см. ниже прим.ред) изменяющая форму, чтобы стать радиальной полосой прогресса и, наконец, снова изменить форму, чтобы стать меткой подтверждения – это то, что мы замечаем. Он захватывает наше внимание, рассказывает историю и имеет завершение.
Преобразование осуществляет беспрепятственный переход пользователя через различные состояния UX или «это» (как в этом случае это кнопка, это радиальная индикаторная полоса, это галочка), которая в итоге приводит к желаемому результату. Пользователь прошел через эти функциональные пространства до конечного пункта назначения.
Преобразование имеет эффект «фрагментации» когнитивно отдельных ключевых моментов в пользовательском опыте на гладкую и непрерывную последовательность событий. Эта «гладкость» приводит к лучшей узнаваемости для пользователей, их удерживанию и “ведению” (followthrough).
Принцип 5: Value change (смена значения)
Создает динамичную и непрерывную повествовательную связь, когда предмет значения изменяется.
Объекты интерфейса, основанные на тексте, то есть цифры и текст, могут менять свое значение. Это одна из тех «неуловимых очевидных» концепций.
Изменения текста и цифр настолько распространены, что они проходят мимо, в то время, когда мы должным образом не различаем их и не относимся со всей серьезностью, оценивая их роль в поддержке юзабилити.
Итак, что пользователь испытывает, когда значения меняются? С точки зрения юзер експириенс, 12 принципов UX в моушн – это возможности для поддержки юзабилити. Эти три возможности предоставлены для того, чтобы связать пользователя с реальностью, которая кроется за данными, концепцией агентства и динамическим характером самих значений.
Давайте взглянем на пример дэшборда пользователя.
Когда объекты интерфейса, основанные на значении, загружаются без “изменения значения”, это передает пользователю, что числа являются статическими объектами. Они похожи на нарисованные символы с ограничением скорости 80 км/час.
Цифры и значения – это формы представления того, что происходит в действительности. Эта реальность может быть временем, доходом, очками в игре, бизнес-метриками, спортивными показателями и т. д. Что мы различаем через анимацию, это то, что «предмет значения» динамический, а значения отражают что-то из этого динамического диапазона значений.
Мало того, что это отношение теряется со статическими объектами, визуально состоящих из значений, но также теряется другая более глубокая возможность.
Когда мы используем представления динамических систем в виде анимации, построенной на значениях, они активируют своего рода «нейрофидбэк». Пользователи, понимая динамический характер своих данных, теперь могут влиять на изменение этих значений и могут стать агентами влияния. Когда значения статичны, связь с реальностью, лежащей в основе значений, уменьшается, а пользователи теряют свое влияние.
Принцип изменения значения может иметь место как в реальном времени, так и в нереальном времени. В процессах реального времени пользователь взаимодействует с объектами для изменения значений. В процессах, нереального времени, таких как загрузки и переходы, значения изменяются без вмешательства пользователя, чтобы отражать динамическое повествование.
Принцип 6: Накладывание маски (masking)
Создает непрерывность в объекте или группе объектов интерфейса, когда функционал определяется тем, какая часть объекта или группы раскрыта или скрыта.
Процесс накладывания маски можно воспринимать как связь между формой объекта и его функционалом.
Поскольку дизайнеры знакомы с «masking» в контексте статического дизайна, нам следует отличать masking как Принцип UX в моушн, так как он длится во времени как действие, а не как состояние.
Благодаря временному использованию раскрывающих и скрывающих областей объекта функционал проходит беспрерывно и плавно. Это также обладает эффектом сохранения нарративного флоу.
В приведенном выше примере изображение заголовка изменяет граничную форму и положение, но не содержимое, и становится альбомом. Это приводит к изменению того, что представляет собой объект, при сохранении содержимого в маске – довольно ловкий трюк. Все происходит в режиме нереального времени, в качестве перехода, который активируется после того, как пользователь выполняет какое-либо действие.
Помните, что принципы UI анимации происходят временно и поддерживают удобство использования через непрерывность, повествование, связь и ожидание. В приведенной выше примере, в то время, как сам объект остается неизменным, он также имеет границу и местоположение, и эти два фактора определяют, что представляет собой объект.
Часть 2
С оригиналом статьи можно ознакомится здесь.