Автор: Therese Fessenden

Оригинал: https://www.nngroup.com/articles/footers/

Что нужно знать о футерах?

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

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

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

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

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

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

1. Пользователь просмотрел страницу и либо не нашел нужной информации, либо хочет узнать больше. Он прокручивает страницу до футера, чтобы:
a. Развеять свои сомнения
Пример на сайте банка: пользовательница, внимательно изучив все условия, решила не открывать счет, однако банк произвел на неё положительное впечатление и она, возможно, заинтересована в других предложениях. Информация в футере может утвердить её намерение и направить по верному пути.
b. Сделать последнюю попытку найти нужные данные
Иногда пользователи ищут в футере те страницы, которых нет в навигации на первых экранах. Например, если посетитель хочет устроиться на работу в интернет-магазине, он вряд ли найдет пункт «Вакансии» будет в основном меню. В таком случае он может обратиться к футеру за нужной информацией

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

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

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

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

• Служебные / полезные ссылки
• Навигация
• Второстепенные ссылки
• Карта сайта
• Награды / подтверждения квалификации
• Подконтрольные бренды
• Ссылки на социальные сети и форма подписки на новости

Большинство сайтов включают в футер минимально необходимую служебную навигацию:

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

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

Рекомендация относится ко всем сайтам.

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

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

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

• Форма подачи заявления на работу в компании
• Информация для блогеров
• Информация для инвесторов
• Документация и/или спецификация товара/услуги
• Медиа-киты и контакты PR-службы
• Информация для потенциальных партнеров

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

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

Например, сайт журнала Dwell Magazine имеет в футере такие (не связанные с тематикой журнала) категории как «О нас», «Dwell Magazine», «Соискателям», «Распространителям». Эти разделы могут заинтересовать «второстепенные» группы пользователей, такие как: профессионалы в поиске работы, распространители журналов, инвесторы, рекламодатели.

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

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

Карта сайта в футере не отражает полную структуру сайта (за исключением случаев, когда количество страниц на сайте – 25 или менее). В противном случае футер будет неэффективным. Если наличие полной карты сайта критично, можно создать её на отдельной странице, а ссылку разместить в футере.

Рекомендация относится к большим сайтам с многоуровневой структурой страниц и поддоменов.

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

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

Рекомендация относится к сайтам стартапов и компаний со слабым авторитетом.

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

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

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

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

Рекомендация относится ко всем типам сайтов, особенно если сделан акцент на визуальной и/или эстетической составляющей (творческая сфера, индустрия красоты, стиль жизни).

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

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

Рекомендация относится к сайтам, использующим бесконечную прокрутку

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

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

Рекомендация относится к сайтам с разными ролями пользователей (например, создатели контента, потребители контента, подписчики и т.д.)

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

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

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

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

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

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

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

Текст в футере должен быть читабельным (обратите внимание на начертание, размер, цвет и контрастность). Футер НИКОГДА не должен быть скрытым!

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