Движение оказывает огромное влияние на пользовательский опыт цифровых продуктов, но юзабилити пострадает, если элементы интерфейса не будут отражать основные принципы моушн-дизайна. В контексте интерфейсов, движение – это больше, чем просто украшение. Это убедительная сила, которая способствует улучшению продукта и расширяет коммуникационные возможности дизайна.
Наш мир – это мир движения. Даже в моменты покоя листья дрожат, а легкие расширяются. В сфере дизайна цифровых продуктов движение может показаться второй натурой, продолжением повседневной жизни, которое можно использовать без особых усилий. Если бы это было правдой.
Спросите любого, кто впервые создает анимированные элементы интерфейса. Часы усилий приносят любительские результаты. Такая простая вещь, как выдвигающаяся на экран карточка, выглядит нелепо. Но почему?
Теоретически заставить элементы интерфейса двигаться легко. Определите точки на заранее заданном пути, и программа создаст анимацию промежутков. На самом деле это не так. Инструменты и методы необходимы, но они базируются на принципах. Если движение направлено на повышение юзабилити цифровых продуктов, оно должно основываться на неизменных правилах поведения, применимых к бесконечному количеству вариантов использования.
Истоки моушн-дизайна
Сочетание моушн-дизайна и UX дизайна возникло относительно недавно, но его корни уходят к компании Disney. Фрэнк Томас и Олли Джонстон были одними из самых уважаемых аниматоров Уолта Диснея, и авторами таких классических произведений, как Пиннокио, Бэмби и Фантазия. Их 12 основных принципов анимации по-прежнему влияют на анимационную графику в фильмах, телевидении и цифровом контенте.
Принципы Диснея выделяют основные законы физического движения ради анимационного повествования. Они позволяют нарисованным персонажам двигаться и проявлять эмоции, но не в полной мере удовлетворяют потребности современного интерфейса в интерактивном движении.
Современные дизайнеры попытались восполнить этот пробел. Один из наиболее наглядных примеров – «10 принципов моушн-дизайна», адаптация от эксперта по анимации Disney Jorge R. Canedo Estrada. Тем не менее, эти принципы нужно адаптировать к дизайну цифрового продукта.
10 принципов моушн-дизайна Jorge R. Canedo Estrada
Самая амбициозная попытка переориентировать принципы движения на интерактивные элементы интерфейса (и их UX значение) – это статья Иссара Вилленскомера «UX in Motion Manifesto». Однако то не легкое чтиво.
В своем манифесте Вилленскомер:
- Установил, что отличает моушен-дизайн от UI-анимации
- Объяснил, как движение способствует юзабилити
- Разобрал на составные элементы основные движения.
Моушн-дизайн и UX: важные отличия
Прежде чем обратиться к принципам моушн-дизайна, важно выделить ключевые отличия, которые присутствуют в манифесте Вилленскомера.
Движение – это больше, чем украшение
Моушен-дизайн не является синонимом анимации интерфейса. Это важно, потому что анимация интерфейса почти всегда рассматривается, как косметическое улучшение, добавляемое в последнюю очередь, не имеющее отношения к UX. Моушн – это не украшение, это поведение, а поведение может только помочь или затруднить пользовательский опыт.
Два типа взаимодействия: в реальном времени и не в реальном времени
Моушен-дизайн связан с двумя фундаментальными взаимодействиями: в реальном времени и не в реальном времени.
- Взаимодействие в реальном времени обеспечивает немедленный фидбек, когда пользователи манипулируют с элементами интерфейса на экране. Другими словами, движение мгновенно реагирует на ввод пользователя.
- Взаимодействие не в режиме реального времени происходит после ввода данных пользователем, а это означает, что пользователи должны ненадолго остановиться и наблюдать за результатом движения, прежде чем продолжить.
Взаимодействие в реальном времени: Движение немедленно реагирует на ввод данных пользователем (Stan Yakusevich)
Взаимодействие не в реальном времени: После взаимодействия пользователи должны немного подождать и увидеть изменения в движении (Vitaly Rubtsov)
Моушн для юзабилити
Моушн-дизайн должен поддерживать юзабилити четырьмя различными способами.
- Ожидание: когда пользователи взаимодействуют с элементами интерфейса, какое поведение движения они ожидают увидеть? Соответствует ли движение ожиданиям или вызывает недоумение?
- Непрерывность: вызывают ли взаимодействия последовательные движения в процессе пользовательского опыта?
- Повествование: связаны ли взаимодействия и вызываемое ими поведение движения с логическим развитием событий, удовлетворяющим намерения пользователя?
- Взаимосвязь: как пространственные, эстетические и иерархические атрибуты элементов интерфейса соотносятся друг с другом и влияют на принятие решений пользователем? Как движение влияет на существующие взаимосвязи между элементами?
12 принципов моушн-дизайна цифровых продуктов
1. Плавность (Easing)
Плавность имитирует то, как реальные объекты ускоряются и замедляются с течением времени. Это применимо ко всем элементам интерфейса, демонстрирующим движение.
Противоположность плавности – это линейное движение. Элементы интерфейса, отображающие линейное движение, мгновенно переходят от стационарного состояния к движению на полную скорость, и от движения на полную скорость к стационарному состоянию. Такое поведение не встречается в физическом мире, и поэтому кажется пользователям неестественным.
Карточки интерфейса и соответствующие стулья перемещаются быстро, но благодаря плавности они постепенно останавливаются (Saptarshi Prakash)
2. Смещение и задержка (Offset and Delay)
Когда несколько элементов интерфейса перемещаются одновременно и с одинаковой скоростью, пользователи склонны группировать их вместе и упускать из виду возможность, что каждый элемент может иметь свои собственные функции.
Смещение и задержка создают иерархию между элементами интерфейса, которые перемещаются одновременно, и сообщают, что они связаны, но различны. Вместо полной синхронизации время, скорость и интервалы между элементами меняются, что приводит к едва уловимому эффекту «один за другим».
Когда пользователи перемещаются между экранами, смещение и задержка сигнализируют о существовании нескольких вариантов взаимодействия.
Это приложение для криптовалюты вводит сразу несколько элементов интерфейса. Их появление немного смещено, чтобы сообщить пользователям, что элементы связаны, но различны (Gapsy Studio)
3. Родительство (Parenting)
Родительство связывает свойства одного элемента интерфейса со свойствами других. Когда свойство в родительском элементе изменяется, связанные свойства дочерних элементов также изменяются. Все свойства элемента могут быть связаны друг с другом.
Например, положение родительского элемента может быть привязано к масштабу дочернего элемента. Когда родительский элемент перемещается, дочерний элемент увеличивается или уменьшается в размере.
Родительство создает отношения между элементами интерфейса, устанавливает иерархию и позволяет нескольким элементам одновременно общаться с пользователями. По этой причине родительство наиболее эффективно при взаимодействии в реальном времени.
Здесь положение синего ползунка контролирует непрозрачность фоновой маски, распространение эффекта свечения вокруг лампочки и числовое значение шкалы интенсивности света (Ayoub Kada)
4. Трансформация (Transformation)
Трансформация происходит, когда один элемент интерфейса превращается в другой. Например, кнопка загрузки трансформируется в индикатор выполнения, который превращается в значок завершения.
С точки зрения UX трансформация – это эффективный способ показать пользователям их статус по отношению к цели ( видимость статуса системы). Это особенно полезно, когда переход между элементами интерфейса связан с началом и концом процесса (например, загрузка файла).
Трансформация сигнализирует о начале, середине и завершении загрузки. (Aaron Iker)
5. Изменение значений (Value Change)
Представления значений (числовых, текстовых или графических) широко используются в цифровых интерфейсах, появляясь в различных продуктах, от банковских приложений до личных календарей и сайтов электронной коммерции. Поскольку эти представления привязаны к реально существующим наборам данных, они могут быть изменены.
Изменение значения сообщает о динамическом характере представления данных и информирует пользователей о том, что данные являются интерактивными и на них можно в определенной степени влиять. Когда значения представлены без движения, готовность пользователей взаимодействовать с данными уменьшается.
Значения вводятся в движении, чтобы показать пользователям, что они могут повлиять на данные (Taras Migulko)
6. Маскировка (Masking)
Маскирование – это стратегическое раскрытие и скрытие частей элемента интерфейса. Изменяя форму и масштаб периметра элемента, маскирование сигнализирует об изменении полезности, позволяя самому элементу оставаться идентифицируемым. По этой причине подробные изображения, такие как фотографии и иллюстрации, идеально подходят для этого эффекта.
С точки зрения юзабилити дизайнеры могут реализовать маскирование, чтобы показать пользователям, что они продвигаются через серию взаимодействий.
Маскирование используется для перехода от захвата изображения к загрузке и включению в онлайн-магазин. (SELECTO)
7. Оверлей (Overlay)
В 2D-пространстве нет глубины, и элементы интерфейса могут перемещаться только по оси X или Y. Оверлей создает иллюзию различия между передним и задним планом в 2D-пространстве интерфейса. Имитируя глубину, оверлей позволяет скрывать и раскрывать элементы в соответствии с потребностями пользователя.
Информационная иерархия является важным фактором при использовании оверлея. Например, первое, что пользователи должны увидеть в приложении для создания заметок – это список заметок. Затем оверлей можно использовать для отображения дополнительных параметров для каждого сообщения, например, «Удалить» или «Архивировать».
Оверлей позволяет пользователям быстро архивировать или удалять записи в этом приложении для заметок (Karan Kapoor)
8. Клонирование (Cloning)
Клонирование – это поведение движения, при котором один элемент интерфейса разделяется на другие. Это отличный способ выделить важную информацию или варианты взаимодействия.
Когда элементы интерфейса появляются, им нужна четкая исходная точка, которая ссылается на элемент, уже отображаемый на экране. Если элементы просто появляются или исчезают из ниоткуда, пользователям не хватает контекста, необходимого для уверенного взаимодействия.
Пользователи могут с уверенностью нажимать на цветные кружки, потому что они явно происходят от иконки «Добавить заметки». (Ariuka)
9. Затемнение (Obscuration)
Представьте дверь из матового стекла. Для ее открытия требуется взаимодействие, но можно (в определенной мере) различить, что ждет вас по ту сторону двери.
Точно так же работает затемнение. Оно представляет пользователям интерфейс, который требует взаимодействия, одновременно показывая подсказку на экране, которому нужно следовать. Типичные примеры – меню навигации, экраны с паролями и окна папок / файлов.
Затемнение предоставляет пользователям важные взаимодействия, позволяя оставаться ориентированными в рамках описания продукта. (Kyle Abarquez)
10. Параллакс (Parallax)
Параллакс отображается, когда два (или более) элементов интерфейса перемещаются одновременно, но с разной скоростью. Здесь снова цель – установить иерархию.
- Интерактивные элементы перемещаются быстрее и появляются на переднем плане.
- Не интерактивные элементы движутся медленнее и уходят на задний план.
Параллакс подталкивает пользователей к интерактивным элементам интерфейса, позволяя не интерактивным элементам оставаться на экране и сохранять единство дизайна.
Благодаря параллаксу наиболее важные интерактивные элементы перемещаются быстрее всего, в то время как не интерактивные перемещаются медленнее и отступают на задний план (Tubik)
11. Многомерность (Dimensionality)
Благодаря многомероности кажется, что элементы интерфейса имеют несколько интерактивных сторон, как и объекты в физическом мире. Такое поведение достигается за счет того, что элементы выглядят так, как если бы они были складными, переворачиваемыми, плавающими или наделенными реалистичными свойствами глубины.
В качестве повествовательного приема многомерность подразумевает, что разные стороны элемента интерфейса связаны между собой. Это обеспечивает плавные переходы между экранами.
Многомерность подразумевает, что 2D-элементы интерфейса имеют несколько интерактивных сторон – точно так же, как объекты в физическом мире (Sang Nguyen)
12. Наезд и масштабирование (Dolly and Zoom)
Наезд и масштабирование позволяют пользователям «путешествовать» по элементам интерфейса в пространстве или увеличивать их масштаб, чтобы раскрыть больший уровень детализации.
- Наезд возникает, когда точка зрения пользователя приближается (или отдаляется) к элементу интерфейса. Представьте себе человека с фотоаппаратом, который подходит к цветку, чтобы сделать более крупный снимок.
- Масштабирование: при масштабировании точка обзора пользователя и элемент интерфейса остаются фиксированными, но элемент увеличивается (или уменьшается) в размере на экране пользователя. Теперь представьте, что человек сидит на месте и использует зум камеры, чтобы цветок казался больше.
Наезд: кажется, что точка зрения пользователя приближается к фоновому изображению (Yanosh)
Масштабирование: точка зрения пользователя не приближается к изображению. Скорее, увеличивается масштаб изображения (Victor Aldabalde)
Движение – это общение
Интерактивный опыт требует движения во всех его ярких и тонких формах. Когда принципы моушн-дизайна соблюдаются, даже самые элементарные элементы интерфейса становятся изощренными агентами человеческого общения. Когда принципы игнорируются, движение воплощает в себе характеристики, которых нет в мире природы. Никакое эстетическое великолепие не сможет преодолеть возникшую неуклюжесть.
Взаимосвязь между моушен-дизайном и UX цифровых продуктов стремительно развивается. Использование принципов моушн-дизайна предотвращает чрезмерную зависимость от мимолетной полезности трендов, инструментов и методов. Более того, оно охватывает разрыв между абстрактным движением элементов на 2D-экранах и восприятием движения в 3D-мире.
Перевод статьи uxdesign.cc
Топ коментарі (0)