Теория близости в интерфейсах

Теория близости в интерфейсах

13.03.2017

Как применять теорию близости при проектировании интерфейса? Как извлечь максимальную пользу из связанных элементов?

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

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

Близость

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

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

Группировка

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

Головной мозг выделяет на странице законченные образы. Связь между объектами устанавливается по нескольких факторам:

  • близость,
  • расположение,
  • направление,
  • цвет
  • размер,
  • формирование известного образа.

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

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