Візуально сприймається напрямок у веб-дизайні

29

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

Загальноприйнято, що за замовчуванням рух погляду на сторінці (в розмітці LTR – Left to Right – зліва направо) відбувається зверху зліва вправо донизу, як показано на зображенні:

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

1. Управління напрямками з допомогою зображень

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

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

2. Ведення погляду

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

Погляньте на приклади, взяті з вебсайтів CNN і BBC:

У прикладі BBC обидва зображення вгорі зліва дивляться з центру сторінки, це веде до незамечанию важливої інформації вздовж траєкторії за замовчуванням, як показано на зображенні:

1. Ви починаєте зверху зліва, з звичайного місця за замовчуванням

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

3. Ваші очі повертаються назад до центру сторінки

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

5. Нарешті ваші очі починають рухатися до центру сторінки, однак тут є велике «сліпе пляма», створене розміщенням і напрямком зображення, зазначене «?»

Тепер порівняйте наступну «виправлену версію домашньої сторінки BBC з вищенаведеної вихідною:

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

3. Форми

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

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

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

4. Напрямок дизайну

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

Чіткі горизонтальні лінії в наведених нижче прикладах дають відчуття спокою, стабільності, порядку і тиші.

У другій групі внизу діагональне розміщення елементів підсилює відчуття руху і дії.

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

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

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

Висновок

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

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