Как пользователи “считывают” страницы сайтов

Многократные исследования поведения пользователей с привлечением технологии отслеживания глаз (eye-tracking), указателя мыши и скроллинга показали, что основное внимание посетителя сосредоточено на определенных местах на мониторе. Чаще всего это левый верхний угол, верхняя и левая части сайта, а также центр страницы. На основании этого было разработано правило F-образного шаблона, согласно которому посетители сайтов преимущественно «читают» его одинаково: сверху вниз и слева направо, при этом визуально этот формат напоминает английскую букву F. Как оказалось, не F-образным шаблоном единым.

Известно, что на сайте пользователь не читает все тексты, а сканирует и выхватывает наиболее значимую на его взгляд информацию со страницы. Как правило, это делается для того, чтобы “быть эффективнее” – мы стараемся решить задачу минимальными усилиями. То, как сканируется страница, во многом определяется прошлым опытом (работа с другими сайтами), текущей задачей, конфигурацией страницы и непосредственно самим контентом. Помимо всем известного F-образного шаблона существует еще несколько способов сканирования страниц глазами.

Точечный шаблон.

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

Изображение: nngroup.com

 

Паттерн в форме торта.

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

Изображение: nngroup.com

Полноценное чтение.

Да-да, бывает и такое. В данном случае пользователь полностью погружается в контент и читает каждое (почти) слово в тексте, а также рассматривает картинки. Такое встречается на источниках, которые пользователь знает, которым доверяет, где интересно, либо задача требует вникания. Смотрите ниже на статью TheGuardian, которая “поглотила” читателя полностью.

 Изображение: nngroup.com

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