Візуальна ієрархія

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

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

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

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

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

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

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