Як розробити ідеальний футер сайту? Детальний посібник з прикладами

Власники веб-сайтів часто не приділяють уваги футеру, думаючи, що він не несе цінності: знаходиться в самому низу, тому не цікавий користувачам. Але це не так. Правильно розроблений підвал з продуманим дизайном, грамотною структурою та необхідним наповненням приверне увагу користувача, затримає його на сайті та скоординує подальші дії. Саме тому ефективність якісно створеного підвалу безперечна.

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

Що таке футер, наскільки він важливий і чому

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

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

Основні переваги нижньої частини сайту

Footer може включати абсолютно будь-яку інформацію, яка може бути цікавою для користувача: від контактних даних до посилань на сторінки з додатковими послугами компанії. Ці елементи приносять низку переваг для бізнесу.

Акцент на важливому

Варто лише почаклувати над оформленням підвалу, як він стане основним акцентом на корисній інформації. За допомогою футера можна докладніше розповісти своєму клієнтові про компанію та її діяльність, запропонувати передплатити розсилку або надати інформацію партнерам за допомогою активного посилання на відповідні сторінки. Підвал спрощує навігацію для користувача, якщо йому необхідно перейти до будь-якого розділу на сайті. Для цього йому достатньо вибрати необхідне посилання наприкінці сайту, не перегортаючи всю сторінку вгору. Тому дарма думати, що нижня частина сайту – марна. Вона обов'язково знайде свого користувача, приверне увагу та утримає на сайті.

Зростання лідогенерації
Футер скаже користувачеві, що кінець сайту зовсім не кінець. Він допоможе утримати споживача, підштовхнути його до подальшої дії: заповнити форму зворотного зв'язку, перейти на сторінку спільноти у соціальних мережах, записати контактні дані чи зареєструватися. Все це впливає на загальну конверсію сайту. Завдяки правильному оформленню підвалу відвідувач може стати клієнтом. Головне, знати, що цікаво для ЦА та що розмістити у цій частині сторінки. Кожна помилка може призвести до зниження лідогенерації та, як наслідок, показника конверсії. Щоб уникнути цього, подивіться які бувають помилки веб-дизайну.

Максимум корисної та важливої інформації
Вся корисна інформація, яка не помістилася в меню або не підходить за своєю специфікою, може бути розміщена у футері. Розкрийте своєму користувачеві юридичну інформацію, залучайте спонсорів та партнерів, надайте корисні посилання для співробітників компанії. Повірте, така інформація не буде втрачена з уваги.

Навігація сайтом

Якщо користувач пішов далеко від хедера (шапки сайту) і наближається до футера, він ще не знайшов те, що йому цікаво і важливо. Значить, все у ваших руках. Розміщення навігаційних посилань спростить вашому потенційному клієнту пошук потрібної інформації та продовжить час користування сайтом.

Максимальне захоплення уваги

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

Що має бути у футері сайту?

Наповнення та оформлення футера підвалу сайту тісно пов'язані. Від того, що буде розміщено у цій частині, залежить дизайн цілого блоку. Елементи наповнення залежать від діяльності компанії та особливостей цільової аудиторії. Ми перерахуємо більшість елементів, які можуть бути розміщені внизу сторінки. Вам залишиться лише вибрати найбільш підхожі у вашому окремому випадку, ґрунтуючись на своєму бізнесі.

Авторські права

Простий спосіб захистити свій контент від розкрадання – це заявити про авторські права. Це означає те, що за крадіжку будь-якого контенту або ідеї/дизайну сайту, той, хто це зробив, може бути притягнутий до відповідальності. Насправді, звичайно, все набагато інакше, так як все одно можуть бути зроблені спроби вкрасти ваш контент.

Щороку необхідно оновлювати цифру за інформацією про авторські права. Це можна робити двома способами: вручну або автоматично, за допомогою простого скрипту в коді.

Нагороди та сертифікати

Будь-яка інформація про сертифікати, нагороди та досягнення стає потужним соціальним доказом, який підвищує довіру користувача до компанії. Тому якщо у вашої компанії є якісь заслуги, обов'язково розкажіть про них у підвалі. Додатковою перевагою стане і те, що оскільки підвал відображається на кожній сторінці, інформація про ваші нагороди обов'язково буде помічена. Якщо у вашої компанії немає будь-яких сертифікатів або нагород, але ви є партнером Google, Samsung, Asus або іншої великої та престижної компанії, то обов'язково вкажіть це у футері.

Карта сайту

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

Футер допоможе проіндексувати всі сторінки сайту за допомогою Sitemap, що дуже добре для його просування.

Політика конфіденційності/умови користування

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

Посилання на сторінку умов користування є обов'язковим, якщо сайт містить контент, заборонений для неповнолітніх. Наприклад, якщо сайт продає алкоголь чи тютюн. Перейшовши на сторінку умов користування, споживач повинен буде з ними ознайомитись та підтвердити, що він повнолітній. Це знімає відповідальність із власника сайту у випадку, якщо користувач не досяг 18 років.

Форма зворотного зв'язку

Не варто упускати можливість утримати клієнта, запропонувавши йому заповнити форму зворотного зв'язку.

Форма зворотного зв'язку допоможе конвертувати користувача клієнта. Вона допомагає відвідувачам ухвалити остаточне рішення про співпрацю, якщо раніше користувач був не впевнений, що готовий до нього. У цьому форма зворотний зв'язок може містити різні заклики до дії. Наприклад, заклик “Залишились питання? Задайте їх нам” дуже непогано працює. Особливо, коли користувач не зміг знайти відповідь на питання, що його цікавить. Розміщення форми зворотного зв'язку у футері – великий та жирний плюс до конверсії сайту.

Безумовно, форма призову має бути у підвалі, а й у головній сторінці, ніж упустити клієнта у той час, коли він бажає виконати дію. Як має виглядати головна сторінка сайту читайте тут.

Контакти компанії

Як правило, контактам компанії присвячений цілий розділ, посилання на який розміщується у меню. Але, щоб спростити користувачеві керування сайтом і не змушувати його перегортати сторінку вгору, коли він знаходиться ближче до кінця, у підвалі також потрібно розмістити контакти. При цьому контакти повинні розміщуватись у мікророзмітці, щоб пошукова система краще розуміла контакти компанії.

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

Корисні посилання на сайт

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

Зараз у тренді розробляти об'ємний футер, який стає додатковим меню, що включає не лише посилання, а й короткий контент. Зазвичай такий підхід використовується у випадках, коли розміщення такого контенту на сторінках є недоцільним через акцент на основну пропозицію. Наприклад, на сторінках інтернет-магазину рідко розміщується інформація про компанію, оскільки вона менш цікава користувачеві, ніж товар, які вона продає. У таких випадках можна тезово розмістити інформацію про компанію у підвалі. Але при цьому важливо стежити за його обсягом, щоб великий шмат тексту не повторювався і не створював повні дублікати сторінок на сайті через те, що футер однаковий на всіх сторінках.

Іконки соціальних мереж

Нижня частина сайту – чудове місце для розміщення іконок соціальних мереж. За традицією їх розміщують саме в цій частині сторінки, щоб утримати увагу користувача на сайті, не даючи можливість швидше піти з нього. Тому, якщо користувача цікавлять спільноти в соц.мережах, вони за звичкою спускаються для входу до них саме на кінець сайту.

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

Посилання на вхід до особистого кабінету

Не всі відвідувачі сайту є клієнтами. Сайт можуть відвідувати партнери та співробітники. Тому розмістити посилання на вхід у особистий кабінет у футері – чудове рішення.

Форма підписки на розсилку

Не завжди передплата на розсилку є основною вимогою від користувачів сайту. Але вона може виступати як додатковий для утримання клієнтів шляхом постійного їх оповіщення актуальною інформацією. У таких випадках у нижньому колонтитулі можна розмістити форму на передплату. Будьте впевнені, що вона обов'язково захопить всіх користувачів, зацікавлених у цьому.

Форма пошуку по сайту

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

Але тут будьте готові до того, що користувачі не звикли шукати форму пошуку у футері. Тому її обов'язково потрібно відокремити та виділити, щоб привернути до неї увагу. Проте такий елемент у підвалі рідко можна зустріти на вітчизняних сайтах. Найчастіше він трапляється на американських ресурсах.

Про компанію

Не завжди є сенс присвячувати цілу сторінку з інформацією про компанію, коли насамперед необхідно просунути свій товар чи послугу. Тому нерідко практикується розміщення короткої інформації про компанію у футері сайту. Тут можна стисло надати найголовнішу інформацію, цінну для користувача. При цьому обсяг інформації не повинен перевищувати 300-500 символів. Писати тексти на 5000 символів і приховувати кнопкою "читати далі" безглуздо, так як футер розміщується на всіх сторінках і буде контент, що дублюється.

Ключові запити

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

Але тут кількістю ключових входжень зловживати не варто – пошукова система Google не додає підвищує ефективність SEO-просування за них. Тому одного-два ключа цілком достатньо, щоб ключові слова виглядали гармонійно із загальним контентом.

Останні оновлення у блозі

Якщо ви ведете блог для привернення додаткової уваги до вашої компанії, то інформацію про оновлений контент можна демонструвати внизу сторінки. Але розміщувати такий блок у цій частині сайту рекомендується лише в тих випадках, коли блог є лише додатковим інструментом та буде цікавим лише невеликій групі вашої ЦА.

За цим принципом можна розміщувати будь-яку інформацію в подібному блоці. Наприклад, посилання на корисні статті.

Оформляючи футер, дуже важливо дати користувачеві можливість доскролити до нього. Дуже часто багато сайтів містять серйозну помилку з точки зору користування - використовують ajax (аякс), який при прогортанні сторінки постійно підвантажує контент. В результаті користувач просто не доходить до футера і він стає марним. Така технологія ефективна, тому що людині не потрібно перезавантажувати сторінки, щоб дізнатися більше, але потрібно давати можливість людині самостійно вирішити, чи хоче вона дивитися контент далі. Тому, оформляючи футер і при цьому використовуючи аякс підвантаження контенту, робіть підвантаження по кліку, щоб споживач міг дійти до кінця сторінки і знайти інформацію, що його цікавить без повернення сторінки нагору.

Заклик до дії

Давайте співпрацювати! Напишіть нам! Залишіть свій номер телефону, і ми передзвонимо протягом 5 хвилин! Простий, але яскравий заклик до дії разом з формою зворотного зв'язку або формою для розсилки, розміщені в підвалі, допоможе підвищити конверсію сайту. Не забувайте, що заклики мають бути зрозумілі та чіткі, щоб користувачеві не довелося думати як зробити дію, яку йому запропоновано.

Мапа

За допомогою розміщеної у футері карти вам вдасться підвищити довіру відвідувачів до вашої компанії. Крім того, ви спростите життя користувачам Google Maps, які хочуть швидко знайти де розміщений ваш офіс.

Розміщуйте робочу картку, якою користувачам буде зручно користуватися. Немає сенсу розміщувати карту Yandex, якщо сайт орієнтований на українських користувачів, тому що сервіс заблокований для України та при завантаженні подібної картки будуть порожнеча. Що, погодьтеся, не солідно.

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

Чого не повинно бути у футері?

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

Не перестарайтеся з SEO-оптимізацією футера. Не забувайте, що пошукова система раз побачить чорне SEO і покарає за це.

І не бійтеся вільного простору. Надмірна кількість посилань зіпсує враження про сайт і ускладнить користувачеві пошук інформації, що його цікавить, що призводить до невдоволення. А якщо ваш користувач незадоволений, він піде до ваших конкурентів навіть не замислюючись.

Як грамотно розробити дизайн підвалу сайту? 5 цінних рекомендацій

Дизайн підвалу сайту та його структура мають бути продумані, щоб цікавити та залучати онлайн-користувача. Як це зробити – читайте 5 цінних рекомендацій.

Використовуйте креативні рішення

Основне тло футера має відрізнятися від загального тла сайту, щоб впадати в очі. Але при цьому він повинен відповідати ідеї дизайну проєкту та гармонійно поєднуватися з нею.

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

Якщо вирішили покреативити, обов'язково зв'яжіть дизайн футера та дизайн сайту за допомогою елементів, які будуть виконані в одному кольорі. Зробіть логічний перехід між передостаннім та останнім блоком, але при цьому не забудьте про акценти на футері. Головне - правильно підберіть кольори, щоб виглядало стильно. В цієї статті ви зможете дізнатися як правильно підбирати кольори для сайту.

Розмістіть анімацію

Анімаційні елементи завжди є цікавими для перегляду. До того ж вони грають на емоції людини, підсвідомо підштовхуючи його на дію. Навіть з невеликою та скромною анімацією дизайн футера перетвориться.

Вибирайте читальні шрифти

Уникайте дрібних шрифтів, навіть якщо інформації надто багато. Краще виключити деякі посилання, які є більш непотрібними. Не примушуйте свого користувача придивлятися до слів, щоб їх прочитати. І обов'язково вибирайте контрастні з фоном кольору, щоб невеликого розміру букви добре виділялися, надаючи зручність для читання.

Використовуйте більше простору

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

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

Організоване, правильне та акуратне розміщення корисних посилань допоможе вам правильно передати інформацію вашому клієнту. А клієнту швидко знайти те, що його цікавить, не копаючись серед безлічі марних посилань. І не забувайте про своїх мобільних користувачів. Обов'язково оптимізуйте футер, щоб він правильно відображався на будь-якому мобільному пристрої.

Розмістіть заклик до дії

Футер - це фінальний акорд сайту, мета якого - утримати користувача на сайті якомога довше. Розміщення заклику до дії стане ще одним шансом збільшити конверсію сайту. Він не лише утримає відвідувача на сторінці ще якийсь час, а й зробить із нього клієнта. СТА у футері – це класика, до якої вдається більшість популярних та успішних сайтів.

Чим відрізняється футер інтернет-магазину від підвалу інших видів сайтів?

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

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

Тут може розміщуватися специфічна інформація: інформація для партнерів та постійних клієнтів, про додаткові послуги компанії (наприклад, інформація про умови кредиту, розстрочки, доставки), посилання на сторінку корпоративного відділу для вирішення індивідуальних питань (зокрема, фінансових питань, питань щодо повернення товару , залагодження спірних ситуацій тощо). Сюди можна додати посилання на сторінки про:

• Вакансіях компанії;
• Контакти менеджерів-консультантів щодо специфічного обладнання, яке продає інтернет-магазин;
• Інформація про знижки для постійних клієнтів, програму лояльності;
• Відомості про варіанти оплати для юридичних та фізичних осіб;
• Адреси сервісних центрів;
• Інформація про співробітництво для партнерів та постачальників;
• Посилання на FAQ;
• Інформація про купівлю подарункових сертифікатів;
• Відомості про компанію, режим роботи офлайн- та онлайн-магазину та багато іншого.

Якщо підсумувати, то підвал інтернет-магазину відрізняється лише своїм наповненням та кількістю корисних посилань. В іншому, вимоги до структури та дизайну ідентичні тим, які виставляються до футерів будь-яких видів сайтів. Головне, щоб підвал був помітний відвідувачем та зручний для його користування.

Приголомшливі приклади оформлення підвалу сайту

Давайте розглянемо приклади підвалів сайтів різних видів діяльності, дизайнів та наповнення. Черпайте ідеї для розробки привабливого та правильного футера для свого сайту :-)

Приклад підвалу сайту №1

Приклад футера, який показує, наскільки мінімалізм у цьому блоці допомагає сконцентрувати увагу на основному: логотипі (бренді) компанії та іконках соціальних мереж. Немає нічого зайвого, виглядає стильно та красиво. Поєднання чорного та білого кольору - класика. А класика ніколи не вийде із тренду.

Приклад №2

Велика кількість корисних посилань + великий негативний простір роблять свою справу: і надають об'ємну інформацію про послуги компанії, і допомагають користувачеві швидко знайти те, що йому цікаво. Футер розбитий на два блоки: важлива інформація, де заголовки до стовпців із посиланнями виділені червоним кольором, та додаткова інформація. Просте, але ефективне рішення, коли необхідно наприкінці сторінки розмістити велику кількість посилань.

Приклад №3

Футер виступає як блок з формою зворотного зв'язку. Невеликий заклик до дії, акуратна форма та оригінальний дизайн привертають увагу та мотивують до дії.

Приклад №4

6 основних посилань на додаткову інформацію, іконки для входу до спільноти соціальних мереж – нічого нового. Але в цьому випадку особливістю футера є інформація про способи оплати. Компанія робить дуже потужний крок, викликаючи у клієнта довіру та підвищуючи його лояльність до неї. Логотипи банківських систем у футері підвищують зручність користування сайтом та оплати. А зручні способи оплати для клієнта – це ще один плюс до підвищення конверсії сайту.

Приклад №5

У цьому прикладі футер є завершальним етапом для клієнта – його дією. Для цього розроблені необхідні маркетингові та технічні елементи: є заклик до дії, кнопка заповнення особистих даних, а також функція переходу для перегляду презентації компанії. Як додаткова інформація представлені активні посилання на соцмережі та контактні дані компанії, якщо клієнту зручніше зв'язатися з нею самостійно або відвідати офіс особисто.

Приклад №6

У цьому прикладі футера акцент йде контакти з компанією. Додатковим інструментом для утримання відвідувача на сайті є активна кнопка для завантаження брифу. Оригінальний дизайн та багато вільного фону утримують та концентрують увагу на головному.

Приклад №7

Приклад типового футера для інтернет-магазину, де розміщено велику кількість посилань на різні сторінки сайту. Тут користувач зможе знайти додаткову інформацію про компанію, магазини та послуги. Завдяки правильній структурі підвалу велика кількість посилань виглядає органічно – тут легко знайти те, що потрібно. Подібні ідеї повинні заздалегідь опрацьовуватися СЕОшником та вноситись до ТЗ на створення сайту. Це робиться для того, щоб не пропустити частину важливої інформації, надавши її кінцевим споживачам.

А ви вже знаєте, яким буде ваш футер сайту?

Розглянувши всі переваги та цінності підвалу сайту, його важко назвати марним. І хоч цей блок завершує сторінку і знаходиться у самому низу, він рідко залишається непоміченим. Тому кожен власник сайту має приділити особливу увагу для розробки футера. Подумайте, які посилання вам необхідно розмістити в цьому блоці, яку структуру та дизайн краще підібрати, щоб у комплексі нижній колонтитул виглядав не лише ергономічно та стильно, але й приносив користь – затримував відвідувача сайту на ньому. Ми показали вам велику кількість прикладів популярних сайтів, навели кілька важливих рекомендацій. Вам лише залишається, орієнтуючись на бізнес та ЦА, розробити свій ефективний підвал для сайту. А якщо ваш проект тільки в розробці, рекомендуємо прочитати статтю, яким має бути ефективний бізнес сайт.

Сподобалася стаття? Тисніть палець вгору та підписуйтесь на наш блог!