Вертикальная vs горизонтальная навигация: какое решение выбрать

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

Давайте начнем с простой иллюстрации, чтобы понять, о чем идет речь. Под вертикальной навигацией я подразумеваю ту, которая обычно находится с левой стороны и называется “боковая панель” или “sidebar". Горизонтальная же чаще всего располагается сверху.

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

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

1. Горизонтальная навигация

Плюсы

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

• Поскольку большинство веб-сайтов используют горизонтальную навигацию, она знакома большинству пользователей (и "кажется более естественной"). Сайты действительно в основном используют горизонтальную навигацию, и она может быть более привычной для пользователей. Подробнее об этом: закон Якоба и эвристика единообразия и стандартов.

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

Минусы

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

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

• Большие выпадающие подменю закрывают часть основного контента страницы.

2. Вертикальная навигация

Плюсы

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

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

• Легче добавлять новые ссылки (потому что в панели обычно остается свободное место).

Минусы

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

• Если у вас всего несколько ссылок, пространство на экране пропадает зря.

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

Что выбрать?

Простого ответа на этот вопрос нет. Каждый случай уникален.

Однако все же в большинстве случаев горизонтальная навигация предпочтительнее.

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