Как пользователь воспринимает насыщенный текстом веб-сайт – результат эксперимента

На что прежде всего обращает внимание посетитель веб-сайта? Любой опрос будет неполным и субъективным. Результат получится намного точнее, если использовать объективный параметр просмотра сайта. Например, движение зрачка посетителя веб-сайта по сайту. Показываем пользователю сайт и следим за движением его зрачков – какие элементы сайта привлекут посетителя в первую очередь? А что он вообще не заметит?

Экспериментальному анализу восприятия сайта, насыщенного текстом, посвящена статья  “Eye Movement Analysis of Text-Based Web Page Layouts”, опубликованная в журнале “Usability News”, April 2009, Vol. 11 Issue 1. Авторы статьи – Sav Shrestha & Justin W. Owens.

Он-лайн журнал “Usability News” уже упоминался ранее в моем блоге – недавно я опубликовала перевод исследования на тему Зрительное восприятие versus юзабилити: что сильнее влияет на восприятие веб-сайта пользователем”, опубликованного в этом журнале. Он-лайн журнал “Usability News” издается научной лабораторией юзабилити программного обеcпечения (Software Usability Research Laboratory (SURL)) при Wichita State University, США и доступен для чтения на сайте http://www.surl.org/usabilitynews/.

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

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

Объект исследования: веб-сайты с обилием текста на странице.

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

Условно сайты – объекты исследования представлены на рисунке:

eye movement test

Веб-страница была постоена по типу новостного сайта CNN.com, в верхнем левом углу страницы был помещен красный логотип CNN.

В правой колонке (сайдбаре) всех сайтов размещалась реклама.

Подопытные кролики Испытуемые

В исследовании принимали участие 48 студентов – добровольцев (32 девушки, 16 юношей) университета Midwestern. Средний возраст – 22.3 года. Все испытуемые умели пользоваться Интернетом, 2/3 использовали Интернет минимум 7 часов в неделю.


Оборудование

В эксперименте использовался Tobii 1750 монитор (1024 х 768), позволяющий отслеживать и фиксировать движение зрачка испытуемого.

Вся исследуемая веб-страница была разбита на интересующие области (ИО). В эксперименте регистрировалась фиксация зрачка на ИО (фиксацией считалось прекращение движение зрачка на 100 миллисекунд) и резкие “прыжки” зрачка между различными областями.

Чем больше фиксаций на определенном участке сайта наблюдалось, тем более заметен этот участок сайта для посетителя.

Постановка эксперимента.

Участников эксперимента просили изучить данный веб-сайт в течение 40 минут, после чего им были заданы 2 вопроса:

  • была ли на сайте реклама
  • как назывался сайт

Результаты эксперимента – “заметность” рекламы.

Только 24% испытуемых сказали, что заметили рекламу на странице. Однако фиксация взгляда на рекламе была отмечена у 67.5% испытуемых. Т.е. около 43% опрошенных не видели рекламу несмотря на то, что смотрели на нее.


Результаты эксперимента – на чем фиксируется взгляд

Все 5 исследованных варианта веб-страницы показали отчетливый “F/E”-образный рисунок фиксации зрачка на странице.

eye-movement

Вверху – плотность фиксаций на 5-ти различных страницах.
Внизу – перемещение взгляда по странице.

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

Результаты – очередность фиксаций

Были виделены 4 интересующие области (верхний баннер, реклама, заголовок и текст статьи). В каком порядке взгляд фокусируется на каждой из этих областей?
eye-movement

Какие полезные выводы может извлечь дизайнер/блогер из этих результатов или для чего вы все это читали? Проанализируем полученные результаты:

1. Наиболее внимательно посетитель просматривает первые пару абзацев. Чтобы его заинтересовать, эти абзацы надо сделать максимально интересными и/или информативными.

2. Если в тексте есть рисунок, максимальное внимание уделяется тексту рядом с рисунком.

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

4. Картинку лучше поместить слева от текста, тогда посетители прочтут и текст после картинки.

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

6. Если вы ведете блог в основном ради продажи в нем рекламных мест, сделайте рекламу более заметной. Для этого выберите дизайн с узкой колонкой текста (или 2-мя узкими колонками). В случае одной узкой колонки текста посетители фокусировались на рекламе даже ДО того, как просматривали статью.

7. Наличие картинок понижает заметность рекламы. Если ваша цель – клики на рекламный блог Бегуна или АдГугл, ограничьте количество картинок на сайте.

Метод слежения за зрачком пользователя (eye movement analysis) для изучения удобства интерфейса используется очень часто для объективного анализа юзабилити сайтов и интерфейсов. В моем блоге уже была статья о eye-movement: Формы – дизайн с точки зрения юзабилити.

21 thoughts on “Как пользователь воспринимает насыщенный текстом веб-сайт – результат эксперимента”

  1. Интересные статьи я всегда читаю целиком :-)Доказываю: зайка серенький 🙂

  2. Зайка серенький 🙂

    Немного не тот эффект. Я думаю, что следовало бы сказать, что с целью заинтересовать пользователя, требуется работать над текстом первых абзацев. Если пользователь заинтересовался, то он будет читать до конца – у нас этот рефлекс идет от книг – обычно книгу читают до конца, до конца главы, до конца абзаца.

  3. Спасибо за ценную информацию!

    Считаю, что очень полезно её учитывать.

    По поводу того, что не дочитывают до конца: согласен, но когда материал очень интересный, то закономерность не работает: зайка серенький

    Удачи!

  4. Спасибо, очень ценные сведения для “Зайки Серенького”, то-есть меня. Про ценность сведений – не шутка, про зайку – шутка, полбакса не надо 🙂

  5. Ого сколько заек, приятный сюрприз 🙂
    И хоть бы один зайка оставил кошелек для честно заработанного полбакса :). Но еще не поздно, конечно.

  6. Заслужил только Dinni. Он же первый был 🙂
    Дельная статья. Особенно понравился тот момент, где говорится, что если цель – клики по баннерам, надо ограничить количество картинок на странице.

  7. Понятно, Роман, спасибо за замечание, учту и попробую исправить.

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

  9. Спасибо за интересный и ОЧЕНЬ полезный материал!
    Предыдущий уже высказался: столько заек сереньких, а ведь кто не успел, тот опоздал… Дали первому-то полбакса?)))

  10. Зайку заметили, и даже про первого зайку с напряжением разобрались. А вот ошибку в таблице вообще никто не заметил, включая автора ;-).
    В таблице результатов две последние строки повторяются, а про вариант с картинкой справа вообще нет.

    Получается, что таблицы совсем никто не читает?

    Статья интересная, жалко, что количество испытуемых маловато – всего 48 человек на пять вариантов верстки.

Leave a Reply

Your email address will not be published. Required fields are marked *