Hi-Tech

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

Конспект материала Терезы Фессенден из 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 раскрывало футер

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

#юзабилити

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»