ТВОРЧЕСКАЯ
ЛАБОРАТОРИЯ
АНТОНА НИКОЛАЕВА

главная
Мои проекты
Веб разработка и продвижение
Экономика, политика
Блог - разное
Дизайны
Пресса и выступления
карта сайта
Контакты

Проектирование интерфейса веб-сайта и угол зрения

главная > Веб разработка и продвижение > Угол зрения и интерфейс веб-сайта



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

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



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

Чтобы упростить проверку этого правила, я вырезал для себя шаблоны из картона.
Если отдельный элемент сайта на экране помещается в вырез шаблона - это будет удобно для пользователя.
Экран монитора находится, примерно, на расстоянии 45 см от глаза и на этом расстоянии 15 градусов занимает зону, соответствующую шаблону.

Давайте посмотрим как вписывается в концепцию качественный дизайн сайта. Например, сайт Альфа-банка, сделанный в студии Артемия Лебедева. Я накладываю шаблон на отдельные элементы:

1. Красный блок в левой части - практически все элементы помещаются в эту зону.


2. Лицо мальчика - другой акцент. Лицо мальчика целиком помещается в эту зону.


3. Еще один элемент интерфейса - текстовое предложение - целиком помещается в эту зону.


4. И следующий визуальный блок, второстепенный, также помещается в эту зону.


5. Блок дополнительного меню, так же помещается в шаблон.


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

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



Второй экран, в основном - пустой. Изображение не помещается в зону видимости шаблона.



Смотрим в следующий сайт и опять название компании не помещается в удобную зону видимости.



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



Смотрим экран с портфолио. Блок со списком сайтов более-менее помещается. Хотя он тоже превышает удобный для визуального восприятия размер. Размер блока справа, с визуальными изображениями, так же не помещается в шаблон комфортной зоны.

Сайт третей компании. Ровно то же самое - всё сделано для экранов смартфонов или, в крайнем случае, планшетов.
 


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



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

Заголовок "нейромаркетинг" вписывается в зону комфортной видимости.



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



написано: Sun, 07 Jan 2018 14:08:30 +0300



»Веб разработка и продвижение
    Статьи по SEO
    2000. Набор инструментов для поисковой оптимизации
    2005. Удаляем конкурентов из Яндекса
    2006. Текстоптимайзер - оптимизация текста под поисковые системы
    2006. Нелинейная выдача на Яндексе
    2007. Бесплатный скрипт для перелинковки группы сайтов
    2007. Уникальность, как статический фактор при ранжировании
    2007. Бесплатный сервис и скрипт проверки текста на уникальность.
    Поведение посетителя на сайте - смотрим глазами посетителя
    2010. Истинное ранжирование Яндекса
    2010. Оценка рисков поискового продвижения
    Улучшаем Яндекс - ищет по запросу в рамках темы
    Яндекс повторил "тропинки"
    Гугловские тропинки по сайту
    Продаются seotools.ru и seotest.ru
    2014. Закладки вместо ссылок?
    2015. Почему Яндекс не индексирует статью?
  »Угол зрения и интерфейс веб-сайта




СВИДЕТЕЛЬСТВА:








ПРЕССА И ВЫСТУПЛЕНИЯ:



Выступление на конференции "Интернет и Бизнес", Москва, 2008


Выступление на Санкт-Петербургской Интернет конференции СПИК 2008


Выступление на конференции по юзабилити "User Expirience 2007", Москва


Статьи для рассылки "Продвижение сайта. Профессиональные советы экспертов"


Публикации в "Деловом Петербурге"


Бан Яндекса, оптимизация текста по методу Остапа Бендера.


Критерии для постановки задачи и оценки результатов поискового продвижения (2002)