eCommerce дизайн: Идеальный футер [digital note for ecommerce #50]

Если обувь завершает образ, то футер завершает дизайн.

Статистика это подтверждает. В ходе исследования Chartbeat, была собрана информация с 25 миллионов случайных сессий и найден ответ на важнейший вопрос: “как далеко вы можете пойти?”. Результаты были достаточно интересными:

• Пользователи проводят больше времени ниже линии сгиба, а не выше ее. Учитывая то, что обычно наиболее важная информация расположена под линией сгиба, посетители проводят больше времени просматривая содержимое, которое расположено на 1200 px ниже.

• Существует также большой промежуток времени между просмотром первого и второго экрана. На верх страницы приходится только 4 секунды, при прокрутке на 1200 px - 16 секунд, далее время сокращается.

• Значительная часть посетителей (около 25%) не станут дожидаться загрузки первого экрана, а сразу начнут прокручивать страницу.

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

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

1. Правильное количество навигации

Футер - идеальное место для добавления элементов навигации на менее посещаемые страницы (информация о компании, условия предоставления услуг и конфиденциальности). Он выполняет функцию “подстраховки”. Если пользователь потерялся на странице, то футер - последний шанс реабилитироваться.

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

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

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

2. Достаточно свободного пространства

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

(Общее правило таково: чем больше свободного пространства вокруг объекта, тем с большей вероятностью он будет замечен).

3. Финальный призыв к действию

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

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

4. Важная, но неинтересная информация

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

А мелкий шрифт помогает и вовсе остаться незамеченным. Это также сохраняет пространство для более важных элементов.

Вот краткий список пунктов, которые могут быть размещены в футере:

• информация об авторских правах,
• правовые оговорки,
• логотипы кредитных систем,
• уведомления куки,
• вход для сотрудников.

О последних двух стоит поговорить подробнее. Во-первых, если вы уведомляете пользователей об использовании куки (а согласно законодательству ЕС вы обязаны это делать), делайте это внизу экрана, а не вверху. Так будет менее навязчиво.

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

5. Иконки социальных сетей

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

Обычно отображаются в виде значков. Это сокращает место и упрощает восприятие, а также разбавляет монотонность.

6. SEO ссылки только в футере домашней страницы

Бытует мнение, что футер это место для кучи seo ссылок. Однако это справедливо только для домашней страницы.

Компания Google пытается и вовсе отговорить от использования ссылок в футере. Они признают, что такие ссылки имеют значительно меньший вес, чем контентные.

7. Иерархия в футере

Не думайте о футере, как о нижней ступени в иерархии. Воспринимайте его как отдельную систему.

Для выделения структуры есть несколько способов:

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

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

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

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

На примере показаны все вышеперечисленные способы.

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

8. Забавная анимация и графика

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

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

Идеальный футер интернет-магазина

Приведем пример как визуально, так и функционально правильного футера.

Навигационные ссылки разделены на два столбца. Отличное дополнение - линии, которые отделяют название категории. Третья колонка полностью посвящена подписке на рассылку. Цветом отделены фон и кнопка.

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

Заключение

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

eCommerce Design: How to Design the Perfect Page Footer