Меню сайта - одна из тех вещей, которые воспринимаются как должное.
Ну, до тех пор, пока вы не столкнетесь с действительно плохим меню...
В идеале меню должно отображать перечень того, что может предложить сайт. Оно также должно предоставлять возможность перейти на ту или иную вкладку в один (два, и в совсем редких случаях - три) клика.
Но это в идеале. Если меню будет плохим, то посетители, вероятно, просто покинут сайт и перейдут на другой.
В этой статье мы расскажем вам об основах дизайна меню и поможем понять, какие варианты лучше всего подойдут для того или иного сайта.
Почему меню сайта - это важно
Меню сайта важно, потому что оно помогает лучше ориентироваться в рамках сайта.
Конечно, иногда пользователь попадает на нужную ему страницу прямо из Google. Но чаще всего люди изучают весь контент на нашем сайте и делают это постепенно. Ну или же они попадают на главную страницу и оттуда им нужно перейти на другую.
Вариантов масса.
Именно поэтому меню должно быть доступно на каждой странице, а в идеале - прокручиваться вниз вместе с контентом, чтобы всегда быть на виду.
Помимо основной навигационной функции, меню - это еще и отличный способ рассказать о том, что вы предлагаете и чем занимаетесь.
Что должно находиться в меню?
Хорошее меню должно содержать ссылки на самые важные разделы сайта. Только вам решать, что в него поместить. Но какой бы контент вы ни решили включить, важно, чтобы меню было удобным (не тормозило, не зависало, не вызывало смещения макета).
Не добавляйте слишком много пунктов
Одна из худших вещей, которую вы можете сделать, - это перегрузить меню ссылками. Оно будет выглядеть загроможденным, и пользователям придется потрудиться, чтобы найти то, что им нужно.
В зависимости от выбранного дизайна некоторые ссылки могут пропасть из виду, если их будет слишком много. Например, если использовать выпадающее меню, то пользователям может быть трудно получить доступ к ссылкам, которые появляются за пределами экрана.
Делайте: будьте избирательны или используйте альтернативные варианты навигации
Лучший вариант - избирательно подходить к тому, что включать в меню.
Да, это вполне очевидно.
Но проблема в том, что для крупных сайтов с комплексной структурой это не всегда панацея. К счастью, существует множество решений проблемы переполненного меню. Одно из них - создать «узловые» страницы (это такие страницы, ссылающиеся на дочерние категории или специфичные темы) или категории и добавить их в меню.
Второе решение - добавить дополнительные пункты, которые появляются только тогда, когда пользователь наводит курсор или нажимает на определенную область главного меню. Но это решение может оказаться дамокловым мечом, потому что если чересчур увлечься, то область станет выглядеть еще более загроможденной.
Третий вариант - включить строку поиска в навигационное меню. Оптимальный и универсальный вариант. Даже если все пункты будут видны, она значительно упростит жизнь клиентам.
Не делайте: разрабатывайте меню сайта только для десктопных девайсов
Легко забыть о мобильном сегменте, когда вы сами используете только ПК при работе со своим сайтом.
Что ж, сделать это - равно подписать себе смертный приговор.
Нельзя забывать про мобильный сегмент. Никогда. Он является самым прибыльным и востребованным.
А вот меню, которое хорошо выглядит и работает на настольном компьютере, может оказаться совершенно непригодным для использования на телефоне или планшете.
Делайте: убедитесь, что меню сайта работает на мобильных устройствах
Есть два варианта создания меню, которое работает как на настольных, так и на мобильных компьютерах. Вы можете добавить отзывчивое меню с макетом, который адаптируется к размеру используемого экрана. В качестве альтернативы можно также создать специальную область для мобильной версии.
Какое бы решение вы ни выбрали, протестируйте его на нескольких экранах разных размеров, чтобы убедиться, что конечный результат будет удобен.
Дизайн меню: варианты
Существует множество различных стилей меню.
Гармошки, выпадающие, боковые - лишь несколько примеров. Есть и достаточно абстрактные, даже в какой-то мере артхаусные варианты.
Давайте взглянем на наиболее распространенные варианты.
Минимализм
Если у вас простой сайт, имеет смысл выбрать минималистичный дизайн.
Например, Behance - это сеть для ознакомления с творчеством, поэтому ей не нужно сложное меню. На сайте всего три пункта в меню: Discover, Livestreams и Jobs. Это позволяет целиком и полностью сосредоточиться на контенте.
Некоторые сайты используют более минималистичный стиль, чтобы удовлетворить потребности мобильного сегмента. Гамбургер-меню (гармошка, выглядит как: ☰) - популярный вариант для смартфонов, поскольку занимает очень мало места на экране. Например, на мобильной версии Joolz.com есть три простых иконки, которые помогают ориентироваться: поиск, корзина и, собственно, меню-гамбургер. При нажатии на меню раскрывается список категорий товаров.
Классика
Классические меню самые простые в работе. Они сосредоточены на основных категориях и областях сайта. В них обычно используются кнопки с надписями для упрощенного ориентирования. Горизонтальная панель - наиболее распространенный тип. Иногда в подобных меню в подпунктах есть несколько выпадающих опций.
WordPress.org, например, использует классический дизайн меню на своем десктопном варианте сайта. Два пункта меню снабжены выпадающей кнопкой для отображения дополнительных опций: Support и Get Involved.
Еще один классический стиль меню - боковая панель. Ее можно увидеть в действии на Google Maps.
Обычно такие меню можно открыть с помощью кнопки и закрыть с помощью.. другой кнопки. Хороший вариант для реализации полноэкранного контента, поскольку большую часть времени меню будет скрыто.
Мегаменю
Мегаменю - разновидность выпадающего меню, но вместо одной колонки ссылок под каждым пунктом здесь нашлось место сразу нескольким. Такие меню популярны на больших и сложных сайтах, поскольку в них можно разместить гораздо больше ссылок, чем в других дизайнах.
Но у этого есть и обратная сторона. Хоть и все ссылки могут поместиться, слишком большое количество контента в меню может оказаться тяжелым для восприятия.
На сайте asana.com используется мегаменю с управляемым количеством ссылок под каждым пунктом главного меню:
А вот пример полного мегаменю можно найти на сайте Всемирной продовольственной программы ООН. Здесь выпадающее меню показывает список стран. Да, их много, но ориентироваться все равно просто, поскольку пользователи точно знают, какую страну они хотят просмотреть.
Другие варианты навигации
С меню можно придумать многое.
Но это не единственный вариант навигации.
Так, например, многие сайты добавляют дополнительные ссылки в верхний или нижний колонтитул. Часто в них можно увидеть опции для входа или изменения языка. Однако если вы решите добавить ссылки в нижний колонтитул, то придется отключить бесконечную прокрутку, иначе пользователи никогда не смогут добраться до него.
А еще можно создать отдельную страницу с перечнем всех категорий, товаров и услуг.
Сейчас такое редко встречается, но это все еще рабочий вариант.
Меню сайта и SEO
Влияет ли меню вашего сайта на SEO? Конечно влияет. Если пользователи не могут найти то, чтоим нужно, они, скорее всего, уйдут и больше не вернутся.
Google улавливает подобные сигналы и делает выводы.
Подытоживая можно сказать, что лучше всего делать меню как можно более простым. Особенно для небольших сайтов. Для них идеально подойдет классический или минималистичный вариант.
Но если же вы являетесь владельцем крупного ресурсы, то придется подумать о том, как лучше отобразить контент.
Когда разработаете дизайн, который вас устроит, не помешает попросить нескольких человек опробовать его и оставить обратную связь. Если вы действительно серьезно настроены сделать меню удобным, то можете даже провести комплексное тестирование.
Источник: https://yoast.com/seo-website-menu/