Данные собранные во время наблюдений за движением взгляда пользователей показывают, что довольно простой способ потерять внимание посетителя сайта — показать ему видео с «говорящей головой», которое к тому же изначально создавалось для телевидения.

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/video.html

«Говорящими головами» называют дикторов, ведущих и вообще любых людей, которые подолгу находятся в кадре и что-то рассказывают. Хотя в этой же степени термин применим не только к видео, но и к компьютерным играм. В Fallout'e, Oblivion'e и многих других играх тоже приходится иметь дело с «говорящими головами».

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

В 1997 Джейкоб Нильсен, автор оригинальной статьи, написал статью о сравнительном анализе ТВ и компьютеров, которая по-прежднему не утратила своей актуальности. Телевиденье — это способ отдыха: зритель откидывается в своем кресле и погружается в те программы, которые ему показывают. «Пользователей» телевиденья не зря называют «зрителями», подчеркивая их пассивную роль участия. В противовес им выступают пользователи компьютеров, сами выбирают, что им смотреть и читать посредством серии выборов и кликов.

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

Наблюдение за пользователями

Среди данных собранных в ходе исследований по наблюдению за взглядами пользователей, есть данные и о том, как пользователи смотрят онлайн видео.

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

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

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

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

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

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

Эти данные четко показывают, что «говорящая голова» — это скучно, даже в течении 24 секунд. В сети 24 секунды — это довольно много, слишком много, чтобы тратить внимание на что-нибудь настолько монотонное.

Рекомендации

На данный момент, рекомендация касательно видео — делать его коротким. Типичное видео для Сети должно быть менее минуты.

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

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

Кроме того, вспомните о баннерах. Двоякая ситуация. Если вы заинтересованы в том, чтобы пользователь просмотрел и прочитал баннер, разместите этот баннер рядом с видео. Если вы наоборот, не хотите, чтобы пользователь отвлекался, баннер лучше убрать. Размещение баннера в самом видео — плохая идея; навязчивая реклама еще никому не делала лучше.

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

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

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

Другие статьи на тему, куда смотрит пользователь, доступны в одноименном разделе. Если у вас есть, чем доволнить статью, пишите. Комментарии приветствуются.

Также посмотрите:

• Яркое оформление, красивые слова => выглядит как реклама => игнорировать
• F-образный принцип чтения веб-страниц
• Приоритет в CSS
• 6 способов привлечь внимание людей

Думаете, если написать что-то на сайте написать большими красными буквами, все обратят на это внимание? Не совсем так. Иногда у посетителей сайта начинается слепота в отношении всего, что выглядит как реклама.

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/fancy-formatting.html

Размещая ответ на какой-нибудь типичный вопрос пользователей большими красными буквами вверху страницы, вы гарантируете, что максимальное число пользователей прочитает ответ на него, верно? Не верно. По крайней мере не верно для сайта Бюро переписи США, на котором 86% пользователей не смогли обнаружить численность населения страны написанную большими красными цифрами.

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

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

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

На первый взгляд, все выглядит нормально:

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

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

Куда смотрели люди

Как показывает следующая диаграмма, только 14% посетителей использовали Population Clock, чтобы ответить на поставленный вопрос. Из всех остальных правильное число не назвал никто, хотя большинство сумело найти численность населения за предыдущие годы где-то внутри сайта.

Только 14% участников теста использовали Population Clock, чтобы ответить на вопрос о текущем населении. Большинство людей видело Population Clock, но не использовало его.

Хотя это не основная причина, почему дизайн этой страницы неудачен, слепота в отношении баннеров сыграла здесь свою роль. Пользователи склонны игнорировать перенасыщенные оформлением участки сайта, потому что они визуально похожи на рекламу. Поэтому, около 1/3 пользователей даже не обратило внимания на Population Clock; они просто не видели счетчика, хотя он содержал именно ту информацию, что была им необходима.

Помимо слепоты в отношении рекламы, главной причиной, почему эта веб страница не справляется со своими обязанностями — использование выдуманных коммерческих словечек вместо простого языка. Такие термины как «Population Clock,» «Population Finder,» и «QuickFacts» не говорят сами за себя, в отличие от обычной строчки текста:

Население США: 302,740,627 (31 августа 2007)

Модели поведения пользователей

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

Давайте проанализируем их отдельно:

Каждая схема отображает перемещения взгляда одного пользователя: синие точки отображают фиксацию взгляда; чем больше точка, тем дольше пользователь смотрел на это место.

График А, показывает классического пользователя нацеленного на поиск. Пользователь быстро осмотрел страницу и затем перешел прямо к поиску. В этом исследовании такие пользователи преобладали — 57%. Конкретный пользователь с графика А вобще не посмотрел на Population Clock; другие пользователи нацеленные на поиск иногда останавливали свой взгляд в этом месте, но затем быстро переходили к строке поиска.

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

График B — пользователь нацеленный на навигацию. Этот пользователь посмотрел на ссылки в центре страницы и «прошелся» взглядом до самого низа меню слева, после чего нажал на ссылку, которую посчитал перспективной.

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

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

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

Графике D — модель поведения успешного пользователя, который таки использовал Population Clock, чтобы ответить на заданный вопрос. Этот конкретный пользователь с графика D на самом деле пользователь нацеленный на поиск, что подтверждается множеством фиксаций взгляда в строке поиска. Но, как раз прежде чем начать поиск, пользователь обратил внимание на Population Clock и оставался взглядом в этой зоне достаточно долго, чтобы понять, что она содержит нужную для него информацию.

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

Выводы

На этом сайте ни поиск, ни навигация, ни Population Finder не привели большинство пользователей к правильному ответу. Поиск был особенно плох здесь. Один пользователь сказал: «Я знаю, где я смогу найти ответ быстрее — в Гугле», ушел с сайта Бюро и смог найти более менее правильный, хотя и не такой точный ответ на другом сайте.

Хотя множество пользователей смогло узнать численность население за предыдущие годы, этот ответ не принимался. Как можно было ожидать от сайта статистического ведомства, он просто кишал статистикой.  Проблема в том, что устаревшие данные не содержали ссылок на свежие данные.

Если брать рекомендации от авторов оригинального сайта, то сайт Бюро переписи США в вопросе больших красных цифр выполнил следующие правила:

• Выделил самое основное, что может понадобится посетителю на сайте, так что чтобы пользователь знал, с чего начать.
• Использовал примеры, чтобы описать содержимое сайта. Вместо того, чтобы просто описывать, что на этом сайте имеется такая-то статистика, сайт Бюро сразу же привел действительные числа насления США.
• Использовал интерактивность для основных задач сайта. Population Finder и является примером такой интерактивности.

Что касается нарушенных правил, то вот они:

• Не использовать заумных фраз и маркетинговых терминов.
• Ограничить изменение стилей шрифтов и другого текстового форматирования.
• Содержимое не должно выглядеть как реклама.

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

Остальные посты на тему наблюдений за взглядом пользователя доступны в соответствующем разделе. У вас были случаи подобной слепоты? Комментарии приветствуются.

Также посмотрите:

• 6 способов привлечь внимание людей
• “Говорящие головы” в онлайн видео – это скуучно
• F-образный принцип чтения веб-страниц
• Приоритет в CSS

Наблюдение

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/reading_pattern.html

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

В исследовании, проведенном на оригинальном сайте, наблюдали за тем, как 232 пользователя просматривали тысячи страниц в Сети. Было обнаружено, что принцип чтения у большинства пользователей в целом повторялся от сайта к сайту, независимо от тематики сайта или задач пользователя. Этот основной принцип чтения, если представить его на теплокарте, напоминает английскую букву F и состоит из трех этапов:

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

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

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

Теплокарты выше показывают как пользователи читали три веб-страницы разных типов:

• Статью «О компании» на корпоративном сайте (слева)
• Страницу с описанием товара на сайте интернет-магазина (по центру)
• Выдачу результатов поиска на сайте поисковой системы (справа)

Если вы обратите внимание на красные участки, то увидите, что они отображают ожидаемый принцип чтения в виде буквы F. Конечно, есть отличия, но ведь и этот принцип буквы F — скорее грубая, примерная форма, чем полноценная модель.

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

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

Практические выводы

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

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

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

P.S.

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

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

Если в течении довольно незначительного времени, ничего интересного не найдено, страница закрывается и только. Пользователь будет читать длинющие пространные вступления к статьям, только если он действительно заинтересован в теме этой статьи. Типичные маркетинговые тексты в Вебе — вобще гиблое дело.

Я собираюсь перевести еще несколько статей на эту же тему — они будут доступны в разделе Куда смотрит пользователь? Если вам понравилась статья, оставьте комментарий или поделитесь ссылкой на эту статью.

Также посмотрите:

• Приоритет в CSS
• 6 способов привлечь внимание людей
• “Говорящие головы” в онлайн видео – это скуучно
• Яркое оформление, красивые слова => выглядит как реклама => игнорировать