Когнитивные особенности проектирования интерфейсов
Расположенные рядом объекты воспринимаются пользователем как связанные — именно так звучит теория близости. Наряду с другими поведенческими паттернами этот принцип позволяет проектировать удобные, понятные и логичные интерфейсы.
Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.
Психологические основы теории близости
Так как нас окружают сотни и тысячи разных объектов, мозг, чтобы защититься от перегрузки, научился автоматически группировать те из них, которые находятся рядом друг с другом.
Так проще анализировать и обрабатывать поступающую информацию: огромное количество самых разных предметов объединяются в сравнительно небольшое количество групп. И это работает на уровне инстинктов.
Мы сразу видим дерево, а не отдельно ствол, ветки, листья и почки. Все признаки мы автоматически объединяем одним понятием — дерево. А уже потом начинаем разбираться, листья у него или иголки, шишки или почки. Мозг автоматически группирует признаки и выдает общий результат.
Тот же принцип: мы сразу видим компьютер, и только затем обращаем внимание на составные части — системный блок, монитор, клавиатуру и мышку.
А теперь пример по интереснее.
Мы по-прежнему сразу видим ноутбук. Кактус и бутылка с водой с ходу отдельно не воспринимаются. Мы автоматически связываем их с ноутбуком, хотя они к нему имеют отношение довольно опосредованное.
И первое впечатление однозначное: здесь ноутбук — и только потом всплывают детали: кактус в горшке, бутылка воды, мышка, газета.
Как это работает в интерфейсе
С интерфейсами то же самое: пользователь сразу группирует находящиеся рядом элементы, и дальше мозг оперирует уже категориями групп, а не отдельных элементов.
Взгляните на группировку ссылок на главной странице OZON. Группы даже выделены рамками и обозначены подзаголовками, чтобы пользователь мог сразу понять, о чем идет речь. Это удобно и логично, потому что близость и дополнительное выделение групп элементов позволяет однозначно их идентифицировать и быстро найти нужный блок и нужную ссылку в нем.
Тот же скриншот. Только мы сознательно нарушили принципы теории близости и переместили Телевизоры из группы «На любой случай» в «Программы для успеха».
А теперь немного когнитивной магии: даже если вы обратили внимание на Телевизоры в неподходящей категории, вы подумали о них, как о связанном объекте: «Какое отношение телевизоры имеют к программам для успеха? К антивирусам, Ворду и 1С?»
Мы уже писали о том, как группировать элементы интернет-магазина.Обратите внимание, принципы теории близости заложены во все базовые схемы группировки. Потому что это работает.
А теперь несколько антипримеров.
Вкладки Стоимость, Схема и Калькулятор сразу связываются с заголовками столбцов таблицы с ценами. С первого взгляда даже непонятно, что это отдельные вкладки, и тем более непонятно, как они связаны с заголовками.
Принципы теории близости нарушены. Из-за этого пользователь на ровном месте сталкивается с трудностями. Хотя идея разнести Схему работы, Стоимость и Калькулятор на разные вкладки изначально очень хорошая.
Сразу кажется, что Hi-Fi акустика и Интернет-телевидение Persik относятся к одной категории Аудио. Потому что этот подзаголовок находится рядом и с первым, и со вторым столбцом меню.
На самом деле Persik относится к Видео. Но разобраться с этим можно, только если просмотреть весь столбец меню до конца, перейти на второй и немного подумать. Принципы теории близости нарушены, из-за чего навигация внутри категорий сильно осложняется.
Еще один антипример: сразу это не заметно, но некоторые пункты меню занимают две строки. Так как отступы одинаковые, переносы автоматически воспринимаются как отдельные пункты.
И такие сайты существуют. Здесь нарушения принципов теории близости можно искать на скорость. Но абсолютно точно можно сказать, что эти нарушения не дают пользователю возможности выделить и сгруппировать элементы, что сильно затрудняет восприятие информации.
Как проверить, соответствует ли интерфейс принципам теории
С помощью стандартного функционала AskUsers мы можем получить обратную связь от пользователей. Если речь идет о соответствии интерфейса теории близости, мы можем выдать респондентам следующие задания:
- Сгруппировать элементы на странице по расположению, дать название каждой группе (например: Контакты, Верхнее меню). Были ли элементы, которые не вписались по своему расположению в группы? Если были, то какие? Какие сложности возникли в процессе группировки?
- Найти на странице определенную информацию. Помогали или мешали элементы интерфейса это сделать? Какие элементы помогали? Какие мешали?
- Совершить целевое действие (позвонить, оформить заказ, написать). С какими трудностями вы столкнулись при совершении действия? Что в интерфейсе нужно улучшить, чтобы действие стало проще?
В ходе исследования выявляются проблемы с навигацией:
- перегруженные меню, неправильная группировка пунктов, слепленные контекстные меню, некорректные заголовки,
- с контентными блоками: неправильная группировка информации, неинформативный контент, некорректные заголовки,
- с типографикой: слепленные абзацы текста, отсутствие отступов, несочетаемые шрифты,
- с графикой: отвлекающие изображения или элементы, неинформативная и нетематическая графика.
По результатам тестирования вы сможете сформировать список доработок, которые сделают ваш сайт удобнее и дадут возможность пользователям автоматически группировать элементы и быстро находить нужную информацию.
Выводы и рекомендации
- Человек инстинктивно группирует и связывает между собой находящиеся рядом объекты и мыслит категориями групп, а не отдельных элементов. Это эволюционный механизм, который помогает быстрее обрабатывать поступающую информацию и защищает мозг от перегрузки.
- Принципы теории близости помогают группировать и компоновать элементы интерфейса таким образом, чтобы пользователь мог быстро сориентироваться и решить свою задачу за минимальное время.
- Нарушение принципов теории близости создает сложности для пользователя, потому что он не может автоматически сгруппировать элементы интерфейса и вынужден анализировать каждый элемент по отдельности.
Принципы теории близости заложены во все стандартные и типовые схемы организации информации на сайте. Даже если дизайн изначально им соответствует, при добавлении новых функций или внесении других изменений могут появиться ошибки. Оптимальный способ их вовремя найти — исследовать сайт после каждого значимого обновления. Это сделает интерфейс проще для восприятия, а сайт — удобнее для пользователя.
