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