Как правильно проектировать хедер сайта?
Веб-дизайн 0 Комментариев

Как правильно проектировать хедер сайта?

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

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

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

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

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

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

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

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

хедер сайта

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

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

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

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

хедер сайта

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

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

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

хедер сайта

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

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

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

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

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

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

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

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

хедер сайта

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

хедер сайта

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

хедер сайта

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

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

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

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

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

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

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

хедер сайта

хедер сайта

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

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

хедер сайта

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

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

хедер сайта

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

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

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

хедер сайта

Двойное меню.

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

хедер сайта

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

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

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий