#7/17
Как работает F-паттерн
Первое, на что пользователь будет смотреть, - это самый большой, самый контрастный текст. Обычно мы называем его заголовком (иногда логотип тоже может играть эту роль). Когда пользователь читает заголовок или первый элемент в списке, слева направо, это верхняя часть F.
Затем пользователь сканирует левую часть блока содержимого до следующего фрагмента текста, который бросается в глаза. Затем он прочитал его слева направо. Это середина F. И так далее.
Эта картина повторяется снова и снова. Вот почему в горизонтальном меню (или в наборе вкладок) популярность кликов обычно идет слева направо.
Так почему это имеет значение?
Когда мы создаем макет, мы обычно рассматриваем текст как поле или блок. Но мы должны думать об нем как о линии или о крае. Вертикальный край по левой стороне текста. Посмотрите на любой макет и найдите основные края, созданные текстом.
Когда мы помещаем элементы, подобные кнопкам и значкам на этой линии, их чаще замечают. Когда мы убираем их с этой линии, они могут быть упущены. Чем ближе они к линии, тем заметнее они будут.
Так мы должны располагать все элементы на линии? Конечно нет! Только важный материал. Поместите важные элементы слева от меню. Поместите кнопку «Призвать к действию» в строке, под текстом и т.п.
Исключение из правил:
Я хочу отметить, что ключевой момент - это не «расположить элементы слева». Ключевым моментом является то, что вы хотите, чтобы они были замечены. Если вы отцентруете все, линия будет находится посередине, но наша привычка чтения слева направо может обернуться против вас, поэтому будьте осторожны.
Конструкция, удобная для F-Pattern, заставляет людей говорить, что у нее «чистые линии». Дизайн с большим количеством F выглядит более беспорядочным. Сделайте строки, указывающие на важные элементы дизайна, если вы хотите, чтобы пользователь их увидел.
Направление взгляда:
https://ru.pinterest.com/joelmarsh/eye-tracking/