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

38

Від автора: дослідження поведінки користувачів показали, що правий верхній кут сайту приваблює найменше уваги. Це звичайне відображення наших звичок читання. Ми читаємо зліва направо, поступово спускаємось вниз.

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

Більшість людей переглядають сайт по так званому «F» шаблоном. Спочатку ми переглядаємо верхню частину букви F, потім спускаємося і переглядаємо по горизонталі другу частину, після чого ми спускаємося вниз у лівий нижній кут сайту.

Відвідувачі сайтів майже не звертають уваги на правий верхній кут, тобто не варто розміщати там важливу інформацію, з якої, за задумом дизайнера, люди повинні кликати або виконувати інші дії. Ця область ідеально підходить для тематичних зображень. Такі зображення, які можна просто дивитися, а читати текст на них не потрібно.

Основне завдання дизайнера – підібрати зображення так, щоб вони динамічно підходили.

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

Як тільки дизайнери вивчили шаблони зору користувачів, вони стали поміщати в правий верхній кут менш цікавий контент: дисклеймеры, інструкції і, можливо, прапорці різних країн, з допомогою яких можна змінити мову сайту. Такий дизайн застарів, але поведінка користувачів не змінилося.

На великих сайтах багато різного контенту, який претендує на увагу користувача, однак лівий верхній кут залишається найціннішим. Правий верхній кут ідеально підходить під зображення, так як їх можна сприймати периферичним зором, а також вони швидко збуджують в людині емоції.

Як підібрати правильні фонові зображення

Нижче я покажу вам зображення, які краще всього підходять під правий верхній кут екрану. І для цього давайте розглянемо три пари зображень, а також розберемо, як вони можуть взаємодіяти з контентом.

Приклад 1: балетки

Почнемо з двох зображень балеток. Одне, де балетки розташовані в правому верхньому куті, інше – в лівому кутку.

Зображення 1

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

Зображення 2

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

Як мислить дизайнер про зображення, де балетки розташовані праворуч:

чітко показана сила різко сфокусованого зображення у правому верхньому кутку;

інтимне зображення, залучає користувача на сайт з почуттям хтивості і грації;

лівий нижній кут виглядає порожнім, особливо якщо контент на зображенні розташований праворуч від тексту. Так правий верхній кут занадто домінує. Вийти з цієї ситуації можна, якщо зробити дерев’яну підлогу більш насиченим.

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

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

Занадто сильний акцент на правому верхньому куті може відвернути користувача, що призведе до його відходу з сайту.

Приклад 2: дорога в осінньому лісі

Наш другий приклад – два дуже схожих зображення з мальовничою дорогою, прорезающей осінній ліс. На обох зображення показана дорога, але на першому вона йде в правий верхній кут. А на другому зображенні дорога прагне в центр композиції.

Проаналізуємо два зображення:

Зображення 1

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

Зображення 2

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

зображення, на якому дорога йде в правий верхній кут, ідеально підходить, так як на ньому є динаміка, воно закликає до дослідження, починаєш замислюватися про можливості;

обидва зображення стануть ще краще, якщо з обох боків від дороги додати трохи більше лісу, так вони краще вписуються в дизайн;

зображення, де дорога йде чисто в центр композиції, менш динамічно. Якщо на його тлі помістити блок з текстом і посиланнями, дорога повністю сховається. А на першому зображенні користувачі бачать дві сполучені точки дороги.

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

Приклад 3: пляж

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

Зображення 1

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

Зображення 2

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

на зображенні без пальм є привертає увагу горизонтальна лінія океану, яка переходить в сонце праворуч. Зліва залишається тільки небо;

діагональний ефект хвилі притягує увагу, хвиля дуже потужна і динамічна;

хвиля допомагає збалансувати сонце, що дає дизайнерові велике поле для роботи;

зображення може стати ще краще, якщо обрізати сильніше небо і побільше показати хвилю та берег;

сонце повинне розташовуватися вище правого краю, що суперечить інстинкту фотографа;

зображення з деревами – типова сцена з простими кутами, де домінує лівий край зображення.

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

Висновки?

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

Внизу справа має бути щось цікаве. Це суперечить інстинктам фотографів, але такий стиль в дизайні відмінно працює на хороших сайтах.