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

Несомненно, некоторые части веб-страницы или мобильного экрана особенно важны и в этом аспекте.

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

Что такое хедер?

Хедер (заголовок) – это верхняя часть страницы. Она определенная является стратегически важной для любого ресурса, т.к. эту часть пользователь видит в первую очередь при заходе на сайт.

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

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

Кроме того, хедер является ключевым элементом навигации всего сайта.

Какие элементы может содержать хедер?

Хедер может включать множество важных элементов ресурса:

• Основные элементы фирменного стиля: логотип, название бренда, слоган, корпоративные цвета и т.д.;
• Текстовый блок, определяющий тему сайта;
• Ссылки на основной контент сайта;
• Ссылки на представительства сайта в социальных сетях;
• Основная контактная информация (телефон, e-mail);
• Переключатель языков сайта;
• Поле поиска по сайту;
• Форма подписки;

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

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

• Название бренда и логотип;
• Меню.

Центральная часть хедера содержит пустое пространство для визуального разделения его левой и правой части.

Вот еще один пример хедера с немного другим подходом к дизайну хедера. На этот раз композиция построена вокруг центра с логотипом и фирменным наименованием.

Почему хедер настолько важен?

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

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

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

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

Таких моделей всего три:

• Диаграмма Гутенберга;
• Z-паттерн;
• F-паттерн.

Диаграмма Гутенберга типична для страниц с шаблонной презентацией и слабой визуальной иерархией.

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

F-паттерн – еще одна модель взаимодействия представленная в исследованиях группы Нильсена Нормана (Nielsen Norman Group) демонстрирует следующее:

• Пользователь в первую очередь читает в горизонтальном направлении верхнюю часть контента;
• После этого взгляд пользователя опускается ниже, и он читает более короткую часть текста;
• Затем взгляд пользователя перемещается вертикально сверху вниз.

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

Это основная причина, по которой дизайн хедера так важен для UI/UX специалистов.

Методы проектирования

Читаемость и визуальная иерархия

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

Гамбургер-меню

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

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

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

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

Фиксированный хедер

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

Двойное меню

Двойное меню в хедере помогает создать два «уровня» навигации.

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

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

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

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