Иссар Вилленскомер, редактор UX in Motion, разрабатывает руководства для UX&UI дизайнеров по After Effects, проводит тематические воркшопы и пишет статьи на тему анимации и юзабилити в User Experiences на www.uxinmotion.net. Telegraf публикует 2 часть перевода его статьи Creating Usability with Motion: The UX in Motion Manifesto.

Принцип 7: Overlay (наслоение)

Создает пространственные отношения нарратива и объекта в визуальной плоскости, когда объекты со слоями и местоположение взаимозависимы.

Overlay поддерживает юзабилити, позволяя пользователям заполнять плоскость указывая свойства для преодоления нехватки непространственных иерархий.

Если говорить проще, Overlay позволяет дизайнерам использовать движение для передачи объектов, зависящих от местоположения, которые существуют за или перед другими в не 3D-пространстве.

В примере выше объект переднего плана скользит вправо, чтобы показать расположение дополнительных фоновых объектов.

Во втором примере вся страница сползает вниз, чтобы показать дополнительный контент и опции (при использовании принципа Offset & Delay для передачи индивидуальности фото объектов).

В определенной степени для дизайнеров идея «слоев» настолько очевидна, что является самоочевидной. Использование нами слоев  в дизайне и сам концепт слоев глубоко пересечены. Тем не менее, мы должны быть осторожными, чтобы отличать процесс “разработки” от процесса “использования”.

Как дизайнеры, мы постоянно вовлечены в “разработку”, мы близко знакомы со всеми составляющими объекта (даже скрытыми), которые мы проектируем. Однако как пользователи, эти невидимые составляющие по определению и по факту скрыты от нас визуально и когнитивно.

Принцип Overlay позволяет дизайнерам устанавливать связь между расположенными слоями «z-оси» и тем самым способствовать пространственной ориентации своих пользователей.

Принцип 8: Cloning (клонирование)

Создает непрерывность, связь и повествование, когда появляются или исчезают новые объекты.

Когда новые объекты создаются в текущих страницах (и из текущих объектов), важно нарративно учитывать их внешний вид. В этом манифесте я убедительно доказываю важность создания описательной основы для происхождения и исчезновения объекта. Простые выцветания непрозрачности, как правило, не достигает этого результата. Накладывание масок, клонирование и протяжность – три подхода, основанных на юзабилити, для создания сильных описаний.

В приведенных выше примерах новые объекты создаются из существующих объектов-героев в то время, когда внимание пользователя фокусируется на этих объектах. Этот двойной подход — направление внимания, а затем проведение взгляда через создание клонированного нового объекта — имеет сильный эффект передачи ясной и недвусмысленной последовательности событий: действие «x» имеет результат «y» создания новых дочерних объектов.

Принцип 9: Obscuration (матирование)

Позволяет пользователям пространственно ориентироваться в отношении объектов или сцен, не в основной визуальной иерархии.

Подобно принципу UX в моушн Masking, Матирование существует в качестве статического и временного явления.

Это может ввести в заблуждение дизайнеров, у которых нет опыта временного мышления — то есть, между моментами. Дизайнеры обычно проектируют от экрана к экрану или от задачи к задаче. Подумайте о Матировании как о действии, которое выполняется над объектом, а не состоянии, в котором он пребывает. Статический дизайн представляет собой состояние матирования. Внедрение времени вводит действие объекта, который матируется.

Из приведенных выше примеров можно увидеть, что затемнение, которое выглядит как прозрачные объекты или слои, также является временным взаимодействием, включающим несколько свойств во времени.

Различные распространенные методы этого включают эффекты размытия и обучение общей прозрачности объекта. Пользователю становится известно о дополнительном не главном контексте, в котором она работает, – о том, что существует «мир» позади ее первичной иерархии объектов.

Затемнение позволяет дизайнерам возместить одно сплоченное поле представления, или «объективное представление», в пользовательском опыте.

Принцип 10: Parallax (смещение)

Создает пространственную иерархию в визуальной плоскости при скроллинге.

Смещение, как принцип UX в моушне, описывает различные объекты интерфейса, движущиеся с разными скоростями.

Смещение позволяет пользователю сосредоточиться на основных действиях и содержании, сохраняя при этом целостность дизайна. Фоновые элементы «отступают» сенсорно и когнитивно для пользователя во время процесса смещения. Дизайнеры могут использовать смещение для выделения первоочередного содержимого от внешнего и дополнительного контента.

Эффект, который это оказывает на пользователя, состоит в том, чтобы четко определить продолжительность взаимодействия, различные связи объекта. Объекты переднего плана или объекты, которые перемещаются «быстрее», отображаются пользователю «ближе». Аналогично, фоновые объекты или объекты, которые перемещаются «медленнее», воспринимаются будто они находятся «дальше».

Дизайнеры могут создавать эти связи, при помощи самого времени, чтобы показать пользователю, какие объекты в интерфейсе более приоритетны. Поэтому имеет смысл отодвигать фоновые или неинтерактивные элементы «назад».

Пользователь не только воспринимает интерфейсные объекты, как имеющую иерархию, превышающую ту, что определена в визуальном дизайне, но теперь эта иерархия может быть использована для того, чтобы пользователь понял природу пользовательского опыта, прежде чем сознательно разобрать дизайн/контент.

Принцип 11: Dimensionality (протяженность)

Обеспечивает пространственную структуру повествования, когда новые объекты появляются и исчезают.

Критически важным для пользовательского опыта является понятие непрерывности, а также ощущение размещения.

Dimensionality обеспечивает эффективный способ преодоления плоскости иррациональности User Experiences.

Люди замечательно разбираются в использовании пространственных структур для навигации как в реальном мире, так и в цифровом опыте. Предоставление референсов пространственного появления и исчезновения помогает укрепить ментальные модели там, где пользователи находятся в UX.

Кроме того, принцип протяженности преодолевает парадокс наслаивания в визуальной плоскости, где объекты, которым не хватает глубины, существуют в одном плане, но встречаются как «впереди» или «позади» других объектов.

Dimensionality представлена тремя способами: оригами dimensionality, плавающей dimensionality и dimensionality объекта.

Оригами dimensionality можно представить в рамках «сгибания» или «завертывания» трехмерных интерфейсных объектов.

Поскольку несколько объектов объединены в структуры «оригами», все еще можно сказать,  что скрытые объекты «существуют» пространственно, даже если они не видны. Это  по сути отображает пользовательский опыт как непрерывный пространственный процесс, который пользователь осуществляет и создает рабочий контекст, как в самой модели взаимодействия, так и во временном поведении самих объектов интерфейса.

Плавающая dimensionality дает объектам интерфейса пространственное происхождение и исчезновение, делая модели взаимодействия интуитивными и очень нарративными.

В приведенном выше примере dimensionality достигается за счет использования 3D-карт. Это обеспечивает прочную структуру описательной части, которая поддерживает визуальный дизайн. Повествование расширяется путем «переворачивания» карт для доступа к дополнительному контенту и интерактивности. Dimensionality может быть мощным способом введения новых элементов таким образом, чтобы свести резкость к минимуму.

Dimensionality объекта приводит к протяжным объектам с истинной глубиной и формой.

Здесь несколько 2D-слоев располагаются в трехмерном пространстве для формирования истинных размерных объектов. Их dimensionality проявляется в переходные моменты в реальном и нереальном времени.

Эффективность объектной dimensionality заключается в том, что пользователи развивают острое понимание объектной заполненности, основанной на невидимых пространственных местоположениях.

Принцип 12: приемы Dolly & Zoom

Сохраняет непрерывность и пространственное повествование при навигации объектов интерфейса и пространств.

Dolly and Zoom – это кинематографические концепции, относящиеся к движению объектов, имеющих отношение к камере и размер самого изображения в кадре, плавно переходящего из длинного кадра в крупный (или наоборот).

В определенных контекстах невозможно сказать масштабируется ли объект, движется ли он к камере в трехмерном пространстве или если камера движется к объекту в трехмерном пространстве (см. ниже примеры). Приведенные ниже три примера иллюстрируют возможные сценарии.

Таким образом, уместно рассматривать примеры «dollying» и «zooming» как отдельные, но схожие в том, что они связаны с непрерывными элементами и сценическими преобразованиями, и отвечают требованиям принципов UX в моушне: они поддерживают юзабилити через анимацию.

К двум изображениям выше применен dollying.

К гифке сверху применен zooming.

Dolly – это термин из кино, который применяется к движению камеры как к объекту, таки от него (он также относится к горизонтальному «отслеживанию» движения, но менее уместен в контексте юзабилити).

Пространственно в UX этот моушн мог бы относиться либо к изменению перспективы зрителей, либо к перспективе, остающейся статической, в то время как объект меняет положение. Принцип dolly поддерживает юзабилити через непрерывность и повествование, плавно переходя между объектами интерфейса и назначениями. Dolly может также включать принцип Dimensionality, что приводит к более пространственному опыту, большей глубине и передаче пользователю дополнительных областей или контента, который находится «впереди» или «отстает» от текущего представления.

Zoom относится к процессам, в которых ни перспектива, ни объект не перемещаются пространственно, а сам объект масштабируется (или наш вид его уменьшается, что приводит к увеличению изображения). Это сообщает зрителю, что дополнительные объекты интерфейса находятся «внутри» других объектов или сцен.

Это позволяет осуществлять плавные переходы, как в реальном, так и в нереальном времени, которые поддерживают юзабилити. Эта плавность, используемая в принципе Dolly&Zoom, достаточно эффективна, когда дело касается создания пространственных ментальных моделей.

Если вы добрались до этой части, поздравляю! Это был чертовский трудный манифест. Надеюсь, все графические файлы загрузились и не убили ваш браузер. Я также очень надеюсь, что вы получили какую-то ценность для себя и пару новых инструментов и рычагов для своих интерактивных проектов. Я рекомендую вам узнать больше о том, как вы можете начать использовать моушн в качестве инструмента дизайна для поддержки юзабилити.

Опять же, последняя ремарка, если вы хотите, чтобы я выступал на вашей конференции или проводил семинар для вашей команды на крутые темы анимации и юзабилити, перейдите сюда. Если вы хотите посещать занятия в своем городе, вам сюда. Наконец, если вы хотите, чтобы предоставил консультацию по вашему проекту, вы можете перейти сюда. Чтобы получать статьи о «юзабилити и анимации», которые будут отправляться напрямую на вашу почту, перейдите по ссылке и оставьте свой адрес внизу.

Этот манифест был бы невозможен без щедрого и терпеливого вклада и постоянного фидбека Катерины Ситнер из Amazon – спасибо! Особая благодарность Алексу Чангу за его мозговой штурм и настойчивость в том, что я таки смог объясниться, Брайану Мамарил из Microsoft за его орлиный глаз, Джереми Хансон за его замечания по редактированию, Эрику Браффу за то, что он безумный гуру анимации в пользовательском интерфейсе, Робу Гирлингу из Artefact за его работу, веру в меня на протяжении всех этих лет, Мэтту Сильверман за его вдохновляющие спичи об анимации UI на конференции After Effects, Брэдли Мунковицу за то, что он был потрясающим соседом по комнате и вдохновил меня на UI, Паскуале д’Сильву за его невероятные статьи о моушне, Ребекку Уссай Хендерсон за потрясающую статью о UI хореографии, Адриану Зумбруненну за потрясающий вклад в тему UI и анимации, Уэйни ГРинфилду и Кристиану Бродину за то, что они мои братья-вдохновители и всегда подталкивают меня к развитию, и всем вам, тысячи  UI аниматоров, которые подгоняли вдохновляющие гифки.

Оригинал статьи можно прочитать здесь.