Веб-студия Laweb

г.Киев, ул. Драгоманова, 4а

Наши Статьи

Делимся своим опытом и размышлениями.

Прокрутка и внимание

СКРОЛЛ

Одно поведение пользователя, которое изменилось с первых дней существования Интернета, это тенденция к прокрутке.

17.12.2018
272

Поведение людей достаточно стабильно, и рекомендации по юзабилити редко меняются со временем. Но одно поведение пользователя, которое изменилось с первых дней существования Интернета, это тенденция к прокрутке. В начале пользователи редко прокручивали вертикально; но к 1997 году, когда длинные страницы стали обычным явлением, большинство людей научились прокручивать. Тем не менее, информация выше сгиба по-прежнему привлекала к себе наибольшее внимание: даже в 2010 году наши исследования с отслеживанием глаз показали, что 80% времени просмотра пользователей было потрачено выше сгиба.
С 2010 года, с появлением адаптивного дизайна и минимализма, многие дизайнеры обратились к длинным страницам (охватывающим несколько «экранов») с негативным пространством. Пришло время снова спросить, изменилось ли поведение пользователей из-за популярности этих тенденций в веб-дизайне.

Об исследовании

Чтобы ответить на этот вопрос, мы проанализировали координаты x, y более 130 000 глазных фиксаций на экране 1920 × 1080. Эти фиксации были от 120 участников, которые были частью нашего недавнего исследования, в котором участвовали тысячи сайтов из самых разных секторов и отраслей. В этом исследовании мы сосредоточили наш анализ на широком спектре пользовательских задач, охватывающих различные страницы и отрасли, включая новости, электронную торговлю, блоги, часто задаваемые вопросы и энциклопедические страницы. Нашей целью было не анализировать отдельные сайты, а скорее охарактеризовать общий диапазон поведения пользователей.
Мы сравнили эти последние данные с данными, полученными в нашем предыдущем исследовании отслеживания движения глаз на мониторах 1024 × 768.

Результаты исследования 

Между нашими исследованиями произошли два изменения: (а) большие экраны; и (b) новые тенденции веб-дизайна с возможными адаптациями на стороне пользователей. Мы не можем отделить друг от друга относительное влияние этих двух изменений, но это не имеет значения, поскольку оба они обусловлены течением времени, и мы не можем отменить ни одно, даже если бы захотели.
В нашем последнем исследовании пользователи тратили около 57% своего времени просмотра страниц выше сгиба. 74% времени просмотра было потрачено в первых двух экранах, до 2160 пикселей. (Этот анализ не учитывает максимальную длину страницы - результат может быть из-за короткой длины страницы или из-за того, что люди сдаются после первых двух показов контента.)
Эти результаты сильно отличаются от тех, о которых сообщалось в нашей статье 2010 года: там 80% времени просмотра составляли фиксации над сгибом. Тем не менее, картина резкого снижения внимания после сгиба остается такой же в 2018 году, как и в 2010 году.
Понятно, что не каждая страница имеет одинаковую длину. Чтобы определить, как люди делят свои записи по странице (независимо от длины страницы), мы разбиваем страницы на 20% сегментов (то есть одну пятую каждой страницы). На обычных веб-сайтах более 42% времени просмотра приходилось на верхние 20% страницы, а более 65% времени проводилось на верхних 40% страницы. На страницах результатов поиска (SERP), которые мы не выделяли в результатах 2010 года, 47% времени просмотра было потрачено на верхних 20% страницы (и более 75% на верхних 40%) - вероятно, отражение тенденции пользователей смотреть только на лучшие результаты.
Если мы посмотрим только на содержимое выше сгиба - в пределах первого экрана - информация в верхней части экрана получила больше внимания, чем информация в нижней части. Более 65% времени просмотра над сгибом было сосредоточено в верхней половине области просмотра. В поисковой выдаче верхняя половина первого экрана получила более 75% времени просмотра выше сгиба. (Это старая истина, но стоит повторить: будьте № 1 или № 2 в Google, или вы вряд ли существуете в Интернете. Доверчивость Google остается такой же сильной, как когда мы идентифицировали это поведение пользователя, 10 лет назад.)

Сканирование и чтение шаблонов

Мы видели, что контент над сгибом получил наибольшее внимание (57% времени просмотра); второй экран контента получил около трети этого (17% времени просмотра); оставшиеся 26% были распределены по длинному хвосту. Другими словами, чем ближе часть информации находится к верхней части страницы, тем выше вероятность ее прочтения.
Индивидуальные образцы чтения подтверждают этот вывод. Многие пользователи используют F-шаблон, когда они сканируют страницу, содержание которой не является хорошо структурированным - они стремятся более внимательно посмотреть на текст, помещенный близко к верхней части страницы (первые несколько абзацев текста), а затем тратят все меньше и меньше фиксаций и времени на информацию, которая появляется на странице.
Даже при наличии списков или информации, представленной в структурированном виде, люди используют больше глаз (и, следовательно, время чтения) для верхней части страницы, поскольку им необходимо понять, как организована страница. Как только они это делают, они, как правило, очень эффективно сосредотачиваются только на информации, имеющей отношение к поставленной задаче, тем самым тратя гораздо меньше внимания (и, следовательно, времени просмотра) на контент, размещенный дальше сверху.

Последствия

Учитывая, что пользователи тратят больше времени на просмотр в верхней части страницы, особенно в верхней части страницы, вот некоторые вещи, которые вы должны иметь в виду:

  • зарезервируйте верхнюю часть страницы для высокоприоритетного контента: ключевые деловые и пользовательские цели. Нижние части страницы могут содержать вторичную или связанную информацию. Держите основные CTA выше сгиба.

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

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

  • протестируйте свой дизайн с представительными пользователями, чтобы определить «идеальную» длину страницы и убедитесь, что информация, которую хотят пользователи, легко просматривается.