Header and footer: зачем нужны и как создать

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

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

Header

В макете веб-страницы header или шапка — это верхняя часть веб-страницы.

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

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

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

Модель Гутенберга

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

Z-паттерн

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

F-паттерн

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

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

Footer

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

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

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

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

Header

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

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

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

Другой популярный вариант — это фиксированная шапка или «липкий» header.

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

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

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

Footer

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

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

Призыв к действию (CTA) помогает направить посетителей к наиболее важной задаче или бизнес-цели. Дизайн footer обычно двухцветный, чаще всего черно-белый, что обеспечивает идеальный фон для яркого CTA, который будет выделяться и привлекать внимание людей.

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

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

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

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

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