От автора: исследования поведения пользователей показали, что правый верхний угол сайта привлекает меньше всего внимания. Это обычное отражение наших привычек чтения. Мы читаем слева направо и постепенно спускаемся вниз.
Большинство людей просматривают сайт по так называемому «F» шаблону. Сначала мы просматриваем верхнюю часть буквы F, затем спускаемся и просматриваем по горизонтали вторую часть, после чего мы спускаемся вниз в левый нижний угол сайта.
Посетители сайтов почти не обращают внимания на правый верхний угол, т.е. не стоит размещать там важную информацию, по которой, по задумке дизайнера, люди должны кликать или производить другие действия. Эта область идеально подходит для контекстных изображений. Такие изображения, на которые можно просто взглянуть, а читать текст на них не нужно.
Основная задача дизайнера – подобрать изображения так, чтобы они динамически подходили.
Когда пользователи заходят на сайт первый раз, большинство смотрит на верхний левый угол. В этой области расположена информация о сайте, название и другие важные вещи. Пользователи быстро прокручивают сайт вниз, уделяя минимум внимания правой части.
Как только дизайнеры изучили шаблоны зрения пользователей, они стали помещать в правый верхний угол менее интересный контент: дисклеймеры, инструкции и, возможно, флажки разных стран, с помощью которых можно сменить язык сайта. Такой дизайн устарел, но поведение пользователей не изменилось.
На больших сайтах много разного контента, который претендует на внимание пользователя, однако левый верхний угол остается самым ценным. Правый верхний угол идеально подходит под изображения, так как их можно воспринимать периферическим зрением, а также они быстро возбуждают в человеке эмоции.
Как подобрать правильные фоновые изображения
Ниже я покажу вам, какие изображения лучше всего подходят под правый верхний угол экрана. И для этого давайте рассмотрим три пары изображений, а также разберем, как они могут взаимодействовать с контентом.
Пример 1: балетки
Начнем с двух изображений балеток. Одно, где балетки расположены в правом верхнем углу, другое – в левом углу.
Изображение 1
Изображение 2
Как мыслит дизайнер об изображении, где балетки расположены справа:
четко показана сила резко сфокусированного изображения в правом верхнем углу;
интимное изображение, вовлекающее пользователя в сайт с чувством сладострастия и грации;
левый нижний угол выглядит пустым, особенно если контент на изображении расположен справа от текста. Так правый верхний угол слишком доминирует. Выйти из этой ситуации можно, если сделать деревянный пол более насыщенным.
Фотография на сайте должна создавать человеческий контакт. Однако крайне трудно создать теплую и личную атмосферу, когда ищешь способы, как заполнить «слепой» верхний угол. Фотограф, создавший композицию с центром внимания (фокусом) в правом верхнем углу, создал весьма неестественный сайт. Чтобы привлечь внимание к правой верхней части сайта, остальная композиция должна быть крайне скучной.
Слишком сильный акцент на правом верхнем угле может отвлечь пользователя, что приведет к его уходу с сайта.
Пример 2: дорога в осеннем лесу
Наш второй пример – два очень похожих изображения с живописной дорогой, прорезающей осенний лес. На обоих изображения показана дорога, но на первом она уходит в верхний правый угол. А на втором изображении дорога стремится в центр композиции.
Проанализируем два изображения:
Изображение 1
Изображение 2
изображение, на котором дорога уходит в правый верхний угол, идеально подходит, так как на нем есть динамика, оно призывает к исследованию, начинаешь задумываться о возможностях;
оба изображения станут еще лучше, если с обеих сторон от дороги добавить чуть больше леса, так они лучше вписываются в дизайн;
изображение, где дорога уходит чисто в центр композиции, менее динамично. Если на его фоне поместить блок с текстом и ссылками, дорога полностью скроется. А на первом изображении пользователи видят две соединенные точки дороги.
Пример 3: пляж
Последний пример – пляж. На одном изображении показаны волны и заходящее солнце, а на втором пальмы, расположенные в левой части.
Изображение 1
Изображение 2
на изображении без пальм есть привлекающая внимание горизонтальная линия океана, которая переходит в солнце справа. Слева остается только небо;
диагональный эффект волны притягивает внимание, волна очень мощная и динамичная;
волна помогает сбалансировать солнце, что дает дизайнеру большое поле для работы;
изображение может стать еще лучше, если обрезать посильнее небо и побольше показать волну и берег;
солнце должно располагаться выше правого края, что противоречит инстинкту фотографа;
изображение с деревьями – более типичная сцена с простыми углами, где доминирует левый край изображения.
Выводы?
В идеале, фоновые изображения на сайте должны иметь что-то визуально привлекательное в правом верхнем углу и по вертикали, сужая внимание пользователя в верхней части экрана.
Внизу справа должно быть также что-то интересное. Это противоречит инстинктам фотографов, но такой стиль в дизайне отлично работает на хороших сайтах.
Автор: Michaela Freeman
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
