Професійні секрети по UX: правила F-паттерну

У нашій класній збірці ви знайдете не менш класні поради по UX від американського дизайнера Джоела Марша. Якщо ви тут вперше – то краще розпочніть з першого секрету.

F pattern

Cекрет 7 – правила F-паттерну

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

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

  • Як працює F-патерн

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

Потім користувач почне сканувати текст у напрямку вниз, дотримуючись лівого боку текстового блоку, поки не наткнеться на щось цікаве. Цю інформацію він прочитає зліва-направо, формуючи “середню риску” букви F. І так далі.

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

  • Чому це так важливо?

Створюючи лейаут, ми зазвичай думаємо про текст, як про блок або прямокутник. Але нам потрібно сприймати його як лінію або край. Або як вертикальну риску в нашій “F”. Подивіться на будь-який лейаут і зауважте, як текст створює лінію. І навіть в цьому пості можна простежити F-патерн!

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

Так що тепер, все розташовувати на лінії? Ні, хай йому грець! Тільки те, що важливо. Додайте важливі пункти ближче до лівого краю меню. Поставте call-to-action кнопку на лінію, прямо під текстом. Ну і так далі.

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

  • Виняток з правила

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

Якщо ви розбиваєте текст на колонки, то кожна колонка задає свою лінію. Якщо контент якось згрупований, то кожна група теж створює лінію. Pinterest, наприклад, при перегляді розбивається нами на безліч маленьких F-патернів (де “верхній рискою” виступає кинка). Мова не йде про одну велику F.

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

Коротше, F-патерн рулить!

_____

Попередній секрет – ніколи не довіряйте внутрішньому голосу!

ДУЖЕ РАДИМО ПОЧИТАТИ:

Кумедні пародії на логотипи Slack, Levi's, MTV та інших компаній

Головні тренди у дизайні логотипів на 2020 рік (Інфографіка)

Тотальний редизайн Google Chrome, як це було (ІСТОРІЯ 3-тя)

Залишити відповідь