Привлекательность и движение — руководство по принципам моушн-дизайна

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

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

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

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

Истоки моушн-дизайна

Соединение моушн-дизайна и UX появилось относительно недавно, но его корни уходят в Disney. Фрэнк Томас и Олли Джонстон были одними из самых ценных аниматоров Уолта Диснея и ключевыми участниками таких классических произведений, как «Пиноккио» , « Бэмби » и « Фантазия ». Их 12 основных принципов анимации по- прежнему влияют на графику движения для кино, телевидения и цифрового контента.

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

Современные дизайнеры попытались восполнить этот пробел. Один из наиболее показательных примеров — « 10 принципов моушн-дизайна» , диснеевская адаптация эксперта по анимации Хорхе Р. Канедо Эстрада. Тем не менее, выводы требуют перевода, если они должны применяться целостно к цифровому дизайну продукта.

Самая амбициозная попытка переориентировать принципы движения вокруг интерактивных элементов пользовательского интерфейса (и их значения для UX) — это манифест Иссары Вилленскомер « UX in Motion Manifesto» . Его глубина поразительна, но это не легкое чтение.

Устанавливая 12 принципов UX в движении , Вилленскомер:

• Отличие моушн-дизайна от анимации пользовательского интерфейса.
• Объясняет, как движение помогает юзабилити
• Распаковывает внутреннюю работу основного поведения движения

Моушн-дизайн и UX: важные различия

Прежде чем обратиться к принципам моушн-дизайна, важно выделить ключевые отличия, которые появляются в манифесте Вилленскомера.

Движение больше, чем украшение

Моушн-дизайн не является синонимом анимации пользовательского интерфейса. Это очень важно, потому что анимация пользовательского интерфейса почти всегда рассматривается как косметическая запоздалая мысль, не имеющая отношения к UX (кроме добавления шарма). Движение — это не украшение, это поведение, а поведение может только помочь или помешать пользователю.

Два типа взаимодействия: в реальном времени и не в реальном времени

Моушн-дизайн связан с двумя фундаментальными взаимодействиями: в реальном времени и не в реальном времени.

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

Движение поддерживает удобство использования

Моушн-дизайн должен поддерживать удобство использования четырьмя различными способами.

• Ожидание: когда пользователи взаимодействуют с элементами пользовательского интерфейса, какое поведение при движении они ожидают увидеть? Соответствует ли движение ожиданиям или вызывает путаницу?
• Непрерывность: обеспечивают ли взаимодействия последовательное поведение движения на протяжении всего взаимодействия с пользователем?
• Повествование. Связаны ли взаимодействия и поведенческие реакции, которые они вызывают, с логической последовательностью событий, которая удовлетворяет намерения пользователя?
• Отношения: как пространственные, эстетические и иерархические атрибуты элементов пользовательского интерфейса соотносятся друг с другом и влияют на принятие решений пользователем? Как движение влияет на различные существующие отношения между элементами?

12 принципов моушн-дизайна для цифровых продуктов

1. Ослабление

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

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

2. Смещение и задержка

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

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

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

3. Воспитание

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

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

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

4. Трансформация

Трансформация происходит, когда один элемент пользовательского интерфейса превращается в другой. Например, кнопка загрузки превращается в индикатор выполнения, который превращается в значок завершения.

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

5. Изменение стоимости

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

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

6. Маскировка

Маскировка — это стратегическое раскрытие и сокрытие частей элемента пользовательского интерфейса. Изменяя форму и масштаб периметра элемента, маскирование сигнализирует об изменении полезности, позволяя самому элементу оставаться идентифицируемым. По этой причине подробные визуальные эффекты, такие как фотографии и иллюстрации, являются идеальными кандидатами.

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

7. Наложение

В 2D-пространстве нет глубины, и элементы пользовательского интерфейса могут перемещаться только по оси X или Y. Наложение создает иллюзию разделения переднего плана и фона в двухмерном пространстве пользовательского интерфейса. Имитируя глубину, наложение позволяет скрывать и открывать элементы в соответствии с потребностями пользователя.

Информационная иерархия является важным фактором при использовании наложения. Например, первое, что пользователи должны увидеть в приложении для создания заметок, — это список своих заметок. Затем можно использовать оверлей для отображения дополнительных опций для каждого сообщения, таких как « Удалить » или « Архивировать ».

8. Клонирование

Клонирование — это поведение движения, при котором один элемент пользовательского интерфейса разделяется на другие. Это умный способ выделить важную информацию или варианты взаимодействия.

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

9. Затемнение

Представьте дверь из матового стекла. Для открытия требуется взаимодействие, но можно (до некоторой степени) различить, что ждет на другой стороне.

Обскурация работает так же. Он представляет пользователям интерфейс, который призывает к взаимодействию, одновременно показывая подсказку на экране, чтобы следовать. Типичными примерами являются меню навигации, экраны паролей и окна папок/файлов.

10. Параллакс

Параллакс отображается, когда два (или более) элемента пользовательского интерфейса перемещаются одновременно, но с разной скоростью. Здесь снова целью является установление иерархии.

• Интерактивные элементы перемещаются быстрее и появляются на переднем плане.
• Неинтерактивные элементы движутся медленнее и отступают на задний план.

Parallax направляет пользователей к интерактивным элементам пользовательского интерфейса, позволяя неинтерактивным элементам оставаться на экране и сохранять единство дизайна.

11. Размерность

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

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

12. Долли и Зум

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

• Долли: Долли возникает, когда точка зрения пользователя приближается (или отдаляется) от элемента пользовательского интерфейса. Представьте себе человека с камерой, который подходит к цветку, чтобы сделать снимок поближе.
• Масштаб: при масштабировании точка зрения пользователя и элемент пользовательского интерфейса остаются фиксированными, но размер элемента увеличивается (или уменьшается) на экране пользователя. Теперь представьте, что человек остается на месте и использует функцию масштабирования камеры, чтобы цветок казался больше.

Движение — это общение

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

Отношения между моушн-дизайном и UX цифровых продуктов быстро развиваются. Принципиальный подход к движению предотвращает чрезмерную зависимость от мимолетной полезности тенденций, инструментов и методов. Более того, он охватывает границу между абстрактным движением элементов на 2D-экранах и восприятием движения в 3D-мире.

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Веб-анимация в эпоху после Flash
• The Designer's Edge — обзор плагинов Photoshop
• Ретроспектива тенденций UX-дизайна 2019
• Знакомство — руководство по процессам адаптации пользователей
• Принципы мобильного UX-дизайна