Работа наша удаленная

Что такое фриланс, копирайтинг, рерайтинг, блоггинг, манимейкинг.

Строим сайт

Копирайтер осваивает сайтостроительство. Советы начинающим вебмастерам.

Фрилансер крупным планом

Невыдуманные истории, интервью, обзоры.

Главная » Строим сайт, Что должен знать и уметь веб-копирайтер

Особенности восприятия текста на мониторе. Часть 2. Основы юзабилити сайтов

22.09.2009 – 01:038 коммент.

В предыдущей статье, посвященной особенностям восприятия текста на мониторе, рассматривалась оптимальная (читабельная) конструкция интернет-текстов.

Сегодня речь пойдет о том, в какой последовательности происходит визуальное сканирование (просмотр) веб-страницы посетителями сайта. Этот вопрос, скорее, заинтересует самоучек-сайтостроителей вроде меня, хотя и копирайтерам полезно узнать, что именно из их гениальных творений будет прочтено пользователями, а что, скорее всего, останется «за кадром».
Особенности восприятия текста на мониторе. Основы юзабилити сайтов.
Информация, как и в прошлый раз, взята мной из лекций гуру-юзабилити Якоба Нильсена. К сожалению, не все они переведены на русский язык — сколько же там полезностей! Но, ближе к делу…

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

Иными словами, Якоб Нильсен утверждает, что взгляд пользователя во время сканирования содержимого веб-страницы «рисует» на экране букву «F» следующим образом:

1) В первую очередь глаз человека идет слева направо вдоль верхней горизонтальной зоны экрана (шапки сайта, верхнего меню, заголовка статьи).
2) Затем взгляд возвращается в левый верхний угол и опускается вниз по левому краю на следующий горизонтальный уровень с информацией.
3) Снова выполняется просмотр зоны слева направо по горизонтали. Протяженность этой зоны напрямую зависит от того, насколько интересна пользователю размещенная там информация.
4) Взгляд человека вновь возвращается к левому краю экрана и скользит вниз уже практически вертикально. Сканирование в этой зоне может проводиться медленно и вдумчиво (образуя широкую вертикальную зону охвата), а может лишь точечно выхватывать размещенные по левому краю названия параграфов и подпунктов.

Рассмотрим подробнее, как происходит визуальное сканирование сайтов с различными шаблонами. Якоб Нильсен предлагает следующую цветовую схему, где красным и желтым цветом выделены наиболее просматриваемые зоны веб-страниц, синим цветом — зоны менее интересные посетителям сайта, а серым — зоны, которые практически никто из людей не просматривает. Геометрия зоны наибольшего восприятия во всех трех случаях напоминает букву «F».
Особенности восприятия текста на мониторе, или что должен знать веб-дизайнер
Copyright © 2006 by Jakob Nielsen. «F-Shaped Pattern For Reading Web Content»

Что представлено на схеме?
а) Корпоративный сайт, а точнее его раздел «О компании». Здесь заметен интерес читателей к первым двум-трем абзацам, причем их внимание заметно смещено к левому краю текста. Именно текста, поскольку меню расположенное в левой боковой колонке остается практически без внимания (как впрочем и меню в правой боковой колонке).
б) Витрина товара из интернет-магазина. Здесь наибольшее внимание привлекает верхняя строчка с названием товара, его ценой, а также раздел «Моя корзина».
Следующий горизонтальный уровень, привлекающий внимание пользователей — это первый абзац описания товара, то есть, сразу под иллюстрацией. После этого по левому краю идет поверхностное сканирование подпунктов, перечисляющих характеристики товара.
в) Страница поисковой системы или каталога сайтов. Здесь заметна практически одинаковая протяженность горизонтальных линий просмотра, что говорит об одинаково высоком интересе пользователей к информации в первых двух-трёх строчках поисковиков.
Далее взгляд пользователя перемещается к левому краю экрана и сканирует лишь отдельные пункты перечня.

Выводы, которые позволяет сделать данная цветовая схема, подтверждают и дополняют то, о чем мы ранее говорили здесь.

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

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

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

Вам понравилась эта статья? Тогда подпишитесь на новости нашего сайта любым удобным вам способом и следите за новыми публикациями. Дальше будет ещё интереснее!

8 коммент. »

  • Здоровски всё расписано!!! С корпоративными сайтами и магазинами не очень хорошо знакома, а вот про поисковики могу точно сказать, что взгляд фиксирует верхние 5 строчек :)

    В случае блоггеров и сайтовладельцев могу ещё точно сказать, что красным цветом надо пометить счётчики – ведь так интересно глянуть статистику :) Себя постоянно на этом ловлю :)

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

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

    Поэтому не стоит так уж «западать» на рекомендации исследователей американской модели журналистики, пусть и инет-пространства )

  • Admin:

    Wisenteta, здесь речь немного о другом (точнее, совсем о другом). :)
    Якоб Нильсен не ставит целью рекомендовать ту или иную модель журналистики. А уж какими путями идет развитие мировой журналистики, его и подавно не волнует. :)

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

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

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

  • Очень полезная статья! Действительно, мы ведь не читаем от корки до корки, а пробегаем глазами текст, выбирая блоки информации. Часто останавливаемся на выделенных словах и смотрим вокруг них. Исходя из этого, нужно строить свой текст.

    Спасибо! Многому у Вас научусь!

  • Думаю что не только люди так читают текст, но и поисковики. Берут основную мысль из первого абзаца а дальше уже по выделенным словам пробегают. Спасибо за статью.

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

  • Ant Gray:

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

    Если при заходе на страницу по середине будет текст размером 72px, или красный круг на белом фоне, то это первое, на что обратит внимание посетитель. А не на сайдбар слева. И не на логотип.

  • Спасибо за такую полезную информацию!

Оставьте комментарий!

Спам здесь убивается моментально. Спамеры, не тратьте своё время.

Можно использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Зарегистрируйте свой аватар на глобальном сервисе Gravatar, и он появится около вашего комментария.