Основы нижнего колонтитула

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

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

Термин «нижний колонтитул» пришел из мира печати, в котором «нижний колонтитул» — это постоянный элемент дизайна, который можно увидеть на всех страницах документа. Однако, как мы объясняли 20 лет назад, разница между печатным дизайном и веб-дизайном заключается в том, что такие элементы дизайна, как нижние колонтитулы, меняют свое значение (в данном случае становясь действенными), когда они переносятся из печатной версии в онлайн.

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

Люди используют нижние колонтитулы

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

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

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

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

Элементы нижнего колонтитула

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

• Служебные ссылки
• Навигация половика
• Ссылки на второстепенные задачи
• Карта сайта
• Отзывы или награды
• Бренды внутри организации
• Взаимодействие с клиентами (рассылки по электронной почте и социальные сети)

Ссылки на утилиты

Большинство сайтов, как минимум, имеют служебную навигацию в нижнем колонтитуле, указывающую на:

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

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

Использовать для: всех сайтов

Навигация по коврику

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

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

Второстепенные задачи

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

• подача заявки на работу в компанию
• задачи для создателей контента
• доступ к информации об инвесторе
• поиск документации или спецификаций продукта или услуги
• доступ к медиа-китам и другой PR-информации
• поиск филиалов компании

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

Использование: помощь пользователям в поиске второстепенного контента, который может не иметь прямого отношения к основной цели сайта.

Например, на веб-сайте журнала Dwell Magazine представлены категории, не относящиеся к тематике журнала, в том числе « О журнале», «Журнал Dwell», «Профессионалы» и « Продавцы », которые могут заинтересовать его второстепенные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и потенциальных сотрудников).

Карта сайта

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

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

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

Использование для: больших сайтов с несколькими уровнями информации или поддоменами

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

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

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

Использование для:стартапов или для компаний с меньшей узнаваемостью бренда

Бренды внутри организации

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

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

Привлечения клиентов

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

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

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

Вариации нижних колонтитулов

Бесконечная прокрутка и мини-нижний колонтитул

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

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

Использование для: страниц с бесконечной прокруткой

Контекстные нижние колонтитулы

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

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

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

Распространенные ошибки в нижнем колонтитуле (и решения)

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

• Более двух уровней информационной иерархии
  Особенно для больших сайтов, включая всю карту сайта, это не ответ на ваш нижний колонтитул. Нижний колонтитул — это выделенный объем недвижимости, который должен быть посвящен только важной информации, которую можно обнаружить. Как однажды метко выразилась моя мама: «Если все важно, ничто не важно».
• РЕШЕНИЕ. Рассмотрите возможность изменения приоритетов контента и отображения ссылок только на категории первого и второго уровня в вашем IA, а не на весь сайт. Если одна страница более низкого уровня достаточно важна, отобразите эту конкретную ссылку в нижнем колонтитуле, но вам не нужно показывать все уровни информационной иерархии, чтобы сделать ее доступной для обнаружения.
• Непонятные названия ссылок в нижнем колонтитуле (например , «Информация о компании» или « Помощь » или « Свяжитесь с нами» )
  . Пресловутая ссылка « Ресурсы » во многих нижних колонтитулах является одним из неудачных пережитков прошлых нижних колонтитулов.
• РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких терминов. Если команда не уверена, какой термин будет более подходящим, сортировка карточек или тест на удобство использования могут помочь пролить свет на термины, которые могут запутать пользователей.
• Неясная структура или информационная иерархия
  . Нижний колонтитул иногда может быть «свалкой» для потерянных ссылок — то есть ссылок, которые, кажется, не имеют отношения к глобальной навигации или второстепенным задачам. Если нижний колонтитул не имеет шаблона организации, пользователи либо сделают исчерпывающий обзор , либо потратят очень мало времени на просмотр нижнего колонтитула.Нижний колонтитул GM не имеет четкой структуры из-за отсутствия информационной иерархии. Эта настройка затрудняет сканирование или поиск содержимого.
• РЕШЕНИЕ. Четко передайте информационную иерархию элементов нижнего колонтитула, используя группировку или другие шаблоны визуального дизайна, указывающие на визуальную иерархию (например, выделенные полужирным шрифтом ссылки на страницы высокого уровня и ссылки на страницы нижнего уровня с нормальным весом).
• Скрытые или неразборчивые нижние колонтитулы
  Иногда компании предпочитают использовать крошечный размер шрифта для ссылок в нижнем колонтитуле, чтобы разместить все ссылки или сделать ссылки менее отвлекающими. Хуже того, некоторые сайты могут использовать анимацию или функцию аккордеона, чтобы полностью скрыть нижний колонтитул в эстетических целях. Хотя нижний колонтитул не является основной навигацией, люди по-прежнему используют его и полагаются на него, поэтому не пытайтесь его скрыть.В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая по умолчанию была свернута, что затрудняло поиск ее содержимого. В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая по умолчанию была свернута, что затрудняло поиск ее содержимого.
• РЕШЕНИЕ. Используйте разборчивый размер шрифта и цвет шрифта (с достойным контрастом ) и избегайте использования декоративных шрифтов. Самое главное, не скрывайте и не сворачивайте нижний колонтитул — люди ожидают, что он там будет.

Вывод

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