Pull to refresh

Якоб Нильсен :: Прокрутка и внимание

Reading time 7 min
Views 6.8K
image

Представляю вашему вниманию мой второй перевод — новую статью Якоба Нильсена, вышедшую вчера.

Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они тоже пользуются, только 20% их внимания приходится на то, что расположено ниже «первого экрана».

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



Во времена зарождения интернета пользователи, зачастую, вообще не использовали прокрутку. Они попросту смотрели на ту часть страницы, которая была для них видимой, и решали — оставаться им на странице или нет. Таким образом, в исследованиях по юзабилити в тот период (1994-1996), сайты зачастую не имели успеха, если важная информация находилась за пределами «первого экрана», поскольку большинство пользователей ее не видели.

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

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

Конечно, сегодня пользователи будут использовать прокрутку. Однако, не стоит забывать о «первом экране» и создавать бесконечно длинные страницы по двум причинам:

  • Длинные страницы все еще являются проблемой, поскольку у пользователей достаточно ограничен объем внимания. Люди предпочитают те сайты, которые позволяют достичь их цели и сделать это быстро. Помимо основного нежелания много читать есть еще и нежелание прокручивать.
  • С точки зрения удержания внимания пользователей, информация на «первом экране» представляет собой большую ценность, чем все остальное, что расположено ниже.

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

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

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

Eyetracking

В прошлом месяце мы провели достаточно большое исследование поведения пользователей на различных сайтах. Для того, чтобы определить, является ли «первый экран» до сих пор релевантным, я частично проанализировал результаты исследования — в общей сложности 57 453 фиксации (случаи, когда пользователь смотрел на что-либо на странице — средняя длина фиксации составляет меньше половины секунды).

Для пущей объективности, я проанализировал данные о 21 пользователе, просмотревшем 541 страницу, хотя наше исследования было намного масштабнее. Чтобы убедить вас, что я не специально ограничиваю выборку, разрешите объяснить, почему я исключил некоторые части исследования из этого анализа.

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

  • сайты с новыми функциями навигации;
  • корпоративные блоги, интересные FAQ и т.п.;
  • веб-приложения.

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

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

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

Фокусировка внимания

Таблица ниже показывает распределение пользовательских фиксаций по полосам на странице, каждая высотой в 100 пикселей. Столбцы представляют общее время взгляда на полосы, деленное на количество фиксаций. (Другими словами, две фиксации по 200 мс — то же самое, что одна фиксация на 400 мс.)

image

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

В нашем исследовании, время просмотра страниц пользователями распределилось так:
  • «Первый экран»: 80.3%
  • Все, что ниже: 19.7%

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

Поведение при прокрутке

Иногда пользователи читают страницу целиком. Это случается. Редко.

Чаще мы видим одно из двух типов поведения, показанных на схемах просмотров:

image

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

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

Схема просмотра слева также иллюстрирует другой интересный момент: последний элемент в списке часто привлекает дополнительное внимание. Несомненно, первые несколько предметов наиболее важны, но на последний предмет обращают больше внимания, чем на предыдущий. (Это также объясняет, почему диаграмма показывает больше внимания на 701-800 пиксельную зону, чем на 601-700 пиксельную: к этой области относится нижняя часть исследуемого нами монитора.)

Внимание к окончанию списка также усиливается благодаря эффекту первенства, говорящемуо том, что последняя вещь, которую человек увидел, откладывается в уме, как особенно важная.

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

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

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

Средняя схема показывает страницу с 50 диванами:
  • 2 верхние строки получили в среднем от 5 до 10 фиксаций на каждый диван;
  • следующие 4 — от 2 до 4 фиксаций на диван;
  • следующие 8 — обычно по 1 фиксации на диван;
  • 3 нижних строки получили 2 фиксации на одном диване, и ни одной на оставшихся семи.

Это всего лишь грубая модель, и пользователи будут отличаться в зависимости от наполнения страницы. К примеру, диваны Cameon Loveseat и Custom Hugo Loveseat получили 4 фиксации на двоих, при том, что расположены они на уровне 2 750 пикселей внизу. Можно предположить, что пользователь посчитал эти 2 дивана особо привлекательными.

Выводы

Выводы просты: самая главная для пользователей или вашего бизнеса информация должна находиться на «первом экране». Пользователи будут просматривать страницу и ниже, однако не совсем не так, как они смотрят на «первый экран».

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


Источник — http://www.useit.com/alertbox/scrolling-attention.html
Tags:
Hubs:
+57
Comments 47
Comments Comments 47

Articles