Вертикальное распределение внимания пользователей на веб-странице относительно простое: в первой половине поля зрения людей скрыто больше информации, чем в нижней. Теперь давайте посмотрим на распределение внимания пользователей в горизонтальном направлении веб-страницы. Используя базу данных, которую мы собрали ранее, легко обнаружить, что когда пользователи просматривают веб-страницы, распределение внимания слева направо выглядит следующим образом:.jpg)
На этой диаграмме абсцисса каждой статьи представляет собой 100 пикселей, а 100 % ординаты представляет собой время с момента, когда пользователь начинает просмотр с крайнего левого угла, до момента выхода со страницы.
Люди проводят на левой стороне более чем в два раза больше времени, чем на правой, и делают очевидный выбор:
Левая половина занимала 69% времени; правая половина занимала 30% времени;
Оставшийся 1% времени просмотра тратится на первые 1024 пикселя, которые можно просматривать. Некоторую информацию можно увидеть только после горизонтальной прокрутки. Эта информация предполагает, что нам следует исправить горизонтальную полосу, чтобы избежать горизонтальной прокрутки.
Информация, о которой мы говорим здесь, в «нижнем столбце», на самом деле является частью экрана в правой части экрана, а не буквально «ниже». С другой стороны, если вы сравните горизонтальный и вертикальный просмотр, пользователи в вертикальном направлении пропустят около 20% информации, тогда как в горизонтальном направлении они проигнорируют только около 1% информации. (Мне кажется, я уже раз двадцать говорил, что горизонтальное колесо прокрутки ужасно, потому что оно действительно раздражает пользователей и привлекает меньше внимания.)
В нашем исследовании использовался монитор с разрешением 1024 × 768. При увеличении дисплея мы надеемся увидеть больше контента справа при меньшем количестве прокрутки, и то же самое верно и в обычном режиме.
Крайний левый раздел обычно включает в себя панель навигации, поэтому неудивительно, что внимание к ней увеличивается после 200 пикселей, а также через 300–500 пикселей, где она привлекает больше всего внимания. Люди с самого начала склонны сосредотачиваться на основной области контента в первой строке.
Язык: направление чтения слева направо
Исследование юзабилити, которое мы провели в регионах с привычкой чтения слева налево, показало, что люди уделяют больше внимания началу строки. Очевидно, что в этих языках текст начинается справа. Даже в этом случае мы не обязательно найдем соответствующую реализацию Eyetracking. Например, приведенные выше диаграммы также есть в арабском и иврите. (Примерно это означает, что если в стране или регионе привычка читать справа налево, то график распределения времени внимания будет зеркальным отражением графика выше, то есть абсцисса пишется справа налево.)
Причина в том, что веб-сайты на языках чтения справа налево не всегда имеют дизайн макета с письмом слева направо. Вот макеты с сайтов дубайской газеты Emarat Al Youm и израильской газеты Haaretz:
.jpg)
Emarat Al Youm — это действительно правый веб-сайт. В отличие от этого, Haaretz — это сайт с текстом, выровненным по правому краю, но с левой панелью навигации. Поэтому это исследование айтрекинга (Eyetracking, позвольте мне пока перевести это так) может быть более сложным, чем наш обычный англоязычный сайт.
Отдавайте приоритет регулярному макету
Возвращаясь к языкам, где мы обычно читаем слева направо – скажем, китайскому, английскому, русскому или даже японскому – что означают наши выводы?
Проще говоря, придерживайтесь традиционного макета веб-сайта, потому что он идеально соответствует тому, как люди просматривают Интернет.
Сохраняйте единообразную навигацию слева, именно это люди и ожидают найти в списке;
Уделяйте больше внимания расположению основного контента слева направо;
Самый важный контент должен занимать треть или даже половину всей ширины страницы. Именно на этом пользователи сосредотачивают больше всего внимания;
Оставляйте второстепенный контент справа. Это не привлечет слишком много внимания, но этого достаточно — не каждая часть контента может занять первое место, и вам нужно место для менее важного контента.
Интересно, что макет веб-сайта, показанного на этом большом изображении, очень похож на макет основных интранет-сетей. Но это всего лишь сайт.
Доминирующие модели просмотра и макеты веб-страниц явно превратились в отношения подчинения:
Людей приучают обращать внимание на определенные места, потому что там обычно распространяется самая важная информация;
В настоящее время, когда компании создают макеты веб-сайтов, их информация упорядочивается в соответствии с тем, как люди распределяют свое внимание по странице.
Если вы отклонитесь от традиционного макета, некоторые пользователи изменят свое внимание при просмотре вашего сайта. Если вы разместите важную информацию справа, может случиться так, что (меньшее количество) пользователей в этой области потратят больше времени на поиск этой информации, чем обычный пользовательский домен.
Это не похоже на то, если бы пользователь заранее решил: «Я буду тратить только 2,5% своего времени на просмотр слева направо, рассматривая 1000 и 1100 пикселей для этого сегмента».
В любом случае, цена, которую вы платите за отклонение от традиционного дизайна, такова: когда пользователи впервые просматривают вашу страницу, они тратят много времени на поиск того, что им нужно.
Если макет вашей веб-страницы соответствует потребностям пользователя в просмотре, а не расположен в нетрадиционном месте, он может легко найти информацию и выполнить то, что хочет, даже не осознавая этого.
А когда ваш веб-сайт станет чем-то само собой разумеющимся, ваш бизнес будет работать более гладко.