Дизайн Ян Австрейх
4611

Ссылки на соцсети, карта сайта, контакты и награды: что добавить в футер сайта, чтобы не перегрузить его

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

В закладки
Аудио

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

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

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

Как используют футеры

Чаще всего пользователи обращаются к футерам в двух ситуациях:

1. Пользователь не нашёл нужную информацию на странице и спустился до футера

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

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

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

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

Футер не главная вещь на сайте, но Тереза Фессенден советует разработать для него хороший дизайн. Она пишет:

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

Это полезное дополнение: футеры могут помочь, но не навредить.

По мнению автора, футер должен:

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

Элементы футера

Наиболее распространённые компоненты футера:

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

Полезные ссылки

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

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

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

Где использовать полезные ссылки: на любом сайте.

В футере сайта Clarity Money есть ссылки на условия использования, политику конфиденциальности и аккаунты в социальных сетях
Футер сайта J.Crew содержит контактную информацию: ссылку на аккаунт службы поддержки в Twitter, электронную почту и телефонный номер

Список основных разделов

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

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

Где использовать список основных разделов: в длинных сайтах.

На сайте United Healthcare список основных разделов находится как в верхней панели навигации, так и в футере

Дополнительная информация

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

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

Подобной информации обычно нет в основных разделах сайта и среди полезных ссылок.

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

Футер сайта Dwell Magazine содержит информацию, которая не относится к тематике журнала: «Об организации», «Сотрудничество» и «Купить или продать».

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

Футер Dwell Magazine содержит ссылки с дополнительной информацией, которая не относится к статьям

Карта сайта

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

  • показать информацию, которой нет на главной странице;
  • показать, какой основной контент есть на сайте;
  • напомнить пользователю о предложениях компании.

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

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

Где использовать карту сайта в футере: на больших сайтах со сложной структурой данных, для которой нужны подразделы.

Футер сайта CNN показывает главные разделы сайта и подразделы

Отзывы и награды

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

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

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

Где использовать отзывы и награды: на сайтах стартапов и малоизвестных компаний.

В футере Reykjavik Excursions подобраны награды и одобрения, полученные компанией от разных комиссий

Дочерние компании

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

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

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

Футер Wallmart называет пользователю бренды, принадлежащие компании: Hayneedle, Jet и Modcloth

Контакт с пользователем

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

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

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

Где использовать ссылки на соцсети: на любых сайтах.

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

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

Вариации футеров

Бесконечная подгрузка контента и мини-футеры

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

Многие коммерческие и развлекательные сайты устроены так, чтобы пользователь оставался на странице — контент на ней бесконечно подгружается по мере пролистывания вниз. Из-за этого ни у одной из страниц нет «дна» с футером.

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

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

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

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

Контекстные футеры

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

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

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

Футер сайта Medium рассказывает о преимуществах сообщества журнала для пользователей, которые ещё не создали аккаунт

Ошибки при разработке футеров и как их избежать

Лишняя информация

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

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

Непонятные названия ссылок

По тексту ссылки не всегда понятно, куда она ведёт. Ссылка «Ресурсы» во многих современных футерах — неудачный пережиток прошлого.

Как избежать: нужно выражаться максимально чётко и нейтрально. Названия «О компании« или «Помощь» понятнее, чем «Обратная связь». Если есть сомнения в формулировках, нужно провести юзабилити-тестирование и узнать, какие слова могут быть непонятны.

Непонятная организация данных

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

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

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

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

Спрятанные или неразборчивые футеры

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

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

На сайте Reserved в ранней версии футер был свёрнут по умолчанию, что затрудняло его поиск
Нажатие кнопки Expand раскрывало футер

Как избежать: не нужно перекрывать или прятать футер. Необходимо использовать подходящий размер и цвет шрифта (не слишком яркий и не слишком блёклый) и избегать декоративных шрифтов.

#юзабилити

{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438"], "comments": 11, "likes": 29, "favorites": 189, "is_advertisement": false, "subsite_label": "design", "id": 75209, "is_wide": true, "is_ugc": true, "date": "Tue, 16 Jul 2019 12:11:14 +0300" }
{"average":26034,"one":95,"ten":75}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 75209, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/75209\/get","add":"\/comments\/75209\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/75209"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
11 комментариев

Популярные

По порядку

Написать комментарий...
3

Твою мать. После каждого абзаца интуитивно думал что дочитал статью до конца.

Ответить
2

Люблю футеры)
Всегда фигачу на пол-экрана))

Ответить
0

И правильно делаешь. Там хоть можно найти, что полезное в итоге

Ответить
0

Надо попробовать) Всегда делал максимум на треть

Ответить
0

Можно посмотреть примеры?

Ответить
–5

можно было бы рассказать сначала что такое футер

Ответить
5

Относитесь ли вы к тем, для кого написана эта статья?

Ответить
5

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

Ответить
1

В первом абзаце

Ответить
1

Спасибо! Было познавательно.

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }