Статьи

Веб-макет 101: максимально использование правого верхнего угла

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

F образец чтения

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

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

Однако хитрость для дизайнеров заключается в том, чтобы найти образы, которые соответствуют этой динамике.

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

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

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

Нахождение правильных фоновых изображений

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

Пример 1: балетная обувь

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

Изображение 1

Остроконечные туфли - левая сторона

Изображение 2

Балетная обувь справа на изображении

Изображение предоставлено: Dreamstime

Вот некоторые мысли о дизайне предпочтительного изображения «с правой стороны»:

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

Простая композиция.

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

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

Пример 2: Осенняя Лесная Дорога

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

Давайте рассмотрим два:

Изображение 1

Изображение 1: Дорога проходит через нижний левый верхний правый

Изображение 2

(Дорога вьется к центру композиции)

Изображение предоставлено: Dreamstime

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

    Пример 3: Пляжная сцена

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

    Изображение 1

    Глядя вдоль пляжа. Океан разрывается с левой стороны - солнце садится справа

    Изображение 2

    (Глядя на океан. Солнце садится в правом верхнем углу. Пальмы доходят от левого края.)

    Изображение предоставлено: Dreamstime

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

    Простая композиция.

    Еда на вынос?

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

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

    Все изображения: Dreamstime