Пользователь
0,0
рейтинг
23 марта 2010 в 23:45

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

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
Кирилл Зима @newa
карма
35,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (47)

  • +4
    в общем и целом: убедился в своем мнении о «первом экране» страницы. теперь это более научно, чем просто мои собственные представления об удобстве. спасибо за перевод.
    • +2
      да, эта статья для меня также поставила все на свои места научно, нежели чутье задним нервом )
      пожалуйста.
    • НЛО прилетело и опубликовало эту надпись здесь
    • +4
      Не надо забывать простую вещь: пользователи смотрят туда, где им что-то показывают. И первый экран все смотрят не потому, что он первый, а потому все думают, что пользователи смотрят первый экран и пихают туда все самое главное.

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



      § 130. Пять цитат из Ромы Воронежского
      • 0
        Ключ в удобстве и историческом развитии работы браузеров. Статистика лишь подтверждает, что основной массе это удобно и привычно, как и мне.
        • 0
          В каком историческом развитии? О чем речь? Сначала все смотрели только на второй экран или что? Или вы думаете, что раньше экран был меньше и ситуация как-то отличалось от сегодняшней?

          Статистика подтверждает, то что логика построена верно. А не предпочтения основной массы. Уверен, что статистика покажет, например, что большая часть самоубийц методом падения с большой высоты выбирает возвышения не менее 30 метров. Что это подтверждает? Что всем нравится убиваться с высоты не менее 30 метров что ли??? Или что так удобнее? Нет. Просто все стараются действовать наверняка. Это логика.
          • 0
            если бы исторически браузеры показывали вам сразу середину страницы а не верхушку, то середину страницы вы бы называли «первым экраном» и туда бы пихали все самое важное :)
            • 0
              Вы это специально?
  • +1
    Про последний элемент очень интересное замечание. Можно обыгрывать внимание читателя, эффектно использую небольшую страницу, информацию в начальном и конечном элементах…
    • +1
      На последний элемент приходится не так уж много фиксаций, т.е. на странице с небольшим списком чего-либо этот эффект, я думаю, будет практически незаметен.
      • –1
        А если не список, а, допустим, постерами или диаграммой?
        • +1
          Для каждого случая нужно тестировать все, но я бы сказал, что эффект имеет место при сравнительно длинных списках и страницах. Что будет на самом деле при использовании постеров или диаграммы (вот тут я не совсем понял как это может буть реализовано) мне было бы интересно и самому узнать.
  • +4
    То, сколько готов прокрутить пользователь зависит от того, как подал информацию дизайнер, вот например тут: img.artlebedev.ru/studio/vacancy/i/info-designer2/result/33790759950037004515.jpg я пожалел, что это всего лишь картнка и некоторые ссылки не нажимаются.
    • 0
      здесь с вами абсолютно вогласен, я бы тоже потыкал ссылочки
  • +1
    >>верстка выполнена таким образом, что пользователь сам захочет прокручивать страницу;

    www.sss72.ru.nyud.net/ — Иного не остается :)
    • 0
      Там нет прокрутки.
      Fatal error: This file has expired. in /home/sss72ru/public_html/_mods/shop/frontends/orders.inc.php on line 0
      • 0
        хабраэффект какой-то. с утра я эту страницу открывал.
    • 0
      Fatal error: This file has expired. in /home/sss72ru/public_html/_mods/shop/frontends/orders.inc.php on line 0? :)
      • 0
        блин, отвлекся на пару часиков от чтения — опередили :)
      • +1
        хм… А у меня вроде ок
        • 0
          Да, работает теперь. Понял юмор :)
  • 0
    Сверху страницы обычно много информации (управляющие элементы разной степени сложности восприятия, меняющиеся части, типа баннеров и т.д.), поэтому времени на изучение и адаптацию (привыкание к логике и структуре сайта) там тратится больше. Упрощение этой части даст пользователю больше времени на страницу в целом.
    Также угасание внимания по ходу движения вниз возможно из-за потери ориентации в центре страницы и, если бы у пользователя были четкие маркеры текущего положения (крупные заголовки в статьях / поэкранное деление контента в каталогах и т.д.), ему было бы проще дробить и изучать информацию, соответственно, он уделял бы этому больше времени.
    Сейчас подумалось, что идеальный пример — Хабр :)
    • 0
      баннеры, которые приносят доход — в самом верху, а о том, что дальше нужно крутить до конца любой юзер хабра знает )
      • 0
        ха-ха, только щас заметил, что до самого конца хабрастраницы я практически никогда не доматываю.

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

    Может просто изначально они были неправильные?
  • +7
    На сайте у Нильсена черным по белому написано, что за каждый перевод его статьи нужно заплатить 250$ (http://www.useit.com/about/copyright.html). Хочу полюбопытствовать, автор топика сделал это?
    • +2
      The following languages have already been sold:

      * German
      * Japanese


      Судя по всему нет :)
    • +2
      Черным по белому — это цвета пиратского флага :)
      А вообще это актуальная заметка, спасибо.
    • +2
      А вы сами как думаете?
    • +3
      Ну эта информация находится не на «первом экране». Отсюда закономерный результат: автор топика этого не увидел :)
  • 0
    спасибо. в закладки.
    • 0
      очень рад
  • +2
    Для переводов есть специальный тип хабра-записи.
    • +1
      с вледующий раз буду пользоваться
  • 0
    Да, золотая середина, первый экран — все от природы. Человек предсказуемое животное.

    Спасибо за перевод, читал с удовольствием.
    • 0
      рад, что вам понравилось
  • +1
    «Такое нежелание прокручивать страницы было достаточно закономерным в то время, поскольку чаще всего компьютеры у пользователей были медленными.»
    Вообще-то я бы в качестве ключевой причины выделил бы появление колёсика/качельки для прокрутки на мышке (1996 год, Microsoft IntelliMouse)
    • +1
      Полностью согласен, я пока переводил об этом думал.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Никогда не понимал, как в подобных исследованиях отслеживается «куда смотрит пользователь». Ладно по вертикали еще можно отследить положение полосы прокрутки, а по горизонтали? Или отслеживается движение курсора? Разъясните пожалуйста
    • +1
      Перед пользовательем камера стоит и смотрит на его зрачки.
    • +1
      Оказывается этот девайс можно и самому изготовить: www.youtube.com/watch?v=4cbCuxNfbDA
  • 0
    Если честно, мне эти исследования напоминают изучения влияния размера холодильника на количество тараканов :) А Якоб — это такой скандалист, который вечно ругает тренды. Был флеш очень популярен, флеш ругал, теперь вот прокрутки ругает. Жирик такой от вебдизайна.

    99% пользователей на Хабре пользуются прокруткой и их это совсем не парит. Во общем, это псевдонаучная хрень :)
  • 0
    Раньше просто не было мышек с колёсиком
  • 0
    Я перевел бы «carrousel» как прокрутку, либо привел бы пример (http://sorgalla.com/projects/jcarousel/examples/static_simple.html). Мне кажется, некоторым читателям такая буквальность может оказаться непонятной. Впрочем, могу ошибаться:)

    В остальном — спасибо за перевод, он хорош, как и тема оригинала заметки!
  • 0
    Мне было интересно. Сказал банальность, но не жалею.

    Все написано правильно. Пользователь подсознательно старается найти выводы под длинной статьей. Глупо их не делать.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.