Что такое футер сайта: Назначение Header и Footer

Что такое футер сайта

Что такое футер сайта

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

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

Назначение футера

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

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

Далее мы разберем составные части футера и критерии хорошего подвала сайта.

Футер Кактуса: пользовательский глаз подмечает здесь много полезной информации

Читайте также: Азбука e-commerce: интерфейс интернет-магазина

Какие элементы может содержать футер сайта

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

Однако почти во всех футерах есть следующее.

Разделы сайта

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

Благодаря этому можно увидеть и оценить «снизу» меню ресурса и прямо из подвала перейти в нужный раздел.
Обратите внимание: столбцы озаглавлены. Вы можете изучить продукты Кактуса и посмотреть документацию

Контакты

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

Заглавие столбца настраивает на деловой лад и сообщает пользователям о двух типах связи

Читайте также: Азбука E-Commerce: меню сайта

Форма обратной связи / форма подписки на рассылку / лид-магнит

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

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

Здесь это форма с призывом подписаться на рассылку

Карта с меткой офиса компании, адрес склада или филиала

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

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

По карте можно понять, где именно находится компания или ее точка продаж и как до нее добраться

Политика конфиденциальности и пользовательское соглашение

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

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

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

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

У «Кактуса» есть социальные сети во «ВКонтакте», Facebook, Instagram и YouTube

Варианты оплаты

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

Например, у «Читай-города» это Visa, «МИР» и Mastercard

Читайте также: Азбука E-Commerce: платежная система

Ссылки на мобильные приложения сайта или сервиса

Если у интернет-магазина или маркетплейса есть приложение в Google Play или AppStore, это обязательно нужно отразить в подвале:

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

Резюме: критерии хорошего футера для сайта

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

2. Понятность. Не стоит превращать подвал в «портянку» текста: сделайте здесь заголовки, списки, графические элементы.

3. «Воздух». Блоки футера должны быть отделены друг от друга границами, пустым пространством, визуально. Идеальной будет верстка по колонкам.

4. Стилистическая и типографическая унификация. Футер визуально не должен отличаться от страниц сайта по внешнему виду и шрифтовому оформлению.

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

6. Одинаковость для любой страница сайта.

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

7. Отделенность. Футер всегда должен быть распознаваем как отдельная от всего остального контента часть.

Что такое футер сайта? Элементы, которые обязательно должны быть в подвале сайта ✔️ Блог Webpromo

09.02.2023

Оля Сомова

---

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

Содержание:

1. Что такое футер? Определение понятия
2. Какие элементы должны находиться в подвале сайта?
3. Дополнительные элементы в футере
4. Как оформить подвал сайта?
5. Резюмируем

---

Читайте также: ТОП-10 трендов UX/UI, которые будут популярны в 2023 году

---

 

Что такое футер? Определение понятия

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

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

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

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

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

 

Какие элементы должны быть в подвале сайта? 

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

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

Мы предлагаем список базовых элементов в футере сайта: 

1. Контактная информация. Укажите рабочий адрес электронной почты, номер телефона, кликабельные кнопки мессенджеров.

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

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

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

Школа Hillel

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

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

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

7. Логотип в футере сайта усиливает индивидуальность бренда. Можете по-другому оформить лого в подвале — изменить размер шрифта, прикрепить под ним миссию и ценность бренда. Например школа английского языка English Prime дополнительно указала направление деятельности и локацию офиса. Нажав на лого, вы попадаете в раздел «О нас».

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

 

---

Читайте также: Топ-10 фишек, с помощью которых Google «полюбит» ваш сайт

---

 

Дополнительные элементы в футере     

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

 

• Ссылку на «запасной» сайт, либо дополнительные локализованные старицы. Элемент поможет ориентироваться клиенту в случае проблем с основным сайтом.
• Выбор языка. Кнопка чаще расположена вверху страницы, но можно продублировать ее в подвале сайта.  
• Ссылка на скачивание мобильного приложения, если оно есть. Можно отдельно дать ссылки под каждую операционную систему, например App Store или Google Pay. Пользователь сразу переходит в магазин приложений.  

Сайт OLX

• Ссылки на условия сотрудничества с рекламодателями, страницу с вакансиями. Интернет-магазин люксовой одежды, обуви и аксессуаров Symbol указывает отдельный e-mail для связи.

 

 

Как оформить подвал сайта?

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

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

---

Читайте также: Из чего состоит лендинг пейдж? Базовая структура посадочной страницы с высокой конверсией

---

 

Резюмируем

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

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

Веб-дизайн 101: руководство по нижним колонтитулам веб-сайтов

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

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

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

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

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

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

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

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

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

Зарегистрироваться

Каковы преимущества добавления нижнего колонтитула на ваши веб-страницы?

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

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

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

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

Элементы нижнего колонтитула сайта

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

В любой нижний колонтитул необходимо включить следующие элементы:

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

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

• Логотип вашего веб-сайта: Логотип вашего веб-сайта, скорее всего, будет виден в верхней части страницы или в заголовке вашего веб-сайта. Однако некоторые веб-сайты также включают уменьшенную или масштабированную версию своего логотипа в нижнем колонтитуле веб-сайта. Использование уменьшенной или увеличенной версии логотипа в нижнем колонтитуле — еще один способ повысить общую узнаваемость вашего бренда в Интернете.
• Контактная информация: Другой популярный блок контента, который часто включается в нижний колонтитул веб-сайта, включает блок контактной информации. Если вы хотите предоставить номер телефона и физический адрес своим онлайн-посетителям, или если вы хотите предоставить адрес электронной почты, ссылку на чат в реальном времени или ссылку на систему поддержки билетов, вы можете легко сделать это в нижнем колонтитуле вашего веб-сайта.
• Формы подписки на рассылку новостей: Также можно реализовать собственную форму подписки на рассылку новостей или текстовое поле электронной почты, используя нижний колонтитул вашего веб-сайта. Если у вас возникли трудности с мотивацией пользователей подписаться на вашу рассылку новостей через социальные сети или блог вашего веб-сайта, размещение поля регистрации в нижнем колонтитуле каждой страницы вашего веб-сайта может значительно увеличить общую вовлеченность, которую получает окно подписки на рассылку новостей.
• Кнопки социальных сетей: Если вы широко представлены на многочисленных платформах социальных сетей, вы также можете интегрировать значки социальных сетей в нижний колонтитул вашего веб-сайта. Добавление значков социальных сетей в нижний колонтитул любого веб-сайта поможет увеличить общее количество подписчиков на этих отдельных платформах. Кроме того, значки социальных сетей в нижнем колонтитуле веб-сайта также могут помочь повысить общую поисковую оптимизацию или поисковую оптимизацию и ранжирование веб-сайта в ведущих современных поисковых системах.

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

• Скопируйте и вставьте: Если вы хотите добавить простой символ авторского права с названием торговой марки вашего веб-сайта или доменным именем, вы можете сделать это, скопировав и вставив символ ‘©’.

• Ввод символа авторского права: Если вы предпочитаете набирать символ авторского права самостоятельно, вы можете сделать это, нажав и удерживая кнопку «ALT» на клавиатуре при вводе «0169», после чего вы получите символ «©». символ.

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

  .

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

Настройка содержимого нижнего колонтитула

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

Если вы создаете новую кампанию по электронной почте с использованием Mailchimp, вы можете начать настраивать содержимое нижнего колонтитула электронной почты, выполнив следующие шаги:

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

• Пользовательский код: Вы можете добавить собственный HTML-код для форматирования нижнего колонтитула каждой отдельной электронной рассылки и/или кампании, которую вы запускаете по своему усмотрению. Пример HTML-кода, который можно сгенерировать с помощью Mailchimp, будет включать ссылку для отказа от подписки, предпочитаемый год авторского права, значок реферала, сведения об адресе, а также ссылки для обновления вашего профиля или пересылки электронной почты другу.

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

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

1. Войдите в свою учетную запись Mailchimp и запустите кампанию по электронной почте, которую вы хотите отредактировать.
2. Выберите ссылку «Аудитория» на главной панели навигации вашей кампании.
3. Выберите «Панель управления аудиторией», чтобы загрузить дополнительную информацию о вашей текущей аудитории.
4. Выберите «Управление аудиторией», а затем «Настройки»
5. Нажмите «Необходимое содержимое нижнего колонтитула электронной почты», чтобы открыть меню для всего необходимого содержимого нижнего колонтитула электронной почты.
6. Отметьте или снимите отметку с содержимого, которое требуется для всех нижних колонтитулов вашей кампании по электронной почте. Когда вы закончите, прокрутите меню вниз и выберите «Сохранить». Затем вы сможете обновить и просмотреть изменения в нижнем колонтитуле вашей кампании.

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

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

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

Зарегистрироваться

Анатомия веб-сайта: нижние колонтитулы веб-сайта

Определение нижнего колонтитула веб-сайта

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

Правильный нижний колонтитул сайта имеет большое значение!

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

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

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

Что должно быть в нижнем колонтитуле веб-сайта

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

• Юридический контент, который может включать: информацию об авторских правах, отказ от ответственности, политику конфиденциальности, условия или условия использования или условия обслуживания — всегда обращайтесь за соответствующей консультацией по легальному контенту и где его разместить!
• Карта вашего сайта
• Контактная информация, включая ссылки на социальные сети и доступ к чату или чат-боту информация об отзыве продукции.
• Сведения о доступности веб-сайта и способах оставить отзыв 
• Контент типа «О нас», который может включать: историю компании, информацию о команде или руководстве, страницу вакансий и многое другое 
• Ключевые навигационные ссылки, которые также отображаются в главном меню навигации, которое отображается для посетителей веб-сайта при первом посещении страницы (например, вверху или сбоку)

Примеры нижнего колонтитула веб-сайта

реальные примеры футеров сайта.

IKEA US

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

Нижний колонтитул домашней страницы IKEA в США (по состоянию на май 2019 г.)

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

Нижний колонтитул веб-сайта ИКЕА в США, как он отображается на целевой странице категории товаров «Текстиль и ковры» (по состоянию на май 2019 г.).

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

Нижний колонтитул веб-сайта ИКЕА в США, как он отображается на странице продукта для коврика для ванной (по состоянию на май 2019 г. ).

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

M.A.C Cosmetics US

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

Нижний колонтитул веб-сайта MAC Cosmetics в США, состоящий из трех частей, как он выглядит на главной странице на первый взгляд (по состоянию на май 2019 г. ).

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

Нижний колонтитул веб-сайта MAC Cosmetics в США, как он отображается на главной странице со всеми четырьмя видимыми частями (по состоянию на май 2019 г. ).

Domino’s Pizza US

Веб-сайт Domino’s Pizza в США имеет относительно плоский нижний колонтитул с точки зрения архитектуры, но он занимает столько же места, сколько и более сложный или глубокий нижний колонтитул. Как показано на изображении ниже, его ссылки на содержимое представлены горизонтально в трех рядах с левой стороны нижнего колонтитула, и эти ссылки визуально разделены косой чертой. Он также отображает ссылки на социальные сети и некоторый рекламный контент с правой стороны. Самая интересная особенность этого нижнего колонтитула — большой абзац текста под названием «Юридическая информация» под ссылками. Восхитительно, он использует прямой, ясный и простой язык и даже включает примечание о стоимости доставки, не включая чаевые, и «Пожалуйста, вознаградите своего водителя за крутизну».

Нижний колонтитул веб-сайта Domino’s Pizza в США, как он отображается на главной странице (по состоянию на май 2019 г.).

Как протестировать веб-сайт f o oter

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

Тестировать нижний колонтитул довольно просто, и нет правильного или неправильного подхода — это действительно зависит от того, где вы находитесь в своем проекте, от доступных вам ресурсов, а также от размера и сложности самого нижнего колонтитула!

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

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

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