Футер сайта: что должно быть в подвале

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

Ключевые элементы и связи показаны в единой схеме.

Коротко: принцип и границы

Рабочий принцип: полезность footer = завершённые вторичные сценарии ÷ посетители, дошедшие до нижней части страницы.

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

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

Оглавление

• Собрать задачи футера
• Разделить ссылки по группам
• Добавить контакты
• Разместить юридическую информацию
• Выбрать финальное действие
• Спроектировать мобильную версию
• Проверить семантику
• Контролировать актуальность
• Измерить использование

Собрать задачи футера

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

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

Практические действия:

• описать пользовательскую задачу для этапа «собрать задачи футера».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Разделить ссылки по группам

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

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

Практические действия:

• описать пользовательскую задачу для этапа «разделить ссылки по группам».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Разделить ссылки по группам» по теме «футер сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Добавить контакты

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

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

Практические действия:

• описать пользовательскую задачу для этапа «добавить контакты».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Процесс ведёт от пользовательской задачи к макету и реализации.

Разместить юридическую информацию

Реквизиты, политика обработки данных, согласия и условия находятся по постоянным понятным URL.

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

Практические действия:

• описать пользовательскую задачу для этапа «разместить юридическую информацию».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Разместить юридическую информацию» по теме «футер сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Выбрать финальное действие

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

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

Практические действия:

• описать пользовательскую задачу для этапа «выбрать финальное действие».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Спроектировать мобильную версию

Колонки складываются в ясный порядок, ссылки не становятся слишком плотными, а контакты остаются видимыми.

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

Практические действия:

• описать пользовательскую задачу для этапа «спроектировать мобильную версию».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

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

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

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

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

Практические действия:

• описать пользовательскую задачу для этапа «проверить семантику».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Проверить семантику» по теме «футер сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Контролировать актуальность

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

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

Практические действия:

• описать пользовательскую задачу для этапа «контролировать актуальность».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Измерить использование

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

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

Практические действия:

• описать пользовательскую задачу для этапа «измерить использование».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Измерить использование» по теме «футер сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Как внедрить решение на сайте

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

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

Материалы по теме:

• как создать прототип сайта
• как оформить кейсы на сайте
• как проверить адаптивную вёрстку

Частые вопросы

Зачем прорабатывать футер сайта отдельно?

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

Что обязательно передать разработчику?

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

Как проверить решение на мобильном устройстве?

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

Какая ошибка встречается чаще всего?

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

Вывод

Футер, или подвал сайта, закрывает вторичные сценарии: помогает найти контакты, документы, разделы каталога, реквизиты и способы связи после просмотра страницы. Его задача — не повторить весь header, а дать понятную точку завершения и страховочную навигацию. Состав футера зависит от типа бизнеса и юридических требований. Для темы «футер сайта» надёжный результат получается, когда пользовательская задача, содержание, интерактивные состояния, мобильная версия, доступность и техническая реализация рассматриваются вместе. Зафиксируйте правило «футер сайта» в дизайн-системе и ТЗ, проверьте его на тестовой странице и назначьте владельца актуальности после запуска.