22 декабря 2015
8 апреля 2010
18
Важен ли первый экран сайта
80% своего времени пользователи уделяют информации, находящейся в первом экране. Несмотря на то, что люди пользуются прокруткой, лишь 20% их времени посвящается тому, что находится ниже.
К прошлым переводам Нильсена я пару раз видел комментарии, что слишком много букв. Уже переведя треть этой статьи я понял, что я не обязан перводить каждое слово, изливая на вас потоки воды, а могу сделать краткую выжимку. Что ж, попробуем, что из этого выйдет. Сегодня у нас пересказ статьи Якоба Нильсена Scrolling and Attention, опубликованной у него на сайте 22 марта.
Уже после того, как я закончил перевод, Паша показал мне, что статья переведена на Хабре. Но работу я уже проделал, выкидывать жалко, да и интересно посмотреть, как скажется на читабельности материала мой эксперимент с выкидыванием воды. Кому хочется сравнить, вот хабровский вариант: http://habrahabr.ru/blogs/ui_design_and_usability/88692/
Давайте, пока железо горячо, перейдем сразу к баранам. Для выяснения роли первого экрана в современном вебе было проанализировано 57 453 фиксации (остановки взгляда пользователя, обычно длящиеся меньше секунды).
На графике показано распределение времени, затраченного пользователями на разглядывание материала. Учитывалось и количество фиксаций и их продолжительность (то есть две фиксации по 200 милисекунд считаются так же, как одна фиксация на 400 мс или четыре по 100).
Последний столбец показывает количество времени, уделяемого материалу ниже 2000 пикселей. Несмотря на то, что столбик «2000+» такой большой, это не значит, что как только пользователь домотал до 2000px, от делает глаза по пять рублей и давай безотрывно пялиться. В исследовании принимали участие страницы плоть до 4000px высотой, так что 5%, относящиеся к «2000+», размазаны тонким слоем по довольно большой площади.
В итоге 80.3% времени пользователи смотрят на первые экраны сайтов и лишь 19.7% на все остальные.
Исследование проводилось на 1024×768 экранах. Большая пикселевместимость, нередкая сегодня, изменит распределение внимания относительно пикселей (их больше влезает в первый экран), но не имеет существенного влияния на распределение по экранам.
Шаблоны поведения при просмотре страниц
Иногда люди дочитывают страницу до конца. Это правда случается. Изредка.
Но обычно мы наблюдаем один из двух изображенных шаблонов поведения (первая картинка — первый шаблон; вторая и третья представляют вариации второго шаблона).
Каждая точка — это фиксация. Размер точки пропорционален длительности фиксации.
Первый шаблон (слева) характерен для страниц FAQ, когда пользователь, освоившись в верхней части страницы, начинает быстро мотать до интересного ему поинта, читает и так же быстро мотает до следующего интересного поинта.
На этой же картинке явно видно, что последнему поинту уделяется повышенное внимание, что подтверждает правило Штирлица.
Вторая и третья картинки демонстрируют еще более распространенное поведение: интенсивное изучение первого экрана; умеренное внимание к серединке; довольно поверхностное рассматривание материала, распложенного низко. (На иллюстрации специально подобраны случаи, когда пользователь забрался достаточно глубоко, но это происходит далеко не всегда, зачастую люди вовсе не доматывают до нижней части).
vremenno - 8(!!) апреля...
всего лишь 2 дня, ну и еще две недели :)
могу в следующий раз красивых девок напихать для отдыха глаз
Я абсолютно уверен, что пользователь будет смотреть на КОНТЕНТ, где бы он ни был. При этом оформление контента может управлять последовательностью переключений внимания пользователя. А если пользователь настолько тупой, что смотрит в левый верхний угол, даже если там ничего нет — то зачем тогда делать сайты?!? Давайте просто создавать белые странички с прокруткой. Пусть они смотрят в левую половину экрана.
Я считаю, что каноны — это здорово и полезно. Это негласный договор поставщиков услуг и их потребителей: мы вам будем показывать всё самое важное и интересное в левой верхней четверти экрана, а вы пожалуйста выработате в себе привычку это интересное там потреблять.
Хотя немаловажную роль играет тематика баннера.
Давайте по пунктам:
— Вещи, важные для бизнеса, совать в первый экран.
Если у них сложившийся бизнес и постоянные клиенты, а новые приходят по рекомендации (то есть если сайт для них не является инструментом привлечения клиентов), то с первым экраном все более-менее в порядке, он просто выполняет роль напоминалки телефона.
Если же сайт делался для публичной демонстрации своих заслуг, то первый экран не удался, заслуг на нем не видно.
В зависимости от задачи ставим за первый пункт или плюс или минус.
Второй пункт
Так как люди мотают страницы довольно быстро, приспосабливать верстку для быстрого просмотра, а не для вдумчивого чтения.
Читать их сайт не вполне удобно, так как у тебя отнимают часть привычного контроля: пытаешься выделить и скопировать себе текст, а сайт куда-то едет вдруг, место, которое при ховере скроллит сайт никак не обозначено и приходится находить его на ощупь. Неужели нельзя было сделать фиксированные зоны, которые бы отвечали за скролл по наведению, вот так например:
http://img-fotki.yandex.ru/get/4701/kotisla.6/0_500ce_6962a41b_orig
Да и вообще можно было бы сделать переключатель на более стандартный вид, для тех, кто уже наигрался.
Так что за второй пункт минус.
— Располагая самое важное наверху, не забывайте класть что-нибудь интересное вниз.
Текст в стиле «Мы работаем над глобальным преобразованием бренда в широком диапазоне областей, обеспечивая комплексное конкурентное превосходство посредством современной стратегии идентификации» смахивает на цитату из яндекс.рефератов, хотя и чуть менее бессмыслен. И уж точно он не тянет на что-нибудь интересное, что нужно класть вниз. Явный незачет.
Итого или один или ноль из трех. Достаточно ли этого для организации, которая называет себя «мульти дисциплинарная дизайн студия» и работает «над глобальным преобразованием бренда в широком диапазоне областей, обеспечивая комплексное конкурентное превосходство» (на заметку, мультидисциплинарная пишется слитно, а дизайн-студия через дефис), решайте сами.