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

что такое подвал сайта, примеры меню-футера

Обучение в IMBA

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

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

Что обычно размещают в футере

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

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

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

Также сюда хорошо вписываются ссылки на дочерние проекты бизнеса.

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

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

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

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

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

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

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

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

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

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

Какие правила оформления футера

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

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

2. структурированное содержание

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

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

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

Синонимы:

Все термины на букву «Ф»

Все термины

Рекомендуемые программы обучения

Веб-дизайн

Записи вебинаров по теме Дизайн

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

25 декабря 2020 110 мин.

показать еще

Остались вопросы? Ответим!

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

Что такое футер сайта? Элементы, которые обязательно должны быть в подвале сайта ✔️ Блог 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 — это функциональный блок внизу сайта, содержащий полезную информацию. Здесь собраны важные ссылки на разделы, которые люди возможно нигде не нашли. Также футер сайта дает информацию поисковым роботам при сканировании ресурса.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глава 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Помощь в SEO-оптимизации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глава 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глава 3

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

Waldo

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

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

Prima

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

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

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

Protip

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

Valarie

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

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

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

Мэгги Роуз

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

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

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

Think Orange

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

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

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

Protip

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

Teem

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

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

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

Asana

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

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

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

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

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

Глава 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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