6 принципів візуальної ієрархії

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

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

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

Глиняна табличка і iPad

1) Патерни сканування сторінок

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

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

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

Як це можна застосувати? Розташуйте важливу інформацію з лівого боку, використовуйте короткі виділені заголовки, булліти та інші елементи, щоб привернути увагу і розділити інформацію.

Гаряча карта від Nielsen Norman Group

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

Джерело: tuts +

Дизайнери зазвичай створюють сторінки, які повністю відповідають цій поведінці, розташовуючи найважливішу інформацію в кутах, а все інше — вздовж верхньої та нижньої частини екрану і по діагоналі, яка їх з’єднує. На сайті 2010 Build Conference (внизу) важливі елементи включають логотип (лівий верхній кут), кнопку «Зареєструйтесь зараз» (правий верхній кут) і список спікерів (внизу). Всі ці елементи стратегічно розташовані по ключових точках літери «Z».

сайт Build

2) Розмір

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

Постер Rebecca Foster

Цей принцип настільки сильний, що він переважає над правилом «зверху вниз». На попередньому прикладі слово «cracking» пересилює “time to act” завдяки своєму розміру і розташуванні зліва (тут на допомогу приходить правило «зліва направо»). Але в прикладі знизу ми читаємо текст “Fighting for Equality on the Campaign Trail», набраний великим шрифтом, до тексту, розташованого також зліва прямо над ним, “Election 2012”.

Річний звіт Column Five

“Election 2012» — це загальна тема, і дизайнер вирішив, що заголовок статті становить для читача більшу зацікавленість, і тому збільшив його розмір.

3) Простір і щільність

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

Як видно на прикладі нижче, простір може бути елегантною альтернативою або доповненням до використання розміру. Головна фраза «Notre agence vous accompagne…» набрана дрібним шрифтом, але оточена великою кількістю простору, що сигналізує її важливість. Словосполучення нижче, «Le Compendre», «Le Réaliser» і «Le Partager», поміщені у рамку, що додатково вирізняє їх на білому тлі.

Сайт Draw to Click

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

Постер Bright Pink (via Smashing Magazine)

На першій картинці, слово «Sports» сильніше за візуальною ієрархією, ніж “badminton”, завдяки тому, що воно розташоване вище, більше за розміром і виділене болдом. На другій картинці, ці слова стають приблизно рівними за значенням, завдяки чорному прямокутнику, який виділяє “badminton”. На третій картинці каракулі закривають слово «Sports», але не «badminton», що призводить до протилежного результату й робить «badminton» вищим за ієрархією. Такий поворот складно передбачити, тому дизайнери намагаються триматись комплексного підходу у використанні простору.

4) Накреслення і комбінація шрифтів

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

Подивіться, як типографіка впливає на ієрархію і порядок слів на сайті The Tea Factory. Основний акцент зроблений на фразу «the perfect teas to keep you warm». Але різниця в накресленні шрифтів, використання курсиву всередині фрази додатково до того, як розташовані слова, роблять текст більш динамічним. Заклик до дії, «See our selection», відрізняється від основного тексту розміром і навколишнім простором.

Брендінг The Tea Factory

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

Обкладинка журналу Trendi (via [http://kasperstromman.tumblr.com/post/42093497866/best-finnish-magazine-...*|The Kasper Stromman Design Blog])

5) Колір і відтінок

Цей принцип теж простий: яскраві кольори виділяються на тлі приглушених або сірих тонів, при цьому світлі відтінки виглядають більш «далекими» і знаходяться нижче за візуальною ієрархією, ніж темні й насичені. На сайті Where They At контраст створюється за рахунок жовтого кольору і кольорової фотографії на чорно-білій сітці для найкращого ефекту.

Сайт Where They At

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

Сайт Guggenheim

Сайт Whitney Museum, навпаки, використовує один шрифт, накреслення і чорний колір, але встановлює ієрархію за допомогою відтінків сірого. Фраза «Cory Arcangel on Pop Culture» нижче за візуальною ієрархією, ніж «New on Whitney Stories», завдяки як своєму розташуванню, так і більш світлого відтінку, який менше виділяється на білому тлі.

Сайт Whitney Museum

Колір особливо важливий у дизайні для мобільних пристроїв, коли маленький екран обмежує можливість використання інших принципів візуальної ієрархії, таких як розмір і простір. У додатку Grainger Industrial Supply кнопка «proceed to checkout» червоного кольору, що виділяє її серед інших елементів на сторінці. А кнопка «Narrow Your Search Results», навпаки, сіра і знаходиться на одному рівні з такими елементами, як пошук і посилання на продукти.

Дизайн додатку Grainger (via codrops)

6) Напрямок

Макет сторінки зазвичай створюється за допомогою сітки з вертикальних і горизонтальних ліній, що спрощує сприйняття інформації. У такій системі з’являється ще один спосіб встановити ієрархію — зламати сітку. Текст, розташований по кривій або по діагоналі буде автоматично виділятися серед інших елементів, розташованих по сітці, і привертати до себе увагу. Цей принцип ефективно використовується в рекламі, як на цьому постері від Frost Design.

Постер General Pants Co. (via Frost*collective)

Автор: Alex Bigman 
Переклад: UIUXUA