Хедер или боковая панель? Простое руководство по дизайну навигации

UX/UI-дизайн 19 сент. 2022 г.

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

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

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

Но как вы можете гарантировать, что ваша навигация отвечает этим требованиям?

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

Результаты этого исследования могут помочь вам сделать правильный выбор.

Какую навигацию легче сканировать?

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

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

Экономия места

«Мне нужно пространство» — не просто фраза в нашей реальности. Если вы посмотрите на обычный экран ноутбука или стационарного компьютера и сравните долю, которую занимают разные компоненты навигации, то обязательно заметите, что навигация по левой стороне зачастую занимает в 3, а то и в 4 раза больше места, чем верхняя.

Кроме того, давайте добавим зарезервированное пространство для поиска или других элементов, таких как уведомления или информация о профиле. Довольно много, не так ли? Неприятно осознавать, что левый сайдбар запросто может занимать до 25% места на странице.

Как думаете, это повлияло бы это на ваше взаимодействие с продуктом? Вам было бы  непривычно? Думаю, ответ ясен.

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

Масштаб

По мере роста продукта возникает потребность в масштабируемости. Что это значит для дизайнеров? Что нам нужно предсказывать будущее.

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

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

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

Боковая панель = настраиваемая навигация

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

Во-первых, он гораздо более масштабируем, чем другие варианты. А настраиваемые и изменяемые меню на самом деле очень распространены. Взглянем, например, на Slack, Outlook, Drive и Confluence.

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

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

Согласованность с рабочим столом

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


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

Подменю, открывающееся при наведении

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

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

Мега-меню

Еще один вариант решения, который стоит рассмотреть.

Мега-меню — это раскрываемое меню, где широкий выбор опций представлен двумерной выпадающей вниз структурой.

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

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

Пример мега-меню | Сайт 1place

Провальный переход на боковую навигацию

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

Прекрасным примером этого является переход Jira Cloud с верхней навигации на боковое меню. Событие вызвало сильную негативную реакцию пользователей: более 95% первых тестировщиков предпочли старую схему верхней навигации. Jira извлекла урок из этой ошибки и с тех пор вернулась к исходной схеме навигации.

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

Отзывчивый дизайн

У обеих версий навигации есть свои плюсы и минусы — все зависит от того, что вам важно донести. Если вы хотите, чтобы все ваши навигационные ссылки были видны в портретном режиме планшета, тогда хедер — это то, что вам нужно.

Однако, если вы хотите единообразную навигацию на всех размерах экрана, то лучший вариант — боковое меню.


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

Теги