Перейти к контенту →

Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Якоб Нильсен, Кара Перниче. Краткое изложение.

 

Деловая активность в Интернете опирается на знание того, как со стороны воспринимают ваш сайт, страницу в социальной сети, мобильное приложение. Однако многие владельцы и создатели сайтов смешивают понятия «использование клиентами» и «восприятие клиентами». Понимание истинного восприятия ценнее, так как выявляет, насколько вебресурс удобен и прост для других людей в достижении их цели, например при совершении покупки.

Содержание:

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

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

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

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

О глубине материала свидетельствуют и личности соавторов: Якоб Нильсен — доктор философии, глава американской компании Nilsen Norman Group, инженер и гуру эргономики в дизайне, Кара Перниче — магистр управления коммерческой деятельностью и бакалавр искусств.

Как работает наше зрение и почему люди не замечают чего-то на сайте

Общеизвестно сравнение человеческого глаза и фотокамеры. Но напомним важное их отличие: фотоаппарат обеспечивает резкость всего кадра, а наш зрительный орган — нет; мы видим четко только в центре — куда смотрим, а на периферии все размыто. Глазам помогает мозг, который из множества маленьких резких фрагментов выстраивает общую картину. Почему так, почему природа не дала нам возможности видеть все сразу в большой резкости? Это эволюционный защитный механизм — чтобы уменьшить нагрузку и на глаза, и на «серое вещество».

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

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

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

Незаметность чего-то на сайте может быть полезной

Технология отслеживания движения глаз выявляет, куда и сколько времени смотрят люди. Это процесс использования веб-страницы, нам же важнее узнать о ее восприятии: что люди посчитают важным или неважным. Парадокс в том, что заметность элемента — это не всегда хорошо, а незаметность — не всегда плохо. Пример двоякой незаметности: человек периферийным зрением не узнает навигационный элемент (не похож на ранее виденное), а потому игнорирует его, как бесполезный, — это плохо; в другом случае человек специально не смотрит на элемент навигации (например, поле поиска), зная, что в нужный момент найдет его в привычном месте — и это хорошо!

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

Итоговая формула от Якоба Нильсена и Кары Перниче звучит так: «Если пользователь упустит что-нибудь для него важное, то это означает, что страница оформлена плохо. А если он пропустит что-нибудь ему ненужное ради экономии времени, то это явный признак грамотно скомпонованной страницы».

Ход и результаты исследований движения глаз фиксировались с помощью видеозаписей, диаграмм взглядов и тепловых карт.

Веб-дизайн-1

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

Веб-дизайн-2

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

Учитывайте намерения и возможности пользователей

Направленность взгляда отражает поведение человека. Это известно благодаря гипотезе согласованности мысли и взгляда: люди обычно думают о том, на что смотрят сосредоточенно. И чем дольше смотрят, тем больше вдумываются. Правда, «думать» не всегда означает «понимать»: зачастую пользователи, даже рассмотрев элемент веб-страницы (кнопку, ссылку, баннер), не выбирают его, так как не поняли предназначение элемента. Времени на понимание — лишь мгновения.

Из гипотезы согласованности также следует, что направленность взгляда зависит от цели пользователя. Поэтому удобство веб-страницы всегда связано с поиском ответов на вопросы «Кто пользователи?» и «Что они пытаются сделать?». Разным аудиториям обычно не подходит одно и то же оформление. Например, часто встречаются модные интерфейсы, которые удобны их авторам — дизайнерам и технарям, но заводят в тупик простых людей, хотя эти сайты нацелены на привлечение именно массового клиента.

Свои интересы есть и у создателей/владельцев сайта, которые желают определенных действий от посетителей. Чтобы найти общее компромиссное решение, при планировании сайта необходимо выяснить:

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

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

Не путайте страницу сайта с банковским счетом

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

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

  • Логотип в верхнем левом углу всех страниц.
  • Меню в верхней и/или в левой части страницы. Четкая графика и продуманная цветовая палитра меню.
  • Открытое поле поиска в правом углу всех страниц.
  • Кнопка «Домой» в меню или рядом с ним на всех страницах, кроме первой.
  • Точка входа и выхода из системы в правом верхнем углу всех страниц.
  • Служебная навигация (менее заметная, чем глобальная) в самом верху всех страниц.
  • Для интернет-торговли — значок корзины/тележки в правом верхнем углу всех страниц.
  • Разреженные страницы.

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

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

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

Разреженные веб-страницы, простые и ожидаемые элементы облегчают и стимулируют просмотр. Это подтвердилось, в частности, когда участников исследования попросили купить посуду на сайте компании Dansk и бакалею на сайте фирмы FreshDirect.

Веб-дизайн-3

О чем говорит тепловая карта на сайте Dansk? Горячие точки на служебной навигации (вверху — Basket/Корзина, Help/Помощь, Store Locator/Адреса магазинов; внизу — Home/Домой и т.д.) подтверждают, что пользователи стремились бегло просмотреть всю первую страницу, даже малопривлекательные зоны, поскольку она не загромождена и удобна.

Чем именно удобна главная страница Dansk?

  • Логотип, как и положено, в левом верхнем углу. Он же указывает на то, как вернуться на первую с другой страницы. На логотип не смотрели, так как хватает периферийного зрения, дабы убедиться, что он на месте.
  • Главное меню находится там, где его ищут, — вверху, пусть даже и смещено вниз на темной плашке.
  • Открытое поле поиска тоже в ожидаемом месте — в правом верхнем углу.
  • Корзина для покупок тоже в привычном верхнем углу.
  • Вся служебная навигация — вверху и внизу — набрана мелким текстом и разделена тонкими линейками, не выделена фоном. Она менее заметна, чем главное меню, и пользователи легко определяют второстепенность служебных ссылок.
Веб-дизайн-4

Если судить по тепловой карте на сайте FreshDirect, пользователи изучили бóльшую часть этой начальной страницы: она проста и свободна, хотя представлен широкий ассортимент бакалеи. Каждый продукт можно увеличить и рассмотреть детальнее.

Открытое поле «Поиск» становится спасением

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

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

Заголовки и названия делают просмотр проще и быстрее

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

Не превращайте страницу в полосу препятствий

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

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

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

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

Примером неверного подхода стал для участников исследований сайт ITкомпании Agere Systems.

Веб-дизайн-5

Тепловая карта показала, что 33% полезной площади главной страницы сайта Agere Systems занимают картинки, которые не привлекают внимания и не несут полезной информации. Пользователи не тратили время на просмотр этих фото, в итоге просматривая только 67% страницы. Классический пример полосы препятствий — это когда взгляд подсознательно избегает ненужных элементов и лавирует между ними.

Что усложняет пользование сайтом, страницей, сервисом

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

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

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

Несогласованный приоритет. Когда на приоритетном участке нет ожидаемой приоритетной информации. И когда содержимое не располагается на странице по степени важности.

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

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

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

Примером сразу нескольких запутывающих факторов стал сайт Американского бюро переписи. Участникам исследования требовалось найти там данные о численности населения США. Искомое число указано крупно красным цветом справа вверху — 301,465,607. Но люди его никак не находили.

Веб-дизайн-6

Сайт Американского бюро переписи, где оказалось «невидимым» число 301,465,607 в правом верхнем углу. Причина в том, что блок с числом оформлен неверно. Во-первых, он похож на рекламный баннер: находится в правой колонке, где обычно размещают рекламу; включает цветную плашку, большие красные цифры, фоновую заливку. Во-вторых, имеет малопонятные надписи: рубрика на плашке — «Искатели данных» (Data Finders), ниже рубрика в виде ссылки — «Отсчет прироста» (Population Clocks).

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

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

Пользователи не любят фокусы с исчезающей навигацией

Первое средство ориентации на сайте — это верхнее горизонтальное и/или левое боковое меню, хотя на него смотрят не всегда: во время исследований на верхнее меню смотрели в 24% случаев, на боковое — в 49% случаев. Чем меньше процент, тем больше была уверенность пользователей, что они найдут меню в нужном месте, когда потребуется.

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

Несколько правил оформления навигации

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

Пример исчезающего меню на сайте Amazon. Требовалось купить подарок подросткумеломану. После выбора диска группы Black Eyed Peas некоторые пользователи все еще сомневались, стоит ли его покупать, или выбрать другой. Они посмотрели влево, чтобы найти средства навигации, которые там были на предыдущей странице (по жанрам музыки), но это меню исчезло. И поэтому они обратили внимание на вкладку Music в верхнем ряду глобальной навигации. Правда, пришлось начинать все сначала — идти вглубь по жанрам и уровням подкатегорий.

  • Кнопки навигации тоже целесообразно сохранять на одном и том же месте по мере продвижения пользователя по линейному процессу, например при оформлении покупки.
  • Названия категорий товаров должны быть согласованы. Примеры: правильное именование ссылок — Увлажнители, Принадлежности к увлажнителям; Пылесосы, Принадлежности к пылесосам. Неправильное — Увлажнители и принадлежности; Пылесосы, Принадлежности к пылесосам.
  • Корзину/тележку для покупок желательно размещать в правом верхнем углу: там ее ожидали найти 58% участников исследований, и находили почти мгновенно — максимум за пять фиксаций взгляда. Но корзина может «потеряться» среди перегруженного меню, когда оно имеет два-три ряда пунктов/закладок, фоновую заливку, становясь похожим на большой баннер. Нужно ли делать открытой корзину для покупок, чтобы постоянно видеть отобранные товары? Да, это полезно, если покупатели часто добавляют по нескольку товаров или тратят на покупку продолжительное время.
  • Если на левой части страницы нет ожидаемых команд, людям приходится затрачивать дополнительные взгляды на их поиск. Иллюстрация тому — действия на сайте косметической компании Kiehl`s.
Веб-дизайн-8

На сайте Kiehl`s меню есть вверху, слева и справа. Пользователи по привычке сначала смотрели влево, но моментально отказывались от подробного изучения, не найдя вариантов выбора товара. То есть меню слева — ложный ориентир. Наиболее полезным оказалось меню справа. А на меню вверху вообще не смотрели, когда оно им не требовалось.

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

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

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

Формы и поля для заполнения: чем проще, тем лучше

Оформление покупки и доставки товара в большинстве случаев требует заполнить специальную форму на веб-странице. Чтобы пользователи не тратили на это лишнее время и усилия, не бросали процесс на полпути, авторы книги советуют:

 

  • Давать формы одним столбцом. Даже если потребуется прокрутка, это проще, чем гадать о направлении, в котором продолжается форма.
  • Не компоновать форму зигзагом слева направо. Это неудобно: все равно что читать попеременно строчки левой и правой страницы книги.
  • Поместить метку над «своим» полем и выровнять их по левому краю.
  • Оставить небольшой пробел между меткой и ее полем. Сделать больше пробел между полем и меткой следующего поля, чтобы было ясно, к какому именно полю относится каждая метка.
  • Исключить все лишние поля. Например, для ввода отчества, если в этом нет особой необходимости.
  • Не показывать все поля сразу, а отображать их в зависимости от того, что пользователь выбрал ранее.
  • Если имеется несколько полей для одинаковой информации (например, адрес для доставки товара и адрес для выписки счета), пользователь должен понимать, что достаточно один раз ввести нужные данные — при совпадении адреса. А если адреса разные, то предложить пользователю другую форму или раскрывающийся список.
  • Использовать одно поле для номера телефона, даже если требуется указывать код страны или города. Люди хорошо справляются с одним полем, особенно если рядом дать пример ввода номера.

Картинки на сайтах смотрят намного реже, чем кажется

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

На типичных коммерческих сайтах (не портфолио художников или фотографов) пользователи фиксируют меньше половины изображений — в среднем 42%. При этом тратят меньше 0,2 секунды на просмотр картинки, которую не собираются или не могут увеличить для детального изучения.

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

Свойства изображений, которые чаще всего просматриваются:

  • Большой контраст и высокое качество (четкость и красочность).
  • Кадрирование вместо излишнего уменьшения, если мало места.
  • Отсутствие излишней детализации, простота образа.
  • Сильная связь с содержанием.
  • Притягательность. Что притягательно? Улыбающиеся и открытые лица; люди, смотрящие в объектив или в его сторону; человеческое тело и его привлекательные части; аппетитная еда; четкие инструкции и простая графика.

Игнорируются изображения с такими свойствами:

  • Малый контраст и низкое качество.
  • Перегруженность деталями на маленькой площади.
  • Сходство с рекламой.
  • Слабая связь с содержанием страницы или отсутствие такой связи.
  • Банальные образы как людей, так и техники (игнорируются в 85% случаев).
  • Холодность, фальшь или излишняя лощеность.
Веб-дизайн-10

Для примера показаны страницы двух сайтов — телекоммуникационной компании Adelphia и фирмы Hansen`s Natural, которая торгует натуральными напитками.

На сайте Adelphia участники исследования старались не смотреть на стереотипное изображение женщины с гарнитурой на голове. Это подтверждает тепловая карта взглядов.

Веб-дизайн-11

Здесь пример удачной иллюстрации. На странице контактов и поддержки клиентов Hansen`s Natural дана своеобразная пародия на вечно улыбающихся женщин с телефонной гарнитурой. На фото мужчина с венком на голове, который приложил к уху «самодельный телефон» — пустую жестяную банку с проводом. Диаграмма взглядов показывает, что участник исследования обратил внимание на эту оригинальную иллюстрацию.

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

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

Вышеприведенные правила нередко вызывают у дизайнеров вопрос: «Чем же тогда заполнить пустое место?». «Ничем, оставить пустым, — отвечают авторы книги. — Как вариант можно уменьшить длину страницы или увеличить шрифт, которым выделен текст на остальной части страницы».

Дополнительные советы при использовании изображений

  • Не переоценивайте мелкую графику (указатели, метки). Миниатюры слишком трудно распознать, даже если пользователи стремятся понять их смысл. Но большинство людей даже не попытаются.
  • Простые изображения привлекают больше внимания еще и потому, что их легче просматривать беглым взглядом. А бегло просматривать что-нибудь мы будем всегда, это неизбежно для современного человека, у которого лишь нарастает дефицит внимания.
  • Взрослые с интересом посещают детские сайты, поскольку там текст и картинки упрощают понимание сложных понятий. Значит, и на обычных сайтах упрощение текста и применение элементарных изображений, ясно передающих идею, может увеличить число посетителей.
  • Избегайте серости. Хотя цвет сильно приковывает взгляд, резкие и контрастные черно-белые изображения также могут быть очень привлекательными.
  • Делайте информативные подписи к снимкам. Пользователи обращают внимание на имена, связанные с изображением людей.
  • Меньше людей — больше внимания. Фото одного человека зачастую содержит меньше деталей, чем групповой снимок. По мере увеличения детализации контраст изображения понижается, и внимание к нему ослабевает.
  • Карты должны иметь удобные метки и достаточный контраст. Люди обратят внимание на разборчивые карты, сообщающие полезную информацию. Карты с неразборчивыми элементами обычно игнорируются.
  • Показывайте товар лицом. Люди стараются рассмотреть заинтересовавшие их товары подробнее — даже на мелких картинках. Вместе с тем люди желают открыть изображение в отдельном окне, чтобы увидеть крупный план. Показ товара в других ракурсах тоже помогает убеждать покупателя.

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

Пример с историческим снимком отражает также общую закономерность: чем крепче связаны изображение и содержание, тем лучше. Люди смотрят на картинки, не связанные с содержанием страницы или связанные слабо, лишь в 14% всех случаев. Но если визуальный объект тесно связан с контентом, процент просмотра увеличивается до 29%.

Когда мужчины и женщины по-разному смотрят на изображения людей

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

Веб-дизайн-12
Веб-дизайн-13

Примеры отличий в просмотре мужчинами и женщинами притягательных изображений. Участники исследований подбирали себе блузку на бретельках или рубашку на сайте Neiman Marcus. Оказалось, что женщины практически не смотрели на лица моделей, а сосредоточивали внимание на вариантах одежды (тепловая карта слева). А вот мужчины не только просматривали рубашки, но и фиксировали взгляды на лицах моделей-мужчин (тепловая карта справа). Подобное поведение можно объяснить тем, что женщины в большей степени сосредоточены на выполняемом задании. А мужчины склонны отводить взгляд немного в сторону, фиксируя его на посторонних предметах во время выполнения задания.

В целом же на веб-сайтах чаще обращают внимание на женщин, чем на мужчин, независимо от того, кто смотрит. Глядя на женщин, участники исследований затратили на 21% времени больше (в среднем 1,15 секунды на каждую), чем на мужчин (0,95 секунды).

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

Видео на сайте: никаких «говорящих голов»

Если люди не желают тратить впустую даже одну фиксацию взгляда (0,1–0,5 секунды) на неинтересное статичное изображение, то представьте, насколько они бережливы по отношению к анимации и видео. Исследования движения глаз подтвердили следующее:

  • Люди готовы смотреть видео низкого качества, главное, чтобы оно было интересным.
  • Быстро надоедают «говорящие головы» (единственный человек, смотрящий в камеру). Люди отвлекаются от такого видео, слушают только звук.
  • Люди способны легко переключаться с активной навигации (нужно «работать» мышью) на пассивный просмотр телепрограмм в веб (просто сидят и смотрят выбранное потоковое видео).
Веб-дизайн-14

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

Рекламные джунгли: как не заплутать и заработать

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

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

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

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

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

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

Как люди воспринимают разные виды рекламы

  • Просматривают до 88% всей рекламы, сходной по стилю с оформлением сайта. Объяснение: посетители невольно ждут от рекламы той же полезности, что и от самого сайта (иначе не зашли бы); такую рекламу иногда воспринимают как элементы интерфейса, которые помогут решить задачу. Отсюда рекомендация: внутренняя реклама (не сторонних компаний, услуг, продуктов) должна согласовываться со стилем сайта — по шрифтам, цветовой схеме, элементам. Размещать в пределах содержания страницы, а не баннером в самом верху или справа.
  • Просматривают до 52% всей текстовой рекламы. Объяснение: люди ожидают от короткого текста быстрого доступа к нужной информации; на текстовую рекламу, расположенную на страницах с результатами поиска, распространяется доверие к поисковику. Это касается и спонсорских ссылок (контекстной рекламы): их просматриваемость аналогична — 51%.
  • Просматривают до 52% графической рекламы с отдельными изображениями и текстом. Объяснение: людям нравится, когда разборчивый текст отделен от графики; она же усиливает притягательность.
  • Просматривают до 35% всей графической рекламы с текстом на изображениях. Желательно, чтобы изображения были рядом с текстом, а не его фоном. Если это просто цветной фон или паттерн, они не должны рябить.
  • Просматривают до 29% анимационной рекламы. Объяснение: анимация может привлечь взгляд, но быстро утомляет, поэтому чаще игнорируется.

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

Веб-дизайн-15

Пример удачной внутренней рекламы на сайте компании кабельного вещания Adelphia. Участники исследования восприняли рекламное объявление — вверху справа — с заголовком Exclusive Web Offer («Эксклюзивное веб-предложение») как естественное продолжение остальной части страницы, поскольку внешне она выглядела аналогично.

Место для рекламы, и почему ее нет на главной странице Google

Все элементы сайта соперничают за наше внимание. Элементы, которые вызывают наибольший интерес, могут затмевать рекламу. Вот почему на главной странице Google нет рекламы: она бесполезна там, где пользователи сосредоточивают все внимание на поле поиска, констатируют авторы книги.

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

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

Притягательные графические свойства рекламы

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

Недостатки удобства сайта можно выявить простыми недорогими способами

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

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

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

Причины того, почему люди остаются на неудачно скомпонованных сайтах

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

Бонус. Удобство мобильных сайтов и приложений

В заключительной части книги о применении технологии отслеживания движения глаз Якоб Нильсен и Кара Перниче еще раз внушают простую мысль : посетители сайта смотрят на него совсем не так, как разработчики. С этой же идеи начинается следующий бестселлер Якоба Нильсена (совместно с Ралукой Будиу, доктором философии и специалистом по юзабилити) — «Mobile Usability. Как создавать идеально удобные приложения для мобильных устройств». Соавторы просят создателей мобильных продуктов регулярно повторять: «Я не целевая аудитория».

Чтобы сделать полезный мобильный продукт, который подвигнет обычного человека стать вашим клиентом, надо по-прежнему выяснять мотивы поведения людей, а также опираться на результаты практических исследований. Многолетние опыты компании Nilsen Norman Group подтвердили, что юзабилити мобильных сайтов и приложений имеет немало общего с «большими» сайтами, но при этом выдвигает более строгие требования по всем направлениям: дизайн, структура, тексты.

Общие советы по оптимизации сайта для гаджетов

  • Оцените дополнительные расходы и создавайте мобильную версию сайта — мобильный сайт, только если это экономически оправданно. Для пользователей удобство оптимизированного сайта заметно выше. Но более дешевое мобильное приложение может оказаться еще удобнее.
  • Сделайте переадресацию — заметную ссылку — с основной версии сайта на мобильную. И наоборот: ссылку с мобильной версии (обычно внизу) на десктопную; лучше указать «Версия для ПК», чем «Полная версия».
  • Урезайте функции — пункты меню, рубрики и т.п. Меньше данных о товаре, меньше операций/шагов, но перечень товарных позиций должен остаться тем же, что и на большом сайте. Если человек не найдет продукта в мобильной версии, решит, что компания его не производит или не продает.
  • Резко сокращайте содержание: уменьшайте количество слов, менее нужную информацию переносите на второстепенные страницы. Если для обычного сайта тексты должны быть краткими, то для мобильного — еще более лаконичными.
  • Увеличивайте элементы сенсорного интерфейса, чтобы точнее попадать пальцем. Идеальный размер нажимаемого элемента — 1х1 см.

Адаптивный дизайн как промежуточный вариант между версиями

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

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

Что лучше создавать: мобильный сайт или приложение?

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

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

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

Почему сегодня лидируют приложения?

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

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

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

Тем временем мобильные сайты набирают силу и гибкость за счет современных веб-технологий, в частности HTML5. Вот что это дает:

  • На новой технологической базе создаются мобильные вебприложения — это мобильные сайты, у которых интерфейсы очень похожи на «родные» программы данного смартфона или планшета. Преимущества мобильных веб-приложений: экономия (не нужно платить магазинам типа App Store, Google Play), свобода от цензуры продавцов, возможность собирать больше информации о подписчиках.
  • Создаются также гибридные приложения. В их оболочке отображаются обычные веб-страницы. Охотно используются компаниями, ведь это обеспечивает их присутствие на рынке приложений, но не нужно тратиться на разработку нового приложения.
  • Дополнительный козырь мобильных сайтов: они лучше взаимодействуют с Интернетом. Например, проще поставить ссылку на сайт, чем внедрять в него стороннее приложение.

Привлекайте посетителей «информационным запахом»

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

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

Почему дизайн для небольших экранов более требователен

Строгость требований объясняется, во-первых, маленькой площадью экрана; во-вторых, большей спешкой пользователей мобильных устройств по сравнению с теми, кто сидит за компьютером. То есть нужна максимальная простота и ясность. Вот некоторые советы от авторов книги «Mobile Usability».

  • Два интерфейса для одинаковой информации — это слишком много. Например, когда в онлайн-магазине книги даны списком, а также реалистичной картинкой — те же книги на полках. Подобный прием оправдан лишь тогда, когда в двух вариантах интерфейса выделяются различные аспекты сведений. Пример: рестораны даны списком по рейтингу, а также на карте города.
  • Элементы окантовки должны быть поменьше и по возможности временно скрываться. Окантовка — это пиктограммы, идущие по краям экрана, чтобы показывать содержимое и команды для управления контентом. Скрытие и появление элементов окантовки желательно делать плавно — с помощью эффекта «растворения».
  • Для упрощения интерфейса многие команды нагружают двойной работой. Есть два способа: обобщенные команды (одинаковые для всех гаджетов, например масштабирование щипком) и перегруженные команды (для достижения разных результатов в зависимости от контекста или места на экране, где выполняется). Для человека удобнее обобщенные команды, а перегруженные — запутывают. Например, кнопка Back/Назад как перегруженная на разных смартфонах и планшетах имеет различные значения: «шаг назад», «два шага назад», «выход из приложения»… Авторы книги указывают, что наиболее естественная команда для этой кнопки — отмена операции или возврат на предыдущий экран.

О вреде преждевременной регистрации

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

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

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

Содержание и текст для мобильной среды

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

Рекомендации по стилю и форматированию текста:

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

Создавайте удобную информационную структуру

  • Лучше разбивать текст на короткие фрагменты, а не давать сплошным потоком. Затем эти фрагменты рассортировать на несколько страниц (например, лекции по одной теме) либо применить внутристраничную навигацию, скажем мини-слайд-шоу (карусели).
  • Плохой пример популярной структуры — горизонтальная линейная разбивка длинной статьи по страницам. Лучше прокрутка, а не листание, при котором приходится ждать загрузки каждой страницы. Исключение — планшеты и электронные книги, где листание является универсальной командой плюс может применяться предзагрузка страниц.
  • Не используйте алфавитную сортировку. Она пригодна только для наиболее очевидных данных, например списка стран. В большинстве случаев люди не знают точно название нужного элемента. Нередко они имеют свою внутреннюю логику, которая требует иного типа сортировки. Например, в приложении для фитнеса будет неудобным список упражнений по алфавиту, лучше разделить упражнения по их сложности, или по тренажерам, или по группам мышц.

 

Опубликовано в Быстрый результат

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *