Совет №7: Правила

F-паттерна

Спонсор сегодняшнего урока — буква F! Ура! Мы можем спроектировать сайт тысячей разных способов. Но вот чтобы сделать лэйауты достаточно простыми в использовании, достаточно правильно применять на практике F-паттерн.


Предыдущий совет

(В этой коллекции собраны переводы профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)


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

Как работает F-паттерн

Первое, на что обращает внимание пользователь, — это на большой, контрастный кусок текста. Обычно это бывает заголовок, хотя бывает, что эту роль играет и логотип. Убедитесь, что заголовок у вас есть, потому именно он будет “верхней черточкой” в нашей букве F: люди читают его первым.

Затем пользователь начнет сканировать текст по направлению вниз, придерживаясь левой стороны текстового блока, пока не наткнется на что-то интересное. Эту информацию он прочтет слева-направо, формируя “среднюю черточку” буквы F. И так далее.

Этот паттерн все повторяется и повторяется. Именно поэтому популярность опций горизонтального меню (или набора вкладок) снижается по мере приближения к правому краю — ведь мы начинаем изучение опций с левого края. Пятую по счету опцию видят только те, кто не кликнул на первую, вторую, третью и четвертую.

Почему это так важно?

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

Если на этой пограничной линии расположить кнопку или иконку, то ее будут чаще замечать. Если поместить какой-то объект подальше от этой линии, его будет легко упустить из виду. Чем ближе объекты к линии, тем они заметнее.

Так что теперь, все располагать на линии? Нет, черт возьми! Только то, что важно. Разместите важные пункты ближе к левому краю меню. Поставьте побуждающую кнопку (call-to-action) на линию границы, прямо под текстом. Ну и так далее.

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

Исключение из правила:

Хочу подчеркнуть, что идея не в том, чтобы “располагать объекты слева”, а в том, чтобы располагать их на линии, если, конечно, вы хотите, чтобы их заметили.

Если вы используете выравнивание по правому краю, то располагайте важные объекты справа. Если все выровнено по центру — то в центре. Но помните, что самый привычный стиль восприятия информации — слева направо, и это может сыграть против вашей задумки.

Если вы разбиваете текст на колонки, то каждая колонка задает свою линию. Если контент как-то сгруппирован, то каждая группа тоже создает линию.

Pinterest, к примеру, при просмотре разбивается нами на множество маленьких F-паттернов (где “верхней черточкой” выступает картинка). Речь не идет об одной большой F.

Если хотите посмотреть на другие примеры F-паттернов, вы найдете их у меня на доске, посвященной отслеживанию взгляда.

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

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

А завтра нас ждет новый UX-совет:

Что не является wireframe-ом?

Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

А ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.