Что такое футер сайта и советы по его оформлению

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

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

Что такое футер?

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

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

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

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

Основные преимущества оформления подвала сайта

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

1. Возможность привлечь внимание к важным деталям

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

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

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

2. Увеличение количества лидов

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

3. Последний шанс удержать пользователя

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

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

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

Что находится в подвале веб-страницы сайта?

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

Базовые элементы для футера

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

1. Контакты

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

2. Карта веб-сайта

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

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

раздел → подраздел → товар

или

блог → раздел блога → статья

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

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

3. Правовые документы: политика конфиденциальности и согласие на обработку персональных данных

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

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

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

4. Кликабельные иконки соцсетей компании

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

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

5. Форма обратной связи, подписки на рассылку

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

6. Логотип

Размещение этого элемента в подвале сайта усилит индивидуальность бренда и его узнаваемость. Поэтому лого актуально как в шапке, так и в футере. Дополнительно под ним можно разместить пару слов о миссии, особенность компании, уникальное торговое предложение (УТП).

Логотип делают кликабельным. Переход чаще всего – на главную страницу, но иногда и на другие разделы (например, «О компании»).

7. О компании

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

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

8. Кнопка «Вверх»

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

Эта небольшая деталь должна быть:

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

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

9. Кнопки мессенджеров

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

10. Призыв к действию (СТА)

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

11. Авторское право

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

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

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

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

Чего не должно быть в футере?

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

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

Важно! Не бойтесь свободного пространства в футере. Здесь должен быть баланс пользы и читабельности, чтобы не испортить впечатление от всего сайта.

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

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

Подбор оптимального фона

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

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

Анимационные элементы

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

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

Важность шрифтов

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

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

Оставляем «воздух» в дизайне

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

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

И снова – о призыве к действию

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

Дизайн СТА в футере – броский, но ненавязчивый. Не карта сайта и не контакты эффективно помогают повысить конверсию, а именно грамотно сформулированный и оформленный дизайн Call-to-Action. Этот прием проверен временем, и многие ведущие компании используют его у себя на веб-ресурсах, поэтому не стоит пренебрегать им.

Ключевые отличия футера интернет-магазина

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

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

Примеры оформления подвала сайта

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

Пример 1: Агентство интернет-рекламы WEDEX

В футере есть:

• логотип, улучшающий узнаваемость в долгосрочной перспективе;
• оценка работы (звездочки), рассчитанная на основе полученных отзывов от клиентов и придающая вес результатам работы сотрудников агентства;
• кликабельные иконки на популярные соцсети: TikTok, Facebook и Instagram, канал на YouTube; следует отметить, что все они активны, пополняются актуальной информацией, интересными и полезными для целевой аудитории видео и постами;
• карта сайта, ссылки с которой ведут на все основные разделы;
• Privacy Policy (политика конфиденциальности);
• кликабельный номер телефона и понятный призыв к действию на яркой желтой кнопке;
• кликабельные иконки мессенджеров для возможности быстрой переписки;
• кнопка «Вверх» для еще большего комфорта использования ресурса;
• авторское право – ©.

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

Пример 2: Оптовый склад детских игрушек toysi

Сайт с товарами отличается от предыдущего. Здесь в дизайне футера мы сначала видим важную информацию об отсутствии возможности физически попасть на склад игрушек, правовые документы. Ниже – номера телефонов (для клиента удобно, что указано три оператора), адрес, иконки социальных сетей (Facebook, Instagram и YouTube канал), мессенджеры (Viber, Telegram). Завершает подвал сайта указанное авторское право, запрещающее копирование контента в коммерческих целях.

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

Пример 3: Пиццерия PIZZA DAY

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

Пример 4: Салон красоты Milton

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

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

Пример 5: Адвокатское объединение «Защита»

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

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

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

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

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

Александр Романенко

Team Lead/Senior SEO-специалист

Страница автора