Что такое футер в сайте: что это такое, как правильно оформить подвал (footer) сайта

Сайт 

Содержание

что это такое, как правильно оформить подвал (footer) сайта

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

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

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

Хороший пример: футер сайта kokoc.com

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

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

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Что размещать в футере сайта: базовая информация

В футере-подвале сайта может содержаться большой объем очень сжатой и четко структурированной информации. Базовый набор сведений таков:

  1. Контактная информация. Телефон, электронный и почтовый адрес, кликабельные кнопки мессенджеров и социальных сетей. Вся эта информация присутствует на сайте в разных блоках и на разных страницах, а в футере она собрана воедино, и это удобно для пользователей.
    2. Контактная информация из всех блоков и со всех страниц дублируется в футере
  2. Правовая информация. Если речь идет об электронном средстве массовой информации, то это номер, дата выдачи и наименование органа регистрации электронного СМИ. Для сайтов образовательных и медицинских компаний это сведения о выданной лицензии. Также к правовой информации относится запрет на копирование материалов без ссылки на сайт или без согласования с владельцем сайта. Договор оферты (или информация о том, что содержание сайта не является договором оферты) и политика конфиденциальности — тоже правовая информация, которую каждый владелец ресурса обязан размещать в соответствии с Федеральным законом № 152 «О персональных данных».
    3. Пример правовой информации в футере сайта электронного СМИ
  3. Информация о разработчике сайта. Как правило, это кликабельная ссылка на сайт разработчика (реже — просто название студии) и значок копирайта — ©.
  4. Карта проезда. Размещение карты проезда в футере сайта может быть удобно в случае, когда человек ищет компанию в зоне пешего доступа и ему важно увидеть ее точное местоположение.
В футере карту можно увеличить и увидеть точный адрес компании

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

Выглядит страница карты сайта лаконично

Читайте также:

Как создать карту сайта (sitemap.xml)

Кнопка «Наверх». Кнопка добавляется в подвал сайта для удобства пользователей, чтобы им не пришлось скроллить страницу вручную, если они хотят вернуться к началу.

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

Счетчиков может быть несколько

Комплексная веб-аналитика

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

Что дополнительно разместить в футере сайта

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

  1. Информация о партнерах. Партнерство с «Яндексом» и Google, более локальное партнерство, указание компаний, которые поддерживают проект финансово или информационно — все это можно разместить в футере в виде логотипов или ссылок. Работает такая информация как социальное доказательство и помогает сформировать доверие к компании-владельцу ресурса.
    2. Пример футера сайта с указанием партнеров проекта — СМИ «Известия»
  2. Информация о «запасном» сайте. Если у вас есть дополнительный ресурс на случай проблем с основным сайтом, на него тоже есть смысл дать ссылку в подвале.
    3. Дополнительный ресурс поможет не потерять пользователя при проблемах с основным сайтом или хостингом
  3. Форма обратной связи, заказа обратного звонка или другие дополнительные формы. Они помогают собирать базу подписчиков, получать лиды, собирать людей в рассылку. Для пользователей удобна форма «Задать вопрос», особенно если она не предусмотрена в других блоках/страницах сайта.
В футере этого сайта нашлось место даже для двух дополнительных форм захвата

Возрастное ограничение. Если сайт содержит материалы, не рассчитанные на детей, это тоже указывают в футере.

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

Встречается ссылка на фирстиль нечасто, но рассмотреть такой вариант стоит

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

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

Пример оформления условий доступа к сайту: ссылка на страницу размещена в футере

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

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

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

Вот как сделали владельцы этого сайта

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

При клике на выбранный тег пользователь видит все материалы сайта, отмеченные им. И для SEO такие метки — тоже плюс, ведь теги часто содержат ключевые слова по теме сайта.

Читайте также:

SEO: что это такое и зачем нужна поисковая оптимизация

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

Так выглядит просьба в футере сайта

При совершении действия, о котором написано в футере html-сайта, появляется форма «Сообщить об опечатке», которую можно отправить владельцам.

Эту форму можно отправить, и владелец ресурса исправит ошибку / опечатку

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

Помимо гарантии возврата средств мы видим, что ресурс гарантирует круглосуточную поддержку

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

Отзывы, рейтинги, партнерство с Google — все важное и имиджевое в одной строке

Читайте также:

Внешняя оптимизация сайта: как продвигать сайт с помощью сторонних ресурсов

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

О Skolkovo знают все: нет причины не напомнить об этом в подвале сайта

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

Известный сервис аналитики сайтов предлагает скачать дополнения для работы с основными браузерами

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

У этого сайта есть мобильное приложение и открытые вакансии

Делаем выводы

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

Создание сайтов

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

Что такое футер сайта, что должно быть в подвале сайта

Оглавление

  1. org/ListItem»> Что размещать в футере
  2. Сведения об авторстве
  3. Информация о партнерах
  4. Дублирование контактов
  5. Социальные сети
  6. Обратная связь и другие лид-формы
  7. org/ListItem»> Карта
  8. Политика конфиденциальности и защита персональных данных
  9. Возрастное ограничение
  10. Другая информация
  11. Карта сайта
  12. Дополнительное меню
  13. org/ListItem»> Облако тегов
  14. Наверх
  15. Счетчики
  16. Оформление

Футер сайта (другое название – подвал) – это сквозной структурный элемент, расположенный в нижней части страниц. Противоположен хедеру (шапке) – сквозной верхней части ресурса. 

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

da52af20-8711-4ca8-9bcb-1c66260edad4. png

Что размещать в футере

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

Сведения об авторстве

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

footer1.png

footer1.png

Источник maximilyahov.ru

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

footer2.png

footer2.png

Источник www.lamoda.ru

Дублирование контактов

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

footer3.png

footer3.png

Источник www.bmstu.ru

Социальные сети

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

footer4.png

footer4.png

Источник www.wildberries.ru

Обратная связь и другие лид-формы

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

footer5.png

footer5.png

Источник ostin.com

Карта

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

footer6.png

footer6.png

Источник modsystem.ru

Политика конфиденциальности и защита персональных данных

Если на ресурсе предусмотрена регистрация или каким-то образом собираются сведения, попадающие под определение персональных данных, на нем необходимо размещать соответствующие правовые документы: об использовании Cookies, пользовательское соглашение, политику конфиденциальности и т. д. Ссылки на них, как правило, добавляют в подвал.

footer7. png

footer7.png

Источник www.shopolog.ru

Возрастное ограничение

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

footer8.png

footer8.png

Источник — regnum.ru

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

footer9.png

footer9.png

Источник selineclinic.ru

Карта сайта

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

Дополнительное меню

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

footer10.png

footer10.png

Источник www.seonews.ru

Облако тегов

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

footer11.png

footer11.png

Источник promo.ingate.ru

Наверх

Кнопка «Наверх» добавляется для удобства пользователей, чтобы им не нужно было скроллить страницу обратно.

footer12.png

footer12.png

Источник adme.ru

Счетчики

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

footer13.png

footer13.png

Источник www.gvozdik.ru

Оформление

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

  • Визуальное отграничение от другого контента. Футер делают другим цветом или хотя бы отличающимся тоном, отчеркивают или выделяют каким-то иным образом. Граница не обязана быть яркой, но должна легко угадываться. Ее можно интересно обыгрывать.

footer14.png

footer14.png

Источник www.yodiv.com

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

footer15.png

footer15.png

Источник www.oknadomkom.ru

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

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

Что такое футер сайта или что писать в подвале

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

Содержание

  • 1 Что такое футер или подвал сайта
  • 2 Что обычно пишут внизу сайта
    • 2. 1 Подвал первого уровня
    • 2.2 Подвал второго уровня
    • 2.3 Подвал третьего уровня
    • 2.4 Навигация
    • 2.5 Карта
    • 2.6 Форма обратной связи или форма подписки
    • 2.7 Контакты компании
    • 2.8 Дополнения для мобильных
    • 2.9 Кнопки социальных сетей
    • 2.10 Стрелка вверх ↑
  • 3 Заключение

Что такое футер или подвал сайта

Футер сайта, это сленговое понятие среди русскоговорящих веб-мастеров и разработчиков. Как и многие другие, оно было заимствовано из английского языка. Слово «footer» – переводится как «нога, нижняя сноска или подвал». То есть – это самая нижняя часть сайта.

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

Что обычно пишут внизу сайта

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

Обратите внимание, на моем сайте подвал состоит из трех уровней:

Подвал первого уровня

В самой нижней части подавала обычно располагают:

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

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

Подвал второго уровня

Следующая часть подвала чуть более функциональна… Там могут располагаться технические ссылки.

К таким, я отношу ссылки на:

  • партнерскую программу
  • карту сайта
  • политику конфиденциальности
  • соглашение об обработке персональных данных

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

Подвал третьего уровня

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

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

И так…

Навигация

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

Подвал сайта интернет магазина «Буквоед»

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

Меню в подвале дублирует главное меню сайта

Карта

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

Форма обратной связи или форма подписки

Если вы ведете рассылку, то форму подписки можно добавить в подвал.

Футер магазина М-Видео

И даже при наличии на сайте полноценной страницы «Контакты», дополнительную форму для отправки сообщения часто спускают в подвал, чтобы она была доступна с любой страницы сайта.

Контакты компании

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

Дополнения для мобильных

К таким дополнениям можно отнести QR код или ссылки на AppStore и Google Play для установки официального приложения сайта.

Кнопки социальных сетей

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

Стрелка вверх ↑

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

Мы же с вами знаем, какими длинными сейчас могут быть страницы сайтов… Или возьмем сайты с бесконечной прокруткой (пример лента вконтакте).  Поэтому, человек должен иметь возможность вернуться к началу из любой точки и в любой момент времени.

Поэтому стрелки сейчас не располагают в подвале, а делают их плавающими по странице.

Заключение

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

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

А у меня все.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Что такое футер (footer) и как его использовать на веб-сайтах

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

Основы футеров

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

Футер – это область, расположенная внизу каждой страницы сайта под основным контентом.

Термин «футер» пришел из мира печати, в котором он является последовательным элементом дизайна, который просматривается на всех страницах документа. Однако, как мы объяснили 20 лет назад, различие между печатным дизайном и веб-дизайном означает, что элементы дизайна, такие как футеры, меняют свое значение (в данном случае, становясь действенными), когда переносятся из печати в онлайн.

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

Люди пользуются футерами

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

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

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

b) Последнюю надежду для труднодоступного контента

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

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

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

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

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

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

  • Полезные ссылки
  • Doormat navigation
  • Ссылки на второстепенные задачи
  • Карта сайта
  • Отзывы или награды
  • Бренды в организации
  • Вовлечение клиентов (рассылки по электронной почте и социальные сети)

Футер на сайте Uscreen.tv включает в себя несколько типов контента, таких как 1) контент второстепенной задачи 2) служебный контент и 3) ссылки на социальные сети

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

Большинство сайтов имеют тенденцию включать в футер компактное меню, указывающее на:

  • Контактную информацию: адрес компании, номер телефона и ссылка на чат
  • информацию по обслуживанию клиентов
  • политику конфиденциальности
  • условия использования

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

Используйте для: всех сайтов

Футер сайта Clarity Money упрощает задачу, включая ссылки на Условия использования и Политику конфиденциальности, а также ссылки на аккаунты в социальных сетях

J. Crew предоставляет контактную информацию в виде ссылок на свой аккаунт в Twitter для обслуживания клиентов, номер телефона и адрес электронной почты службы поддержки

Doormat Navigation

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

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

United Healthcare использует doormat navigation: основные категории отображаются как в верхней панели навигации (вверху), так и в футере (внизу)

Второстепенные задачи

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

  • подачу заявки на работу в компании
  • задания для создателей контента
  • доступ к информации для инвесторов
  • поиск документации или спецификаций продукта, или услуги
  • доступ к медиа-комплектам и другой PR-информации
  • поиск филиалов компании

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

Используйте для: помощи пользователям в поиске вторичного контента, который может не иметь прямого отношения к основной цели сайта

Например, на веб-сайте Dwell Magazine представлены категории, не относящиеся к темам журнала, в том числе About, Dwell Magazine, Professionals и Merchants, которые могут заинтересовать вторичные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и потенциальных сотрудников).

Футер сайта Dwell Magazine содержит ссылки на второстепенные задачи

Карта сайта

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

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

Компонент футера в виде карты сайта не включает полную карту сайта, если на сайте мало страниц (около 25 или меньше). Более того, футер рискует стать громоздким и сложным в использовании. (В качестве альтернативы вы можете предоставить полнофункциональную карту сайта на отдельной странице и указать ссылку на нее в футере, где пользователи и ожидают найти подобную ссылку).

Используйте для: больших сайтов с несколькими уровнями информации или поддоменов

Футер CNN содержит ссылки на навигацию верхнего уровня и на категории нижнего уровня

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

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

Проведите юзабилити-тесты и A/B тесты со своей аудиторией, чтобы определить, подходит ли эта стратегия для вашего футера, и каково подходящее количество отзывов.

Используется для: стартапов или компаний с меньшей узнаваемостью бренда

Чтобы укрепить свой авторитет, Reykjavik Excursions показывает в своем футере награды и организации, от которых они получили признание

Бренды в организации

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

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

Футер на сайте Walmart перечисляет другие бренды, которыми владеет компания, такие как Hayneedle, Jet и Modcloth

Вовлечение клиентов

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

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

Используйте для: всех типов сайтов при использовании ссылок в социальных сетях; сайтов с большим акцентом на визуальные эффекты или эстетику (искусство, красота) при использовании встроенного виджета фида социальных сетей.

На всех страницах сайта TheGoodTrade.com имеется большой многокомпонентный футер, который включает в себя: 1) предложение подписаться на рассылку, 2) виджет с фидом Instagram аккаунта, 3) ссылки на аккаунты в социальных сетях, 4) ссылки на второстепенные задачи и 5) отказ от ответственности с информацией об авторских правах

Варианты футеров

Бесконечный скролл и мини-футер

Многие сайты, которые поощряют просмотр, выбирают бесконечный скролл, чтобы удерживать пользователей на странице. Содержимое постоянно загружается, поэтому на каждой странице нет единого низа и, следовательно, нет футера. Тем не менее, контент, который был бы в футере (как правило, ссылки для навигации), отображается в виде «мини-футера» справа или в расширенной глобальной навигации.

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

Использовать для: страниц с бесконечным скроллом

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

BarstoolSports.com содержит в глобальной навигации большую часть того, что традиционно отображается в футере. Barstool.com также имеет футер, который смещается при загрузке нового контента. (В большинстве браузеров наведите курсор на видео, чтобы отобразить элементы управления, если они еще не видны)

Контекстные футеры

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

Например, на домашней странице Medium.com нет футера. На странице отображается бесконечно прокручиваемый список статей. (На странице есть мини-футер справа, как рекомендовано выше). Однако на странице отдельной статьи отображается футер на основе задач, которые зависят от того, является ли читатель подписчиком или нет.

Используйте для: сайтов с различными пользовательскими ролями (например, «создатель контента» vs «потребителя контента» или «участник» vs «гость»)

Футер на сайте Medium содержит несколько ссылок на связанные публикации, и подчеркивает преимущества членства в Medium для людей, которые не вошли в аккаунт

Характерные ошибки футера (и их решения)

Футеры прошли долгий путь с 1990-х годов, но по сей день еще встречаются следующие распространенные ошибки:

  • Более двух уровней информационной иерархии Нельзя добавлять всю карту сайта в футер. Футер – это ограниченное количество пространства экрана, которое должно быть посвящено только важной информации. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».
    • РЕШЕНИЕ: Подумайте о перераспределении контента и отображении только ссылок на категории первого и второго уровня, а не на весь сайт. Если отдельная страница нижнего уровня достаточно важна, отобразите эту конкретную ссылку в футере, но вам не нужно показывать все уровни информационной иерархии, чтобы ее можно было обнаружить.
  • Неясные имена ссылок в футере (например, Company Info или Help вместо Contact Us) Пресловутая ссылка «Ресурсы» во многих футерах является одним из прискорбных пережитков прошлого.
    • РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет наиболее подходящим, сортировка карточек или тест юзабилити могут помочь определиться с терминологией.
  • Неясная структура или информационная иерархия Иногда футер может быть «свалкой» для потерянных ссылок, то есть ссылок, которые, по-видимому, не имеют отношения к глобальной навигации или второстепенным задачам. Если у футера отсутствует паттерн организации, пользователям либо придется просматривать все информацию, либо они потратят очень мало времени на его изучение.

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

  • РЕШЕНИЕ: Четко передайте информационную иерархию элементов в футере с помощью группирования или других шаблонов визуального дизайна, которые указывают визуальную иерархию (например, жирные ссылки на страницы верхнего уровня и обычные ссылки на страницы нижнего уровня).

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

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

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

  • РЕШЕНИЕ: используйте разборчивый размер и цвет шрифта (с приличным контрастом) и избегайте использования декоративных шрифтов. Самое главное, не скрывайте футер – люди ожидают его там найти.

Вывод

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

Получите больше советов по созданию более эффективных веб-страниц в нашем курсе Web Page UX Design.

Ресурсы

Jakob Nielsen & Kara Pernice, 2010, Eyetracking Web Usability, The New Riders

Перевод статьи Therese Fessenden

подвал, низ, нижняя часть сайта

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

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

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

Какую роль играет

Footer в веб-разработке играет несколько ролей.

  • Дополнительный источник полезной информации.

  • Красивое и логичное завершение страниц. Без него пользователям казалось бы, что сайт прервался на середине.

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

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

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

Что содержит

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

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

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

  • Ссылки на социальные сети. Они дают пользователям возможность легко и быстро найти вас в соц. сетях.

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

  • Кнопка для заказа обратного звонка. Еще один способ использования футера сайта для получения конверсий. После ознакомления с услугой и прочтения всей информации о ней пользователю предлагается заказать звонок.

  • Кнопка «Вверх». Если человек проскролил страницу до самого конца, он может нажать кнопку «Вверх», чтобы вернуться в ее начало.

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

  • Логотип компании. Используется для красоты, стиля и придания уникальности.

  • Копирайт и годы работы сайта. Эта информация тоже часто размещается именно в подвале сайта.

Как создать хороший футер

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

Ниже описаны некоторые советы и рекомендации по созданию качественного подвала.

  1. Необходимо использовать те же стилевые приемы, что и в других частях сайта.

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

  3. При использовании списков с заголовками последние должны выделяться.

  4. Между отдельными элементами должны соблюдаться границы. Они располагаются на достаточном расстоянии друг от друга.

  5. Используемые шрифты должны сочетаться с общим дизайном сайта.

  6. Между первым элементом и началом блока подвала делается отступ.

  7. Свободное пространство. Данных не должно быть слишком много. Не стоит их лепить друг на друга. Лучше сделать сам подвал больше. Чем больше свободного пространства вокруг элемента, тем лучше он запоминается и больше внимания привлекает.

  8. Самые главные элементы можно сделать ярче. Остальные приглушить. Это позволит сфокусировать внимание посетителей на чем-то конкретном.

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

что это такое, как называется подвал внизу страницы в 2022 году

Статья обновлена 25.07.2022

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

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

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

Анатомия футера

Большинство страниц сайта имеют одинаковую структуру: заголовок — header, тело — body и подвал — footer. Заголовок располагается вверху и обычно содержит логотип и основное меню навигации. Тело — это то место, где отображается содержимое каждой страницы. Наконец, футер всегда расположен внизу каждой страницы, и его наполнение может быть разным в зависимости от целей и задач сайта.

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

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

  1. Техническая — размещение технической информации, необходимой для работы сайта. Примеры — копирайт, авторские права, номера лицензий, соглашение о файлах cookie, название CMS, на которой работает сайт и так далее.
  2. Информационная — размещение информативного и увлекательного контента. Футер может быть последним, что видят посетители перед тем, как покинуть сайт. Хорошо продуманный, целостный футер может мотивировать  посетителя взаимодействовать с сайтом и дальше. Достигнуть этого можно с помощью полезного контента.  Примеры — виджеты погоды, биржевых сводок, калькуляторы, подписка на тематическую рассылку и так далее.
  3. Рекламная — продвижение другого контента сайта. Даже посетители, внимательно прочитавшие все содержание, могут дойти до конца статьи и закрыть эту страницу. Чтобы этого не происходило, можно предложить читателям возможность находить другой привлекательный контент внизу страницы. Это делает футер идеальным местом для того, чтобы побудить посетителей к дальнейшему взаимодействию с сайтом. Примеры — ссылки на статьи связанной тематики, реклама акций и распродаж по теме и так далее.

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

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

Технические параметры футера

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

Футер часто делают таким же по ширине, как и основное содержимое сайта. А вот высота подвала может быть разной – все зависит от выбранного содержания и предполагаемого дизайна. Футер бывает также статическим, то есть отображается одинаково вне зависимости от раздела сайта, и динамическим – когда содержание меняется в зависимости от отображаемой страницы. Как пример, можно назвать призыв к действию по участию в промоакции, который исчезает, когда пользователь уже перешел на нужную страницу.

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

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

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

Почему футер страницы важен

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

Последний шанс

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

Единство восприятия

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

Размещение нужного контента

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

Что включить в футер для сайта

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

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

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

  • Вторичная навигация. Для поддержания вовлеченности посетителей вторичная навигация по сайту является обязательным элементом футера, даже если она дублирует основное меню.
  • Призыв к действию (CTA). Призывы к действию побуждают посетителей предпринять определенные действия после перехода на сайт. В зависимости от характера сайта CTA может содержаться на каждой странице, и это делает футер незаменимым местом для его размещения. Это может быть кнопка для немедленной обратной связи по WhatsApp или по телефону, вызов чат-бота или CTA на промоакцию.
  • Контактные формы и опросы. Контактные формы могут размещаться на любой странице сайта, включая футер. Дать посетителям дополнительную возможность для связи, помимо основной страницы «Контакты», — это всегда удачная идея, способная повысить взаимодействие. Той же цели служат и короткие интерактивные опросы — они помогают поднять вовлеченность и заинтересовать посетителей.
  • Адреса или карты. Если сайт — это виртуальная витрина розничных или оптовых точек, куда нужно направлять посетителей, стоит включить их адреса или карту в футер. Для разных CMS существуют свои виджеты — программные блоки для размещения информации в футере в том числе. Они ответят на вопрос, как сделать эту информацию доступной для всех посетителей сайта.
  • Изображения и медиа-контент. Яркие изображения могут выделить футер, добавив дизайну привлекательные штрихи, и привлечь внимание посетителей. Здесь можно отображать фото различных товаров, которые продаются на сайте, или анонсы статей блога с броскими картинками.
  • Ссылки на аккаунты в социальных сетях. Социальные сети сегодня — важный маркетинговый инструмент для блогеров, владельцев сайтов и маркетологов. Иконки соцсетей, размещенные в футере, поощряют взаимодействие на этих платформах. Кроме того, единый интерфейс подачи информации позволяет визуально объединить их.
  • Подписка на новостную рассылку. Это подвид CTA, который служит для увеличения взаимодействия с целевой аудиторией. В обмен на подписку можно предложить различные бонусы прямо в футере — от прямых скидок до иных стимуляторов лояльности. Включение в базу данных предупредит подписчиков всякий раз, когда на сайте появится новая информация, заслуживающая их внимания. Также к подпискам можно отнести размещение ссылок на ленту RSS, которую ведет компания. Это позволяет привлечь более знающих пользователей и организовать обмен внешними ссылками, что учитывается в общем рейтинге сайта.
  • Популярные сообщения или статьи. После того, как посетитель сайта прочитает определенный материал, лучше предоставить ему возможность найти похожие прямо на сайте. Для таких размещений в футере существуют свои виджеты, которые отображают информацию по заданным критериям — от последних статей до самых популярных по теме. 

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

Закажите презентацию с нашим экспертом. Он просканирует состояние вашего маркетинга, продаж и даст реальные рекомендации по её улучшению и повышению продаж с помощью решений от ROMI center.

Запланировать презентацию сервиса

Попробуйте наши сервисы:

  • Импорт рекламных расходов и доходов с продаж в Google Analytics

    Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

    Попробовать бесплатно

  • Импорт рекламных расходов и доходов с продаж в Яндекс Метрику

    Настройте сквозную аналитику в Яндекс.Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

    Попробовать бесплатно

  • Система сквозной аналитики для вашего бизнеса от ROMI center

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

    Попробовать бесплатно

  • Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

    Подробнее → Попробовать бесплатно

  • Сквозная аналитика для Яндекс.Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

    Подробнее → Попробовать бесплатно

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

    Подробнее → Попробовать бесплатно

Рекомендации по дизайну нижнего колонтитула веб-сайта + 7 реальных примеров

Перейти к содержимому

Свяжитесь с нами

Последнее обновление: 12 августа 2022 г.

Большинство организаций не уделяют особого внимания нижнему колонтитулу своего веб-сайта.

(На протяжении многих лет мы слышали отзывы клиентов из первых рук, которые подтверждают это мнение.)

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

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

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

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

Правильный дизайн нижнего колонтитула веб-сайта может повысить конверсию вашего веб-сайта более чем на 23%, а ваш доход — более чем на 15%.

Все еще чувствуете, что это должно быть задним числом? Я так не думал.

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

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

Уже убедились? Большой. Теперь, когда вы знаете о важности нижнего колонтитула на вашем сайте, давайте поговорим о деталях.

ПОЛУЧИТЕ ТОВАРЫ

Улучшите весь свой веб-сайт с помощью нашего полного контрольного списка по оптимизации веб-сайта.

Глава 1

Анатомия хорошего дизайна нижнего колонтитула веб-сайта

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

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

  1. Не копируйте шапку сайта.
  2. Наполнить, но не перебивать.
  3. Выделите ключевую информацию.
  4. Помогите вашим усилиям по SEO.
  5. Добавьте вторичный призыв к действию.
  6. Продолжайте продвигать бренд.
  7. Завоюйте доверие аудитории.
  8. Не забывайте о юридических вещах.
  9. Включить основные ресурсы.

Давайте углубимся в каждое из этих правил.

1. Не копируйте заголовок своего сайта

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

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

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

Вместо этого найдите способы выделить уникальный контент в нижнем колонтитуле. Какой тип контента? Мы еще вернемся к этому.

2. Заполните, но не лишнего

Источник – intercom.com

На самом деле у вас довольно много места в нижнем колонтитуле. Больше, чем у вас в шапке, и уж точно больше, чем в боковой панели или других графических элементах.

Заманчиво. Вы хотите втиснуть вещи туда. А на самом деле можно многое уместить. Но категорически нельзя переусердствовать.

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

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

3. Выделите ключевую информацию

Источник – amazon.com

Давайте поговорим о том, какой тип информации должен находиться в нижнем колонтитуле. Здесь проще всего следовать простому правилу:

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

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

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

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

4. Содействовать усилиям SEO

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

Это особенно верно для упомянутых выше глубоких ссылок. У вас могут быть страницы в глубине вашего сайта, которые все еще заслуживают внимания поисковой оптимизации (SEO), необходимого им для ваших основных ключевых слов. Нижний колонтитул — это ваша возможность выделить их.

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

5.

Добавьте вторичный призыв к действию Источник – colorpop.com

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

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

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

6. ​​Продолжайте усилия по брендингу

Источник – shantellmartin.art

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

Еще одна идея — тщательно продумать нижний колонтитул с точки зрения дизайна.

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

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

7. Завоюйте доверие аудитории

Источник – goshort.nl

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

Нижний колонтитул веб-сайта — отличное место, чтобы начать укреплять доверие. Здесь вы можете со вкусом выделить свои сертификаты обслуживания, награды за прошлую работу или уведомления о безопасности. Мы даже видели, как некоторые компании включают отзывы со сторонних страниц, таких как Google Business, Yelp и Home Advisor.

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

8. Не забывайте о юридических вопросах

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

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

Конечно, вы можете пойти дальше. Очень важно, особенно когда вы обслуживаете европейскую аудиторию, отметить соответствие требованиям GDPR на видном месте. Американская аудитория, вероятно, хочет знать о вашем соответствии ADA.

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

9. Включите основные ресурсы

Источник — trello.com

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

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

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

Глава 2

Передовой опыт для веб-сайтов B2B и D2C

Хорошо разбираетесь в основах? Большой. Давайте копнем еще глубже. Потому что нижний колонтитул вашего веб-сайта, скорее всего, сильно изменится в зависимости от того, сосредоточены ли вы на бизнесе или на потребителях в качестве основной аудитории.

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

Всегда указывайте информацию о своем физическом местонахождении

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

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

Всегда указывайте свою юридическую информацию

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

Понял основы? Большой. Итак, давайте посмотрим, как может выглядеть дизайн нижнего колонтитула веб-сайта B2B и D2C.

Важнейшие элементы дизайна нижнего колонтитула веб-сайта B2B

Источник — hubspot.com

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

Элементы доверия

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

Выделите ключевые услуги и предложения

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

Основные элементы дизайна нижнего колонтитула веб-сайта D2C

Источник — carbonbeauty.com

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

Выделите категории продуктов

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

Выделите ресурсы, которые ваши клиенты сочтут полезными

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

Получите их электронную почту

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

Для тех, кто не подходит ни под одну категорию

Возможно, вы не совсем работаете с B2B или ориентированы на потребителя и задаетесь вопросом: «А как насчет дизайна моего веб-сайта?».

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

Также подумайте, к какому важному контенту может потребоваться быстрый доступ вашей аудитории.

Глава 3

7 реальных примеров нижних колонтитулов веб-сайтов, которые просто работают

Waldo

Источник – us.hiwaldo.com много.

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

Prima

Источник — prima.co

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

  • Первое, что бросается в глаза посетителю, это тот факт, что он является корпорацией с сертификатом B и активным жертвователем. Это две ключевые части информации, которые, я уверен, оценят их клиенты.
  • Они также делают большую работу, делая себя доступными для своих клиентов, легко позволяя людям получить свою контактную информацию и дополнительную информацию об их продуктах.
  • Их вторичный CTA для присоединения к их новостной рассылке делает четкое предложение о том, почему следует зарегистрироваться (первоначальная скидка 15%).

Protip

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

Valarie

Источник – valaire.mu

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

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

Мэгги Роуз

Источник — rose-maggie.com

Нижний колонтитул Мэгги Роуз — еще один отличный пример того, как действительно нужно думать о дизайне, а не только о полезности, при рассмотрении дизайна нижнего колонтитула веб-сайта.

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

Think Orange

Источник – thinkorange.pt

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

  • Первое, что бросается в глаза, — это четкий призыв к совместной работе.
  • Они делают свое местоположение, номер телефона и адрес электронной почты легкодоступными.

Protip

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

Teem

Источник — teem.com

Teem — отличный пример для SaaS-компаний, стремящихся максимально эффективно использовать дизайн нижнего колонтитула.

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

Asana

Источник — asana.com

Для тех из вас, у кого есть большие сайты, на которых нужно отображать много ссылок, Asana — отличный пример большого количества нижнего колонтитула без ощущения беспорядка. Несмотря на 53 ссылки в нижнем колонтитуле (да, я их посчитал), нижний колонтитул не кажется перегруженным. Для этого нужно сделать несколько вещей.

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

Что вы думаете?

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

Глава 4

Подведение итогов

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

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

Если все сделано правильно, это добавит последние штрихи к веб-сайту. Это дает вашей аудитории важные ответы, повышая конверсию и ценность бренда в процессе.

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

ПОЛУЧИТЕ ТОВАРЫ

Улучшите весь свой веб-сайт с помощью нашего полного контрольного списка по оптимизации веб-сайта.

Познакомьтесь с автором

Джефф Гапински — президент Huemor, где он помогает планировать долгосрочный стратегический рост агентства. Джефф увлечен UI/UX, формированием спроса и цифровой стратегией.