F-паттерн - повышаем юзабилити сайта

F-паттерн: секретное оружие для повышения конверсии сайта

 

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

Недавнее исследование Гарвардского бизнес-обзора (HBR, научно-популярный журнал) выяснило, почему потребители принимают решение сделать покупку в определенных интернет-магазинах. В конечном счете, исследователи обнаружили, что потребители полагаются на свою интуицию, а не логическое мышление, чтобы решить, будут ли они совершать покупку онлайн. Таким образом, дизайн играет намного большую роль в превращении пользователей в потребителей, чем можно было бы ожидать. Красивый, простой и удобный дизайн веб-сайта создает ощущение безопасности и надежности, а противоположный заставляет потребителя проявлять осторожность.

Так как Вы можете гарантировать, что пользователи выберут именно Ваш веб-сайт?

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

Представляем: F-паттерн.

Что такое F-паттерн и почему он работает?

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

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

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

Когда люди видят Вашу информацию, они с большей вероятностью будут задерживать на ней внимание. А если на ней будут задерживаться, то с большей вероятностью ей воспользуются. Это действительно довольно просто!

Когда F-паттерн работает лучше всего

По данным пользовательского опыта фирмы Nielsen Norman Group (NN/g, компания, занимающаяся ИТ-консалтингом), есть три условия, которые заставляют пользователей сканировать контент, придерживаясь F-паттерна:

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

Как использовать F-паттерн в дизайне Вашего веб-сайта

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

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

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

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

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

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

Что лучше? Последовательное повторение основной темы повсюду выражает надежность, что приводит к интуитивному принятию решений, которое HBR счел настолько распространенным в онлайн-конверсии.

Заключение

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

  • Используйте короткие предложения и фразы в F-паттерне ― помните, что не роман пишите!
  • Если в Вашем случае F-паттерн напоминает скорее Е-паттерн (что особенно часто бывает на вытянутых по вертикали веб-сайтах), помещайте наиболее значимую информацию в первых двух зубцах. Они являются самыми важными.
  • Если сомневаетесь, возьмите в пример методы наиболее успешной практики SEO и используйте эти вещи как пункты маркированного списка. Кроме того, загружайте с передней стороны ключевые слова, чтобы соблазнить читателей.
  • Не забывайте про смартфоны! F-паттерн работает и для мобильных телефонов. Таким образом, чтобы быть максимально последовательным, оптимизируйте Ваш проект, используя это расположение.
Святослав Гетто
7/6/2018
131