10 идей оформления футера для сайта eCommerce
Опубликовано: 01.09.2018
Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce — завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, кретива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.
Building Dynamic Web Apps with Laravel by Eric Ouyang
Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.
Время просмотра (сек.) / Расстояние от верха страницы (пиксели)
Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.
Доля посетителей (%) / Расстояние от верха страницы (пиксели)
Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).
Исследование развеивает миф о том, что пользователи не прокручивают страницу до самого низа и не смотрят весь контент. Футер eCommerce сайта, такая же важная его часть, как и все остальные. Есть и свои преимущества.
Идеи как оформить «подвал» (футер), примеры продающих дизайнов
Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.
1. Необходимая информация
Традиционно, в футере сайта освещаются требуемые организационно-правовые вопросы. Уведомления оформляются менее заметным текстом, что освобождает другие области страниц для более значимых элементов. Вот примерный список для рассмотрения:
Отметки о копирайте Правовые оговорки Биллинговая информация Уведомление об использовании файлов cookieВеб-сайту реализующему товар, нужно удовлетворять правовым требованиям и предоставлять информацию о порядке, сроках возврата. Расположение ее в футере, удобно как продающему ресурсу, так и посетителям.
Пример footer’a: Ив Роше
Интернет-магазин торговой марки Ив Роше: футер во весь экран с приятным дизайном из чередующихся слоев. Информирует о компании, инфраструктуре продающего сайта – от отслеживания заказа, до политики персональных данных. Тут же советы по использованию продукта, бонусы, акции.
Пример footer’a: Lumity
На торговцев пищевыми добавками возлагается повышенная юр. ответственность. Есть немало вещей о которых они должны/не должны сказать на своем продающем сайте. Ссылки на правовую информацию тут выделены жирным для лучшей заметности.
Футер с красивым бэкграунд изображением очень органично вписывается в общий дизайн сайта. Нет четкой границы, скорее разделителем служит сам контент.
Пример footer’a: Saddleback Leather Co
Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается.
2. Негативное пространство – достаточность визуальной дистанции
Ограничивая число футерных линков не поскупитесь на отрицательное пространство – это окажет потрясающий эффект на визуальное восприятие и улучшит читаемость. Общее правило: при соблюдении визуальной иерархии, центральные элементы замечаются быстрее (можно использовать с выгодой!).
Пример footer’a: QUAY AUSTRALIA
С минималистичным стилем и фиксированным выпадающем меню, интернет-магазин может себе позволить просторный футер.
Пример footer’a: Incase
О большом количестве микро-негативного пространства (между мелкими элементами) можно сказать так: пока вся необходимая информация присутствует, она разборчива и быстро воспринимаема – все нормально.
Пример footer’a: Stumptown Coffee Roasters
Просторный футер кофейного сайта — отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями).
3. Завершающий призыв к действию
Стильное оформление футера красноречиво говорит о самом ресурсе. Важно заметить: покупатель задерживается здесь чуть дольше, чем в остальных частях страницы. Удобным случай для еще одного, завершающего призыва к действию . Часто это подписка/рассылка, но можно связать СТА-призыв и с регистрацией аккаунта.
Пример footer’a: Greetabl
У Greetabl скромно оформленная нижняя часть страниц, включает призыв к подписке. При минимуме элементов призыв становится заметным, а гармонируя с бирюзовым фоном превращается в украшение сайта.
Пример footer’a: Ecwid
Приятное оформление с призывами к действию в нижней части страниц. Структура конструктора продающих сайтов универсальна. Для миллиона своих клиентов он переведен на 35 языков.
4. Плавающая корзина – повышение доступности продающего функционала
Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.
Пример footer’a: Lemonadela
Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя.
5. Навигация в футере
Нижняя часть сайта идеально подходит для не часто просматриваемой информации: о компании, условиях предоставления услуг и политики конфиденциальности. В этом случае функция футера – всех спасти. Чувствуя себя потерянным в eCommerce среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…
Негативное пространство необходимо для читабельности контента. Вообще, «подвал» не для навигационных целей, в отличии от меню или карты сайта. Лишь в редких случаях, сайты электронной коммерции размещают в футере отдельные категории товаров ( пример1 , пример2 ). Дополнительные линки вносят беспорядок, уменьшают силу фокуса внимания. Общепринято группировать контент футера по типу в столбцы, чтобы не жертвовать согласованностью, итак достаточно разобщенных данных.
Пример footer’a: Мini + Мe
При минимуме разделов, можно добавлять интересные опции, например «Подарочный сертификат». Футер не загроможден, а упорядоченный контент легко сканируется взглядом. Основатель интернет-магазина отмечает: «Этот редизайн решил первоначальную задачу — увеличение продаж и конверсии».
Пример footer’a: Amuse Society
Минималистичное оформление со столбцами из 4-5 ссылок. Липкое меню в хедере избавляет от необходимости что-либо дублировать. Центр отведен под призыв, совмещенный с формой регистрации.
6. Иконки соцсетей
Подобно завершающему страницу СТА-призыву , ссылки на соцсети в подвале веб-сайта дают последний шанс обратиться к своему потребителю и заполучить больше фолловеров. Мода на социальные иконки внизу страницы так укоренилась, что ищущие их посетители сразу направляются к футеру. Также, красивые соц.значки разбавляют унылость монотонных текстов.
Пример footer’a: Vissla
Визуальная выраженность футера на сайте подчеркнута логотипом. Добавление ссылок на важные страницы совмещено с еще большим акцентом на минимализме . Ряд значков соцсетей гармонично вписан в этот стиль.
Пример footer’a: Shadeonme.com
Под социальные иконки и призыв с выгодой их использовать выделен отдельный слой. Оранжевый для значков взят из палитры сайта (дополняющий цвет), зеленый как побуждающий к дальнейшим действиям (используется для поиска, корзины, кнопок с призывом). Это сочетание освежающих цветов.
7. SEO-ссылки только из футера главной страницы
В былое время SEO-эффекта добивались сбором сквозных бэклинков из футеров сайтов. Могло выглядеть так . Гугл иногда сбивает с толку, напоминая о своем отношении к ссылкам в принципе. Официально признано: в шапке и подвале ссылки менее значимы, чем размещенные по тексту. Также, предлагается использовать для внешних (исходящих) ссылок тег «nofollow».
Исследование от Creative California показывает, что футерные ссылки способны улучшать ранжирование страниц, хотя сегодня хороши они лишь с главной страницы. Онлайн-магазин mandco.com вообще минимизирует футер на всех страницах кроме главной, сворачивая в панель:
8. Создайте визуальную иерархию
Footer для сайта – не самая низкая ступень в его визуальной организации. Лучше представьте «подвал» отдельной структурой со своей иерархией.
Для начала, определите что необходимо включить: навигационные ссылки, правовые оговорки, призыв, иконки соцсетей, платежных систем и т.д. Ввиду различной значимости, все это лучше разнести по секциям с применением правил визуальной иерархии.
Пример footer’a: The Pixel
Пример footer’a: World Seasonings 
Актуальные варианты визуального оформления футера:
Слои (под-уровни) — Наиболее фундаментальный способ создания визуальной иерархии – разделить на горизонтальные уровни Цвето-различие в текстах или бэкграунде — Предполагается сочетаемость оттенков. Например, отличаете цветом ссылки от правовой информации. Аналогичный способ – создать слои с другим фоном Типографика — Еще один способ обособить элементы. К примеру, шрифтом выделить ссылки относительно СТА-призыва. Тут размер особенно эффективен и утончением можно минимизировать какую-то часть футера Чередование колонок и рядов — Упорядочивание подвала сайта делает его визуально интереснее. Для навигационных ссылок подходят колонки, для иконок соц.медиа и правых оговорок ряды. Тут можно экспериментироватьПример футера: Julia Janus
Настоящее произведение искусства, в котором задействованы все рассмотренные методы. Контрастный слой определяя верхнюю границу футера, включает иконки соцсетей и призыв к регистрации. Контрастная типографика (по размеру, начертанию, стилю и цвету шрифта) разграничивает ссылки и минимизирует визуально менее значимое в структуре футера. Чередуя ряды, колонки и добавив лого бренда, дизайнер усилил визуальный эффект.
9. Гармоничное сочетание футера с хедером
Красиво смотрятся дизайны, в которых «подвал» выполнен в едином стиле с шапкой сайта. Еще неплохо, когда футером поддерживается создаваемое выше настроение. Дизайном…либо изображением береговой линии в фоне — как у Lumity . В этом обзоре, многие из Е-коммерческих ресурсов могут послужить хорошим примером.
Пример footer’a: Marie Sixtine
Утонченный стильный ecommerce дизайн: футер на весь экран выглядит органично благодаря липкому меню с выпадающими списками и контурной графике
Пример footer’a: Love41
Это дочерняя компания, рассмотренного Saddleback Leather Co. Оба сайта красиво оформлены под старину, а их футеры дополняют дизайн шапки.
10. Красивые эффекты, графика и занимательная анимация
Крутая графика и анимации воодушевляют многих. Это не означает: «Перетягиваем внимание на нижнюю часть сайта». Стильным футером можно повысить общую привлекательность сайта. Дизайнам в светлых тонах легкие эффекты придадут особый шик:
Пример footer’a: San Lorenzo Bikinis
Эффекты в дизайне подвала, соответствуя эстетике электронного-магазина, сделали его более стильным.
Пример footer’a: Jenier World of Teas
Логотип в шапке и графическое оформление верхнего края футера оживляют продающий дизайн. Смелый цветовой контраст для конверсионных элементов. С каруселью категорий (листаем курсором) и фиксированным выпадающим меню, нижняя часть сайта заточена под продажи не хуже остальных.
Пример footer’a: Solid & Striped
Сдержанная hover-анимация с эффектом постепенного угасания. Заметьте – экономится пространство.
Идеальный футер интернет-магазина
Вендор Hypergrand сосредотачивается в оформлении на главном и достаточно функциональный футер не перетягивает на себя внимание.
Пример футера: Hypergrand
Ссылки на основные категории отделены линиями от группирующих заголовков и нижней части футера (с соц.значками и правовой информацией). Строчными буквами тут выделен призыв к подписке. Отлично подобран фон, контрастный к текстам и черной CTA-кнопке, а также цвет заливки кнопки и подсветки ссылок.
VeriSign логотипы смотрятся как всплеск красок. При центральном расположении контрастных иконок, негативное пространство добавляет визуального веса. Копирайт-информация верно включена в самый конец.
P.S.
Не смотря на свое нижнее расположение, подвал сайта (footer) выполняет важную роль связывающего звена. Может не каждому он интересен в данный момент, но рано или поздно пользователь обращает внимание на нижнюю часть сайта. Грамотно оформленный футер, оказавшись комфортным для потребителя, может спасти E-commerce ресурс от отказа.