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

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

text

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

Физика

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

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

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

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

На сайте Ozon Tech при скролле страницы карточки вакансий выпадывают так, будто на самом деле имеют массу.

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

Линейное движение.

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

Плавное движение.

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

Движение

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

Простой пример — слайдер. Картинки не просто переключаются, а плавно двигаются. Сайт бренда Schüco.

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

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

Масса

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

Material Design — стиль графического дизайна от Google. Объекты разной формы и размера выглядят, будто обладают разной массой и инерцией.

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

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

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

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

На сайте GVA блоки обладают большей инерцией, чем более «лёгкие» элементы «лесенки».

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

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

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

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

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

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

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

О чем вам интересно почитать?
Напишите нам, чтобы предложить тему для следующей статьи.
Отправить