Посмотрите на картинку вверху на мониторе или ноутбуке. На ней есть 12 черных точек. Сколько из них вы видите одновременно? Только 2-3 точки. Переводите взгляд из точки - на точку. Вы видите только те, которые попадают в зону "центрального" зрения - около 10-14 градусов. Все, что остается снаружи - попадает в зону периферического зрения и размывается.
Последнее время большинство студии веб-дизайна используют подход к проектированию интерфейса сайта исходя из концепции mobile first - ориентируясь, в первую очередь, на смартфоны. В результате этого получается значительное количество сайтов, которые имеют проблемы на полноразмерных мониторах или мониторов ноутбуков.
Перед вами картинка, на которой изображены две схемы, показывающие физиологические углы комфортного видения для человеческого глаза. Физиологическая область цельного восприятия ограничивается максимум 15 градусами. В этой области глаз видит все элементы четко и мозг воспринимает видимое цельно.
Цельные элементы дизайна вашего сайта, например картинку или навигационный блок, необходимо вписывать в 15 градусов (примерно равно области, перекрываемой ладонью вытянутой руки). Это обеспечивает целостное восприятие отдельного, единого по смыслу элемента.
Чтобы упростить проверку этого правила, я вырезал для себя шаблоны из картона. Если отдельный элемент сайта на экране помещается в вырез шаблона - это комфортно для зрения пользователя.
Экран монитора находится, примерно, на расстоянии 45 см от глаза и на этом расстоянии 15 градусов занимает зону, соответствующую шаблону.
Давайте посмотрим как вписывается в концепцию качественный дизайн сайта. Например, сайт Альфа-банка, сделанный в студии Артемия Лебедева. Я накладываю шаблон на отдельные элементы:
1. Красный блок в левой части - практически все элементы помещаются в эту зону.
2. Лицо мальчика - другой акцент. Лицо мальчика целиком помещается в эту зону.
3. Еще один элемент интерфейса - текстовое предложение - целиком помещается в эту зону.
4. И следующий визуальный блок, второстепенный, также помещается в эту зону.
5. Блок дополнительного меню, так же помещается в шаблон.
Вы видите, что в данном случае все 5 крупных информационных блока соответствуют правилу помещаться в 15 градусов нашего зрения.
Теперь посмотрим несколько собственных сайтов интернет-агентств в Санкт-Петербурге. Смотрим первый сайт. Прикладываем "волшебный" кружочек на 15 градусов - даже название в него не помещается. То есть название агентства не считывается одним взглядом. Чтобы его прочитать - нужно глазам двигаться слева направо. Это неудобно, это некомфортно.
Второй экран, в основном - пустой. Изображение не помещается в зону видимости шаблона.
Смотрим в следующий сайт и опять название компании не помещается в удобную зону видимости.
Кроме того, здесь весьма неинформативно используется пространство страницы. Если у альфа-банка мы насчитали 5 визуальных блоков, то здесь только один. И слишком большой. Да, это удобно, если мы смотрим сайт на экране смартфона. Но в случае ноутбука или десктопа это некомфортно для зрителя и неграмотно для разработчика.
Смотрим экран с портфолио. Блок со списком сайтов более-менее помещается. Хотя он тоже превышает удобный для визуального восприятия размер. Размер блока справа, с визуальными изображениями, так же не помещается в шаблон комфортной зоны.
Сайт третей компании. Ровно то же самое - всё сделано для экранов смартфонов или, в крайнем случае, планшетов.
На экране большого десктопного монитора элемент слишком велик - он не помещается в зону комфортного видения. Нижний блок, который должен смотреться единым целым, не попадает в зону 15 градусов.
Хотя если смотреть по каждой из этих зон, мы можем увидеть каждый отдельный элемент и воспринять его одним взглядом. И уже дальше рассматриваем внутри блока.
Заголовок "нейромаркетинг" вписывается в зону комфортной видимости.
Это всё, что я хотел сказать о визуальном восприятии. Вы можете использовать эту информацию при выборе компании, которой отдать в разработку дизайн своего сайта. Начните с анализа их собственного сайта.
