12 з 31 уроку UX-інтенсиву від Джоеля Марша (Joel Marsh)

Share Button

12from31

(Якщо ви щойно приєдналися до нашого курсу, почніть звідси!)

Ідея візуальної ваги направду інтуїтивна. Деякі речі здаються “важчими” за інші у компоновці. Вони привертають вашу увагу значно легше. І ця ідея дуже цінна для UX-дизайнерів.

Наша робота – допомогти користувачам помічати важливі речі. І так само дуже важливо не відволікати користувачів від їхніх цілей.

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

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

Тож, без подальших церемоній, я радий вам представити зірок UX-інтенсиву: старих добрих ґумових каченят!
*Аплодисменти*

visualweight-contrast copy

Контраст:

Різниця між світлими і темними речами називається контрастом. Чим більше різних світлих речей порівнюються із чимось темним, тим “вищий” контраст.

В UX ви прагнете надати важливим речам більшого контрасту, подібно до каченяти в центрі. У цьому випадку більша частина картинки світла, тож темне каченя стає помітнішим.

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

***

visualweight-depth copy

Глибина і розмір:

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

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

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

Якщо ви використовуєте ефект розмитості чи тіні, це робить сприйняття глибини більш реалістичним. Розмір має той самий ефект, навіть якщо ваш дизайн “плаский”.

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

Ось чому неправильно “зробити логотип більшим”. Якщо тільки ви не прагнули, щоб користувачі витріщалися на ваш логотип замість того, щоб робити покупки.

***

Наступного разу ми вивчимо другий із наших п’яти візуальних принципів: Колір!

Взято звідси.

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × four =