Многие не уделяют футеру должного внимания, именно поэтому пользователи его не замечают. Если все сделать правильно, то можно улучшить пользовательский опыт и показатели по сайту в целом.
Если обувь завершает образ, то футер завершает дизайн.
Статистика это подтверждает. В ходе исследования Chartbeat, была собрана информация с 25 миллионов случайных сессий и найден ответ на важнейший вопрос: “как далеко вы можете пойти?”. Результаты были достаточно интересными:
Этого достаточно, чтобы развеять прежние убеждения о том, что никто не досматривает страницу до конца и чем ниже расположен контент, тем меньше его видят. Поэтому футер является равнозначной частью страницы и иногда может больше, чем другие части экрана.
Дальше расскажем о 8 приемах, которые помогут превратить нижнюю часть вашей страницы в наиболее значимую. Следуйте этим советам в интернет-магазине, улучшайте пользовательский опыт и повышайте продажи.
Футер - идеальное место для добавления элементов навигации на менее посещаемые страницы (информация о компании, условия предоставления услуг и конфиденциальности). Он выполняет функцию “подстраховки”. Если пользователь потерялся на странице, то футер - последний шанс реабилитироваться.
Не нужно захламлять его. Оставьте достаточно свободного пространства, чтобы обеспечить читабельность. Ссылки на каждый вид продукта перегрузят восприятие и пользователи запутаются, а не найдут выход, как должно быть. Кроме того, они обычно доступны в основном меню навигации.
Но даже без категории продуктов, остается еще большое количество ссылок. Поэтому лучше их сгруппировать в колонки: о покупке, о компании, об условиях оплаты и т.п. Так в них будет легче ориентироваться.
На примере выше, информация сгруппирована в колонки. Футер лишь дополняет основное меню. Также стоит отметить и другие важные элементы: призыв к действию, информация об авторских правах, иконки социальных сетей. Об этом мы поговорим далее.
Свободное пространство творит чудеса: улучшает читабельность, повышает скорость восприятия информации, не говоря уже о преимуществах визуальной иерархии, которая помогает расставить акценты.
(Общее правило таково: чем больше свободного пространства вокруг объекта, тем с большей вероятностью он будет замечен).
Футер подчеркивает всю страницу. Это заключительный этап, на котором пользователь задерживается лишь на секунду дольше. И это шанс для последнего призыва к действию. Может быть как предложение подписаться на рассылку, так и зарегистрировать аккаунт.
В этом примере, компания минимизировала информацию в футере, но сделала акцент на призыв к действию (даже вынесли его за пределы голубого фона).
Традиционно, футер был местом, куда располагали всю важную, но не желаемую информацию, например, законодательные требования.
А мелкий шрифт помогает и вовсе остаться незамеченным. Это также сохраняет пространство для более важных элементов.
Вот краткий список пунктов, которые могут быть размещены в футере:
О последних двух стоит поговорить подробнее. Во-первых, если вы уведомляете пользователей об использовании куки (а согласно законодательству ЕС вы обязаны это делать), делайте это внизу экрана, а не вверху. Так будет менее навязчиво.
Во-вторых, если нужно сделать отдельное место авторизации для сотрудников, футер будет идеальным вариантом. Если сайт создается для клиентов, а не персонала, то авторизация для сотрудников будет сбивать с толку и занимать ценное пространство. Для последних это также удобно.
Футер, это последний шанс использовать призыв к действию, а также пригласить в свои сообщества в социальных сетях. Это стало настолько привычным, что пользователи сразу переходят в футер, если хотят посетить социальную группу.
Обычно отображаются в виде значков. Это сокращает место и упрощает восприятие, а также разбавляет монотонность.
Бытует мнение, что футер это место для кучи seo ссылок. Однако это справедливо только для домашней страницы.
Компания Google пытается и вовсе отговорить от использования ссылок в футере. Они признают, что такие ссылки имеют значительно меньший вес, чем контентные.
Не думайте о футере, как о нижней ступени в иерархии. Воспринимайте его как отдельную систему.
Для выделения структуры есть несколько способов:
Слои. Самый фундаментальный способ выделить горизонтальные слои, которые в свою очередь могут быть разделены средствами, описанными далее.
Цвета. Цвет текста и фона демонстрирует отношения. Разные цвета могут быть использованы в отдельных группах навигации, слои также могут быть с разным фоном.
Типографика. Распространенный способ отделить элементы в футере. Большую роль играет размер текста, который может сделать некоторый текст практически незаметным.
Дополнительные строки и столбцы. Делают футер визуально привлекательным. Навигационные ссылки лучше располагать в столбцах, в то время как социальные кнопки в строках.
На примере показаны все вышеперечисленные способы.
Чтобы создать слои, использовали разный фон. Таким образом выделили социальные кнопки и форму подписки. Типографика разделяет навигационные ссылки. Наличие логотипа и столбцов делает футер нескучным. Информация о куки - в самом низу.
И наконец, больше внимания можно привлечь, используя анимацию и графику. Это улучшит вид не только футера, но и страницы в целом.
Такой прием конечно подойдет не для каждого сайта и может увеличить скорость загрузки. Но при некоторых условиях добавит изюминку вашему проекту.
Приведем пример как визуально, так и функционально правильного футера.
Навигационные ссылки разделены на два столбца. Отличное дополнение - линии, которые отделяют название категории. Третья колонка полностью посвящена подписке на рассылку. Цветом отделены фон и кнопка.
Расположение социальных кнопок в центре с использованием свободного пространства добавляет им ценности.
Несмотря на расположение в самом низу, футер играет важную роль в восприятии сайта в целом. Пользователи не будут обращать на него внимание, если он плохо разработан. Если же все сделано верно, он будет задерживать пользователей на странице и сокращать отказы.