В статье:

1. Зачем нужен футер: пользовательские сценарии

2. Элементы футера на сайте

3. Варианты отображения подвала страницы

4. Частые проблемы с футером

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

Почитать по теме:

Как читают тексты на сайте: обзор исследований

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

Зачем нужен футер: пользовательские сценарии

Два распространенных варианта использования подвала сайта в поведении пользователей:

Дочитывают до футера

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

• напомнить о спецпредложениях, предложить подписаться на рассылку, предложить форму связи;
• дать дополнительную информацию по ссылкам, которых нет в верхнем меню, или которые пользователи не заметили.

Футер сайта newtonew.com с крупной формой обратной связи

Сразу скроллят к футеру

Пользователи специально прокручивают страницу вниз до подвала. В таком сценарии они целенаправленно ищут какую-то информацию, которую предполагают найти в футере:

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

Сайт United Healthcare использует навигацию в верхней панели и в футере

Почитать по теме:
[Кейс] Как компания улучшила навигацию сайта и этим разгрузила менеджеров

Элементы футера на сайте

Ссылки в футере

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

Положительно влияют ссылки с естественными текстами, к примеру, адресом сайта или названием компании. Ссылки с текстом из ключей, к примеру, «купить цветы в Москве», могут навредить, если поисковики посчитают их за спам.

Подробнее в статье:

«Эффективная перелинковка: как работать с внутренними ссылками»

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

Элементы футера страницы

Сайты с разными назначениями требуют разных составляющих футера. Основные элементы футера сайта:

• полезные ссылки;
• навигация, дублирующая меню;
• ссылки на вторичные задачи;
• карта сайта;
• отзывы или награды;
• дочерние компании и бренды
• взаимодействие с клиентами.

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

Футер сайта yves-rocher.ru

Полезные ссылки

Это служебная навигация по информации, которая должна быть на сайте. К примеру:

• контактная информация;
• информация по обслуживанию клиентов;
• политика конфиденциальности;
• условия эксплуатации.

Почитать по теме:
Как выжить без печенек: Google отказывается от third-party cookie

Пользователи часто ищут такую информацию именно в подвале, так что даже если она есть в вашем основном меню сверху, поместите ее и в футер.

Футер сайта Clarity Money: ссылки на соцсети, поддержку, политику конфиденциальности

Этот элемент может встречаться в футере всех видов сайтов.

Навигация

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

Навигация по разделам в футере сайта brighty.ru

Нужен на сайтах с длинными страницами.

Ссылки на вторичные задачи

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

К примеру:

• страница с вакансиями для соискателей;
• контакты для желающих написать статью;
• доступ к информации для инвесторов;
• ссылки на документацию или спецификации продукта;
• доступ к PR-информации;
• поиск филиалов компании.

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

К примеру, на сайте журнала «Dwell Magazine» есть категории, не относящиеся к тематике журнала. Они интересны не основным читателям журнала, а профессионалам в области СМИ и дизайна, продавцам, инвесторам, рекламодателям, потенциальным сотрудникам.

Футер журнала Dwell со ссылками для разных целей

Карта сайта

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

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

Подходит для больших сайтов с несколькими уровнями структуры.

Отзывы или награды

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

Компания Reykjavik Excursions показывает награды, чтобы укрепить авторитет

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

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

Компании и бренды

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

Пользователи могут понять, с какими брендами связана компания, и распространят хорошее отношение к любимому бренду на всю компанию.

В футере Walmart указаны другие бренды, которыми владеет компания

Некоторые компании указывают бренды поставщиков, с которыми работают. Это влияет на уровень доверия и узнаваемость

Бренды в футере сайта purpurbeauty.ru

Подходит для крупных международных организаций со многими дочерними или партнерскими брендами.

Взаимодействие с клиентами

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

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

Футер TheGoodTrade.com

В футере TheGoodTrade несколько блоков: запрос на подписку, виджет с фидом Instagram, ссылки на соцcети, ссылки на дополнительную информацию и данные об авторских правах.

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

Варианты отображения подвала страницы

Кроме стандартного футера, который находится внизу и одинаков для всех страниц, есть и другие виды.

1. Футер для бесконечного скролла

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

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

Футер внизу справа на странице с бесконечной лентой сайта medium.com

2. Контекстный футер

Эксперты советуют подбирать для страниц разные футеры в зависимости от их типа и назначения.

Для страницы с бесконечной лентой можно сделать мини-футер сбоку, но для статичной достаточно стандартного на его обычном месте.

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

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

Статичный футер на странице подборки на сайте medium.com

Частые проблемы с футером

1. Более двух уровней иерархии
   Меню сложное и многоуровневое, подвал выглядит громоздким. В футере должна быть только важная информация, которая интересна пользователям. Если важно все, значит ничего из этого по-настоящему не важно.
   
   Что делать: Выделите нужные ссылки для решения задач пользователей. Подумайте о перераспределении контента и отображении только ссылок на категории первого и второго уровня.
2. Непонятные имена ссылок
   Нечеткие названия разделов, которые не сообщают конкретного смысла. Пользователи привыкли, что ссылка на контакты с компанией называется «Контакты», оригинальное название может выглядеть свежо, но запутать пользователей.
   
   Что делать: придерживайтесь общепринятых привычных названий, посмотрите, как называют разделы конкуренты.
3. Непонятная структура или информационная иерархия
   Нижний колонтитул иногда может быть «свалкой» для ссылок, которым не нашлось места в верхнем меню. Некоторые веб-мастеры просто помещают несколько ссылок в футер в строчку. Если в подвале нет структуры, пользователи не будут в нем разбираться.
   
   Что делать: группируйте ссылки по разделам, выделяйте группы визуально дизайном.
4. Скрытый или неразборчивый футер
   Иногда компании используют настолько маленький шрифт и бледные цвета, что подвал просто незаметен.
   
   Что делать: используйте разборчивый размер шрифта и контрастный цвет. Не не сворачивайте и не прячьте футер анимацией, пользователи ожидают увидеть его внизу страницы, не заставляйте их искать его.

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

На основе статьи Nielsen Norman Group «Footers 101: Design Patterns and When to Use Each»

Источник