Меню навигационное: Эффективное упрощение навигации, часть 2: Навигационные системы / Хабр
Эффективное упрощение навигации, часть 2: Навигационные системы / Хабр
Как сделать навигацию как можно проще и предсказуемей? Как было показано в части 1, во-первых, нужно структурировать контент так, чтобы он естественным образом сужал навигационные варианты выбора, во-вторых, пояснить все варианты выбора так, чтобы минимизировать умственную нагрузку на пользователей. Тем не менее, необходимо два дополнительных шага – выбрать правильный тип навигационного меню, а затем сделать для него подходящий дизайн. Вторая часть этой серии рассказывает о третьем шаге и рассматривает какие типы навигационного меню лучше всего подходят к какому контенту.
Навигационное меню – это любая область интерфейса, на которой представлены навигационные опции, которые позволяют пользователям находить контент на веб-сайте. Здесь исключаются, например, статьи и страницы товаров, которые могут содержать гиперссылки, но чья главная цель – потребление, а не навигация.
Основное различие в навигационных моделях состоит в разнице между первичными, традиционными навигационными системами и вторичными, альтернативными.
Существует 5 традиционных типов навигационных меню или виджетов, которые можно отсортировать от наиболее простых до наиболее сложных:
1. Строка меню
2. Обычное выпадающее меню
3. Мега-меню
4. Отдельная страница
5. Динамические фильтры
Также возможны и существуют гибридные варианты, тем не менее их можно разбить на пять типов меню выше. Естественно возникает вопрос, когда использовать какой из типов меню.
Как было описано в части 1, дизайнеры применяют три метода для обозначения навигационных опций: названия, названия и изображения, названия, изображения и описания. Для минимизации умственной нагрузки на пользователя, дизайнеры должны использовать необходимое и достаточное количество информации, которое нужно целевой аудитории, чтобы понять возможные опции.
Имея это ввиду, следующее практическое правило может помочь решить, когда использовать какой из типов навигационных меню: чем меньше возможных опций и чем меньше необходимой информации для их пояснения, тем проще должен быть тип навигации.
Для лучшего понимания почему определённые виджеты проще в использовании и когда именно выбрать один, а не другой, давайте поближе рассмотрим каждый из пяти типов меню.
Почти на каждом сайте есть постоянная горизонтальная или вертикальная строка, которая включает в себя категории первого порядка.
Первый и самый базовый навигационный якорь – горизонтальная или вертикальная строка ссылок.
Рекомендация
Самые важные или наиболее часто используемые элементы или категории должны располагаться в навигационной строке меню.
Строка меню – самый простой тип навигации. Элементы или категории в навигационной строке являются глобальными, они видимы и доступны сразу. В отличие от этого, в выпадающем меню пользователи должны навести мышку или подождать загрузки отдельной страницы, для того чтобы получить доступ к содержащимся опциям.
Проблемы
Как только навигационная строка меню (будь она горизонтальной или вертикальной) берёт на себя больше, чем просто небольшой перечень элементов, и зависит от ширины экрана и его ориентации, то она может занять пространство, которое может быть использовано более эффективно для презентации основного контента.
На скриншоте ниже, заметьте, что горизонтальная навигация хорошо работает пока она занимает только одну строку. Чтобы разместить её на небольшом экране, дизайнеры решили разместить элементы навигации в ряды, что, однако, толкает основной контент вниз, требуя от пользователей больше прокручивать.
Несколько рядов навигации затрудняет доступ к содержимому.
На широком экране, вертикальное навигационное меню позволяет разместить больше элементов, однако, оно также имеет свой недостаток. Оно занимает горизонтальное пространство, которое может быть более эффективно использовано для презентации основного контента, будь то статья, видео или информация о продукте. На изображении ниже, представлены два варианта для сравнения эффекта.
По этой причине выпадающие и всплывающие меню часто лучше всего подходят при большом количестве элементов. В них показываются дополнительные элементы только по запросу, таким образом ставя содержание страницы в центре внимания.
Выпадающее или всплывающее меню при срабатывании появляется поверх контента. Его элементы укладываются вертикально в один столбец и состоят либо только из слов, либо из слов и иконок.
Элементы в выпадающем меню вертикально укладываются в один столбец.
Рекомендация
Если элементы лучше всего объясняются словами и меню не слишком длинное, тогда обычное выпадающее меню – самое простое и эффективное решение.
Пояснение
В сравнении с мега-меню, обычное выпадающее меню имеет следующие преимущества:
- Загружается быстрее;
- Дополнительное пространство и визуальный потенциал мега-меню не будут иметь преимущества над несколькими текстовыми элементами. Более того мега-меню может смутить пользователей или, в лучшем случае, замедлить их, так как пользователям сперва придётся понять компоновочную схему элементов. Напротив, короткий вертикальный перечень легко сканируем и понятен каждому.
Проблемы
При длинном меню всё может быть сложнее. Длинный вертикальный выпадающий перечень может быть обрезан окном браузера, что заставит пользователя постоянно скролить. Есть два способа решения этой проблемы.
Первый – разбить перечень на подкатегории. Несмотря на то, что это хорошее решение, навигация из подменю в подменю может быть раздражающей, если взаимодействие не продумано соответствующим образом. К этому вопросу мы вернёмся в части 3 этой серии статей.
Второй способ – применить мега-меню, которое лучше всего подходит к ориентации экрана, например, горизонтальное мега-меню для альбомной ориентации экрана.
Если места на экране мало, то подстройка меню под ориентацию экрана – хорошее решение.
Особый тип выпадающего меню – это так называемые мега-меню. Мега-меню – это выпадающее или всплывающее меню, которое не просто располагает свои элементы в одну колонку, а использует изображения, типографическую иерархию и различные разметки для визуализации опций.
Мега-меню больше и сложнее обычного выпадающего меню.
Рекомендация
Если опции требуют как названия, так и картинки, то мега-меню – лучший выбор.
Пояснение
В обычном выпадающем меню не предполагается большого пространства и визуализации опций. И будь то обычное выпадающее или мега-меню, оба имеют следующие преимущества над отдельной страницей с навигацией:
- Они загружаются быстрее;
- Умственная нагрузка на пользователей ниже. С отдельной страницей пользователю нужно больше подумать. «Что из этого реклама?» «Где само содержание?» «Где навигация?». Выпадающее меню показывает только навигацию, и оно появляется ближе к курсору или пальцу пользователя.
Проблемы
Даже мега-меню ограничено в пространстве. Если количество элементов слишком велико, тогда отдельная страница становится неизбежной.
Четвёртый способ отображения элементов или категорий – расположить их на отдельной странице.
На отдельной странице подкатегории размещаются свободно.
Рекомендация
Если в меню предполагаются названия, изображения и описания, то отдельная страница лучше всего подойдёт.
Пояснение
Расположение подобного типа навигации в мега-меню возможно, но только если описания состоят лишь из пары строк.
Проблемы
Отправлять пользователей на отдельную страницу только для просмотра навигации, а не для показа содержания – не самое элегантное решение. Кроме того, пользователи будут оторваны от содержания текущей страницы. Однако, если мега-меню будет слишком громоздким при размещении огромного количества элементов, тогда отдельная страница может стать самым комфортным решением.
Наконец, динамические фильтры – сложный, но мощный способ навигации по содержимому, с их помощью пользователи выбирают набор желаемого контента на ходу.
Сложные, но мощные динамические фильтры позволяют пользователям выбирать желаемый контент на ходу.
В то время как большинство сайтов имеет только один из первых трёх типов меню, динамические фильтры почти никогда не появляются сами по себе. Вместо этого, они обычно добавляются к основной навигации в качестве опции.
Kmart (на изображении ниже) начинает процесс навигации с выпадающих меню, как с обычных, так и с мега-меню. На следующем уровне отдельная страница показывает категории продуктов. Наконец, после того как пользователи зашли в раздел, они находят динамические фильтры для уточнения их выбора.
Динамические фильтры часто добавляются к традиционной навигации.
Рекомендация
В соответствии с обсуждением категорий мета-данных в части 1, мы можем сказать, что если первые три типа навигации лучше всего подходят основным и взаимоисключающим категориям, то динамические фильтры лучше всего подходят для дополнительных категорий, которые можно объединить.
Пояснение
Преимущество динамических фильтров заключается в том, что они позволяют пользователям выбирать и изменять значения на ходу. Вместо того, чтобы ходить взад и вперед между навигационными уровнями, пользователи могут оставаться на том же уровне и динамически комбинировать значения до тех пор, пока результаты не будут соответствовать их критериям.
Факт, что динамические фильтры чаще всего представлены в вертикальном виде, не является недостатком, так как отфильтрованные результаты не являются контентом сами по себе. Они всё ещё часть навигации. Более того, динамические взаимосвязи между выбранными значениями слева и результатами справа дают пользователям немедленную обратную связь о том, как много и какие предметы подошли под их критерии.
Проблемы
Динамические фильтры наиболее мощное, но и наиболее сложное решение. Они занимают больше пространства и требуют больше времени для загрузки, чем любой другой тип навигации. Пользователям необходимо работать с различными элементами, включая фильтры, результаты, виджеты сортировки и режимы просмотра, что усложняет задачу расположения всех элементов на рабочем пространстве экрана, не говоря уже о телефонах. Так что, какими бы полезными они не были, избегайте их, если более простой тип навигации сделает ту же работу так же хорошо.
Почти все веб-сайты используют один из традиционных типов навигации как основной. Тем не менее, многие дополняют их альтернативными навигационными системами. Следовательно, оценка наиболее популярных из них также важна.
Ниже представлены четыре наиболее распространённых типа альтернативной навигации:
1. Поиск
2. Карта сайта
3. Указатель от А до Я
4. Тэги
Поиск избавляет пользователей от необходимости прохождения через множество уровней навигации и доставляет их непосредственно к желаемому пункту. Разница в том, что раздел страницы, содержащей желаемые результаты, был установлен пользователем вручную.
Поиск – это прямой путь к желаемому контенту в сложной многоуровневой системе навигации.
Дизайнер должен применить систему тэгов и ключевых слов ко всем страницам сайта с учётом возможного недопонимания между пользователем и поисковой системой, вроде опечаток, синонимов и различных концептуальных моделей содержимого. Другими словами, поисковая система должна догадаться, что пользователь имеет ввиду в своём запросе.
Рекомендация
Представьте поиск в качестве дополнения к традиционной навигации, а не в качестве равноценного или прямого средства навигации.
Пояснение
Различные исследования пришли к различным выводам о том, предпочитают ли пользователи в большинстве своём пользоваться поиском. Конечно предпочтение поиска может зависеть от дизайна самого поиска и того, как он представлен, предыдущий опыт с плохим дизайном навигации может увеличить предпочтение поиска. В любом случае, не выдвигайте поиск в качестве основного метода навигации.
Несмотря на те усилия, которые прикладывают разработчики, чтобы избежать ошибок, успешность поисковых запросов остаётся низкой. Причина в том, что каждый сайт как правило имеет свои собственные категории, схемы классификаций и наименования. Пользователи обычно не знают всей специфики и поэтому часто вводят свои запросы наугад, что может быть обременительным и неопределённым процессом, ведущим к тому, что большинство введёт запрос единожды, может дважды, прежде чем сдаться. Это особенно актуально на мобильных устройствах, где введение запросов менее комфортно.
Другая проблема заключается в том, что даже если все результаты будут подходящими, пользователи могут задаться вопросом насколько они полные. «Упустил ли поисковик что-либо, неправильно поняв мой запрос?» «Упустил ли я что-либо, неправильно сформулировав мой запрос?». Традиционная навигация, наоборот, определяет и показывает все категории, а также показывает полный перечень всех соответствующих записей, давая пользователю уверенность, что он ничего не упустит.
Второй феномен, который часто обсуждается состоит в том, что поиск имеет бόльшую конверсию, чем навигационное меню. Это, тем не менее, может быть объяснено разницей между просмотром и поиском. Пользователи, которые просто просматривают информацию с меньшей решимостью что-то купить обычно используют меню, в то время как пользователи, которые знают, что им нужно купить, обычно просто вводят это в поисковое поле.
Как бы то ни было, даже если поиск более эффективен в нахождении определённых товаров, он не столь популярен среди пользователей. Пользователи предпочитают традиционную навигацию поиску, даже при поиске определённого продукта. Одна из проблем поиска заключается в том, что со всеми специфическими и часто региональными различиями в названиях продуктов, воспроизвести точное название не всегда просто («Было ли это GS-50 или G-150?»). С помощью динамических фильтров, пользователи могут точно указать характеристики товара, который они ищут, вместо того, чтобы вспоминать модель, тип или номер версии.
Другая проблема состоит в том, что поиск может препятствовать обнаружению сопутствующих товаров. Если пользователь найдёт то, что он искал через поиск, то это может быть единственным предметом, который он увидит. При помощи динамических фильтров пользователь увидит не только желаемый товар, но также схожие товары, включая те, что имеют дополнительные характеристики или более низкую стоимость.
Естественно, добавление динамических фильтров к поиску возможно, что по сути позволит объединить преимущества обеих навигационных моделей в одном интерфейсе.
В целом, поисковая система, особенно с продвинутыми функциями и алгоритмами, может дать хорошие результаты, но она всё равно уступает хорошо продуманному традиционному меню из-за присущих ей проблем. Именно поэтому поиск лучше всего подходит в качестве дополнительного метода навигации, если меню не удовлетворяет пользователя, но не в качестве основного или единственного средства навигации.
Наконец, имейте ввиду, что поиск лучше работает там, где много сгенерированного пользователями контента, так как пользователи знают, как они назвали или пометили свой собственный контент.
Указатель от А до Я полностью или почти полностью перечисляет элементы доступные на сайте в алфавитном порядке:
Указатель от А до Я сортирует весь контент на сайте в алфавитном порядке.
Рекомендация
Не делайте А-Я указатель приоритетнее традиционного меню. Более того, перечень только страниц с категориями часто более эффективен, чем полный список тысяч отдельных страниц.
Пояснение
А-Я указатель легко использовать, потому что все знают, как ориентироваться в алфавитном перечне. Однако, алфавитному списку присущи три проблемы.
Во-первых, А-Я указатель обычно хорошо работает с названиями, но редко когда с изображениями и описаниями, которые часто бывают нужны.
Во-вторых, привести терминологию в соответствии с ожиданиями пользователя не всегда просто. С региональной, устаревшей или концептуально отличной терминологией пользователи могут оказаться в совершенно другом разделе указателя. Единственный способ решения проблемы –включить синонимы, несмотря на то, что это запутывает информационную архитектуру. В традиционной навигации, синонимы не являются такой большой проблемой, так как в идеале пользователи будут двигаться от небольшого количества опций к небольшому количеству опций.
В-третьих, А-Я указатель, как и поиск, может препятствовать просмотру сопутствующих товаров. Если пользователь ищет «яйца и фасоль» в указателе, то он и получит только яйца и фасоль и ничего больше. В традиционной навигации пользователи смогут увидеть другие рецепты завтрака пока ищут «яйца и фасоль» через категорию «Завтрак», причём без замедления (если, конечно, категория «Завтрак» отсортирована в алфавитном порядке), что хорошо и для пользователей, и для сайта.
Карта сайта отображает навигационную структуру сайта, обычно с заголовками и подзаголовками.
Карта сайта наглядно показывает навигационную структуру сайта.
Рекомендация
Сканируемый sitemap.xml файл помогает поисковым роботам проиндексировать сайт. Но из-за интерактивного представления, на карте сайта не должен ставится акцент в качестве основного средства навигации.
Пояснение
Карта сайта обычно состоит только из текста. А пользователям часто необходимы иконки, фотографии и описания, чтобы понять все опции. Конечно, включение этих элементов в карту сайта возможно, однако, это только усугубит вторую проблему, которая заключается в том, что на карте сайта обычно отображаются все элементы сразу без возможности пропустить или скрыть нежелательные элементы, что создаёт проблемы для пользователя, который пытается просматривать и взаимодействовать с информацией, особенно когда контента много.
Тэги, по умолчанию, можно описать как ключевые слова без родительских или дочерних категорий. Обычно они появляются в конце статей.
Тэги с пометкой «Больше о».
Рекомендация
Система тэгов требует дополнительных мер для хорошей работы. Но даже тогда, она по-прежнему будет уступать традиционной системе, основанной на категориях.
Пояснение
Из всех способов альтернативной навигации, тэги ближе всего к традиционной навигации. В конце концов, расстановка тэгов (которая по сути представляет собой процесс создания мета-данных) – это первый шаг к надлежащей информационной архитектуре, основе традиционной навигации. Тем не менее, даже при небольшом количестве тэгов для одной статьи, вы можете столкнуться с сотнями и тысячами тэгов в скором времени.
Именно поэтому необходима категоризация тэгов. С помощью разделения тэгов на родительские и дочерние категории, дизайнеры могут структурировать большое количество тэгов в небольшие наборы с соответствующей информацией. Традиционная навигация, которая включает эти категории, позволит пользователю пропустить нежелательные наборы и посмотреть только те, которые его интересуют.
Хотя многие сайты с упором на контент (content-based websites) заменяют сложные традиционные меню гибридной навигацией. Они, в лучшем случае, широко категорируют тэги, изначально опираясь на другие навигационные модели, вроде внешних и внутренних поисковых систем, лент событий и ссылок социальных медиа. Этот тип системы позволяет пользователям быстро находить нужные статьи, но у пользователей возникают сложности с идентификацией интересующей его статьи среди других. В качестве компенсации некоторые дизайнеры просто заканчивают статью перечнем ключевых слов, например, «Барак Обама», «Демократы», «Республиканцы», «здравоохранение», «прекращение работы». В таком случае пользователи получают доступ к тегу и могут посмотреть связанные интересующие их статьи.
В традиционной навигации пользователь будет идти через категории, которые содержат и согласовываются с ключевыми словами, в которых он заинтересован, например, Новости → Политика → США → Внутренняя политика → Здравоохранение. В таком случае пользователь будет заинтересован в данной статье, потому что она обсуждает здравоохранение США, не обязательно потому что в ней упоминается Барак Обама, Демократы, Республиканцы или прекращение работы. Чтобы увидеть связанные статьи пользователям достаточно будет перейти на родительскую категорию.
Традиционное основанное на уровнях меню – наиболее точный метод навигации.
Система, основанная на тэгах наиболее эффективна, если она дополняется сильным сопровождением в виде социальных медиа и хорошим поисковиком. Но она остаётся достаточно размытым способом навигации более похожей на точечный, нежели целенаправленный поиск. Более того, пользователи не должны полагаться на поиск и внешние ссылки для перемещения по сайту. Наоборот, у них должна быть возможность найти любую информацию прямо с Главной страницы, а продуманное традиционное меню всё ещё остаётся наиболее эффективным способом это сделать.
Когда приходит время выбрать правильный тип навигации, суть проста: чем меньше возможных опций и чем меньше необходимой информации для их пояснения, тем проще должен быть тип навигации.
Более сложный вопрос – стоит ли и как реализовать альтернативные навигационные модели в дополнение к традиционным.
Альтернативные решения могут быть недорогими и простыми в реализации. Но все они имеют естественные препятствия, которые мешают им выступать в качестве основных или единственных систем навигации. Более того, пользователи обычно не ищут этих альтернатив пока традиционная навигация может им помочь.
Поэтому, вместо того, чтобы вкладывать множество усилий в развитие или улучшение этих второстепенных решений, вложитесь в реализацию основной навигации должным образом, тогда, в большинстве случаев, второстепенные решения будут не нужны.
Рекомендации в этой статье кратко изложены ниже.
- Вертикальная панель навигации не менее полезна, чем горизонтальная, но она может отвлечь внимание от основного контента, появившись на одном уровне с контентом. Горизонтальная строка меню эффективная для категорий первого уровня до тех пор, пока она представляет собой одну строку. Если единственная строка невозможна, тогда используйте выпадающее меню или отдельную страницу, нежели фиксированное вертикальное меню.
- Если нескольких слов достаточно, чтобы объяснить опции, тогда примените обычное выпадающее меню. Разложите длинный список на подкатегории или примените мега-меню, подходящее под ориентацию экрана.
- Если необходимы названия и изображения, тогда используйте мега-меню.
- Если необходимы названия, изображения и описания, тогда используйте отдельную страницу.
- Все решения выше хорошо работают для естественных взаимоисключающих категорий. Если категории могут быть объединены, тогда добавьте динамические фильтры к традиционному меню.
- Поиск или указатель от А до Я хорошо работает, если пользователь знает точное название продукта, который он ищет. Тем не менее, обе системы склонны к неясности и зачастую затрудняют процесс нахождения связанных продуктов. Не делайте акцент на них вместо традиционной навигации.
- Навигация, основанная на тэгах, может быть хорошей альтернативной системой, если категоризация контента окажется слишком дорогой или слишком сложной. Так или иначе, она должна быть дополнена сильной поисковой системой и интеграцией социальных медиа.
Знание, какой из навигационных типов лучше всего подходит, много стоит. Но четвёртый шаг всё ещё необходим, а именно, как сконструировать навигацию, чтобы она была как можно более простой, предсказуемой и комфортной. Мы обсудим это в части 3.
5 вещей, на которые стоит обратить внимание
Задача любого дизайнера, веб-разработчика и, конечно, маркетолога состоит в том, чтобы постоянно изобретать что-то новое и уникальное. Причина этого довольно проста: компании необходимо выделяться из бесконечной череды конкурирующих с ней на рынке брендов, а уникальный стиль поможет это сделать. Но порой авантюрный дизайн может принести больше вреда, чем пользы.
И чаще всего от разного рода экспериментов страдает навигация веб-ресурса.
В докладе по веб-юзабилити, подготовленным агентством KoMarketing, сообщается, что примерно половина опрошенных в ходе исследования использует навигационное меню при знакомстве с новым веб-ресурсом. При этом 37% респондентов заявили, что неудобная навигация по сайту — это достаточное основание, чтобы покинуть сайт и больше никогда на него не возвращаться.
Излишне говорить, что система навигации оказывает огромное влияние на качество пользовательского опыта и вы не можете позволить себе все испортить.
На сайте найдется немало мест, где вы можете реализовать смелые эксперименты и удивить посетителей чем-то неожиданным и привлекательным. Вместе с тем навигация всегда должна оставаться надежным фундаментом вашего сайта. Посетители должны без труда понимать, где находится меню и как оно работает, чтобы суметь быстро сориентироваться на ресурсе и найти необходимую информацию.
Это не значит, что вы не можете опробовать такие свежие техники, как выровненные по левому краю или выпадающие на всю страницу меню, или те, что появляются при прокрутке. Это просто означает, что вы должны организовать все таким образом, чтобы максимально облегчить посетителям процесс работы с ресурсом, улучшить качество взаимодействия с ним.
Запомните: в списке приоритетов опыт пользователей должен находиться на самом первом месте.
Конечно, то, что работает для одного сайта, не обязательно сработает для вашего — поэтому сплит-тестирование должно быть частью всего этого процесса. Разработка навигации кажется делом простым и незатейливым, особенно если вы следуете традиционным правилам ее создания, но вы никогда не можете быть уверены, что будет лучше для вашей аудитории, пока не испытаете и другие существующие варианты. С помощью сплит-тестов проверить все эти альтернативы довольно легко.
Однако прежде чем вы пойдете разрабатывать собственный эксперимент, взгляните на то, что уже смогли выявить эксперты. Их результаты могут дать вам лучшее представление того, какие гипотезы следует проверить в первую очередь в ваших собственных тестах.
Читайте также: Нужна ли навигация на лендинге: данные, подтвержденные кейсами1. Структура меню
Хотя нет никаких данных в отношении того, какие проблемы с юзабилити испытывали пользователи сайта Portland Trail Blazers, очевидно, что кто-то все же надоумил их нанять агентство Sq1, чтобы оценить свою конверсионную воронку и определить, что потенциально является причиной слабых продаж.
Маркетинговое агентство сфокусировало свое внимание на системе навигации, которая явно не была оптимизирована для работы пользователей. Вот как она выглядела в 2013 году:
Дизайн меню сайта Portland Trail Blazers в 2013 годуСам по себе дизайн меню был сложен для восприятия, а структура и вовсе могла запутать. После идентификации тех целей, для достижения которых посетители использовали меню, Sq1 решило обновить ее дизайн и структуру:
1. Оно удалило прозрачный фон.
2. Также были перетасованы пункты навигации в ниспадающих меню, и теперь они воспринимались более логично и упорядоченно.
3. Была улучшена мобильная отзывчивость меню.
В результате проведенного сплит-теста стало ясно, что новая и улучшенная структура меню привела к увеличению выручки на 62.9%. Навигация сайта Trail Blazers с тех пор претерпела несколько изменений, но непрозрачный фон и ее вертикальная ориентация сохранились. Вот как это меню выглядит сегодня:
Дизайн меню после оптимизации2. Заголовки меню
Когда перед дизайнерами сайта Formstack встала задача разработки навигационного меню, сначала они постарались дать ответ на вопросы типа:
1. Какого рода контент должен быть отображен в меню?
2. Как он должен быть структурирован?
3. Какие страницы должны быть приоритетными в иерархии?
Страница, на которой они решили запустить свое меню навигации, носила название «Why Use Us» (Почему выбирают нас). Они возлагали большие надежды на то, что этот заголовок приведет к росту трафика и конверсий, и были неприятно удивлены, увидев, что показатель CTR не оправдал их ожиданий.
Вот как выглядела эта страница в 2013 году:
Formstack — доРазочарованные полученным результатом разработчики решили поменять название «Why Use Us» (Зачем мы нужны) на «How It Works» (Как это работает). Это было то название, придуманное еще до запуска проекта, но в итоге отброшенное. Как вы можете себе представить, они были в шоке от того, как простое изменение названия привело к 50%-ному увеличению числа просмотров страницы и 8%-ному увеличению конверсий.
Вот как сайт выглядел в марте того же года, когда были реализованы изменения:
Formstack — послеШкола юзабилити: как улучшить навигацию сайта?
3. Логика меню
В 2014 году люди, ответственные за проект Bizztravel Wintersport, начали замечать, как много действий приходится совершать посетителям сайта, чтобы найти то направление и место проведения отпуска, наиболее им подходящее. Чтобы перейти к нужному региону (всего лишь региону, а не конкретному месту назначения), в среднем требовалось 5 кликов. Авторы сервиса тут же осознали, что это упущение грозит им куда большими проблемами в будущем.
Вскоре было определено, что самым слабым местом сайта является его навигация. Отсутствие логики и простоты вынуждало разработчиков радикальным образом изменить не только само меню, но и заголовки. Это могло бы упростить процесс поиска для посетителей.
При создании усовершенствованной и более интуитивно понятной навигационной системы для сайта были проведены сплит-тестирования. Было выяснено, что новая версия дизайна дала на 21,34% больше конверсий, чем предыдущая.
Контрольный вариантНовый дизайн навигационного менюКак вы можете увидеть, улучшенная навигационная система опирается на более понятные указатели: как, например, флаги стран и другие узнаваемые символы — образуя более интуитивно понятный интерфейс.
4. Скрытые меню
Когда спорят о преимуществах скрытых и видимых меню, на самом деле разговор идет о том, стоит ли скрывать навигацию за иконкой (как, например, гамбургер-меню) или нет. В то время как скрытые меню действительно необходимы на сайтах, просматриваемых с мобильных устройств, вопрос, касающийся того, должны ли использоваться эти минималистичные навигационные решения на десктопных ресурсах, до сих пор остается открытым.
Консалтинговое агентство Nielsen Norman Group провело эксперимент, чтобы попытаться выяснить, что именно происходит при использовании скрытого меню в настольных и мобильных версиях веб-сайтов. К сожалению, точной информации о том, какие именно сайты были протестированы, нет, но суть теста понятна сама по себе.
Можете ли вы догадаться, где спрятано меню на этом сайте?
Если вы выбрали значок, находящийся в центре страницы — который по логике должен вести на главную страницу сайта — то вы правы.
Вот что удалось выяснить NMG:
Десктопная версия сайта
1. Посетители использовали скрытое меню в 27% экспериментов.
2. Видимое меню использовалось в 48% случаев.
3. На сайтах со скрытым меню людям приходилось тратить больше времени на то, чтобы понять, где какую информацию искать; в частности, они были на 39% медленнее, чем те, кто работал на сайтах с видимым меню.
Мобильная версия сайта
1. Пользователи использовали скрытые меню в 57% экспериментов.
2. Когда меню было частично видимо (использовать полностью видимое меню не практично на мобильных версиях сайтов), оно использовалось в 86% случаев.
3. Скрытые меню замедляли пользователей на 15% (по сравнению с теми, кто работал с сайтом с видимыми меню).
Кроме того, исследователи также нашли, что скрытые меню труднее обнаружить (что вполне очевидно). На сайтах без четких указателей в верхней части посетители тратили больше времени, чтобы найти нужную им информацию. Скрытые меню на 21% усложняют и на 20% снижают возможность выполнения задачи.
Ниже — хороший пример простого, понятного и видимого меню:
Видимое навигационное меню сервиса HostGator Читайте также: Создание мобильной навигации независимо от гамбургер-меню5. Мобильные меню
Как вы можете видеть из приведенного выше примера, мобильные пользователи, вероятно, более знакомы со скрытым меню, чем пользователи настольных компьютеров. Но когда дело доходит до определения того, как создать скрытое меню для мобильной версии сайта, недостаточно полагаться только на пресловутую иконку-гамбургер. Исследования, проведенные агентством Sites for Profit, ответят почему.
В первом эксперименте была поставлена цель протестировать эффективность дизайна гамбургер-кнопки. Были созданы три версии значка скрытого меню:
1. Базовая модель, которая представляла собой только три горизонтальные полоски.
2. Иконка-гамбургер, состоящая из трех горизонтальных линий, обведенных тонкой линией.
3. Иконка-гамбургер с надписью «МЕНЮ», помещенной внизу.
Было обнаружено, что второй вариант (три полоски в квадратике) показал наибольшее число конверсий. Это объяснялось тем, что такой вариант иконки больше напоминает классическую кнопку, глядя на которую посетители мгновенно понимали, что на нее можно кликнуть.
Caffeine Informer — иконка-гамбургерВо втором эксперименте была поставлена задача проверить, оказывает ли какое-либо влияние на число конверсий слово «Меню», размещенное рядом с иконкой. Были созданы четыре версии значка скрытого меню:
1. Базовым дизайном был выбран победивший в предыдущем эксперименте вариант — три полоски в квадрате.
2. Слово «Меню» вместо иконки.
3. Иконка-гамбургер и слово «Меню», размещенные вместе и обведенные чертой.
4. Слово «Меню», обведенное чертой.
Согласно полученным данным 3 вариант иконки получил большее количество кликов; однако, слово «Меню», заключенное в квадратик, собрало больше конверсий.
Caffeine Informer — иконка-менюДополнительные советы по дизайну навигационного меню
Итак, что удалось узнать о навигационном меню после проведения всех этих экспериментов? Очевидно, что если посетители как-то неверно взаимодействуют с вашим ресурсом, то, скорее всего, в этом виновата неудачная система навигации. Как правило, на разработку навигации не тратится так же много времени, как на создание главной страницы сайта или даже выбор подходящей формулировки для всплывающего окна, однако не следует забывать, что этот элемент пользовательского интерфейса может оказать серьезный отрицательный эффект на коэффициент конверсии, если он не будет должным образом проработан.
При разработке навигационного меню не упускайте из внимания следующие рекомендации.
Совет 1
Логотип компании всегда должен вести на главную страницу сайта. Согласно уже упомянутому ранее отчету агентства KoMarketing, 36% людей склонны использовать логотип как средство возврата к началу.
Несмотря на многочисленные меню и строку поиска, логотип компании REI достаточно хорошо заметен, поэтому ни у кого не возникает сомнений по поводу того, куда надо кликнуть, чтобы вернуться на главную страницу.
Логотип компании на сайте REIСовет 2
Будьте проще. Чем больше страниц вы попытаетесь уместить в одном веб-пространстве, тем выше шансы, что вы просто-напросто запутаете посетителей. Настоятельно рекомендуем вам упростить макет меню и стараться задействовать как можно меньше его опций (от 5 до 7).
Навигация La Moulade послужит этому отличным примером:
Упрощенная навигация La MouladeКомпания могла бы разместить информацию о своих услугах на нескольких страницах, но сделала еще проще. На сайте всего три страницы, а забавный анимационный эффект, возникающий при скроллинге, доводит до посетителей всю необходимую им информацию о качестве работы с компанией.
Совет 3
Организуйте свое меню на основе приоритета. Эффект порядкового номера (Serial position effect) указывает на то, что страницы, расположенные ближе к началу или концу списка, будут автоматически доминировать в умах пользователей.
The Daily Show занимает самое приоритетное место в иерархии менюКак вы можете видеть на сайте Comedy Central, шоу перечислены не в алфавитном или любом другом логическом порядке, что помогло бы пользователям найти предмет поисков гораздо быстрее. Можно предположить, что «The Daily Show», вероятно, самое популярное шоу — либо сервис хочет привлечь к нему больше внимания — и именно поэтому оно и занимает верхнюю позицию.
Совет 4
Названия меню должны быть лаконичными, но вместе с тем и емкими. Это не то место, где вы можете дать свободу фантазии.
Совет 5
Меню должны быть максимально большими для экрана любого размера: текст будет проще читать, а на кнопки — кликать.
На сайте компании Adwyse все представлено наилучшим образом: меню достаточно большое, что все заголовки легко умещаются, они легки для прочтения и клика. Это относится как к системе навигации на десктопной версии сайта:
Так и к мобильной:
Совет 6
Используйте цвет или любой другой hover-эффект, чтобы иметь возможность посредством меню указать посетителям, в какой области сайта они находятся в данный момент. Для этой целей сервис Netflix очень удачно использует свой брендовый красный цвет:
Совет 7
Сделайте навигационное меню «липким», то есть остающимся на экране даже при скроллинге, чтобы оно всегда было на виду. Это относится к любому стилю навигации: мобильному или десктопному, видимому и скрытому, горизонтальному и вертикальному.
Сайт компании Coloured Lines может похвалиться красочным, исполненным при помощи иконок и не исчезающим при проматывании страницы навигационным меню.
Совет 8
Пользователи мобильных и десктопных устройств хотели бы пользоваться меню, которое отвечало бы их потребностям, поэтому вариант предложить один вариант дизайна для всех категорий посетителей не сработает. Веб-сайт сервиса Intuit служит прекрасным примером того, почему вы должны поступить именно так.
Десктопный вариант меню:
Мобильный:
Либо у них нет мобильных посетителей, либо их просто не заботит, что людям придется увеличивать страницу и прокручивать ее, чтобы найти хоть что-то на таком неадаптивном сайте.
Совет 9
Когда вы приступите к разработке меню для мобильной версии сайта не забудьте сделать более ясным и видным то, что меню кликабельно. Границы — лучший способ сделать это. Взгляните на пример ниже:
Сайт Politico
Совет 10
Иконки не всегда всем понятны, поэтому старайтесь их не использовать — как в мобильной версии, так и в десктопной. Далеко не всем удается подобрать такие картинки, которые будут понятны и легко узнаваемы. Компании Brit & Co удалось:
Совет 11
Нет ничего плохого в том, чтобы иметь глубокие, многоуровневые меню. Но не следует совмещать их со скрытыми меню. Используйте дизайн мега-меню и навигационные цепочки (breadcrumbs), чтобы облегчить дальнейшую навигацию.
Сайт Verizon Wireless удалось не нарушить оба эти правила. Во-первых, они абсолютно прозрачны в предоставлении имеющейся информации о системе навигации и сделали фантастическую работу по организации ее структуры:
Во-вторых, они предусмотрительно имплементировали в систему навигационные цепочки. Как бы далеко не ушли посетители в своем исследовании сайта, они всегда могут вернуться обратно.
Совет 12
Если вы хотите использовать креативный вариант навигации при входе на сайт, не стесняйтесь делать это. Поместите главное меню в ожидаемом для пользователей месте.
Многие дизайнеры экспериментируют с popup/slide-формами, поскольку неожиданное движение на экране должно хорошо захватывать внимание посетителей. Но всплывающие окна не должны быть низведены до окон, оповещающих о срочных предложениях и прочем, они должны использоваться в угоду навигации, как в случае с меню сайта Bolden.
Читайте также: Ключевой принцип навигации, или «Скажите, где вы находитесь»?Заключение
Следовать всем правилам и собственной интуиции при проектировании навигационного меню совсем не достаточно, чтобы люди были довольны. Все, что не сходится с их ожиданиями от вашего сайта, или является причиной их замешательства, путаницы, может стоить вам конверсий. Поэтому проведение сплит-тестирований обязательно при проектировании системы навигации. И не только.
Существует множество факторов, которые следует подвергнуть тесту. Вы можете начать с того, что советуют эксперты, но не забудьте также проверить и количество ссылок, цветовое решение, местоположение меню, его размеры, названия категорий и многое другое.
Высоких вам конверсий!
По материалам: crazyegg.com
31-07-2017
50 примеров навигационных меню
Навигационное меню является одной из самых важных деталей сайта. Это то, на что юзер сразу обращает внимание, первый раз посещая сайт. Есть множество способов создания навигационного меню, и так как почти все сайты в той или иной форме используют навигацию, дизайнеры вкладывают в навигацию множество креативных идей.
В этой подборке вы увидите 50 примеров стильных, креативных и отличных навигационных меню, собранных для вашего вдохновения.
1. Черная панель навигации на сайте netdreams.co.uk
2. Винтажное навигационное меню на Tennessee Vacation
3. Такая навигация на Anderbose
4. Навигация на тканевой текстуре на сайте Alpine Meadows
5. Навигация на White House
6. Такая навигация на сайте The Hole In Our Gospel
7. Навигационная панель сайта Cognigen
8. Разноцветная навигация на сайте в стиле гранж Skatepark Hattingen/Ruhr
9. Стильная ретро навигация сайта The Ernest Hemingway Collection
10. Отличная навигационная панель на Thomas Prior
11. Угловатое навигационное меню сайта Navigant Consulting
12. Брызги и потертости в меню навигации сайта The Lippincott
13. Простая навигация на Branded07
14. Навигация в стиле Веб 2.0 на TORRANCE WEB DESIGN
15. Мазки краски в навигации Matt Dempsey
16. И на rzepak.pure.pl навигация в стиле гранж
17. Аккуратная навигационная панель сайта Thuiven
18. Необычное навигационное меню на Africa Tour 2008
19. Стильная навигация на Bamboo Juice
20. Еще одно навигационное меню в стиле гранж на сайте Glocal Ventures
21. Навигация сайта Worldwide Blogger Bake Off
22. Отличная навигация на Agami Creative
23. Простое навигационное меню на Aperfolio
24. Меню сайта Games for Her By You
25. Навигация на сайте Tutorial9
26. Интересная навигация на Sarah Longnecker
27. Меню в стиле гранж на Kayintveen
28. Шрифт “от руки” в меню сайта Manndible Cafe
29. Навигация сайта Creative Spaces
30. Сайт David Hellmann и его навигационное меню
31. Навигация на Viget Extend
32. Фигурный шрифт в меню сайта Candes
33. Навигация в виде кнопок на Red Nose Day
34. Навигация на деревянном фоне на сайте Brad Colbow
35. Стильное меню на csharpdesign.co.uk
36. Навигация “от руки” на ярком сайте Sarah Hyland
37. Полупрозрачная навигационная панель сайта okb
38. Забавные иконки в навигации на MacRabbit
39. Навигация в стиле ретро на сайте Cheesetique
40. Навигационное меню сайта Nitram+Nunca
41. Креативная навигационная панель на Satsu Design
42. Необычная навигация на Africa Oasis Project
43. Навигация на Nuttersmark.com
44. Еще один пример навигации в стиле гранж на toby-powell.co.uk
45. Яркие цвета в навигации сайта GIANT Creative
46. Оригинальное навигационное меню на Organic food Ireland
47. Клочки бумаги в виде навигации на сайте Portfolio de Guillaume Pacheco
48. Навигация на сайте Von Dutch Originals
49. Стильная навигационная панель в стиле гранж на Blue Moon
50. Навигационное меню на сайте Hey Josh
Автор — sixrevisions
Перевод — Дежурка
Комментарии
[an error occurred while processing the directive]Похожие статьи
Случайные статьи
Навигационное меню (V.6) — RU-CENTER
После добавления новой страницы на сайт ссылка на нее автоматически появится в навигационном меню.
Если вы не хотите, чтобы страница отображалась в меню, нужно в настройках страницы (раздел «Имя и URL») снять галку в поле «Показывать в навигационном меню».
Добавление виджета навигационного меню на страницу:
В панели виджетов откройте вкладку «Содержание» и перетащите навигационный виджет (1) на страницу сайта.
Если поместить навигационное меню на шаблон виджетов вместе с заголовками сайта и логотипом, то потом эти элементы можно будет единым блоком размещать на страницах сайта.
Подробнее: шаблон виджетов
Изменение расположения страниц, отображаемых в меню
Чтобы изменить порядок страниц в навигационном меню, зайдите в режим редактирования виджета,
зажмите мышкой пункт меню, который вы хотите переместить, и перетащите его на нужное место.
Настройка навигационного меню
Многоуровневое меню
Создание многоуровневого меню с выпадающим списком подразделов в конструкторе сайтов, к сожалению, невозможно, но мы можем предложить альтернативное решение этой задачи:
- Страницы, объединенные общим признаком, например, это могут быть статьи на определенную тему, создавайте в отдельной папке с названием «Статьи».
- В главном меню создайте новую страницу (пусть ее название также будет «Статьи»).
- На этой странице добавьте виджет «Навигационное меню»; в настройках виджета в меню «Страницы» (1) укажите папку «Статьи».
В результате на странице «Статьи» появилось отдельное меню, в качестве пунктов которого отображаются названия статей.
Подробнее написано в статье «Как создать поднавигационное меню?»
Как изменить название раздела меню?
Можно изменить имя, под которым страница отображается в навигационном меню, не меняя основного имени страницы (имя страницы отображается в адресной строке и в заголовке вкладки браузера).
Для этого:
- Найдите в общем списке страницу, название которой нужно изменить в меню; перейдите в режим настройки этой страницы с помощью кнопки (1).
- Выберите раздел «Имя и URL«(2).
- Введите название меню в поле «Название меню» (3) и нажмите на кнопку «Сохранить», после чего в навигационном меню отобразится новое имя раздела.
Снимите отметку в поле (4), если вы хотите, чтобы данная страница в навигационном меню не отображалась.
Установка стиля меню
- Нажмите на иконку редактирования навигационного виджета:
- Перейдите во вкладку «Стили» (1):
Здесь вы можете редактировать (2) стиль ссылок в навигационном меню:
- стиль обычных ссылок на страницы;
- стиль ссылок, на которые наведен курсор;
- стиль ссылки на страницу, которая открыта в данный момент.
UX-дизайн для меню навигации — UXPUB
Меню навигации – одна из самых просматриваемых и популярных частей интерфейса. Давайте посмотрим на некоторые принципы дизайна навигации, которые помогут нашим пользователям получить лучший опыт.
1. Место размещение имеет значение
В Интернете разработан четкий паттерн навигации (самый верх страницы, левая сторона или нижний колонтитул). Когда меню размещаются за пределами этих областей, его становится неудобно и трудно найти.
2. Покажите пользователям, где они
Четко сообщайте пользователям их текущее местоположение. Используйте несколько подсказок, подобных приведенным ниже, чтобы помочь им сориентироваться. Наши пользователи никогда не должны задаваться вопросом, где они находятся.
3. Мега-меню или выпадающие списки
Исследования показывают, что мега-меню лучше, чем выпадающие списки (раскрывающиеся меню), потому что они показывают все сразу, могут использовать изображения, позволяют лучше группировать разделы и кажутся более привлекательными.
4. Эффективные заголовки ссылок
Пользователь должен иметь возможность легко предсказать, куда его приведет ссылка, до того, как он нажмет на нее (это называется информационным запахом). Для этого самый важный фактор – насколько хорошо мы подписываем ссылки.
5. Сколько пунктов меню?
Правильное количество пунктов в вашем меню зависит от нескольких вещей, например, насколько сложен ваш продукт или насколько сообразительны ваши пользователи. Но постарайтесь выбрать меньше 6 или 7 пунктов. Порядок тоже имеет значение.
6. Не скрывайте их
Меню навигации – одна из самых популярных частей интерфейса, и оно предоставляет пользователю основную контекстную информацию, поэтому оно всегда должно быть видно.
В наши дни по умолчанию на мобильных устройствах используется гамбургер-меню, но есть альтернативы, которые не скрывают полностью навигацию: вкладки, прогрессивное сворачивание, прокручиваемые списки и т. д.
7. Советы по визуальному дизайну
Хороший дизайн интерфейса имеет большое значение. Ниже приведены несколько советов по его улучшению. Если сомневаетесь, протестируете их! И не забывайте о доступности.
Вот и все! Спасибо за прочтение.
Меню навигации сайта WordPress — Azbuka WordPress
— Реклама —
9 096
В этой статье я расскажу, как создать меню навигации WordPress. Используя простой инструмент drag & drop вы сделаете красивое выпадающее меню на вашем сайте.
Меню навигации WordPress
Зачем нужно меню? Оно позволяет представить структуру вашего сайта пользователям — помогает им просматривать разделы и быстро находить нужную информацию.
Меню может располагаться вверху/внизу и справа/слева на странице сайта.
Почти все темы WordPress содержат хотя бы один тип расположения меню.
Создание меню WordPress
Вы можете добавить меню из панели администратора WordPress — Внешний вид — Меню.
На экране появится новое окно «Создать меню», состоящее из двух областей. В левой области находятся ваши страницы, произвольные ссылки и рубрики. А в правой – настраиваемые пункты меню.
Давайте создадим ваше первое меню.
Укажите имя для вашего меню, например. «Мое первое меню», а затем нажмите кнопку «Создать меню».
Перед вами появятся настройки меню:
Как вы можете заметить, тема сайта Azbuka WordPress предлагает 3 варианта расположения меню: main, secondary, footer.
Названия и местоположения меню зависит от выбранной темы и могут отличаться.
Затем выберите страницы, которые вы хотите добавить — отметьте страницы, перечисленные в левой области, и нажмите «Добавить в меню».
Затем выберите местоположение вашего меню и сохраните.
Можете попробовать разное расположение, чтобы посмотреть, как оно будет выглядеть готовым.
Размещение элементов меню
Вы заметили, что каждый добавленный пункт меню стоит в том порядке, в котором вы его добавили. Например, страница «Обо мне» отображается в конце, а «Товары» — в начале.
Не беспокойтесь, пункты меню можно перетаскивать мышкой и выстраивать в нужном вам порядке.
Так вы можете создавать необходимое количество меню для разных областей сайта.
Создание выпадающего меню навигации WordPress
Выпадающее меню является навигационным меню. С родительскими и дочерними элементами.
Когда пользователь наводит мышку на родительский элемент меню, то все остальные, дочерние, элементы плавно появляются один за другим под родительским.
С помощью выпадающего меню вы можете создать правильно структурированную навигационную систему.
Теперь добавим пункт подменю для вашего нового меню.
В структуре перетащите элемент чуть ниже родительского элемента, затем слегка перетащите элемент вправо. Вы заметите, что он автоматически станет элементом подменю.
Так вы можете создать несколько уровней подменю. Но, к сожалению, не все темы поддерживают создание таких многоуровневых меню — большинство дают возможность сделать только 2 уровня.
Добавление рубрик в меню
Для создания выпадающего меню в блоге используются рубрики. И добавляются по такому же принципу, что и страницы. Разверните вкладку «Рубрики», выберите нужные и добавьте в меню.
Вы заметите, что рубрики будут отображаться в виде пунктов меню. Как и в случае со страницами, вы можете перетаскивать рубрики мышкой, чтобы выставить их в нужном порядке.
На примере ниже я сделала так, что все рубрики стали дочерними элементами страницы с блогом.
Добавление произвольных ссылок в меню навигации WordPress
Если вы хотите добавить ссылку на свой профиль в социальной сети или еще где-нибудь, это можно сделать с помощью произвольной ссылки.
Разверните вкладку произвольной ссылки в левом окне. Вы заметите, что там есть два поля. Первое поле предназначено для URL-адреса вашей ссылки, второе — для текста.
Важно: не забывайте прописывать ссылку с http: или https:, иначе она не будет работать.
Редактирование пункта меню
Когда вы добавляете страницы или рубрику, WordPress автоматически использует название страницы или название рубрики в качестве текста ссылки.
Это не означает, что вы не можете его изменить.
Разверните элемент и отредактируйте так, как вам нужно.
Здесь можно изменить заголовок, текст ссылки и добавить атрибут title к ссылке. Сохраните меню, чтобы не потерять все изменения.
Удаление из меню
Также разверните элемент меню и внизу вы увидите красный текст «Удалить».
Области размещения навигационных меню
Каждая тема WP предлагает свои виды расположения навигационного меню.
В теме этого сайта, что я показывала в примерах, есть 3 вида расположения меню. В вашей теме их может больше или меньше. И называться они, конечно, могут по-разному.
Добавление навигационного меню в сайдбаре
Помимо стандартных областей вы можете добавлять меню в сайдбар и другие области с виджетами.
В админке выберите пункт «Внешний вид» — «Виджеты» и добавьте виджет «Произвольное меню» в сайдбар.
Затем вам нужно озаглавить виджет и выбрать одно из своих настроенных меню из списка. Нажмите кнопку сохранения.
Теперь перейдите на сайт и проверьте, как отображается меню в сайдбаре.
Что касается социальных кнопок в меню, некоторые темы предлагают встроенные кнопки социальных сетей.
Если их нет в вашей теме, вы можете установить плагин, например, Menu Social Icons, чтобы добавить кнопки самостоятельно.
Я надеюсь, вам понравилась статья.
Вам может быть интересно:
Пошаговое руководство «Как сделать сайт на WordPress».
А также подробная инструкция по SEO оптимизации сайта: для чего нужно, главные аспекты, сравнение плагинов.
И наши рекомендации, как правильно выбрать тему WordPress.
Если у вас есть вопросы — пишите в комментариях.
И подписывайтесь на нас в Facebook, Instagram и Twitter.
— Реклама —
Адаптивное навигационное меню с иконками
Вы здесь: Главная — CSS — CSS3 — Адаптивное навигационное меню с иконками
Из этого урока вы узнаете как создать адаптивное навигационное меню с иконками, используя библиотеку Font Awesome и палитру цветов, на чистом CSS.
Демонстрация меню.Подключение Font Awesome
Font Awesome
Подключить можно двумя способами: скачать архив или вставить ссылку между тегами <head>. Мы воспользуемся CDN ссылкой.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
Все, иконочный шрифт подключен.
Поиск и вызов иконки на сайте
Первым пунктом меню у нас будет главная страница, вбиваем в поиске слово home и выбираем подходящую нам иконку.
Копируем код, как вы видите на скриншоте ниже и вставляем в нужном нам месте на HTML странице. Таким образом находим иконки для всех пунктов меню.
HTML разметка
Создадим блок <nav>, это специальный тег, предназначенный для ссылок в навигационном меню. Внутри блока вы видите четыре ссылки с временными заглушками для будущих страниц. Внутри ссылки тег <i> вызывает класс иконки и рядом с ним, мы прописали название пункта меню.
<body>
<nav>
<a href="#"><i></i> Главная</a>
<a href="#"><i></i> Услуги</a>
<a href="#"><i></i> Портфолио</a>
<a href="#"><i></i> Контакты</a>
</nav></div>
</body>
Что означают эти классы?
<i></i>
- fas – стили иконки Solid
- fa-fw – иконки с фиксированной шириной, необходимо для выравнивания
- fa-home – изображение иконки
На текущий момент, наше навигационное меню выглядит таким образом:
Сейчас мы видим голую заготовку без стилей и совсем не представляем себе, какие сочетания цветов использовать, чтобы смотрелось наше меню более-менее адекватно. Я предлагаю не изобретать велосипед, а отправиться в поисках уже готовой цветовой палитры.
Давайте заглянем на сайт Material Palette.
Я выбираю два рядом стоящие цвета: Purple и Deep Purple и вижу сгенерированную палитру цветов с подсказками, какой цвет основной, а какой для текста и иконок. Дальше мы будем копировать нужные нам цвета и задавать их в CSS коде.
CSS код
Смотрим на палитру и задаем цвет фона для тега <nav>.
nav {
width: 100%;
background-color: #673ab7;
overflow: auto;
}
Стилизуем ссылки панели навигации, палитра рекомендует для них белый цвет. Здесь мы задаем стили как для текста ссылок, так и для иконок одновременно, поскольку иконки – шрифтовые.
nav a {
float: left;
padding: 12px;
color: #fff;
text-decoration: none;
font-size: 17px;
}
Меняем цвет фона при наведении мышки на ссылки.
nav a:hover {
background-color: #d1C4E9;
}
Задаем цвет текущей активной ссылке.
.active {
background-color: #e040fb;
}
Адаптируем меню навигации
На ширине экрана меньше, чем 500 пикселей, меню начинает ломаться. Нам необходимо строчный элемент <a> сделать блочным и отменить обтекание блоков слева.
@media screen and (max-width: 500px) {
nav a {
float: none;
display: block;
}
}
Таким образом мы получим вертикальное меню, на всех устройствах с ширина экранов, которых меньше 500 пикселей.
Посмотреть код целиком можно на Codepen
See the Pen Responsive Navigation Bar with Icons by porsake (@porsake) on CodePen.
- Создано 15.10.2018 10:00:00
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Основное руководство по навигации по веб-сайтам [Типы и основные примеры]
Хорошая навигация — одна из наиболее важных функций веб-сайта. И мы не просто говорим об этом — есть исследования, подтверждающие это.
Легко понять, почему навигация так важна для посетителей. Это позволяет им быстро и легко находить нужную информацию, например, сообщение в блоге или страницу продукта. Это также может помочь им найти важную информацию, в которой они не знали, что им нужно, например тарифный план, страницу подписки по электронной почте или контактную информацию.
Это делает навигацию важной частью пользовательского опыта и стратегии вашего веб-сайта. Система навигации, которая позволяет посетителям находить контент с помощью поиска и просмотра, может не только повысить шансы посетителей дольше просматривать ваш сайт, но и повысить вероятность того, что они совершат какие-либо действия на вашем сайте.
Чтобы помочь вам разработать систему навигации, отвечающую потребностям посетителей, давайте подробнее рассмотрим, что такое навигация по веб-сайту и различные способы ее реализации на своем сайте.Затем мы рассмотрим примеры с реальных веб-сайтов и рассмотрим некоторые передовые методы разработки интерфейса с возможностью навигации. Давайте начнем.
Что такое навигация по сайту?
Навигация по веб-сайту — это набор компонентов пользовательского интерфейса, которые помогают посетителям находить контент и функции на сайте. Эти компоненты имеют форму текста, ссылок и кнопок, а также меню.
Последний пункт особенно важен для навигации, поэтому давайте быстро определим, что на самом деле означает меню в веб-дизайне:
Что такое меню навигации?
На веб-сайте меню навигации представляет собой организованный список ссылок на другие веб-страницы, обычно внутренние страницы.Меню навигации чаще всего появляются в заголовках страниц или на боковых панелях веб-сайта, позволяя посетителям быстро получить доступ к наиболее полезным страницам.
Теперь было бы легко оставить это там и покончить с этим. Однако навигация не просто помогает нам переходить с одной веб-страницы на другую — она также помогает нам понять отношения между отдельными страницами на веб-сайте.
Это потому, что навигация считается верхушкой айсберга информационной архитектуры (IA) веб-сайта, согласно аналитику IA Натаниэлю Дэвису в статье для UXmatters.Под поверхностью воды находятся части айсберга, которые не могут видеть внешний посетитель: исследования, стратегия, менеджмент и организация, которые были задействованы при создании внутреннего аудита веб-сайта. Над поверхностью находится интерфейс навигации, чаще всего представленный в виде набора гипертекстовых ссылок и панели поиска.
Источник изображения
Другими словами, IA веб-сайта не отображается в интерфейсе навигации, но является основой этого интерфейса. Это дает посетителям ощущение, что контент связан и категоризирован в соответствии с их потребностями и ожиданиями — без фактического отображения всех электронных таблиц и диаграмм, которые использовались для определения и организации этих отношений между вашим контентом.
Вот пример иерархии веб-сайта. На первый взгляд немного пугающе, правда? В основном меню навигации вы, скорее всего, увидите только три названия разделов этого первого уровня. Подстраницы должны быть вложены в подменю навигации. Давайте определим этот термин ниже.
Источник изображения
Что такое суб-навигация на веб-сайте?
Под-навигация — также известная как локальная навигация — это интерфейс, в котором посетители могут найти категории нижнего уровня IA сайта.Обычно это подкатегории основных навигационных ссылок.
Например, на некоммерческом веб-сайте зоопарка Нэшвилла главное меню навигации содержит элемент навигации «Поддержка». При наведении курсора на этот элемент появляется под-меню навигации, предлагающее несколько способов поддержки зоопарка. Есть ссылки на страницы пожертвований, карьеры и волонтеров.
Источник изображения
Типы навигации по сайту
Навигация — если не , то , то один из самых важных элементов дизайна на веб-сайте.В конечном итоге это влияет на то, будут ли посетители заходить на вашу домашнюю страницу и просматривать или нажимать кнопку «Назад».
Как вы структурируете навигацию на своем веб-сайте, зависит от вашей целевой аудитории и от того, какой формат, по вашему мнению, будет наиболее интуитивно понятным и доступным для них. Давайте рассмотрим несколько наиболее распространенных типов навигации по веб-сайту, из которых вы можете выбрать.
Горизонтальная панель навигации
Горизонтальная панель навигации — наиболее распространенный тип меню навигации. Он перечисляет основные страницы рядом и помещается в заголовок веб-сайта.На многих веб-сайтах есть одни и те же разделы, такие как «О программе», «Продукты», «Цены» и «Контакты», потому что посетители ожидают их увидеть. Но эти разделы не обязательно будут самыми полезными для посетителей на всех сайтах.
Возьмем для примера панель навигации на Blavity . Представленные разделы включают три категории контента — «Новости», «Комментарии» и «Образ жизни», а также ссылки на страницу отправки и страницу регистрации. Они с большей вероятностью предоставят посетителям легкий доступ к нужным страницам, а не к стандартным страницам «О нас», «Цены» и «Контакты».
Источник изображения
Раскрывающееся меню навигации
Выпадающие навигационные меню идеально подходят для сайтов с большим содержанием контента со сложным IA. Если вы хотите включить много ссылок на страницы на панели навигации, вы не можете перечислить их все рядом — это либо будет выглядеть загроможденным, либо будет невозможно разместить их все по горизонтали. Вместо этого перечислите наиболее важные или общие элементы на панели навигации верхнего уровня, а остальные включите в раскрывающееся меню.
Sephora является прекрасным примером, поскольку предлагает так много продуктов и услуг.На его веб-сайте вы можете навести курсор на любую основную ссылку навигации, и появится подробное раскрывающееся меню. Выпадающее меню будет содержать все категории для этого конкретного раздела сайта.
Источник изображения
Меню навигации по гамбургеру
Гамбургер-меню чаще всего встречается в мобильном веб-дизайне. При таком подходе элементы навигации часто отображаются горизонтально на экранах большего размера и сворачиваются за кнопкой гамбургера на экранах меньшего размера.Когда посетители нажимают на этот трехстрочный значок, появляется вертикальный раскрывающийся список или горизонтальное всплывающее окно со ссылками для навигации. Этот тип дизайна идеально подходит для мобильных приложений или сайтов с ограниченными возможностями.
Посмотрите гамбургер-меню на мобильном сайте Nettle Studio.
Источник изображения
Меню навигации вертикальной боковой панели
В этом типе меню элементы накладываются друг на друга и располагаются на боковой панели. Вертикальная навигация менее популярна, чем горизонтальная, но имеет ряд преимуществ.Поскольку недвижимость не так ограничена, вы можете написать более длинные навигационные ссылки и включить больше опций верхнего уровня. Кроме того, он более привлекателен, поэтому этот стиль хорошо подходит для агентств и других творческих компаний.
Взгляните на вертикальную боковую панель ресторана Arbor ниже.
Источник изображения
Меню навигации нижнего колонтитула
Меню нижнего колонтитула обычно дополняется горизонтальной панелью навигации. Если посетитель не находит ссылку, которую он ищет в заголовке, он может прокрутить страницу вниз, чтобы просмотреть дополнительные параметры.
New York Times имеет 19 навигационных ссылок в горизонтальном меню навигации вверху страницы. В его нижнем колонтитуле есть более 50 ссылок, большинство из которых относятся к одной из категорий, перечисленных в главном меню навигации. Это обеспечивает легкий доступ к подкатегориям самых популярных разделов веб-сайта.
Источник изображения
Дизайн панели навигации веб-сайта
Не существует единственного «правильного» способа разработать навигацию на вашем веб-сайте. Вам просто нужно подумать о том, как сделать так, чтобы новые и повторные посетители могли максимально использовать возможности вашего сайта.
Если вы сконцентрируете свой дизайн на уникальных посетителях, ваша структура навигации может выглядеть и функционировать иначе, чем структура навигации на другом сайте, и это хорошо.
Имея в виду вашу целевую аудиторию, давайте рассмотрим этапы процесса создания панели навигации веб-сайта ниже.
Что должно быть включено в панель навигации вашего сайта?
При наличии всех страниц на вашем веб-сайте может быть трудно определить, какие из них достаточно важны, чтобы быть частью универсальной навигации.В целях SEO и удобства пользователей Orbit Media рекомендует ограничить навигацию максимум семью элементами.
Итак, как начать сужать поле? Заинтересованные стороны из всей вашей компании могут иметь разные мнения о том, что является навигационным, а что нет, но в конечном итоге вам следует обратиться к посетителям вашего веб-сайта, чтобы помочь вам определить наилучшее направление.
Сортировка карт
Сортировка карточек — это простой метод взаимодействия с пользователем, который помогает вам проникнуть в умы посетителей вашего веб-сайта и спроектировать навигацию с их точки зрения.Хорошая новость в том, что для выполнения этого упражнения вам не обязательно иметь опыт работы с пользовательским интерфейсом.
Пригласите людей не из вашей организации на простое 20-минутное упражнение. Разложите на столе стопку учетных карточек, каждая из которых представляет собой главную страницу вашего сайта. Затем попросите участника расположить карточки так, как они считают нужным. Найдите тенденции в том, как ваши участники группируют страницы на вашем сайте, и спросите их, как бы они назвали каждую категорию. Полученная в результате организация может помочь построить основу навигации по сайту.
Источник изображения
Отчеты об атрибуции
Если ваше программное обеспечение для маркетинговой аналитики предоставляет это, отчеты об атрибуции идеально подходят для определения того, что должно быть включено в вашу основную навигацию. Этот отчет связывает количество вновь созданных контактов с их взаимодействием с вашим бизнесом, чтобы вы могли лучше понять содержание и функции вашего сайта, которые превращают посетителей в потенциальных клиентов. Вот несколько примеров отчетов, доступных в инструменте создания отчетов HubSpot.
Источник изображения
Возьмем, к примеру, собственный веб-сайт HubSpot. Хотя некоторые из наших материалов привлекают большой трафик, чаще всего люди, купившие программное обеспечение HubSpot, просматривают страницы продуктов, цены, тематические исследования и партнерские отношения. Если вы посмотрите на нашу домашнюю страницу, вы увидите, что навигация отражает этот вывод и расставляет приоритеты для этих важных страниц.
Поток пользователей
Если у вас нет отчета об атрибуции, вы все равно можете понять, какие страницы важны на вашем сайте, с помощью отчета «Поток пользователей» в Google Analytics.Хотя в этом отчете не проводится различие между стандартным трафиком и клиентским трафиком, он подчеркивает, как люди ориентируются на вашем сайте. По словам самого Google: «Отчет о потоках пользователей — это графическое представление путей, по которым пользователи прошли через ваш сайт, от источника, через различные страницы, а также о том, где они выходили с вашего сайта».
Как следует заказывать элементы навигации?
Порядок имеет значение при навигации по сайту. Когнитивные исследования свидетельствуют о том, что посетители веб-страниц, как правило, лучше всего запоминают ссылки на обоих концах навигации.Часто называемые эффектами первичности и новизны, они говорят о явлениях, которые слова, представленные первым или последним в списке, имеют тенденцию сильнее притягивать внимание зрителей. Итак, для своего веб-сайта вы должны быть очень внимательными в отношении того, какие элементы вы размещаете в этих местах. Подумайте о том, что наиболее важно для вашего типичного посетителя.
В статье для блога Нила Пателя веб-стратег Энди Крестодина говорит: «Поместите самые важные элементы в начало навигации, а наименее важные — посередине.«Контакт» должен быть последним элементом в списке, помещая его в крайний правый угол горизонтальной навигации верхнего уровня, стандартное расположение ».
Как сформулировать параметры навигации?
Формулировка вариантов навигации зависит от вашего типа бизнеса или организации. Вы можете выбрать прямолинейность или поэкспериментировать с более креативными ярлыками. При выборе слов для основных навигационных ссылок наиболее важно помнить о том, какие термины будут использовать ваши клиенты для описания этих страниц.Затем подумайте о поисковой оптимизации.
Объектно-ориентированный
Пожалуй, наиболее понятным вариантом для веб-сайтов является объектно-ориентированная навигация. Объектно-ориентированная навигация помещает контент в конкретные категории (обычно состоящие только из существительных). HubSpot.com является примером объектно-ориентированной навигации, как и сайт Emerson College ниже. Этот тип организации рассматривает навигацию как оглавление и группирует страницы по темам или категориям, которые лучше всего подходят.
Источник изображения
Обратите внимание, что навигационные ссылки справа больше основаны на действиях, чем на объектах.Давайте определим это ниже.
На основе действий
Некоторые сайты лучше обслуживаются ориентированной на действия навигацией. Чтобы знать, когда это уместно, спросите свою аудиторию, приходят ли они на ваш веб-сайт в первую очередь, чтобы узнать о чем-то или совершить конкретное действие. В приведенном ниже примере из Университета Говарда посетители явно приходят с мыслями о действии. Они приходят не для того, чтобы прочитать «о» странице — они приходят, чтобы подать заявку, посетить или сделать пожертвование.
Источник изображения
На основе аудитории
Для компаний, у которых есть несколько аудиторий с четкими линиями, вы можете рассмотреть возможность навигации или суб-навигации на основе аудитории, как в примере ниже.Однако это работает только в том случае, если посетитель может легко классифицировать себя. Например, вы не захотите использовать малую компанию или компанию среднего размера или маркетинговое или рекламное агентство, поскольку эти границы часто размыты и могут оставить вашу аудиторию в замешательстве относительно того, куда идти в первую очередь.
В приведенном ниже примере Бостонский колледж отлично справляется с использованием подхода, основанного на аудитории, в сочетании с навигацией на основе объектов.
Источник изображения
Оптимизировано для поисковых систем
В дополнение к тому, как ваша аудитория инстинктивно организует ваш сайт, вам нужно подумать о том, как лучше всего оптимизировать условия навигации для поиска.В статье о Distilled специалист по SEO Кристина Кледжик советует использовать Google Analytics и инструмент Google Keywords для определения поисковых запросов, которые чаще всего приводят людей на ваш сайт, и использовать варианты этих слов в качестве руководства для навигации по вашему сайту.
Примеры навигации по веб-сайту
Как упоминалось выше, не существует «правильного» способа создать панель навигации веб-сайта, если она позволяет вашим посетителям находить информацию, которую они ищут, и побуждает их к действию — будь то покупка, пожертвование, создание аккаунт и так далее.Давайте посмотрим на примеры ниже, которые делают именно это.
Propa Beauty
Propa Beauty имеет минималистичную горизонтальную панель навигации, предназначенную для увеличения продаж или превращения посетителей в участников. Его логотип находится слева. В центре находится ссылка на страницу архива продукта. Справа расположены три значка, каждый из которых представляет собой окно поиска, ссылку на страницу входа в систему и ссылку на корзину покупок.
Источник изображения
NWP
NWP — еще один сайт электронной коммерции с горизонтальной панелью навигации.Однако, в отличие от Propa Beauty, панель навигации NWP представляет собой комбинированное меню. Когда страница загружается, вы можете видеть только основные навигационные ссылки. Однако, если вы наведете курсор на «Магазин», появится раскрывающееся меню со списком различных подкатегорий одежды, которую вы можете купить на сайте.
Источник изображения
Тени
Shade Room также использует два стиля меню навигации. Вверху страницы вы видите стандартный горизонтальный заголовок. Обратите внимание, что этот заголовок содержит кнопку гамбургера справа.Если вы нажмете на эту кнопку, справа появится вторичный интерфейс навигации. Это действует как всплывающее окно лайтбокса, блокируя часть содержимого и затемняя остальную часть фона, а также содержит дополнительные навигационные ссылки, которые вы можете использовать для просмотра сайта.
Источник изображения
Патагония
Чтобы разместить свой большой каталог товаров, Patagonia разместила на своем веб-сайте мегаменю. Когда пользователи наводят курсор на элемент «Магазин» на горизонтальной панели навигации, появляется огромный список ссылок для всего, что вы, возможно, захотите просмотреть.Также обратите внимание, что другие элементы на панели навигации, а именно «Активизм» и «Истории», не запускают мегаменю при наведении курсора мыши.
Источник изображения
Briogeo
Как и Patagonia, навигация по веб-сайту на Briogeo.com сосредоточена на горизонтальном меню навигации, в котором отображаются различные варианты навигации в зависимости от того, на какой элемент вы наводите курсор. Главный пункт «купить все» (изображенный ниже) показывает мегаменю со ссылками на весь сайт, а также изображениями для представления его коллекций.Напротив, вариант «наши отличия» интенсивнее использует изображения, чтобы сформировать более сильную эмоциональную связь с посетителями.
Источник изображения
Твиттер
Twitter имеет один из стандартных типов навигации — вертикальное меню боковой панели — но с изюминкой. Вместо того, чтобы просто отображать элементы текстовой навигации, он включает значки рядом с каждым элементом. Обратите внимание на стратегическое использование цвета. Дом выделен синим, потому что я на этой странице. Единственный другой цвет на панели навигации — это кнопка CTA.
Источник изображения
Оливье Жиллизо
На сайте портфолио креативного директора Оливье Жиллизо есть привлекательное вертикальное меню боковой панели, в котором его проекты отображаются на временной шкале. При наведении курсора на один из элементов навигации отображается видео-превью проекта. Нажав на элемент навигации, вы попадете на страницу с дополнительной информацией и визуальными эффектами проекта.
Источник изображения
Пипкорн
До сих пор мы в основном обсуждали функциональность меню навигации, но изменение стиля также может сделать пользовательский интерфейс более приятным.Возьмем, к примеру, веб-сайт Pipcorn — его горизонтальная навигация показывает вертикальные раскрывающиеся списки, которые расширяются в великолепной анимации. Это деталь, которая полностью поддерживает кустарный брендинг сайта и заставляет посетителей чувствовать себя гораздо более погруженными и заинтересованными.
Источник изображения
Рекомендации по навигации по веб-сайту
- Будьте последовательны.
- Дизайн для экрана любого размера.
- Сделайте самую важную информацию доступной.
- Добавьте панировочные сухари.
Золотое правило навигации по сайту? Не заставляйте людей думать. Консультант по юзабилити Стив Круг основывает целую книгу на этом мнении. Чтобы пользователи могли легко перемещаться по вашему веб-сайту, не чувствуя себя потерянным или разочарованным, следуйте этим рекомендациям.
1. Будьте последовательны.
Будьте последовательны в том, как вы форматируете и разрабатываете свой навигационный интерфейс. Идея не в том, чтобы быть последовательным ради последовательности.Речь идет о соответствии текущим знаниям и ожиданиям посетителя.
Допустим, на вашей домашней странице ваши ссылки черные, и когда пользователь наводит на них указатель мыши, появляется подчеркивание. Тогда это должен быть стиль всех ваших навигационных ссылок на каждой странице вашего сайта. В противном случае посетители не будут знать, какой текст имеет гиперссылку, а какой нет в ваших меню навигации.
Обратите внимание, что главное и вспомогательное меню навигации Madewell имеют одинаковый стиль ссылок. В суб-меню навигации текст немного меньше и не выделен жирным шрифтом, что является визуальным признаком того, что эти ссылки имеют второстепенное значение.
Источник изображения
2. Дизайн для любого размера экрана.
Поскольку в этом году на мобильные устройства приходилось более половины обычных посещений поисковыми системами, как никогда важно оптимизировать свой веб-сайт для мобильных устройств и экранов других размеров. Это включает в себя ваши навигационные меню.
При разработке навигации по веб-сайту сначала думайте о мобильных устройствах. Начав с экрана наименьшего размера, вам нужно будет расставить приоритеты, какие ссылки наиболее важны для включения в основную навигацию и в каком порядке.Вам также нужно будет решить, какие функции навигации — например, кнопка гамбургера — необходимы для мобильных устройств и как они впишутся в дизайн вашего рабочего стола. Это поможет вам перейти к разработке для экранов большего размера с четким представлением о том, какие страницы и функции навигации наиболее важны.
3. Сделайте самую важную информацию доступной.
Вы когда-нибудь слышали о правиле трех щелчков мышью? Идея состоит в том, что каждая структура навигации веб-сайта должна позволять кому-то перейти на любую страницу веб-сайта и найти то, что ему нужно, за три клика.
Хотя эта идея глубоко укоренилась в мире веб-дизайна, она была в значительной степени дискредитирована. Фактически, одно исследование показало, что вероятность того, что пользователи бросят задачу после трех кликов, не выше, чем после 12 кликов. На диаграмме ниже показано, что некоторые пользователи продолжали пытаться найти желаемый контент после 25 кликов.
Однако основа правила хороша. Вы действительно хотите ограничить количество усилий, необходимых посетителям для доступа к ключевой информации или выполнения задачи на вашем сайте.Подсчет кликов — это слишком поверхностный показатель. Вместо этого вам следует сосредоточиться на создании четких путей, сокращении времени загрузки страницы и устранении других проблем на пути пользователя.
4. Добавьте панировочные сухари.
Чтобы понять навигацию по хлебным крошкам, вспомните сказку о Гензеле и Гретель. По дороге в лес двое детей бросают панировочные сухари, чтобы найти дорогу домой. Навигация с помощью хлебных крошек предназначена для той же цели: дать пользователям возможность визуализировать, где они находятся в структуре веб-сайта, и иметь возможность вернуться к страницам более высокого уровня.
И недвижимости не занимает много. Эта вторичная панель навигации обычно состоит из текстовых ссылок, разделенных символом «больше» (>) и размещенных под заголовком.
В приведенном ниже примере из Best Buy вы можете просматривать ноутбуки на ПК и понимать, что вам нужен планшет. Вместо того, чтобы начинать с нового запроса в поле поиска, вы можете просто щелкнуть ссылку «Компьютеры и планшеты» в меню навигации.
Источник изображения
Создание навигации для вашего веб-сайта
Разработка навигации по сайту требует тщательного рассмотрения посетителей и целей сайта.Вы хотите, чтобы люди и роботы поисковых систем могли находить контент или функции, которые они ищут, и понимать взаимосвязь между вашими страницами. Таким образом, они будут продолжать просматривать ваш сайт и предпринимать желаемые действия на вашем сайте — например, создавать учетную запись или совершать покупку — вместо того, чтобы разочаровываться.
Примечание редактора: этот пост был первоначально опубликован в октябре 2020 года и был обновлен для полноты.
Как добавить меню навигации в WordPress (Руководство для начинающих)
Вы хотите добавить меню навигации на свой сайт WordPress?
WordPress поставляется с интерфейсом перетаскивания меню, который вы можете использовать для создания меню заголовков, меню с раскрывающимися параметрами и многого другого.
В этом пошаговом руководстве мы покажем вам, как легко добавить меню навигации в WordPress.
Что такое меню навигации?
Меню навигации — это список ссылок, указывающих на важные области веб-сайта. Обычно они представлены в виде горизонтальной полосы ссылок вверху каждой страницы веб-сайта.
Меню навигации придает структуру вашего сайта и помогает посетителям найти то, что они ищут. Вот как выглядит меню навигации на WPBeginner:
WordPress позволяет очень легко добавлять меню и подменю.Вы можете добавлять ссылки на свои самые важные страницы, категории или темы, сообщения в блогах и даже настраиваемые ссылки, такие как ваш профиль в социальных сетях.
Точное расположение вашего меню будет зависеть от вашей темы WordPress. У большинства тем будет несколько опций, поэтому вы можете создавать разные меню, которые могут отображаться в разных местах.
Например, большинство тем WordPress имеют главное меню, которое отображается вверху. Некоторые темы могут включать дополнительное меню, нижний колонтитул или меню мобильной навигации.
Видеоурок
Подписаться на WPBeginner
Если вы предпочитаете письменные инструкции, просто продолжайте читать.
Создание вашего первого пользовательского меню навигации
Чтобы создать меню навигации, вам нужно посетить страницу Внешний вид »Меню на панели администратора WordPress.
Во-первых, вам нужно указать имя для своего меню, например «Главное меню навигации», а затем нажать кнопку «Создать меню».Это расширит область меню, и она будет выглядеть так:
Далее вы можете выбрать страницы, которые хотите добавить в меню. Вы можете либо автоматически добавлять все новые страницы верхнего уровня, либо выбирать определенные страницы в левом столбце.
Сначала перейдите на вкладку «Просмотреть все», чтобы просмотреть все страницы своего сайта. После этого установите флажок рядом с каждой страницей, которую вы хотите добавить в меню, а затем нажмите кнопку «Добавить в меню».
После того, как ваши страницы были добавлены, вы можете перемещать их, перетаскивая их.
Примечание: Пункты всех меню перечислены в вертикальном (сверху вниз) списке в редакторе меню. Когда вы размещаете меню на своем сайте, оно будет отображаться либо по вертикали, либо по горизонтали (слева направо), в зависимости от выбранного местоположения.
У большинства тем есть несколько разных мест, куда вы можете поместить меню. В этом примере мы используем тему 2020 по умолчанию, которая имеет 5 разных местоположений.
После добавления страниц в меню выберите место, где вы хотите отобразить меню, и нажмите кнопку «Сохранить меню».
Совет: Если вы не знаете, где находится каждое из мест, попробуйте сохранить меню в разных местах, а затем зайдите на свой сайт, чтобы посмотреть, как оно выглядит. Вероятно, вы не захотите использовать все местоположения, но, возможно, захотите использовать более одного.
Вот наше готовое меню на сайте:
Создание раскрывающихся меню в WordPress
Выпадающие меню, иногда называемые вложенными меню, представляют собой навигационные меню с родительскими и дочерними элементами меню.Когда вы наводите курсор на родительский элемент, все дочерние элементы появляются под ним в подменю.
Чтобы создать подменю, перетащите элемент под родительским элементом, а затем слегка перетащите его вправо. Мы сделали это с помощью трех подпунктов под «Услуги» в нашем меню:
Вот подменю на сайте:
Вы даже можете добавить несколько уровней раскрывающегося списка, чтобы ваше подменю могло иметь подменю. Это может выглядеть немного загроможденным, а многие темы не поддерживают многослойные раскрывающиеся меню.
В этом примере вы можете видеть, что «Дизайн логотипа» (дочерний элемент «Услуги») имеет два собственных дочерних элемента.
Добавление категорий в меню WordPress
Если вы используете WordPress для ведения блога, вы можете добавить категории блога в раскрывающемся меню WordPress. Делаем это на WPBeginner:
Вы можете легко добавлять категории в свое меню, щелкнув вкладку «Категории» в левой части экрана «Меню». Вам также может потребоваться щелкнуть вкладку «Просмотреть все», чтобы увидеть все свои категории.
Просто выберите категории, которые хотите добавить в меню, а затем нажмите кнопку «Добавить в меню».
Категории будут отображаться как обычные пункты меню внизу вашего меню. Вы можете перетащить их на место. Мы собираемся поместить все эти категории в пункт меню «Блог».
Вы хотите, чтобы на вашем сайте была страница блога, отдельная от вашей домашней страницы? Если да, ознакомьтесь с нашим руководством о том, как создать отдельную страницу для сообщений в блоге в WordPress.
Добавление пользовательских ссылок в меню навигации WordPress
Помимо категорий и страниц, WordPress также упрощает добавление пользовательских ссылок в ваше меню. Вы можете использовать его для ссылки на свои профили в социальных сетях, ваш интернет-магазин и / или другие веб-сайты, которыми вы владеете.
Вам нужно будет использовать вкладку «Пользовательские ссылки» на экране меню. Просто добавьте ссылку вместе с текстом, который хотите использовать в своем меню.
Вы даже можете проявить творческий подход и добавить в свое меню значки социальных сетей.
Редактирование или удаление пункта меню в меню навигации WordPress
Когда вы добавляете страницы или категории в свое настраиваемое меню навигации, WordPress использует заголовок страницы или название категории в качестве текста ссылки. Вы можете изменить это, если хотите.
Любой пункт меню можно редактировать, щелкнув расположенную рядом с ним стрелку вниз.
Здесь вы можете изменить название пункта меню. Здесь также можно нажать «Удалить», чтобы полностью убрать ссылку из меню.
Если у вас возникли проблемы с интерфейсом перетаскивания, вы также можете перемещать элемент меню, щелкнув соответствующую ссылку «Переместить».
Добавление меню WordPress в боковые панели и нижние колонтитулы
Вам не нужно просто придерживаться мест отображения вашей темы. Вы можете добавить меню навигации в любую область, в которой используются виджеты, например в боковую панель или нижний колонтитул.
Просто перейдите к Внешний вид »Виджеты и добавьте виджет« Меню навигации »на свою боковую панель.Затем добавьте заголовок для виджета и выберите нужное меню из раскрывающегося списка «Выбрать меню».
Вот пример настраиваемого нижнего колонтитула WordPress, созданного на веб-сайте Сайеда Балхи.
Дальше с меню навигации
Если вы хотите создать действительно эпическое меню с множеством ссылок, у нас есть руководство о том, как создать мегаменю в WordPress. Это позволяет создать раскрывающийся список с множеством элементов, включая изображения.
Мега-меню — отличный вариант, если у вас большой сайт, например интернет-магазин или новостной сайт.Этот тип меню используется на таких сайтах, как Reuters, Buzzfeed, Starbucks и т. Д.
Часто задаваемые вопросы о меню WordPress
Вот некоторые из наиболее частых вопросов, которые мы слышим о меню навигации WordPress от новичков.
1. Как добавить ссылку на домашнюю страницу в меню WordPress?
Чтобы добавить свою домашнюю страницу в меню навигации, вам нужно будет щелкнуть вкладку «Просмотреть все» в разделе «Страницы». Оттуда вы должны увидеть свою домашнюю страницу.
Установите флажок рядом с «Домой» и нажмите «Добавить в меню».Не забудьте сохранить изменения.
2. Как добавить несколько меню навигации в WordPress?
В WordPress вы можете создать столько меню, сколько захотите. Чтобы разместить меню на своем веб-сайте, вам нужно будет добавить его в одно из мест меню вашей темы или в область виджетов, как мы показали выше.
Чтобы добавить несколько меню навигации на свой сайт WordPress, сначала создайте меню, следуя нашему руководству выше.
Чтобы разместить их на своем сайте, щелкните вкладку «Управление местоположениями».
Отсюда вы можете выбрать, какое меню вы хотите отображать в местах меню, доступных в вашей теме.
Если вы хотите добавить новое расположение меню на свой сайт, см. Наше руководство о том, как добавить пользовательские меню навигации в темы WordPress.
Мы надеемся, что эта статья помогла вам узнать, как добавить меню навигации в WordPress. Вы также можете ознакомиться с нашими руководствами о том, как стилизовать меню навигации в WordPress и как создать липкое плавающее меню навигации в WordPress.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.
5 советов по созданию идеального меню навигации на веб-сайте
Если панель навигации — это дорожная карта для вашего веб-сайта, вероятно, лучше всего показать все, что там есть, верно? Так люди обязательно найдут то, что им нужно…
На самом деле, не так уж и много.
Многие люди используют подход «больше значит больше» к меню навигации своего веб-сайта — логика состоит в том, что если посетителям нужно что-то найти, по крайней мере, они смогут найти это в главном меню.
Дело в том, что навигационные меню работают лучше всего, когда они короткие и простые . Вот несколько советов по оптимизации панели навигации вашего веб-сайта, чтобы она была простой в использовании и хорошо выглядела.
Нужна ли помощь для навигации по вашему сайту?
Один из способов оценить ваш веб-сайт — это просто подсчитать количество пунктов меню в вашей навигации . Хорошее практическое правило — использовать от трех до шести вариантов. Вот почему:
С Jimdo вы получите готовое меню навигации с нужными страницами для вашей отрасли.Все, что вам нужно сделать, это настроить его! Если в вашем меню слишком много элементов, навигация не разделится на две строки. Вместо этого он автоматически добавит их в раскрывающееся меню, чтобы вашим посетителям было легче читать.
Узнайте, как запустить собственный веб-сайт сегодня!
Итак, что именно вы должны учитывать при построении системы навигации? Эти советы могут помочь.
Совет 1. Ограничьте количество пунктов менюДавайте взглянем на этот пример из нашего любимого примера сайта Jimdo Café:
Есть ли на вашем веб-сайте переполненная панель навигации, подобная этой?В первом примере на панели навигации 11 пунктов меню.Как читателю, трудно (не говоря уже о довольно скучном) просматривать их все, когда все, что вам, вероятно, нужно, — это чашка кофе.
Во втором примере мы оптимизировали навигацию на основе наиболее важной информации, которую посетители, вероятно, будут искать, когда зайдут на наш веб-сайт. Это помогает нашим пользователям и делает сайт намного чище и организованнее.
Аааааааааааааще лучше.Будет ли мое меню так хорошо выглядеть на мобильных телефонах? Да! Jimdo автоматически настраивает меню навигации для любого устройства (будь то ноутбук, планшет или смартфон).На небольших мобильных экранах посетители смогут найти дополнительные страницы на вкладке «Еще».
Полезно знать : Если вам сложно решить, что важно, попробуйте эти советы по созданию плана сайта.
Совет 2: Используйте короткие, лаконичные названия для пунктов менюЭто может не сработать для всех, но если ваша панель навигации всего на немного превышает лимит , некоторые простые словесные обработки могут помочь. Делайте слова, которые вы используете в своем меню, актуальными, точными и короткими.Таким образом, их легко поймут и люди, и поисковые системы. Например, лучше сказать «Свяжитесь с нами», чем «Свяжитесь с нами» — потому что это короче и это стандартный язык, который люди ищут при сканировании страницы.
Совет 3. Создавайте категории и раскрывающиеся менюЭто действительно простой способ разместить больше элементов в вашей навигации без беспорядка. В приведенном ниже примере «Завтрак» и «Кофе и чай» не нуждаются в отдельном месте в верхней части навигации.Они имеют смысл размещаться под «Меню». Вы можете превратить обычную страницу в подстраницу из меню «Страницы».
Некоторые пункты меню могут логически входить в раскрывающееся меню под вашими главными страницами. Совет 4: вырезать, вырезать, вырезать!Некоторые страницы могут вообще не понадобиться. В приведенном выше примере Jimdo Café вам может не понадобиться отдельная страница для карт — вы можете включить эту информацию на свою страницу Locations. То же самое и с часами работы — поскольку это информация, которую большинство людей захотят найти сразу, вы можете просто указать часы работы прямо на своей домашней странице или добавить этот текст в нижний колонтитул.
Если вам нужна помощь в обдумывании того, какие страницы являются наиболее важными, ознакомьтесь с этой публикацией с советами, которые помогут вам создать свой веб-сайт.
Если вы внимательно посмотрите на панель навигации, вы можете найти некоторые страницы, которые на самом деле не нужны. Вы можете превратить их в подстраницы или переместить информацию о них на другую страницу. Совет 5. Повысьте конверсию с помощью настраиваемой кнопки с призывом к действиюВы также можете добавить свою собственную кнопку с призывом к действию, например «Позвоните нам» или «Забронируйте сейчас», на панель навигации, чтобы она была легко направлять посетителей туда, куда вы хотите.
Думайте о кнопке с призывом к действию как о «ярлыке» к выбранному вами месту назначения. Вы можете использовать его, чтобы направить больше посетителей на страницу «О себе», заставить их сделать бронирование или позволить им позвонить вам одним касанием.
Добавление кнопки с призывом к действию в меню навигации.Если вы хотите улучшить поток и структуру своего веб-сайта, помочь людям найти то, что они ищут, и просто улучшить внешний вид вашего сайта в целом, некоторые простые настройки верхней навигации могут действительно творить чудеса.Попробуйте на своем веб-сайте и сообщите нам, как это происходит!
Сделайте свой бизнес онлайн с Jimdo.
Рекомендации по навигации по веб-сайту — 7 советов и предупреждений по дизайну навигации по веб-сайту
Мелочи имеют большое значение. Навигация по вашему сайту — отличный пример. Структура и метки вашей навигации могут иметь огромное влияние на результаты. Вот почему:
- Навигация влияет на трафик: насколько высокий ваш рейтинг, сколько трафика вы получите от поиска
- Навигация влияет на конверсии: насколько прост в использовании сайт, какой процент посетителей превращается в лидов и клиентов
Вот видео и контрольный список для передовых методов навигации по сайту.Это идеи и советы по дизайну, а также примеры того, что делать (и чего не делать) с меню вашего веб-сайта.
1. Будьте описательны
«Что мы делаем» на самом деле не говорит о том, что вы делаете. Так же как «Продукты», «Услуги» или «Решения». Описательная навигация с использованием ключевых фраз лучше по двум причинам. Здесь на помощь приходят SEO и конверсии.
- Описательные ярлыки в вашей навигации хороши для поисковых систем
Панель навигации — это ключевое место, указывающее на релевантность для поисковых систем.Поскольку ваша навигация отображается на каждой странице, описательная метка показывает Google, что вы действительно относитесь к этой теме.
- Описательные ярлыки в вашей навигации удобны для посетителей
Панель навигации визуально выделяется, поэтому она мгновенно отображается. Когда в нем перечислены ваши основные продукты или услуги, с первого взгляда будет очевидно, чем занимается ваша компания, и они будут знать, что находятся в нужном месте.
Используйте главную навигацию как место, чтобы начать рассказывать людям и поисковым системам о том, что вы делаете.Используйте ярлыки, в которых используются популярные фразы для посетителей и популярные ключевые фразы.
Внимание! Избегайте таких ярлыков, как «услуги» и «решения».
Если у вас есть одна страница со списком всех ваших услуг, она никогда не будет ранжироваться. Это потому, что он не фокусируется на одной теме. Каждая страница вашего сайта имеет шанс ранжирования, если она сосредоточена на теме, по ключевой фразе.
Никто не ищет «продукты» или «услуги», поэтому эти ярлыки не улучшают ваш рейтинг.
Вот почему архитектура вашего сайта, а не только навигация, является ключевой для SEO. На веб-сайте, оптимизированном для поиска, есть страница для каждой услуги, каждого продукта, каждого члена команды и темы. Избегайте создания страницы «услуги», если она не ссылается на другие страницы, оптимизированные для поиска для каждой услуги.
Для получения дополнительной информации прочитайте, как сделать карту сайта.
2. Избегайте навигации на основе форматов
Навигационные ярлыки, такие как «видео», «фотографии» и «официальные документы», сообщают посетителям формат контента, но не тему.Люди не заходят на веб-сайты в поисках видео или технических документов. Они посещают веб-сайты в поисках ответов и информации.
Ярлыки, обозначающие формат, не являются описательными и поэтому не очень полезны для посетителей. Вот почему Аврора Бедфорд из Nielsen Norman Group не рекомендует использовать форматную навигацию.
« Пользователей, интересующихся определенной темой, обычно не волнует, в каком формате им будет доставлена информация; они сосредоточены исключительно на поиске ответов на поставленный ими вопрос. »- Аврора Бедфорд, специалист по пользовательскому опыту, Nielsen Norman Group |
3. Избегайте раскрывающихся меню
Популярный, да. Но не лучшая идея. Избегать раскрывающихся меню полезно по двум причинам:
- Подходит для поисковых систем: Выпадающие меню могут быть трудными для сканирования поисковыми системами. В зависимости от того, как они запрограммированы, они могут привести к проблемам.
- Хорошо для посетителей: Исследования юзабилити показывают, что раскрывающиеся меню раздражают.И вот почему: посетители двигают глазами гораздо быстрее, чем мышью. Когда они наводят указатель мыши на пункт меню, они, скорее всего, уже решили щелкнуть… а затем вы дали им больше вариантов. Это сбой в сознании посетителя.
Что еще более важно, выпадающие списки побуждают посетителей пропускать важные страницы. Если вы используете раскрывающиеся списки, вы можете легко увидеть эту проблему в своей аналитике.
Но исследование показывает, что один тип раскрывающегося меню хорошо работает в исследованиях юзабилити: «мега раскрывающееся меню».«Они предлагают множество вариантов, поэтому момент трения стоит того.
Если у вас большой сайт с множеством страниц и очень разнообразным набором продуктов или услуг, мегаменю может быть хорошей идеей, несмотря на то, что они значительно увеличивают количество ссылок с вашей домашней страницы.
4. Ограничьте количество пунктов меню семью
Некоторые веб-сайты содержат сотни ссылок на главной странице. Плохо. Ограничение количества ссылок в основной навигации полезно по двум причинам.Это те же две причины для использования описательных этикеток:
- Меньшее количество элементов в вашей навигации подходит для поисковых систем
Ваша домашняя страница пользуется наибольшим «авторитетом» у поисковых систем, потому что больше сайтов ссылаются на вашу домашнюю страницу, чем на ваши внутренние страницы. Эти полномочия переходят на более глубокие страницы через вашу навигацию.
Если ваша домашняя страница содержит множество ссылок, этот разбавляет авторитет, передаваемый с нее на ваши внутренние страницы.Это снижает вероятность ранжирования ваших внутренних страниц.
Чем лаконичнее ваша навигация, тем больше авторитетности будет отдаваться каждой внутренней странице, что повысит вероятность ранжирования ваших внутренних страниц.
Дополнительные сведения см. В разделе «Рекомендации по внутренним ссылкам».
Пример: Если ваша домашняя страница имеет авторитет 38 в соответствии с Open Site Explorer, то она имеет как раз этот объем полномочий для передачи на внутренние страницы.
Предположим, что ваша навигация включает 50 элементов и вместе с каждой другой ссылкой и кнопкой на странице, ваша домашняя страница ссылается на 200 страниц.Это означает, что количество полномочий, переданных с домашней страницы каждой из этих страниц, делится на 200.
Если вы сократите количество ссылок вдвое, вы удвоите объем полномочий, передаваемых с домашней страницы, и увеличите вероятность ранжирования ваших внутренних страниц.
Совет! «Калькулятор ссылок» подсчитывает количество ссылок на любой странице. Он также оценивает увеличение авторитета, которое будет передано, если вы уменьшите количество ссылок. Он использует рейтинг страницы, а не авторитет домена, но концепция та же.
- Меньше элементов в вашей навигации, полезных для посетителей
Кратковременная память содержит только семь элементов плюс-минус два. Это из знаменитой статьи по психологии, опубликованной Джорджем Миллером в 1956 году.
Более недавние исследования показывают, что, хотя мозг использует «фрагменты» как метод улучшения воспоминаний в краткосрочной памяти, их количество зависит от категории. Для чисел может быть семь, а для слов — только пять.
В любом случае, чем больше элементов в вашей навигации, тем сложнее информацию запомнить и обработать для ваших посетителей.Визуально восемь — НАМНОГО больше семи. Если их слишком много, глаза посетителей могут просканировать мимо важных предметов.
Если вам нужно использовать более семи предметов, подумайте о том, чтобы разбить их на группы.
Внимание! Избегайте длинных списков.
Разбейте навигацию на группы по пять-семь элементов.
Совет! Каждый раз, когда вы удаляете пункт меню (или любой другой элемент) со страницы, все, что осталось, становится более заметным и с большей вероятностью будет замечено и рассмотрено.
Чтобы принимать трудные решения, нужна дисциплина. Ты можешь это сделать. Испытайте себя и сократите его до пяти!
5. Порядок навигации по вашему сайту важен
Количество элементов имеет значение, но не менее важен их порядок.
В навигации по веб-сайту, как и в любом списке, элементы в начале и в конце наиболее эффективны, потому что именно здесь внимание и удержание наиболее высоки. Это называется эффектом серийного положения, и он сочетается с когнитивными искажениями:
- Эффект первенства: Элементы в начале списка легче запомнить.
- Эффект недавности: Элементы в конце списка (или только что произошедшие события) запоминаются легче.
По этой причине все, что мы помещаем в начало или конец нашей навигации, становится более заметным. В эти места мы должны положить те предметы, которые наиболее важны для нашего бизнеса и наших посетителей.
Всегда старайтесь размещать самые важные для посетителей вещи на наиболее видных местах. Это соответствует основному принципу веб-дизайна и контент-маркетинга:
Сначала дайте посетителям то, что они хотят, а затем они могут дать вам то, что вы хотите.
Так что ставьте самые популярные и важные элементы в начало навигации. Не знаете, что это такое? Просто посмотрите на свою аналитику. Говоря об аналитике, перейдем к нашему последнему совету.
6. Как оптимизировать навигацию по сайту
Разработка навигации — это начало, а не конец. Цифровые чернила никогда не высыхают. Через несколько недель после создания навигации вы можете использовать Analytics, чтобы оглянуться назад и провести небольшую оценку.
Есть два отчета, которые покажут вам, какие элементы навигации чаще всего используются вашими посетителями.Одним из них является «сводка навигации» или «представление на странице» в отчете о поведении. Остальные — отчеты Behavior Flow / User Flow.
In-page Analytics показывает маленькие оранжевые прямоугольники рядом с каждым из ваших элементов навигации, показывающие, какой процент посетителей перешел на каждую страницу с любой страницы. Это неточно и вводит в заблуждение по нескольким причинам. Тоже немного глючит.
Если этот отчет не работает для вас, вы можете просмотреть «сводку навигации» на своей домашней странице. Список страниц и процент просмотров для каждой дадут вам хорошее представление о том, что работает в вашем меню.
Еще одно представление о том, что люди нажимают, можно найти в отчете Поведение> Поток поведения . Этот отчет идентичен отчету Аудитория> Поток пользователей . Эти отчеты идентичны, если вы не отслеживаете события. Отслеживание событий добавляется к данным отчета «Поток поведения».
В любом случае отчет будет выглядеть примерно так:
Совет! Чтобы узнать больше о том, как использовать отчет User Flow, ознакомьтесь с основными путями на вашем веб-сайте.
Эти отчеты позволяют получить представление о том, какие элементы навигации используют посетители, а какие — нет, что делает возможной оптимизацию.
Вот несколько примеров решений, которые вы можете принять на основе анализа этих отчетов.
- Удалите элементов, на которые редко нажимают, если они не критичны
- Переименуйте или измените метку, на которую редко нажимают, если они важны
- Переместить элемента, которые часто нажимаются, в начало
Внимание! Имейте в виду, что ваша домашняя страница может не быть точкой входа для многих посетителей.Веб-сайт, оптимизированный для поиска, имеет множество точек входа. Многие (или даже большинство) посетителей не переходят с главной страницы.
7. Навигация по сайту на мобильных устройствах
Адаптивный веб-дизайн принес с собой лучшие практики и стандарты мобильной навигации. Его можно описать двумя словами: «икона гамбургера».
Это значок, состоящий из трех коротких горизонтальных линий, представляющий меню. Но это немного похоже на бутерброд, поэтому люди называют его иконкой гамбургера. Он появляется в правом верхнем углу мобильных веб-сайтов, и при нажатии на него открывается меню навигации.
Вот несколько примеров мобильной навигации.
Хотя это стало доминирующим стандартом, добавление слова «меню» может помочь посетителям найти этот тип «скрытой» навигации. Nielsen Norman Group предупреждает, что скрытая навигация увеличивает время выполнения задач для посетителей.
ProTip! Для мобильных посетителей: убедитесь, что номер телефона превращается в кнопку, которая набирает номер при нажатии. Просто добавьте tel: в код href для номера телефона мобильной версии вашего сайта.Код должен выглядеть примерно так:
