Главная страница

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

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

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

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


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

Так проще анализировать и обрабатывать поступающую информацию: огромное количество самых разных предметов объединяются в сравнительно небольшое количество групп. И это работает на уровне инстинктов.Psihologicheskie osnovy.png
Мы сразу видим дерево, а не отдельно ствол, ветки, листья и почки. Все признаки мы автоматически объединяем одним понятием — дерево. А уже потом начинаем разбираться, листья у него или иголки, шишки или почки. Мозг автоматически группирует признаки и выдает общий результат.

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

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

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

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


С интерфейсами то же самое: пользователь сразу группирует находящиеся рядом элементы, и дальше мозг оперирует уже категориями групп, а не отдельных элементов.pravil'naja gruppirovka v interfejse.png
Взгляните на группировку ссылок на главной странице OZON. Группы даже выделены рамками и обозначены подзаголовками, чтобы пользователь мог сразу понять, о чем идет речь. Это удобно и логично, потому что близость и дополнительное выделение групп элементов позволяет однозначно их идентифицировать и быстро найти нужный блок и нужную ссылку в нем.ne pravil'naja gruppirovka v interfejse.png
Тот же скриншот. Только мы сознательно нарушили принципы теории близости и переместили Телевизоры из группы «На любой случай» в «Программы для успеха».

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

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


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

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

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

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

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

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

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


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

  1. Сгруппировать элементы на странице по расположению, дать название каждой группе (например: Контакты, Верхнее меню). Были ли элементы, которые не вписались по своему расположению в группы? Если были, то какие? Какие сложности возникли в процессе группировки?
  2. Найти на странице определенную информацию. Помогали или мешали элементы интерфейса это сделать? Какие элементы помогали? Какие мешали?
  3. Совершить целевое действие (позвонить, оформить заказ, написать). С какими трудностями вы столкнулись при совершении действия? Что в интерфейсе нужно улучшить, чтобы действие стало проще?


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

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

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

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


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

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 4 оценок, средняя: 3.59 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать
Блог
Для заказчиков
Для асессоров
Каталог разработчиков
О сервисе
Партнерская программа
Пресса
Контакты
Сделано с  StudioF1  в Студии F1

AskUsers.ru © Copyright 2015 г.

Регистрация
Буду проводить исследования
Буду тестировать сайты
Необходим для подтверждения регистрации и восстановления пароля

Если у вас уже есть аккаунт, воспользуйтесь формой входа

Восcтановления пароля

Если вы забыли пароль, введите ваш E-Mail.
Контрольная строка для смены пароля, а также ваши регистрационные данные, будут высланы вам по E-Mail.



Если у вас уже есть аккаунт, воспользуйтесь формой входа

Войти в личный кабинет
Забыли свой пароль?

Если у вас ещё нет аккаунта, зарегистрируйтесь прямо сейчас