UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как пространственная логика может сделать дизайн вашего продукта более интуитивным и профессиональным
Alexeygordeev
Alexeygordeev

Опубліковано

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

Навигация в цифровом мире влияет на дизайн. Ниже представлено 4 причины почему между компонентами дизайна необходима четкая пространственная логика.

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

1. Хорошая пространственная логика часто соответствует метафорам физического мира

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

Открытие приложения в iOS

2. Люди привыкли к цифровым паттернам, которых нет в физическом мире

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

Открытие ячейки списка

Нажатие на вкладку нижней панели

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

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

Проведите пальцем вниз для открытия экрана уведомлений в iOS

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

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

Свайп вниз для открытия центра управления в Android

4.Бесшовная анимация также играет огромную роль в установлении пространственной логики и повышении качества продукта

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

Открытие и закрытие приложения в iOS

Открытие и закрытие iOS-приложения в замедлении.

Для сравнения, взаимодействие открытия и закрытия Android-приложения несколько фрагментировано.

Открытие и закрытие Android-приложения

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

  1. Соответствует ли дизайн метафорам реального мира?
  2. Соответствует ли он паттерну взаимодействия, с которым знакомо большинство людей?
  3. Имеет ли смысл пространственная логика?
  4. Используете ли вы анимацию для демонстрации пространственной логики?

Подобные детали дизайна всегда имеют значение.


Перевод статьи uxmag.com

Топ коментарі (0)