Организация хедера: как спроектировать удобную навигацию внутри сайта

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

Что должно отображаться в хедере?

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

2. Пункты меню – это основные разделы сайта, доступ к которым должен быть упрощен. Обычно их стараются делать не более 7 в одном ряду, тк все мы помним закон Миллера: магическое число 7, которое может легко воспринимать и удерживать в памяти рядовой пользователь.

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

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

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

Как организовать хедер?

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

Самое важное правило, которое работает в организации хедера – это правило близости или внутреннего и внешнего.

Пример

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

Теперь же сгруппируем элементы по логике, поработаем над отступами, как профи:

Теперь пользователь видит при беглом взгляде ЯВНЫЕ три логические группы

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

1) лого компании

2) пункты меню

3) целевые действия

Теперь не нужно гадать, где искать нужную информацию.

Какие бывают хедеры?

Новичкам я советую взять за основу несколько типовых вариантов расположения хедеров:

Первый вариант

Это тот, что был рассмотрен на примере выше, когда логотип находится стандартно в левом верхнем углу, а СТА – в правом. Когда элементы в шапке расположены таким способом, ошибиться в навигации пользователю будет очень сложно.

Второй вариант

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

Вариант, когда в хедере присутствует и поиск, и контакты, и соцсети

Простой вариант, когда кроме лого и пунктов меню ничего нет. Главное – проверь, что все элементы симметричны относительно логотипа.

Третий вариант

Самый простой вариант: делим все элементы на 2 части: лого и не лого, располагаем каждую группу по углам.

Четвертый вариант

Или самый сложный: допустим, когда элементов ТАК много, что в одну строку уже не помещается.

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

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

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

Ну и на последок – очередная группировка. Когда делала варианты, поняла, что принцип "разделяй и властвуй" очень подходит для организации сложных меню. Главное – визуально разделить группы, а как ты их придумаешь сочетать друг с другом – уже не так важно.

Какие размеры допустимы?

Самая частая ошибка – когда новичок страдает гигантизмом. И использует щедро размеры в 2-3, а то и 4 раза крупнее необходимого.

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

Стандарты размеров:

1. Пункты меню: 16px - 22px. Не стоит делать их крупнее. Отдай предпочтение воздуху и выдели лучше заголовок.

2. Высота хедера: 50-100px. Старайся работать в этих рамках. Не нужно делать его больше – на маленьких экранах он займет треть экрана и будет выглядеть несуразно. А если сделать меньше – пользователям придется вглядываться, что не очень комфортно.

3. Размер целевой кнопки: 30-60px.

4. Размер иконок поиска / соцсетей и тд: не переусердствуй, главное изучать, как выглядит иконка в окружении соседей. Достигнут ли баланс? Чаще всего иконки не бывают крупнее 36px

Вот и все, правил не так много:

1. Изучай референсы!

2. Разделяй и властвуй (помни про правило внешнего и внутреннего)

3. Проверяй, как выглядит хедер при 100% масштабе экрана