Дизайн Ольга Шишкова
2 477

Вовлечённость стала больше, но её всё ещё недостаточно: как пользователи читают сайты в 2018 году

Сравнение исследований по считыванию информации от Nielsen Norman Group за 2010 и 2018 годы.

В закладки

Поведение людей стабильно, поэтому руководства по юзабилити редко меняются. Но один тип поведения всё же изменился — тенденция прокручивать страницу. Вначале пользователи редко пролистывали сайты, но к 1997 году длинные страницы получили широкое распространение, поэтому большинство людей научилось скроллить.

Однако информации, видимой до прокрутки, всё ещё уделялось наибольшее внимание. Ещё в 2010 году мы провели исследование по отслеживанию движений глаз, и оно показало, что 80% времени пользователи проводят на экране, видимом без прокрутки.

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

Данные по отслеживанию движений глаз

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

Чтобы ответить на поставленный вопрос, мы записали 130 тысяч сессий движения глаз по экрану с разрешением 1920×1080 и проанализировали координаты осей X и Y. В этом исследовании приняли участие 120 испытуемых. Они просмотрели тысячи сайтов из разнообразных областей.

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

Мы сравнили последние данные с теми, что были получены из предыдущего исследования по отслеживанию движения глаз на мониторах с разрешением 1024×768.

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

Между нашими исследованиями произошло два изменения: экраны стали больше, и в веб-дизайне появились новые тренды. Пользователи могли адаптироваться к ним. Мы не можем разделить относительное воздействие этих двух изменений, но это и не важно, потому что оба они объясняются промежутком прошедшего времени, и даже если бы мы хотели, мы не смогли бы на это повлиять.

В последних наших исследованиях пользователи проводили около 57% времени на видимой без прокрутки странице. 74% от общего времени просмотра было проведено на первых двух полных экранах, до 2160 пикселей. (Этот анализ не учитывает максимальную длину страницы — такой результат может быть и из-за коротких страниц и из-за того, что люди бросали чтение после первых двух полных страниц контента.)

Эти результаты сильно отличаются от тех, о которых мы писали в своей статье в 2010 году: там 80% времени просмотра отводилось странице, видимой без прокрутки. Однако тенденция резкого падения внимания после начала прокрутки в 2018 году осталась такой же, как была в 2010.

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

Понятно, что не все страницы одинаковой длины. Чтобы понять, как взгляд испытуемых двигался по страницам (вне зависимости от длины страницы), мы разделили их на сегменты — взяли по одной пятой от каждой страницы. На общих сайтах более 42% времени просмотра приходилось на первые 20% страницы и более 65% времени было проведено на первых 40% страницы.

На страницах поисковой выдачи, которые мы не отделяли от остальных страниц в 2010 году, 47% времени просмотра приходилось на первые 20% страницы (и более 75% — на первые 40%) — что, вероятно, является отражением тенденции пользователей смотреть только на первые результаты.

Люди тратили непропорционально больше времени на просмотр первых 20% страницы

Если рассматривать только контент, расположенный до прокрутки, и только на первом экране, то информации, расположенной ближе к верхней части экрана, уделялось больше внимания, чем информации, расположенной ближе к низу экрана. Более 65% времени просмотра страницы до прокрутки было сконцентрировано на верхней половине поля видимости.

На страницах поисковой выдачи верхней половине первого полного экрана до прокрутки уделили более 75% времени просмотра. (Это старая истина, но её стоит повторить: будьте первым или вторым в Google — иначе можно сказать, что вас нет в интернете. Чрезмерное доверие к Google остаётся всё таким же сильным, как и десять лет назад, когда мы впервые определили такой тип поведения у пользователей).

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

Модели беглого просмотра и чтения

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

Индивидуальные модели чтения подтверждают этот вывод. Многие пользователи бегло просматривают страницу по F-паттерну, если контент на ней не очень хорошо структурирован — они более внимательно читают текст, расположенный близко к верху страницы (первые несколько параграфов), а затем всё меньше фиксируют взгляд и всё меньше времени тратят на информацию, которая расположена ниже на странице.

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

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

2010 год против 2018 года

В 2010 году 80% времени просмотра тратилось на страницу до прокрутки. Сейчас только 57% — что, вероятно, является следствием широкого распространения длинных страниц. Что это значит?

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

В какой-то степени. Люди всё равно не очень много прокручивают — они редко заходят дальше третьего полного экрана. Линия, после которой требуется прокрутка, была барьером, сдвинувшимся до третьего полного экрана — восемь лет назад 80% времени просмотра тратилось на первый экран информации (всё, что видно без прокрутки); сегодня 81% времени просмотра тратится на первые три экрана информации.

Мы всегда говорили, что люди будут прокручивать страницу, если у них будет на то причина. Но внимание всё ещё держится на верхней части страницы — это та часть контента, которую проще всего заметить, которая вероятнее всего будет просмотрена вашими пользователями. Количество действий, требуемых для прокрутки (interaction cost), сокращает вероятность того, что контент, расположенный в нижних частях длинных страниц, будет просмотрен.

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

Хорошо или плохо, но пользователей сейчас больше подстёгивают прокручивать страницы, чем это было в прошлом — всё равно не слишком сильно. В начале развития интернета плотность информации, возможно, была слишком высокой (что приводило к перегруженному и нагромождённому внешнему виду страницы), теперь дизайн страниц определённо становится более скудным.

Что следует учесть при условии, что пользователи проводят больше всего времени, просматривая верхнюю часть страницы.

  • Верхнюю часть страницы надо приберечь для высокоприоритетного контента: ключевых бизнес- и пользовательских целей. На нижней части страницы можно разместить второстепенную или сопутствующую информацию.
  • Главные кнопки призыва к действию лучше разместить до прокрутки. Чтобы привлечь внимание к важному контенту, можно использовать подходящий шрифт: пользователи полагаются на такие элементы, как заголовки или выделенный жирным текст, чтобы определить, когда информация будет важной, и понять, где начинается новый сегмент контента. Проследите за тем, чтобы эти элементы были визуально отличимы друг от друга, и последовательно придерживайтесь одного стиля, чтобы пользователи могли с лёгкостью обнаружить их.
  • Остерегайтесь «ложного дна». Этот эффект стал очень распространён в современном минималистичном дизайне. Иллюзия завершённости может мешать прокрутке. Внедряйте указатели (такие как разрыв текста), чтобы люди понимали, что после прокрутки будет продолжение.
  • Тестируйте свой дизайн на типичных пользователях, чтобы определить идеальную длину страницы и обнаружить нужную пользователю информацию.

Хотя современные страницы становятся всё длиннее и включают негативное пространство, а пользователи стали прокручивать больше, чем раньше, всё-таки люди тратят большую часть времени просмотра на верхнюю часть страницы. Приоритизация контента — это ключевой шаг в процессе планирования контента. Сильные визуальные элементы иногда помогают заставить пользователя прокрутить страницу и посмотреть контент ниже области без прокрутки.

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ольга Шишкова", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 2, "likes": 19, "favorites": 15, "is_advertisement": false, "subsite_label": "design", "id": 39045, "is_wide": false, "is_ugc": true, "date": "Tue, 05 Jun 2018 10:07:39 +0300" }
{ "id": 39045, "author_id": 107557, "diff_limit": 1000, "urls": {"diff":"\/comments\/39045\/get","add":"\/comments\/39045\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/39045"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

2 комментария 2 комм.

Популярные

По порядку

1

Офигеть, четыре 'ё' в заголовке

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }