Эта статья познакомит вас с принципами F-паттерна, почему он работает и как вы можете создавать свои собственные дизайны на основе этого паттерна.
Что такое F-паттерн и как он работает?
F-паттерн описывает наиболее распространенные шаблоны движения глаз пользователя, когда речь идет о блоках контента. F от fast (быстро). Вот как пользователи читают ваш контент. За несколько секунд их глаза движутся с удивительной скоростью по странице вашего сайта.
Этот шаблон был популяризирован исследованием отслеживания движения глаз, проведенным NNGroup. В исследовании приняло участие более 200 пользователей, смотревших на тысячи веб-страниц, и было обнаружено, что основное поведение чтения было довольно последовательным на многих сайтах и при различных задачах. Этот шаблон чтения похож на букву F и имеет следующие три компонента:
- Пользователи сначала читают в горизонтальном направлении, обычно верхнюю часть области содержимого. Этот начальный элемент образует верхнюю планку F.
- Затем они просматривают вертикальную линию вниз по левой стороне экрана, ища точки интереса в первых предложениях абзаца. Когда они обнаруживают что-то интересное, они читают внимательнее во втором горизонтальном направлении, которое обычно покрывает более короткую область, чем предыдущее направление. Этот дополнительный элемент образует нижнюю планку F.
- Наконец, пользователи просматривают левую сторону контента в вертикальном направлении.
NNGroup демонстрирует, как исследования отслеживания движения глаз выявили, что пользователи (в культурах чтения слева направо) обычно просматривают тяжелые блоки контента по шаблону, который похож на букву F или E. Области, в которых пользователи больше всего смотрели, окрашены в красный цвет. Желтые области показывают меньшее количество просмотров, за которыми следуют наименее просматриваемые синие области. Серые области не привлекали никаких фиксаций.
Очевидно, что шаблоны пользовательского просмотра не всегда состоят именно из трех частей. Когда читатель находит что-то, что ему нравится, он начинает читать нормально, образуя горизонтальные линии.
Почему мне следует его использовать?
F-образный шаблон поможет вам создать дизайн с хорошей визуальной иерархией. Дизайн, который люди смогут легко просматривать. F-образный макет удобен для большинства западных читателей, потому что они читают сверху вниз и слева направо всю свою жизнь.
Когда мне следует его использовать?
F-паттерн — это дежурный паттерн для перегруженных текстом сайтов, таких, как блоги и новостные сайты. Если есть много контента, особенно текста, пользователи будут лучше реагировать на макет, разработанный в соответствии с естественным форматом просмотра.
Как использовать F-паттерн
F-паттерн буквально дает дизайнеру больше контроля над тем, что увидят.
Определите приоритетность вашего контента
Прежде чем размещать элементы на своей странице, установите их приоритетность. Как только вы узнаете, что вы хотите, чтобы ваши пользователи увидели, вы можете просто разместить это в «горячих точках» шаблона для правильного взаимодействия.
Задайте начальные ожидания
Первые два абзаца являются наиболее важными. Поместите наиболее важный контент рядом с верхней частью страницы, насколько это возможно, чтобы быстро сообщить цель сайта (или страницы). Пользователь обычно будет читать по горизонтали через заголовок, так что это хорошее место для панели навигации.
Проектируйте для просмотра, а не для чтения
При применении шаблонов думайте о том, где размещать контент:
- Начинайте новые абзацы заманчивыми ключевыми словами.
- Люди сначала будут смотреть на наиболее доминирующий элемент (элемент или область с наибольшим визуальным весом) на странице. Таким образом, придайте больше визуального веса тому, что имеет значение: используйте типографику, чтобы указать важность текста (например, попробуйте выделить ключевые слова в тексте) и определенные цвета для выделения кнопок.
- Раскрывайте только одну идею на абзац и используйте как можно больше маркеров списка.
- Помещайте наиболее важный контент (например, призыв к действию) с левой и с правой стороны, где пользователь начинает и заканчивает горизонтальный просмотр страницы. Эта кратковременная пауза, когда они спускаются ниже по странице, дает им дополнительное время для анализа информации.
Используйтебоковую панель
Боковая панель существует, чтобы привлечь пользователей на более глубокий уровень, поэтому используйте ее для привлечения пользователя:
- Используйте все, что вы хотите, чтобы ваш пользователь видел, но то, что не вписывается в основной контент. Это может быть реклама, список «связанных статей», виджет социальных сетей
и т. д. - Используйте ее как инструмент для поиска пользователями определенного контента. Очевидным примером является список категорий, облако тегов, виджет «популярные посты»
и т. д.
Избегайте скучных макетов
Основным недостатком этого F-образного паттерна является его предрасположенность к монотонности. Легко утомить ваших пользователей повторяющимся и похожим контентом. Вы, конечно, ничего не выиграете от скучающих пользователей, если они начинают уставать от вашего дизайна, поэтому добавьте один «неудобный» элемент в область просмотра, чтобы удержать внимание пользователя.
Этот метод «разрушения ожиданий» от макета может быть полезен, когда у вас действительно длинные вертикальные интервалы содержимого, которые кажутся утомительными или скучными, когда вы прокручиваете предыдущие разделы.
Вывод
F-образный паттерн просто следует общим тенденциям человеческого глаза, так что вы можете оптимизировать структуру вашего макета. Но вам не нужно непреклонно следовать ему — это рекомендация, а не эталон.
Читайте также: Z-образный паттерн в дизайне интерфейсов
Спасибо!
Подписывайтесь на UX Planet:Twitter|Facebook
Нет комментариев