Подпороговое внимание

Года два у меня была идея сделать вики по юзабилити и поэтому я активно переводил с английского всевозможные материалы. Но потом появилась Usability BOK и желание прошло, а статьи остались :)

Сегодня я хочу поделиться с вами очень практичной статьей о подпороговом (англ. – pre-attentive) внимании (спасибо Андрею Морозову за перевод термина pre-attentive при помощи “Начала субъектной психофизики” Бардина Индлина).

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

Пример визуализации, где используется подпороговое внимание (выборы в Штатах):

В конце статьи – ссылка на статью, в которой более подробно рассказывается про подпороговое внимание (не та, которую я переводил). К сожалению, оригинал статьи, которую вы сейчас читатаете, я не нашел, но это 100% был какой-то солидный американский университет :)

Также я рекомендую ознакомиться с моей статьей Pro контраст.

Подпороговое внимание и обнаружение паттернов

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

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

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

Определения
Способности зрительной системы нашего мозга по восприятию и распознаванию паттернов могут быть выгодно использованы в проектировании интерфейсов. Существуют простые формы и цвета, которые могут быть очень быстро обработаны и распознаны. Эта обработка называется «подпороговым обнаружением», потому что она выполняется автоматически, до активизации сознательного внимания. Мы можем использовать знания об этом процессе для увеличения скорости восприятия информации. “Pre-attentively” (прим. пер. “подпорогово-обработанные” – не звучит, поэтому оставил англ. вариант) обработанные элементы – те элементы, которые “pop-out” (прим. пер. pop out – выделятся, привлекают внимание; я оставил англ. термин, так как существует четкая ассоциация с pop-up окнами, которые невольно привлекают наше внимание :) ), в нашем восприятии. Этот процесс основан на принципах гештальт-психологии, подходе к психофизике, который получил дальнейшее развитие в психологии восприятия и нейропсихологии.

Принципы гештальт-психологии

Близость
Объекты, которые находятся рядом друг с другом, воспринимаются как один элемент:
Непрерывность
Объекты, связанные гладкой кривой, воспринимаются как один элемент:
Завершенность
Фигуры с пустотами воспринимаются как замкнутые цельные фигуры:
Схожесть
Объекты, похожие друг на друга воспринимаются как один элемент:

Свойства процесса подпорогового обнаружения
Было проведено много экспериментов для определения типов элементов, которые обрабатываются “pre-attentively”. В экспериментальных условиях деталь паттерна считается обработанной “pre-attentively”, если она может быть распознана среди «distractors» (раздражителей) за время меньшее 10 миллисекунд. “Non-preattentively” обработанные элементы опознаются за время порядка 40 миллисекунда на один элемент или больше. «Pre-attentively» обрабатываемые детали могут быть использованы в проектировании интерфейсов тогда, когда мы хотим, чтобы пользователь мгновенно мог извлечь информацию из дизайна.

Симметрия
Симметричные линии воспринимаются как один элемент. Асимметричная линия “pops-out”:
Цвет
Разница в цвете “pops out” элемент из окружащих элементов:
Размер
Размер очень легко обрабатывается “pre-attentively”:
Форма
Разница в форме может быть использована для привлечения внимания к элементу:

Поиск со связыванием
Когда в паттерне используется комбинация “pre-atentive” свойств, нужно быть осторожным, чтобы не создать “связанные” условия поиска и таким образом потерять преимущества “pre-attentive”. Поиск со связыванием приводит к тому, что каждый элемент должен быть последовательно и независимо просканирован. Связывание является результатом зрительной интерференции похожими, привлекающими внимание деталями паттерна.

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

Пространственная группировка может быть использована для возвращения к возможностям “pre-attentive”. Нижняя группа является “pre-attentive” для красного эллипса:

Эффекты интерференции
При проектировании интерфейсов мы можем захотеть использовать свойства “pre-attentive” для привлечения внимания к конкретным элементам или для акцентирования внимания на некой категории. Цвет и форма – свойства “pre-attentive”; однако, если раздражители имеют детали, схожие с целевыми элементами, может произойти интерференция. Также, цвет обычно доминируется над формой в группировке или в категоризации элементов интерфейса.

Задачей в этом примере является нахождение красного круга, целевого элемента. Каждый раздражитель имеет по крайней мере по одному свойству (из двух) цели (цвет или форма). Это создает эффект интерференции и приводит к тому, что нужно выполнять сканирование каждого элемента.

И форма и цвет – “pre-attentive” свойства. Однако если бы нам захотелось кодировать контрольную панель с использованием обоих свойств, мы бы увидели, что «форма» проигрывает «цвету». Цвет в этом примере является доминирующим “pre-attentive” свойством:

В случае, если цвет у всех элементов одинаковый, форма становится доминирующим, “pre-attentively” обрабатываемым свойством:

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

Подсчитайте сколько раз слово “красный” встречается в этом примере. Смысловое содержание конфликтует с восприятием цвета.

Эффект Струпа
Конфликт смысла с изображением – в этом примере цвета для “стойте” и “идите” используются в порядке, отличном от опыта типичного пользователя (в котором красный используется для “стойте”, а зеленый для “идите”). Это приводит к конфликту и уменьшает время реакции и даже может привести к опасным последствиям:

Ссылки по теме

Pro Контраст (моя предыдущая статья о контрасте)
Perception in Visualization (Christopher G. Healey, Department of Computer Science, North Carolina State University)