Реалистичная физика в дизайне интерфейсов

Чтобы обсудить эту тему, мы взяли за основу статью Newtonian interfaces, которую написал Taner Olcay, дизайнер и ассистент-преподаватель шведского Университета Мальмё. Оригинальный текст перевели, немного переработали и дополнили примерами из своей практики.

Физика

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

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

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

В реальном мире объекты ведут себя так или иначе из-за определённых физических свойств. У пользовательского интерфейса их на самом деле нет. Задача дизайнера сделать так, чтобы графические элементы двигались так, будто они настоящие — будто у них есть масса и они подвержены инерции. Соответственно они должны реагировать и на воздействия.

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

Если же движение плавное, кроме скорости мы уже можем почувствовать, насколько объект тяжёлый.

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

Движение

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

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

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

Масса

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

Атомарный дизайн

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

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

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

• Из какого материала был бы сделан элемент, будь он реальным?
• Как с ним работать как с материалом? Каковы его физические характеристики?
• Как будут проявляться его его физические характеристики?
• Какие новые возможности это даст для дизайна?
• Как это улучшит UX?

Минутка философии

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

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

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

Сейчас мы лучше воспринимаем интерфейсы, имитирующие реальную физику, потому что чаще пребываем в реальном, а не в виртуальном мире. Но что если в будущем это изменится? В какую сторону тогда будет меняться UI-дизайн? Это вопрос на подумать.