Всем известно, что второго шанса, чтобы создать первое впечатление о сайте не бывает. В сфере цифровых продуктов эта вечная правда работает в условиях высокой конкуренции и невероятного разнообразия направлений дизайна.
Несомненно, некоторые части веб-страницы или мобильного экрана особенно важны и в этом аспекте.
В этой статье обсудим одну из самых значимых и важных частей любого веб-сайта, а именно, его хедер. Давайте рассмотрим немного ближе, каковы функции хедера сайта, а также рекомендации по его созданию.
Содержание
Что такое хедер?
Хедер (заголовок) – это верхняя часть страницы. Она определенная является стратегически важной для любого ресурса, т.к. эту часть пользователь видит в первую очередь при заходе на сайт.
Являясь в какой-то мере приглашением, хедер должен предоставлять основную информацию о сайте, чтобы пользователь сразу понимал, что за ресурс перед ним.
В плане дизайна, хедер является частью, создающей обширную область для творческих решений, которые должны быть запоминающимися, краткими и полезными.
Кроме того, хедер является ключевым элементом навигации всего сайта.
Какие элементы может содержать хедер?
Хедер может включать множество важных элементов ресурса:
- Основные элементы фирменного стиля: логотип, название бренда, слоган, корпоративные цвета и т.д.;
- Текстовый блок, определяющий тему сайта;
- Ссылки на основной контент сайта;
- Ссылки на представительства сайта в социальных сетях;
- Основная контактная информация (телефон, e-mail);
- Переключатель языков сайта;
- Поле поиска по сайту;
- Форма подписки;
Это не означает, что все из перечисленных элементов должны обязательно присутствовать в заголовке сайта: в таком случае риск перегруженности сайта сильно возрастет. В каждом отдельном случае должно быть принято решение относительно самых значимых частей хедера, которые должны присутствовать.
В примере выше рассмотрен сайт студии дизайна интерьеров. Верхняя часть сайт спроектирована так, чтобы быть на виду у пользователя даже при скроллинге. Он содержит две части:
- Название бренда и логотип;
- Меню.
Центральная часть хедера содержит пустое пространство для визуального разделения его левой и правой части.
Вот еще один пример хедера с немного другим подходом к дизайну хедера. На этот раз композиция построена вокруг центра с логотипом и фирменным наименованием.
Почему хедер настолько важен?
Существует несколько причин, почему хедер – жизненно важный элемент дизайн для многих сайтов.
Первая причина основывается на моделях чтения и восприятия контента, которые демонстрируют, как пользователь взаимодействует с сайтом в течение первых секунд посещения.
Когда люди посещают веб-сайт, особенно в первый раз, они не изучают все на странице тщательно и подробно: они просматривают его, чтобы найти что-то, что привлечет их внимание и убедит их потратить некоторое время на изучение сайта.
Различные эксперименты, собирающие данные по отслеживанию перемещения взгляда пользователя, показали, что существует несколько типичных моделей, по которым посетители обычно просматривают веб-сайт.
Таких моделей всего три:
- Диаграмма Гутенберга;
- Z-паттерн;
- F-паттерн.
Диаграмма Гутенберга типична для страниц с шаблонной презентацией и слабой визуальной иерархией.
Z-паттерн характерен для страниц с визуально отделенными друг от друга текстовыми блоками.
F-паттерн – еще одна модель взаимодействия представленная в исследованиях группы Нильсена Нормана (Nielsen Norman Group) демонстрирует следующее:
- Пользователь в первую очередь читает в горизонтальном направлении верхнюю часть контента;
- После этого взгляд пользователя опускается ниже, и он читает более короткую часть текста;
- Затем взгляд пользователя перемещается вертикально сверху вниз.
Все приведенные модели объединяет одно – взгляд пользователя в первую очередь «сканирует» верхнюю горизонтальную часть контента. Использование этого факта в стратегии дизайна позволит показать пользователю самую важную, ключевую информацию.
Это основная причина, по которой дизайн хедера так важен для UI/UX специалистов.
Методы проектирования
Читаемость и визуальная иерархия
Выбор шрифтов для заголовков и цвет фона должен проходить очень строгие исследования и тестирование, поскольку аспект читаемости в заголовке играет жизненно важную роль. Пользователь должен иметь возможность сканировать и воспринимать эту базовую информацию как можно быстрее без каких-либо дополнительных усилий. В противном случае вы рискуете предоставить недружественный интерфейс.
Гамбургер-меню
Гамбургер-меню – еще одно довольно популярное решение для дизайна функциональности хедера.
Эта кнопка обычно помещается в заголовок, и в настоящее время это типичный элемент взаимодействия. Большинство пользователей, которые регулярно посещают и используют веб-сайты, знают, что эта кнопка скрывает основные категории данных, поэтому этот трюк не требует дополнительных объяснений и подсказок.
Гамбургер-меню освобождает пространство, делая интерфейс более минималистичным и свободным, а также сохраняет место для других важных элементов макета. Эта технология проектирования также дает дополнительные преимущества для адаптивного дизайна, скрывающего навигационные элементы и делая интерфейс гармоничным на разных устройствах.
Представленная концепция веб-дизайна показывает версию меню гамбургеров. Поскольку меню веб-сайта содержит много позиций, дизайнер использует эту технику, помещая кнопку гамбургера в область начального взаимодействия — верхний левый угол. Это позволяет создать заголовок, поддерживающий общий минималистичный стиль веб-сайта.
Фиксированный хедер
Представляет собой еще одну тенденцию, способную повысить удобство использования. Фактически, он позволяет предоставлять пользователям зону навигации, доступную в любой точке взаимодействия, что может быть полезно с точки зрения содержания страниц с длинным скроллингом.
Двойное меню
Двойное меню в хедере помогает создать два «уровня» навигации.
Как вы можете видеть, на веб-сайте также используется фикированный заголовок, который состоит из двух уровней навигации.
В верхнем меню отображаются ссылки на социальные сети, логотип, поиск, корзина покупок и кнопка гамбургера, скрывающая расширенное меню.
Вторая линия навигации обеспечивает мгновенное подключение к основным областям взаимодействия: каталог продуктов, местоположение точек продаж, новости и специальные предложения, информацию об услуге и разделе контактов.
Визуальная иерархия делает все элементы понятными и легко читаемыми, обеспечивая прочную основу для положительного пользовательского опыта.