Теория близости: когнитивные особенности проектирования веб-интерфейсов

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

Психологические основы теории близости

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

Так проще анализировать и обрабатывать поступающую информацию: огромное количество самых разных предметов объединяются в сравнительно небольшое количество групп. И это работает на уровне инстинктов.

Мы сразу видим дерево, а не отдельно ствол, ветки, листья и почки. Все признаки мы автоматически объединяем одним понятием — дерево. А уже потом начинаем разбираться, листья у него или иголки, шишки или почки. Мозг автоматически группирует признаки и выдает общий результат.

Тот же принцип: мы сразу видим компьютер и только затем обращаем внимание на составные части — системный блок, монитор, клавиатуру и мышку.

А теперь пример поинтереснее.

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

И первое впечатление однозначное: здесь ноутбук — и только потом всплывают детали: кактус в горшке, бутылка воды, мышка, газета.

Как это работает в дизайне интерфейса

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

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

Тот же скриншот. Только мы сознательно нарушили принципы теории близости и переместили Телевизоры из группы «На любой случай» в «Программы для успеха».

А теперь немного когнитивной магии: даже если вы обратили внимание на Телевизоры в неподходящей категории, вы подумали о них, как о связанном объекте: «Какое отношение телевизоры имеют к программам для успеха? К антивирусам, Ворду и 1С?»

Мы уже писали о том, как группировать элементы интернет-магазина.Обратите внимание, принципы теории близости заложены во все базовые схемы группировки. Потому что это работает.

А теперь несколько антипримеров.

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

Принципы теории близости нарушены. Из-за этого пользователь на ровном месте сталкивается с трудностями. Хотя идея разнести Схему работы, Стоимость и Калькулятор на разные вкладки изначально очень хорошая.

Сразу кажется, что Hi-Fi акустика и Интернет-телевидение Persik относятся к одной категории Аудио. Потому что этот подзаголовок находится рядом и с первым, и со вторым столбцом меню.

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

Еще один антипример: сразу это не заметно, но некоторые пункты меню занимают две строки. Так как отступы одинаковые, переносы автоматически воспринимаются как отдельные пункты.

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

Как проверить, соответствует ли интерфейс принципам правилам теории

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

1. Сгруппировать элементы на странице по расположению, дать название каждой группе (например: Контакты, Верхнее меню). Были ли элементы, которые не вписались по своему расположению в группы? Если были, то какие? Какие сложности возникли в процессе группировки?

2. Найти на странице определенную информацию. Помогали или мешали элементы интерфейса это сделать? Какие элементы помогали? Какие мешали?

3. Совершить целевое действие (позвонить, оформить заказ, написать). С какими трудностями вы столкнулись при совершении действия? Что в интерфейсе нужно улучшить, чтобы действие стало проще?

В ходе исследования выявляются проблемы с навигацией:

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

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

Выводы и рекомендации

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

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