Визуальная иерархия главной страницы

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

Резюме: Как использовать F и Z паттерны для создания визуальной иерархии в дизайне главной страницы.

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

Что повлияет на то, как будет двигаться их взгляд и куда дальше сдвинется их фокус?

Можем ли мы разработать наши страницы так, чтобы контролировать их фокус и направлять их к нашей цели?

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

Айтрекинг пролил свет на то, как люди смотрят на предметы — как на печатной странице, так и в Интернете. Когда речь заходит о главной странице, особенно важно понять, как люди будут воспринимать ее:
Вот тут и вступаю на сцену паттерны движения глаз.

Айтрекинг: посмотрите, куда они смотрят.

Айтрекинг, как область изучения, появился на свет в 1980-х годах. Но наблюдения за тем, как глаз движется по странице, велись еще в 1800-х годах. Историки считают, что Луи Эмиль Жаваль первым заметил, что вместо того, чтобы плавно перемещать глаза по странице, чтение включает в себя серию фиксаций и движений, с целью сфокусироваться на точке, за которыми следует быстрое движение к следующей точке фокусировки.

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

F-паттерн

Выводы Nielsen Norman Group, собранные в различных статьях, остаются, пожалуй, наиболее цитируемыми и полезными ресурсами в сообществе дизайнеров. Главный из их выводов, представленный в этом докладе, описывает теперь уже очень популярный F-паттерн:

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

В отсутствие чего-либо, размещенного намеренно, чтобы привлечь их внимание, F-паттерн описывает, как глаза человека будут двигаться по странице, которая плотно заполнена текстом, что делает его особенно применимым для постов в блоге и страниц с результатами поиска.

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

Стоит также упомянуть, что F-паттерн не обязательно должен следовать традиционной букве "F" с двумя горизонтальными линиями. Чтобы продемонстрировать на примере, что я имеею ввиду, взглядните на главную страницу Fleetmatic, где показаны три линии (логотип, заголовок, CTA):

Z-паттерн

Страницы, которые менее информативны или, как пишет Джерри Цао, "проигрывают в организации", имеют тенденцию вызывать движение глаз, похожее на букву "Z". Этот так называемый Z-паттерн имеет многие из тех же характеристик, что и F-паттерн. Но, как указывает господин Цао, "где простота является приоритетом, а призыв к действию — главным выбором", вместо буквы "F" нужно использовать “Z”.

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

Посмотрите на главную страницу Offerpop и на то, как применен Z-паттерн, для привлечения большего внимания к форме и кнопке CTA:

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

Визуальная иерархия: ключ к хорошему дизайну.

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

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

Когда ты впервые смотришь на эту страницу, куда падает твой взгляд?

  • Лицо женщины?
  • Желтый ценник?
  • Гарантия возврата денег?
  • Форма?
  • Рисунок в правом нижнем углу?

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

Обратите внимание на отсутствие визуальной иерархии — она не следует ни шаблону F, ни шаблону Z, что усложняет конверсию. Подумайте об этом: если бы вы пришли на эту страницу, вы бы нажали на кнопку? Знаете ли вы вообще, каково предложение, и насколько быстро вы это поняли? Что бы вы сделали, чтобы исправить визуальную иерархию и общий макет?

Белое пространство

В своем посте на WordStream Фахад Мухаммад объясняет, как белое пространство может быть ключом к созданию эффективной визуальной иерархии:

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

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

Заключение

Дизайн — это сочетание искусства и науки. Давайте рассмотрим последний пример, который демонстрирует, как айтрекинг, визуальная иерархия и психология человека могут указать посетителям на то, на чем им следует сосредоточиться по вашему мнению:

Вы можете заметить, что вышеприведенные тепловые карты для одной и той же страницы, различаются только фотографией ребенка. Слева малыш смотрит прямо на вас, а самая горячая часть тепловой карты находится на его лице. Справа малыш смотрит на заголовок, который направляет наш взгляд от его лица на заголовок и текст. Этот вариант, вероятно, будет лучше работать при A/B тестировании, потому что внимание посетителей будет сосредоточено на наиболее важных элементах страницы. Люди автоматически хотят смотреть туда, куда смотрят другие люди. Перемещая взгляд ребенка, мы впоследствии взяли под контроль взгляд посетителей и направили его на наше предложение.

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

Источник:
99designs.com
·
comments powered by HyperComments