Шаблон F: Понимание того, как пользователь сканирует контент.

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

Онлайн чтение немного отличается от традиционного чтения бумажного материала. Сегодня, когда люди находят нужный контент в Интернете, они сначала просматривают его. Таким образом, пользователь привык к быстрой прокрутке всей информации с остановками только на важных частях. Исследования движения глаз в такие моменты показали, что люди просматривают контент по форме буквы «F».

Случайно ли это? И почему это важно для бизнеса?

Что такое F – паттерн?

При сканировании информации на веб-странице, наш ум и подсознание интуитивно ищет самую важную и необходимую информацию. И вот как это работает:

Верхняя часть буквы «F» (смотри рисунок) формируется в тот момент, когда пользователь начинает просмотр страницы в верхней его части, читая заголовок и последующее описание статьи. Читатели обращают внимание на левую сторону экрана и двигаются глазами вниз по странице, пока не натолкнуться на следующий заголовок или информацию, которая бросается в глаза.

Эта информация, как правило, является частью общего содержания, на которое они рассчитывали, когда искали данную тему. Так они проведут еще некоторое время, читая ее, тем самым формируя вторую горизонтальную линию в букве «F»

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

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

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

Если же им покажется, что потратили слишком много времени на поиск, или поймут, что быстро найти нужное не получится, то, скорее всего, они покинут такой сайт.

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

Как это использовать в ваших интересах.

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

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

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

Возьмите следующий информационный фрейм и поместите его немного ниже по странице с выделением заголовков и других элементов. Это даст взгляду посетителя интуитивно остановиться и просмотреть эту часть сайта.

- Учитывайте желание предсказуемости. Ваши читатели могут и не знать, что вы используете F-паттерн. Но они будут чувствовать, что получают нужную информацию без необходимости упорно работать. Такая предсказуемость даст возможность пользоваться сайтом и информацией с удобной для него самого скоростью.

- Используйте боковую панель (sidebar). Разместите там полезную информацию, которая будет являться частью той статьи, которую в данный момент просматривает пользователь. Это разобьет контент и даст понять пользователю еще немного о вашем продукте.

Элементы дизайна F-паттерна.

Данный шаблон полезен не только для текстовых фреймов. Этот метод следует учитывать во всем дизайне сайта. Исследования по отслеживанию движения глаз показали, что пользователи чаще читали заголовок, который находился слева относительно страницы. Это означает, что заголовок сайта является одним из наиболее важных функциональных частей сайта.

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

После заголовка расположите остальные элементы дизайна в левой части страницы. Предусмотрите небольшие промежутки для текста и других изображений. Затем верните читателя на запоминающийся заголовок.

Но не забывайте про нижнюю часть страницы, даже если вы использовали F-паттерн.

Как это влияет на бизнес.

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

Некоторые, из наиболее успешных веб-сайтов, включают три основных фактора:

- Сверху-слева логотип, который привлекает внимание к верхней части страницы и напоминает о бренде.

- Сверху-справа номер телефона или контактные данные, показывающие пользователю, как вас найти.

- F-шаблон для контента на странице.

Заключение.

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