17 UX техник для меню вашего сайта: полный чек-лист

Статья подготовлена на основе материала Menu-Design Checklist: 17 UX Guidelines - NN/g

Специалисты по дизайну часто говорят о принципах UX при создании сайта, однако практически никто не объясняет, как сделать меню и функциональным, и удобным. Между тем, пользователи постоянно сталкиваются с запутанными, непонятными, сложными для использования меню. Ниже – простые рекомендации, которые помогут вам избежать такой ситуации на своем портале.

Сделайте навигацию видимой

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

Не скрывайте меню на больших экранах

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

Используйте ожидаемые зоны

Пользователи ищут элементы навигации в привычных местах. Используйте это в своих интересах:

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

Обеспечьте контраст текста

Низкий контраст между фоном и текстом ссылок делает названия разделов нечитаемыми. При выборе дизайна меню сайта учитывайте, что минимальное соотношение показателей контраста для текста должно составлять 4,5:1. Используйте инструменты вроде WebAIM Contrast Checker для проверки.

Не перекрывайте весь экран

Мегаменю – это стопроцентная гарантия, что разделы не останутся незамеченными. Однако занимать им 100% размера страницы или экрана, особенно в десктопной версии, не стоит: это еще больше дезориентирует пользователей.

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

Идеальное UX–меню – когда пользователь понимает, где он

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

Подсветите «активный» раздел

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

Добавьте локальную навигацию для связанного контента

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

Понятно – значит просто

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

Используйте знакомые формулировки

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

Упростите взаимодействие

У вас в запасе – всего несколько секунд, в течение которых пользователь «сканирует» названия категорий. Используйте их с пользой. Для этого выровняйте все пункты меню по левому краю и начните заголовки с ключевых слов (купить, заказать, оформить, подписаться).

Демонстрируйте несколько уровней для наглядности

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

Добавляйте визуальные подсказки

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

Легкость взаимодействия – путь к высокой конверсии

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

Увеличьте область клика

Слишком мелкие или близко расположенные ссылки не вызывают ничего, кроме раздражения. Минимальный размер кликабельной зоны на мобильных — 48×48 px, а размер отступов между пунктами – не менее 8 px.

Используйте иконки для подменю

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

Активируйте подменю по клику, а не по ховеру

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

Чем больше уровней – тем выше вероятность ошибки

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

Используйте фиксированное меню для длинных страниц

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

Оптимизируйте расположение самых частых действий

Следуйте закону Фиттса: размещайте популярные элементы ближе к точке взаимодействия. Так, кнопки «Сохранить» или «Отправить» должны располагаться в самом верху выпадающих списков.

Не экспериментируйте с навигацией

Креатив уместен в текстах и общей дизайнерской концепции оформления ресурса, но не в организации навигации на сайте. Крайне неудачный пример – портал Adobe CXM, где вместо привычного списка используется карусель со случайными переходами. Безусловно, часть уникальных кейсов (как, например, гамбургер–меню), со временем превращается в стандарт дизайна. Но не забывайте, что удобство для пользователей – всегда должно быть в приоритете.

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

Готовые макеты сайтов, представленные в Библиотеке шаблонов Taptop, созданы с учетом основных принципов UX. Их главная фишка – удобство для пользователей, которое гарантирует площадке высокую конверсию. Возможности кастомизации макетов не ограничены: добавляйте собственные пункты и категории, меняйте расположение и внешний вид меню, если считаете, что это необходимо. При этом не забывайте, что рентабельность внедрения любой гипотезы в оформлении площадки необходимо протестировать на реальных представителях вашей целевой аудитории. Если пользователь задумался, как найти нужный раздел – эксперимент можно считать неудачным.