Навигация — важнейшая часть любого интерфейса. Чем проще пользователям разобраться в ней и сориентироваться на сайте, тем лучше.
Резюме: Горизонтальная навигация предпочтительнее в большинстве случаев, но если категорий (ссылок), которые должны быть видимыми с самого начала, много, лучше использовать вертикальную навигацию.
Давайте начнем с простой иллюстрации, чтобы понять, о чем идет речь. Под вертикальной навигацией я подразумеваю ту, которая обычно находится с левой стороны и называется “боковая панель” или “sidebar". Горизонтальная же чаще всего располагается сверху.
Оба подхода имеют свои преимущества и недостатки, поэтому простого ответа на вопрос, какое решение выбрать, не существует. Вы должны тщательно обдумать, что предпочтительнее в каждом конкретном случае. В конце концов, навигация — неотъемлемая составляющая любого приложения или сайта.
Ниже я собрал плюсы и минусы горизонтальной и вертикальной навигации и немного поразмышлял над каждым пунктом.
1. Горизонтальная навигация
Плюсы
- Первое и самое очевидное преимущество — она освобождает пространство для вашего контента. Это критически важно, если на сайте много больших изображений или таблиц с данными. По моему опыту, горизонтальная навигация действительно работает лучше, когда интерфейс включает объемную таблицу (например, в бухгалтерском приложении).
- Поскольку большинство веб-сайтов используют горизонтальную навигацию, она знакома большинству пользователей (и "кажется более естественной"). Сайты действительно в основном используют горизонтальную навигацию, и она может быть более привычной для пользователей. Подробнее об этом: закон Якоба и эвристика единообразия и стандартов.
- Горизонтальная навигация более естественна, потому что многие читают слева направо. Я думаю, об этом не стоит беспокоиться. По крайней мере, если речь идет о приложениях, которыми люди пользуются регулярно. Определенные паттерны со временем становятся привычными, поэтому, на мой взгляд, это не так важно.
Минусы
- Ограниченное пространство. Это самая серьезная проблема. В горизонтальной навигации невозможно разместить большое количество ссылок. Конечно, вы можете добавить подменю, выпадающие меню и так далее, но изначально она будет отображать только первый уровень информационной архитектуры. Это означает, что вы должны тщательно продумать количество ссылок и их названия.
- Будет трудно изменить меню в дальнейшем по причинам, указанным выше. Каждый раз, когда вы хотите добавить или удалить ссылку, вы должны будете подумать, вписывается ли она в меню.
- Большие выпадающие подменю закрывают часть основного контента страницы.
2. Вертикальная навигация
Плюсы
- Больше пространства для ссылок верхнего уровня. Это самое важное преимущество вертикальной навигации. Вертикальная навигация — хороший выбор, если верхний уровень информационной архитектуры сайта включает много ссылок.
- В отличие от горизонтальной навигации, вертикальная может содержать ссылки с длинными названиями. Они могут быть даже многострочными.
- Легче добавлять новые ссылки (потому что в панели обычно остается свободное место).
Минусы
- Вертикальная навигация занимает много места, и поэтому не подходит для приложений и сайтов, которые содержат большое количество контента.
- Если у вас всего несколько ссылок, пространство на экране пропадает зря.
- Вертикальная навигация встречается реже, из-за чего она может сбивать некоторых пользователей с толку. Как я уже говорил, я не думаю, что это большая проблема, особенно если речь о приложениях, которые люди используют постоянно (например, SaaS или подобные). В этом случае они просто привыкнут к новым паттернам.
Что выбрать?
Простого ответа на этот вопрос нет. Каждый случай уникален.
Однако все же в большинстве случаев горизонтальная навигация предпочтительнее.
В некоторых ситуациях может возникнуть необходимость отступить от общих правил. Например, когда вы делаете сайт, самыми важными характеристиками которого являются визуальная эстетика и оригинальность. Такой интерфейс должен выделяться и даже намеренно нарушать некоторые принципы юзабилити. Или интернет-магазин с огромным ассортиментом, в котором может быть представлено несколько типов навигации, а также хлебные крошки и т.д.
