Паттерны движения глаз при просмотре web-страниц сверстанных в одну и в две колонки

Это исследование направлено на изучение моделей движения глаз у пользователей, просматривающих или ищущих информацию в новостной статье, на web-странице, сверстанной в одну и в две колонки. Результаты показывают большее число фиксаций взгляда во второй колонке статьи, нежели фиксаций на той же информации в нижней части единственной колонки. Кроме того, “F”-паттерн проявлялся при чтении левой колонки двухколоночного варианта, в правой же, такого замечено не было. Другие элементы страницы, такие, как реклама, в большей мере привлекали внимание пользователей при беглом просмотре страницы, чем при поиске информации (Sav Shrestha и Justin W. Owens).

Данные о фиксации взгляда выявляют области страницы, на которые смотрит пользователь. Фиксация взгляда может быть определена, как статический взгляд, зафиксированный на определенной области в течение 200-300 миллисекунд между саккадами — скачкообразными движениями глаз между фиксациями (Rayner, 1998). Большое количество фиксаций в определенной области страницы указывает на то, что эта область является более заметной для пользователя, и информация из неё может быть воспринята пользователем (Poole et al, 2004).

В этом исследовании изучались паттерны движения глаз на насыщенной текстом странице. Цель исследования — изучить, как меняется поведение глаз, в зависимости от (1) представления текста (одна или две колонки) и (2) задачи стоящей перед пользователем (просмотр статьи или поиск в ней информации).

Методика

Респонденты

В исследовании приняли участие сорок студентов старших курсов, изучающих психологию (средний возраст – 22.1 года). Все респонденты заявили, что имеют опыта работы в Интернет.

Инструментарий

Участники заполнили опросник, предназначением которого было выяснить привычки пользования Интернет.

Для эксперимента использовался компьютер с процессором Pentium Core2 Duo и 17-ти дюймовым монитором, с физическим разрешением 96 dpi, настроенным на экранное разрешение 1024 на 768 пикселей. Монитор был интегрирован с системой слежения за движением глаз Tobii 1750, работающей на частоте 50Hz. Для сбора и фиксирования данных о движении глаз участников использовался программный комплекс ClearView™ 2.7.

В программе ClearView™, используя новостной сайт CNN.com, как образец, были созданы две страницы. Каждая статья была представлена в одно- и двухколоночной верстке. На каждой странице были определены 25 Областей Интереса (AOI). Первый набор содержал 22 одинаковых AOI (в одноколоночной статье все AOI располагались в одну колонку, а в двухколоночной – по 11 AOI на колонку). Каждой AOI отвечал один абзац текста новости. Оставшиеся три AOI были представлены баннером сверху страницы, рекламным блоком справа, и названием статьи, соответственно.

Процедура

Респонденты располагались на расстоянии, примерно 60 см от монитора, и под них была откалибрована система регистрации движений глаз.

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

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

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

Результаты

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

F и E паттерны

На полученных тепловых картах четко выраженн F/E-паттерн, как для одноколоночного представления (см. Рис.1), так и для левой колонки двухколоночного представления (см. Рис.2). Паттерны проявлялись независимо от того, какая задача выполнялась – просмотр или поиск. Ранее, этот паттерн отмечали Nielsen (2006) и Shrestha, et al., (2007). Правая колонка двухколоночного представления, в случае просмотра не демонстрировала какого-либо выраженного паттерна (Рис. 2). Хотя, на этой колонке было осуществлено заметно больше фиксаций глаз во время поиска информации.

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

Рисунок 1. Тепловая карта фиксаций взгляда, при просмотре статьи в одну колонку (слева) и поиск по статье в одну колонку (справа). Крýгом отмечено положение цели, которую искали респонденты.

Рисунок 1. Тепловая карта фиксаций взгляда, при просмотре статьи в одну колонку (слева) и поиск по статье в одну колонку (справа). Крýгом отмечено положение цели, которую искали респонденты.

Рисунок 2. Тепловая карта фиксаций взгляда, при просмотре статьи в две колонки (слева), и поиске по статье в две колонки (справа). Крýгом отмечено положение цели, которую искали респонденты.

Рисунок 2. Тепловая карта фиксаций взгляда, при просмотре статьи в две колонки (слева), и поиске по статье в две колонки (справа). Крýгом отмечено положение цели, которую искали респонденты.

Количество фиксаций на статье

Наивысшее число фиксаций взгляда было отмечено в начале статьи и стабильно уменьшалось по мере продвижения вниз. Такая тенденция справедлива для обоих вариантов (верстки в одну и в две колонки) и для обеих задач (чтение и поиск). Чтобы представить эту закономерность в количественном выражении, было просуммировано количество фиксаций на каждой из 22-х AOI. Рисунок 3 показывает сравнение числа фиксаций по задачам, для каждого представления. Здесь можно увидеть, что в целом, число фиксаций снижается на протяжении статьи, от начала до конца. Всплеск на 8-й AOI для задачи поиска отражает местонахождение цели поиска.

Рисунок 3. Количество фиксаций взгляда, при просмотре и поиске для одноколоночного (слева) и двуколоночного (справа) представлений

Рисунок 3. Количество фиксаций взгляда, при просмотре и поиске для одноколоночного (слева) и двуколоночного (справа) представлений

Сравнение задач просмотра и поиска

Если диаграммы, представленные выше, демонстрируют незначительную разницу между задачами просмотра и поиска в пределах самой статьи, то изучение отдельных диаграмм (Рис. 4 и 5) для каждой задачи выявляет заметные отличия. Выполняя задачу просмотра, респонденты чаще фиксировали взгляд за пределами статьи, как, например, на баннере сверху страницы или рекламе справа. А также, на заголовке статьи, при выполнении задачи поиска. При просмотре, респонденты запоминали наличие рекламы лучше, чем при поиске, χ2 (1) = 5.01, p < .05. Это позволяет предположить, что респонденты были более расположены рассматривать рекламу, когда у них не было определенной цели поиска.

Рисунок 4. Примерная диаграмма движения глаз, при просмотре (слева) и поиске (справа) статьи, в одноколоночном представлении

Рисунок 4. Примерная диаграмма движения глаз, при просмотре (слева) и поиске (справа) статьи, в одноколоночном представлении

Рисунок 5. Примерная диаграмма движения глаз, при просмотре (слева) и поиске (справа) статьи, в двухколоночном представлении

Рисунок 5. Примерная диаграмма движения глаз, при просмотре (слева) и поиске (справа) статьи, в двухколоночном представлении

Сравнение представлений в одну и в две колонки

При просмотре статьи, количество фиксаций на 22-х AOI в статье было приблизительно равным, независимо от представления. При поиске, число фиксаций на правой колонке (AOI 11-22) двухколоночного варианта было значительно выше, чем в нижней половине статьи, представленной одной колонкой, t(18) = -2.962, p < .05 (Рис. 6).

Рисунок 6. Количество фиксаций глаз в одно- и двухколоночном представлении, просмотр (слева), поиск (справа).

Рисунок 6. Количество фиксаций глаз в одно- и двухколоночном представлении, просмотр (слева), поиск (справа).

Выводы

Результаты данного исследования углубляют понимание разницы паттернов фиксации взгляда для web-страниц, сверстанных в одну и в две колонки. При поиске информации в статье, пользователи фиксируют взгляд на правой колонке двухколоночного представления значительно чаще, чем при поиске в нижней половине единственной колонки. Эта информация предоставляет потенциальное решение проблемы «линии сгиба» (края экрана), при котором у пользователя отпадет потребность прокручивать страницу, чтобы прочесть текст, за границей видимой области экрана.

Дизайнерам web-страниц следует рекомендовать использование двухколоночной верстки, для сохранения внимания пользователя при чтении длинных текстов. Также, следует провести дополнительные исследования, для изучения паттернов движения глаз при чтении одной колонки, в зависимости от её ширины и при чтении статей, с дополнительными подзаголовками.

Примечание: материалы этого исследования были представлены на 52-й ежегодной встрече Human Factors and Ergonomics Society в Нью Йорке, в 2008 году.

Литература

• Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Retrieved January 18, 2007

• Poole, A., Ball, L. J., and Phillips, P. (2004). In search of salience: A response time and eye movement analysis of bookmark recognition. In S. Fincher, P. Markopolous, D. Moore, & R. Ruddle (Eds.), People and Computers XVIII-Design for Life: Proceedings of HCI 2004. London: Springer-Verlag Ltd.

• Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124, 372-422.

• Shrestha, S., Lenz, K. M., Owens, J., and Chaparro, B. C. (2007). Eye Gaze Patterns while Searching vs. Browsing a Website. Usability News, 9(1). Retrieved May 22, 2008

Перевод: Paul Kyrejto, Руслан Гроховецкий.

Впервые опубликовано в «Юзабилити Бюллетень, 2010».