Меню на сайте это: Меню сайта: разновидности и решения

Я делаю веб-браузер iOS в Xcode 4.5, но я хочу, чтобы одно из меню выглядело примерно так. Как называется это меню и как его сделать? Изображение здесь:

Я пытаюсь реализовать меню css на веб-сайте и столкнулся с проблемой. Примечание: css находится в файле, это единственное, что называется под javascript http://w.sharethis.com/button/buttons.js и…

Если вы перейдете по этой ссылке http:/ / ironsummitmedia.github.io/startbootstrap-agency/ , вы найдете демо-версию шаблона bootstrap, известного как agency. Я хочу использовать функцию агентства в…

Я относительно новичок в HTML/CSS. и был бы признателен, если бы все можно было объяснить шаг за шагом. Я хотел бы имитировать (в учебных целях) это меню (включая пользовательское изображение…

На следующем рисунке я высмеял стиль активного меню CSS, который хотел бы найти примеры и, надеюсь, воспроизвести. Вы заметите, что есть треугольник, выделяющий Активное меню, и он также может быть…

Я пытаюсь найти соответствующий код для кнопок сверху, но я не знаю, где этот код находится, и мне трудно его найти, потому что я не знаю, как называется это меню. Кто-нибудь знает, как называется…

Недавно Tapatalk обновил свое приложение, и появилось новое меню, которого я раньше не видел. Кто-нибудь знает, как называется это меню? В левом верхнем углу есть изображение, которое представляет…

Я знаю, что название воняет, но, как говорится, Я понятия не имею, как называется то, что я хочу создать. Я хочу сделать список ссылок (или, скорее, меню, если вы предпочитаете, но без выпадающего…

Пытаюсь попрактиковаться в создании скользящего вниз меню с html и css. Моя единственная проблема заключается в том, как элементы списка перекрываются с пунктом меню. Как заставить меню скользить за…

Как называется этот вид меню и как я могу сделать его таким же?

оставьте это в прошлом. Читайте на Cossa.ru

Плоский дизайн

В 2015 году флэт стал откровением. Плоские иллюстрации были буквально везде. Google разработал огромные гайды по material design и научил всех упрощать. Из интерфейсов пропала чрезмерная детализация, и всё стало максимально понятным. Но на дворе уже 2021 — прошло 6 лет, и пора убирать флэт-картинки до нового витка моды.

Что делать

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

Видео на фоне

Боль всех фронтендеров и UX-еров. Видео на фоне раньше было у каждого второго сайта. И не важно, про что он был — про новую модель смартфона или рис из Италии. Считается, что видео добавляет динамики, передаёт атмосферу бренда. Но есть сразу много «но». Во-первых, быстродействие — видео сильно тормозит все процессы на сайте. Во-вторых, скука — если делать видео меньше, оно повторяется чаще и быстро надоедает. В-третьих, адаптивность — видео на мобильных устройствах часто не грузится или отображается неправильно.

Data-driven без чепухи: спецпроект для практиков

Коллеги из E-Promo объясняют, как data-driven подход помогает проектировать сильные маркетинговые стратегии:

• Откуда брать ценные для бизнеса данные;
• Как их корректно агрегировать и анализировать;
• Как устроено data-driven продвижение на примерах свежих кейсов;
• И каких результатов можно достичь, интегрировав ИИ-сервисы в работу маркетологов.

2021 — год умного маркетинга, заряженного технологиями и большими данными, не отставайте →

Реклама

Что делать

Если очень хочется поставить фоновое видео, пусть это будет не первый экран, а, например, раздел про бенефиты, где это будет в тему. Для первых экранов хорошо заходят микровзаимодействия или интерактивные детали. Но обязательно тестируйте UX, чтобы не получить высокий процент отказов из-за тяжёлой странички.

Стоковые фото

Это не фото, конечно, но забавный кейс с супербоула: две разных компании использовали одно и то же видео для разных роликов. Стоковые изображения — это картинка ради картинки, и пользы для клиента они не несут.

Что делать

Лучше использовать свои фотографии: продукта, клиентов, услуг. Нет времени на фотосессию или это просто невозможно? Используйте иллюстрации: чертежи, схемы, картинки для разных ситуаций. И старайтесь делать их оригинальными — такое всегда запоминается.

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

Горизонтальный скролл

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

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

Что делать

Тренд последних лет, который не сдаёт позиций, — параллакс! Это анимация по скроллу. Выглядит эффектно, восприятию информации не мешает, UX не ухудшает. Идеально!

Яркие цвета

Кислотно-неоновые гаммы лучше оставить тем, кто плачет на техно. Яркие цвета кричат нашему древнему мозгу: «Внимание! Опасность!». Во-первых, это отвлекает от информации на сайте, даже если её там немного. А во-вторых, наш мозг за последний год уже настрессовал — пандемия и самоизоляция ни для кого не прошли бесследно.

Что делать

В моде естественность и натуральность, в том числе, в цветовых решениях. Акценты можно расставить с помощью контрастных, но не кричащих оттенков.

Экстремальный минимализм

Минимализм — это хорошо, но доводить до крайности точно не стоит. Кажется, что пользователь заинтересуется, захочет узнать детали. Но! На сайты люди ходят за информацией. Не нашли что-то быстро у вас — найдут у другого.

Что делать

Не нужно отказываться от минимализма, просто нельзя бросать посетителя один на один с сайтом: нужны детали, намёки и подсказки, чтобы человек понял, что нужно доскроллить или щёлкнуть. А лучше вообще не ударяться в таинственность и загадочность и общаться по-человечески.

Гамбургер-меню

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

На мобильных версиях использование «бургеров» оправдывают экономией места и простой адаптивностью. Но если такое меню раскрыть, оно как раз закроет весь контент. А если есть несколько уровней вложенности, то переход по ним может быть затруднён.

Что делать

Решений много, но универсального среди них нет. Можно, например, вывести пункты меню на страницу и сделать их элементом дизайна. Использовать нижнюю панель вкладок, как сейчас модно в приложениях. Или придумать что-то своё. Главное — отталкиваться от задач и функционала сайта.

Антитренды, конечно, понятие спорное — то, что было в моде 5 лет назад, может снова вернуться, и все мы снова будем рисовать во флэте. На самом деле, главное — использовать те приёмы в дизайне, которые помогут пользователю решить его проблему, а сайту — выполнить свою задачу.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.

Создание гиперссылок — Изучение веб-разработки

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

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL.)

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

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

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a>, и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
</p>

Это дало нам следующий результат:

Я создал ссылку на домашнюю страницу Mozilla.

Добавляем информацию через атрибут title

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

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/"
     title="Лучшее место для поиска дополнительной информации
     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
  </a>.
</p>

Вот что получилось (описание появится, если навести курсор на ссылку):

Я создал ссылку на домашнюю страницу Mozilla.

Примечание: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.

Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

• Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
• Теперь превратите некоторые фрагменты документа в ссылки.
• Добавьте ссылкам атрибут title.

Ссылки-блоки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.

<a href="https://www.mozilla.org/ru/">
  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
</a>

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

• Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на contacts.html, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html:

  <p>Хотите связаться с конкретным сотрудником?
     Найдите подробную информацию на нашей
    <a href="contacts.html">странице контактов</a>.
  </p>

• Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на projects/index.html, вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — projects/index.html:

  <p>Посетите мою
    <a href="projects/index.html">домашнюю страницу проекта</a>.
  </p>

• Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html, указывающую на pdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf. «Подняться вверх на уровень каталога» обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf:

  <p>Ссылка на
    <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
  </p>

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: 
../../../сложный/путь/к/моему/файлу.html.

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

<h3>Почтовый адрес</h3>

Затем, чтобы связаться с  этим конкретным  id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

<p>Хотите написать мне письмо? Используйте наш
  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
</p>

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

<p>
  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
  можно найти в нижней части этой страницы.
</p>

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Абсолютный URL

Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница index.html загружается в каталог, называемый projects, который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com, страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как index.html, для загрузки, если он не указан в URL-адресе.).

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

Относительный URL

Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

Советуем вам основательно разобраться в этой теме!

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

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

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

<p><a href="https://firefox.com/">
  Скачать Firefox
</a></p>

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

<p><a href="https://firefox.com/">
  Нажми сюда
</a>
чтобы скачать Firefox</p>

Советы:

• Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
• Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
• Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
• Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта  (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

• Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
• Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

• Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
• Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.

Посмотрите на примеры, чтобы увидеть, как добавить описание:

<p><a href="http://www.example.com/large-report.pdf">
  Скачать отчёт о продажах (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Посмотреть видео (видео откроется в отдельном окне, HD качество)
</a></p>

<p><a href="http://www.example.com/car-game">
  Играть в гонки (необходим Flash)
</a></p>

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Скачать Firefox 39 для Windows
</a>

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

Что делать:

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент <a> и mailto: — адрес почты.

Самыми простыми и часто используемыми формами mailto: являются  subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

<a href="mailto:[email protected]">Отправить письмо для nowhere</a>

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

<a href="mailto:[email protected][email protected]&[email protected]&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

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

Как редактировать меню на вашем сайте

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

Время от времени вы можете вносить изменения в свое меню, например…

• Добавление нового пункта меню (например, ссылки на новую страницу или область вашего сайта),
• Удаление пункта меню (например, продукта или услуги, которую вы больше не предлагаете),
• Или просто переименуйте пункты меню, чтобы они были более доступными или фирменными.

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

Прежде чем мы сможем начать, мы должны сначала войти на наш веб-сайт и найти страницу «Меню».

Шаг 1: Войдите в свою панель управления WordPress.

Шаг 2. На левой боковой панели наведите указатель мыши на «Внешний вид» и нажмите «Меню».

На странице «Меню» мы будем вносить все изменения.Это может показаться довольно сложным, но на самом деле это довольно просто. Страница разделена на три отдельные части…

Верхняя часть: переключатель меню

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

Левая часть: страницы и сообщения вашего веб-сайта

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

Правая часть: ваше текущее меню

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

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

Как добавить новый пункт меню

Шаг 1. Используйте переключатель меню в верхней части, чтобы выбрать меню, которое хотите отредактировать.

У вас может быть только одно меню на вашем веб-сайте, в этом случае у вас будет только один вариант в раскрывающемся списке.

Шаг 2а. Найдите страницу, страницу или категорию, которую вы хотите добавить.

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

Чтобы добавить запись блога или категорию блога в свое меню, просто щелкните вкладку «Записи» или «Категории», чтобы открыть ее, а затем выполните аналогичные шаги, описанные выше.

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

Если хотите, вы можете отметить несколько сообщений или страниц, чтобы добавить их одновременно.

Шаг 2b: Добавление настраиваемой ссылки в ваше меню.

Еще одна возможность, которая у нас есть, — это возможность добавить пользовательскую ссылку в наше меню. Пользовательская ссылка — это ссылка на любую другую веб-страницу, не являющуюся частью вашего собственного сайта, например: Facebook, Twitter, LinkedIn и т. Д.

Добавление пользовательских ссылок может быть полезно по многим причинам; возможно, вам нужна ссылка в меню, открывающая ваш канал YouTube? Или, возможно, вы хотите направить посетителей к вашему продукту, размещенному на таком сайте, как Gumroad или Etsy.

Чтобы добавить настраиваемую ссылку, щелкните вкладку «Пользовательские ссылки», чтобы открыть ее.

В отличие от сообщений, страниц и категорий, где мы можем просто выбрать страницы, которые хотим добавить, для настраиваемых ссылок нам нужно фактически включать полную ссылку на страницу. Введите или вставьте ссылку в поле «URL» — не забудьте удалить «http: //», которое уже есть в поле, если оно уже есть в вашей ссылке. Вы хотите, чтобы ваша ссылка не выглядела так: https: // https: //www.mywebsite.come/. Допускается любое из следующего:

• https: // www.mywebsite.com/
• www.mywebsite.com
• mywebsite.com

Затем нам нужно присвоить нашей ссылке ярлык, и мы можем сделать это в поле «Текст ссылки». Это способ сделать ссылку более аккуратной и удобной в вашем меню. В этом примере я не хочу, чтобы в моем меню отображалась полная ссылка, я бы предпочел, чтобы вместо нее было написано «Отличный веб-сайт». Я напечатаю это в поле «Текст ссылки»…

Наконец, я добавлю это в свое меню, нажав кнопку «Добавить в меню».

Шаг 3: Нажмите кнопку «Сохранить меню», чтобы сохранить изменения.

Как удалить пункт меню

Шаг 1. Используйте переключатель меню в верхней части, чтобы выбрать меню, которое хотите отредактировать.

Шаг 2. Найдите пункт меню, который хотите удалить, и нажмите стрелку справа от него.

Шаг 3: Нажмите «Удалить», чтобы удалить элемент из меню.

Примечание. Удаление элемента из вашего меню не приводит к удалению самой страницы / публикации.

Шаг 4: Нажмите кнопку «Сохранить меню», чтобы сохранить изменения.

Как переименовать пункт меню

Иногда вам может потребоваться изменить метку пункта меню, но оставить ссылку такой же. Возможно, когда вы впервые запустили свой сайт, вы работали в одиночку, но теперь у вас есть партнер или команда. В подобных ситуациях было бы полезно изменить метки страниц, такие как «Свяжитесь со мной», чтобы сказать «Свяжитесь с нами». К счастью, сделать это на своем веб-сайте быстро и легко.

Шаг 1. В правой части страницы найдите пункт меню, который хотите переименовать.

Шаг 2: Щелкните стрелку рядом с пунктом меню, чтобы открыть его.

Шаг 3. Измените текст в «Навигационной метке» на все, что вам нравится.

Шаг 4: Нажмите кнопку «Сохранить меню», чтобы сохранить изменения.

Как добавить пункты меню из выпадающих меню

Меню веб-сайта играют очень важную роль, и их использование часто упускается из виду — когда в последний раз вы были благодарны за хорошо продуманное меню веб-сайта? Скорее всего, вы не можете вспомнить, и это хорошо! Хороший дизайн часто незаметен, и то же самое касается дизайна меню.Но что, если у вас много важных ссылок, как мы можем обеспечить легкий доступ, не создавая беспорядка на нашем веб-сайте?

Ответ — выпадающие меню.

Когда у нас много пунктов меню, мы часто можем сгруппировать их по другим пунктам. Таким образом, у вас может быть ссылка с надписью «О компании» в вашем меню, но когда посетитель наводит на них курсор, он увидит список других похожих ссылок, таких как «Обо мне», «О моей компании» и «Истории успеха». . Выпадающие меню гарантируют, что ваше меню будет полезным и не загроможденным.

Шаг 1: Сначала добавьте все пункты меню в свое меню.

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

Мы хотим, чтобы последние три страницы отображались в раскрывающемся меню в разделе «О программе» — мы называем это «вложенностью» . Для этого нам нужно сделать отступ на трех страницах, чтобы они были «вложены» в пункт меню «О программе».

Шаг 2: Начиная с пункта меню непосредственно под элементом, под которым мы встраиваемся, наведите на него курсор, затем щелкните и перетащите его вправо до появления отступа.

Шаг 3: Повторите процесс щелчка и перетаскивания со всеми элементами меню, которые мы хотим вложить.

Шаг 4: Теперь ваши пункты меню должны быть вложены под пунктом главного меню. Нажмите «Сохранить меню», чтобы сохранить изменения.

Теперь, когда вы просматриваете свой веб-сайт, вы увидите, что у нас есть пункт главного меню, а другие элементы, которые мы вложили под ним, теперь отображаются в раскрывающемся меню при наведении курсора.

Как удалить пункты меню из выпадающих меню

Шаги, которые вам нужно будет предпринять для заключительной части нашего руководства по меню, зависят от того, чего вы хотите достичь. Если вы хотите полностью удалить элемент меню из раскрывающегося меню (вы вообще не хотите, чтобы он был в меню), просто выполните действия, описанные в разделе «Как удалить элемент меню» выше. Однако, если вы хотите сохранить этот пункт меню, но просто удалить его из раскрывающегося меню, читайте дальше…

Шаг 1. Найдите пункт меню, который вы хотите удалить из раскрывающегося меню.

Шаг 2: Щелкните и перетащите элемент меню, который вы хотите удалить, перетащив его от других вложенных элементов. После этого элемент меню будет удален из раскрывающегося меню.

Примечание. Убедитесь, что куда бы вы ни поместили свой пункт меню, он не имеет отступов, иначе он все равно будет в раскрывающемся меню.

В этом примере удаленный пункт меню не имеет отступа и будет отображаться как собственная ссылка в нашем меню:

Однако в этом примере я случайно вложил пункт меню в другое раскрывающееся меню:

Шаг 3. Нажмите кнопку «Сохранить меню», чтобы сохранить изменения.

Настройте навигацию на своем сайте SharePoint

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

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

Настроить наследование для верхней панели ссылок на сайте, не предназначенном для публикации

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

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

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

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

Если сайт переименован на странице «Заголовок», «Описание» и «Значок», имя сайта не обновляется на верхней панели ссылок.Чтобы изменить имя, которое отображается на верхней панели ссылок, необходимо отредактировать верхнюю панель ссылок.

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

1. На Действия на сайте меню , щелкните Настройки сайта .

2. В столбце Look and Feel щелкните Верхняя панель ссылок .
   

3. Выполните одно из следующих действий:

   • Чтобы создать настраиваемые ссылки для дочернего сайта, щелкните Остановить наследование ссылок . Ссылки с верхней панели ссылок родительского сайта не сохраняются при настройке дочернего сайта для прекращения наследования ссылок.

   • Чтобы использовать те же ссылки, что и на родительском сайте, щелкните Использовать ссылки с родительского сайта .Ссылки на верхней панели ссылок дочернего сайта будут удалены, когда вы настроите дочерний сайт для использования той же верхней панели ссылок, что и родительский сайт.

Настроить наследование для верхней панели ссылок на сайте публикации

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

1. В меню Действия сайта , щелкните Параметры сайта .

2. В столбце Look and Feel щелкните Navigation .

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

3. В разделе Global Navigation выполните одно из следующих действий:

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

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

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

4. В разделе Global Navigation ,

   • Чтобы отобразить дочерние сайты текущего сайта на верхней панели ссылок, выберите Показать дочерние сайты .

   • Для отображения страниц текущего сайта на верхней панели ссылок выберите Показать страницы .

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

5. Щелкните ОК .

8 ошибок, из-за которых создается неуклюжий дизайн сайта

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

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

Но эти ошибки — те, на которых будущие веб-дизайнеры могут легко поучиться — именно это и привело нас сюда сегодня.Давайте поговорим о 8 из тех навигационных ошибок, которые заставляют работать с клавиатурой и заставляют бросать ноутбук, которые привели к дурной славе веб-дизайна.

Омерзительная восьмерка веб-навигации

Несоблюдение Конвенции

Сегодня в сети насчитывается около 1,75 миллиарда веб-сайтов, что по сути означает, что ваш веб-сайт конкурирует с примерно 1 749 999 999 другими за внимание пользователей Интернета во всем мире.

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

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

Помните, когда мы упоминали, как навигация сводится к набору подсказок? Многие из этих подсказок основаны на небольшом так называемом соглашении: общие комбинации или конфигурации текста и / или визуальных элементов, которые грамотные пользователи Интернета узнали и поняли.

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

Однако, когда условности отбрасываются ради уникальности, новому пользователю становится намного труднее добраться туда, где ему нужно. Они могут признать, что ваш сайт не похож на любой другой … но они будут помнить свое собственное разочарование больше, чем ваш «интересный» веб-макет.

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

• Сделайте главное меню навигации легко видимым
• Разместите логотип вашего бренда в верхнем левом углу страницы
• Используйте интуитивно понятную иконографию (значок дома для домашней страницы, сумка для покупок или тележка для обозначения онлайн-корзины и т. Д.)
• Реализуйте четкую визуальную иерархию, чтобы помочь пользователям легко обрабатывать каждую страницу

Добавление слишком большого количества пунктов меню

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

Почему? Потому что, хотя вы можете настроить классификацию информации на своем веб-сайте, вы не сможете изменить тот факт, что семь — это магическое число для обработки информации. В 1950-х годах знаменитый гарвардский психолог Джордж Миллер изучал, как человеческий мозг использует «фрагменты» в качестве механизма для поглощения новой информации.Он обнаружил, что наша кратковременная память обычно допускает только около семи «фрагментов» за раз.

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

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

Но когда вы группируете эти предметы, остерегайтесь…

Неправильное использование раскрывающихся меню

Выпадающие меню очень ненавидят сообщество веб-разработчиков, и не без причины. При использовании в качестве части основной навигации по сайту раскрывающиеся списки исторически несут ответственность за…

• Постановка проблем для SEO. Поисковые системы могут бороться со сканированием элементов в формате раскрывающегося меню.
• Замедление перехода пользователей со страницы на страницу. Когда пользователи решают нажать на основную кнопку навигации, внезапное появление раскрывающегося меню может замедлить их продвижение.
• Обычно отягчающие обстоятельства. Еще раз: не позволяйте своему сайту выделяться по неправильным причинам!

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

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

Или, если у вас есть место в основной навигации, подумайте о замене одного из элементов верхнего уровня на элементы, представленные в его бывшем раскрывающемся меню.Это отличный способ удалить раскрывающиеся меню, в которых есть только 1-2 элемента.

Если какая-либо из этих альтернатив не нравится вашему сайту, особенно если это связано с огромным объемом доступного контента, замените раскрывающиеся меню более красивым, мощным и хорошо воспринимаемым аналогом: мегаменю.

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

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

Начало меню: излишне глубокие меню

Что касается меню, давайте перейдем к обсуждению двух других типов: плоских меню и глубоких меню.

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

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

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

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

Если бы мы могли высказать свое личное мнение, как веб-дизайнеры, так и обычные веб-пользователи, мы определенно предпочли бы чаще использовать более плоское меню.

Нечеткие (или основанные на формате) этикетки

В веб-навигации иногда есть тонкая грань между четким и расплывчатым.

Подумайте об использовании слова «Блог» в качестве навигационной метки верхнего уровня. Хотя это короткий, простой и чрезвычайно распространенный ярлык, он все же сообщает посетителям Интернета, что именно они получат, если нажмут на него.

То же самое с «Свяжитесь с нами». Это простой и стандартный набор фраз, но он также сразу распознается как призыв к действию, который ведет пользователей на какую-то страницу с контактами.

А как насчет «Услуги» как лейбла? Или «Продукты»? Это те же самые узнаваемые колокольчики? Они могут. Но в то же время … они упускают возможность продемонстрировать, чем является ваш бренд и чем он занимается.

Не для того, чтобы гудеть, но давайте взглянем на одно из наших собственных творений в Интернете: веб-сайт Hotel Saranac, роскошного исторического отеля, расположенного на озере Саранак, штат Нью-Йорк.Если вы перейдете на сайт hotelsaranac.com, вы увидите следующие пункты меню:

Посмотрите на первые три элемента навигации: Stay, Dine и Explore. Когда вы попадаете на главную страницу, зная, что она связана с отелем, эти короткие, состоящие из одного слова ярлыки по-прежнему довольно понятны.

• Пребывание: звучит так, как будто это ведет к информации, полезной для бронирования, не так ли?
• Dine: теперь мы должны говорить о еде и столовых.
• Исследуйте: хотя и не так явно, как первые два, это, кажется, предлагает путь, ведущий к пониманию района озера Саранак и других интересных мест, которые может предложить отель.

А что, если бы мы вместо этого решили объединить все три темы под ярлыком «Услуги»? Это только мы, или это кажется излишне расплывчатым?

Представьте, если бы кто-то, кто попал на сайт отеля Saranac, не знал (каким-то образом), что это был сайт отеля. Термин «услуги» на самом деле не поможет им понять, в то время как «остаться» и «пообедать» — гораздо больше.

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

В конечном счете, расплывчатость отличается от ясности и краткости, но бывает трудно различить. Когда вы пишете элементы навигации для своего сайта, спросите себя: «Что эта фраза указывает новым и существующим посетителям?» Если ваши посетители могут взглянуть на этикетку и получить полезные сведения, какими бы маленькими они ни были, значит, вы на правильном пути.

Излишнее скрытие навигации

На новом веб-сайте простой способ ориентироваться от страницы к странице — следить за меню навигации, что становится затруднительным, когда меню автоматически скрывается!

Хотя скрытие навигации с помощью гамбургер-меню является обычным явлением на мобильных сайтах, где трудно найти место, не так много веских причин скрывать меню, когда на рабочем столе много места.

Хотя некоторые могут предпочитать скрыть это в пользу эстетики, мы говорим, что в меню навигации нет ничего эстетически неприятного.И, в конце концов, чего стоит красивый сайт, если это задача, которую нужно пройти?

Это, по сути, то, что Nielsen Norman Group обнаружила, изучая влияние скрытой навигации на общее впечатление пользователя. Более высокий рейтинг сложности и более длительное время выполнения задач были связаны со скрытой навигацией.

Если вы не соревнуетесь за место на экране карманного размера, пусть ваша система навигации верхнего уровня увидит свет на ваших веб-страницах.

Игнорирование ложного дна на веб-странице

Уместно закончить этот список примечанием о дне — ложном дне.

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

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

Это особенно важно, когда у вас есть большое изображение заголовка, которое занимает много места на вашей домашней странице. На самом деле, это звучит для нас немного знакомо…

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

графический

Оптимизация навигации ТОЛЬКО на главной странице

Шучу, у нас есть для вас еще одна подсказка — подсказка выше была ложным дном (простите нас).

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

НЕПРАВИЛЬНО.

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

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

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

Вопросы? Мы здесь, чтобы помочь

Мы надеемся, что это устранит некоторую путаницу, которая могла возникнуть у вас в отношении веб-навигации.Как у нас дела?

Если вы все еще не уверены, дайте нам знать, и мы сможем сделать работу лучше в следующий раз … и, надеюсь, вам пригодятся в вашем следующем проекте веб-дизайна!

Вы делаете эти распространенные ошибки навигации по сайту?

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

Давайте рассмотрим некоторые распространенные ошибки навигации и посмотрим, чему мы можем научиться.

Ошибка №1: нестандартный стиль

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

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

Ошибка № 2: Использование общих меток

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

Когда ваша навигация показывает ваши основные услуги или продукты, ваш сайт мгновенно общается .

Ваша навигация — это также огромная возможность указать свою релевантность для поисковых систем. Поскольку ваша аудитория не ищет «продукты» или «услуги», использование этих ярлыков не поможет вам в рейтинге. Используйте ярлыки, которые включают популярные ключевые фразы в соответствии с инструментом подсказки ключевых слов Google.

Совет для профессионалов! Навигация по сайту и его структура должны быть спланированы с учетом поисковых систем.

Ошибка № 3: раскрывающееся меню

Выпадающие меню плохи по двум причинам. В зависимости от того, как они запрограммированы, поисковым системам может быть сложно сканировать. Но есть еще одна, более серьезная причина…

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

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

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

Ошибка №4: Слишком много элементов в вашей навигации

Вы уже видели это раньше: этот веб-сайт с сотнями ссылок на главной странице.Ужасный. Но даже восьми может быть слишком много. Это потому, что кратковременная память содержит только семь элементов . Это означает, что восемь — НАМНОГО больше семи.

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

Pro Совет: этот трюк также работает для остальной части страницы, а не только для навигации.Каждый удаленный визуальный элемент делает все остальное более заметным. Вы можете много чего «громче», делая другие вещи «тише».

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

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

Используйте калькулятор Link Juice Calculator, чтобы подсчитать общее количество кликабельных элементов на вашей домашней странице. У Amazon их около 100, и их сайт больше вашего, верно?

Ошибка № 5: Неправильный заказ

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

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

Напоминание о бонусе! Всегда ссылки, никогда не кнопки

Если вы упустили тенденции веб-дизайна за последние восемь лет и все еще испытываете искушение использовать графическую навигацию на основе кнопок (а не текстовые ссылки), вот пять веских причин не делать этого:

1. Кнопки не удобны для поиска, поскольку текст внутри них невидим для поисковых систем.
2. Кнопки обновлять сложнее, чем ссылки, поэтому для каждого обновления требуется Photoshop и новое изображение.
3. Кнопки загружаются медленнее, чем ссылки, что делает их особенно плохими для мобильных посетителей.
4. Кнопки менее доступны для слабовидящих.
5. Кнопки не нужны, даже если вы хотите использовать нестандартные шрифты, благодаря таким инструментам, как TypeKit.

5 примеров правильной навигации

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

Smith Brothers — наглядная и лаконичная навигация

Навигация на сайте Smith Brothers описательна и лаконична. Всего четыре пункта, начиная с первой и второй по важности услуг и заканчивая контактной ссылкой.

Independent Publishers Group — описательная сгруппированная навигация

На веб-сайте IPG используется сильный контраст, чтобы различать первичную и вторичную навигацию в заголовке.Каждый из пяти или менее элементов, что упрощает сканирование. Общий термин «услуги» подразделяется на еще два описательных ярлыка: «услуги распространения» и «цифровые услуги».

Sweat Vac — описательная, лаконичная навигация с короткими ярлыками

Если вы не видели фото (или вы работаете в поисковой системе), навигация подскажет, чем занимается эта компания: головные уборы. Далее перечислены другие товары, такие как рубашки и снаряжение. В этом минималистичном подходе каждый предмет — одно простое слово.

Купальники Kiefer — описательная, заказанная навигация

Сайт Kiefer имеет огромный каталог, но категории доступны в качестве основной навигации по всему сайту. Самые важные предметы для посетителей (купальники и купальные принадлежности) перечислены в первую очередь. Важная вещь для Kiefer (распродажа) указана последней. Менее популярные категории находятся посередине.

ЕвроМебель — заказанная навигация с мега выпадающими меню

Большинство посетителей имеют в виду комнату. Меньшее количество посетителей ищут конкретный продукт или бренд.В навигационной системе EuroFurniture элементы перечислены соответственно. Мега выпадающие меню позволяют легко перейти в этот огромный каталог мебели.

Pro Tip: мега выпадающие списки для планшетов. Обратите внимание на маленький синий значок «x» в правом верхнем углу выпадающего списка сверху. Это кнопка закрытия. Без этого у пользователей планшетов не было бы возможности закрыть окно, поскольку у них нет курсора мыши, чтобы выйти из раскрывающегося списка.

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

Хотя навигация по веб-сайту не является прямым фактором SEO, логическая навигация по сайту помогает Google легче сканировать веб-сайты и легче понять, о чем веб-страницы.

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

Самая важная часть навигации по сайту — это простота использования.

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

Об авторе: Энди Крестодина — стратегический директор Orbit Media, чикагской компании по веб-дизайну.Он также является автором Content Chemistry, Иллюстрированного руководства по контент-маркетингу, которое вы можете найти Энди в Google+ и Twitter.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четкой рентабельностью инвестиций.

Заказать звонок

Что такое меню и как их использовать в WordPress

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

Изменение меню

В вашей установке WordPress вы можете получить доступ к меню, перейдя в «Внешний вид» вашего сайта из панели управления. Это даст вам доступ к области «Меню». На большинстве сайтов WordPress уже создано одно меню: «Меню 1». Это меню по умолчанию — то, что система будет использовать для размещения опубликованных статических страниц верхнего уровня и других ссылок.

Добавление содержимого

В разделе меню WordPress вы увидите разные вещи, которые вы можете добавить. Страницы, сообщения, настраиваемые ссылки и категории должны отображаться по умолчанию. Однако у вас также могут быть установлены плагины, предлагающие дополнительный контент. Например, плагин Resume Builder позволяет добавлять выбранные резюме в ваши меню. Используя уже созданный контент, вы можете придать своим меню особый вид и функциональность. Установив флажок рядом с материалом, который вы хотите добавить, а затем нажав кнопку «Добавить в меню», WordPress создаст структуру.

Функциональность перетаскивания

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

Где разместить меню в WordPress

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

Пример меню навигации левой боковой панели

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

• Создание нового меню: перейдите в «Внешний вид» => «Меню» и щелкните ссылку «Создать новое меню» вверху. Дайте вашему новому меню имя, например «Левая навигация», и нажмите кнопку «Создать меню».

• Выберите категории: слева будет поле «Категории», которое расширяется при нажатии. Отсюда вы можете выбрать все категории, которые хотите добавить в меню.
• Меню «Сохранить»: добавив категории, нажмите кнопку «Сохранить меню».
• Создание виджета: перейдите в «Внешний вид» => «Виджеты» и перетащите «Пользовательское меню» на «Левую боковую панель».
• Заголовок: Это необязательная запись. Если вы не дадите ему заголовок, текст заголовка нового меню останется пустым. В качестве аргумента мы назовем это «Навигация».
• Выберите меню: появится раскрывающийся список, в котором будут отображаться все меню, которые у вас есть в WordPress. Выберите созданное вами меню под названием «Левая навигация».
• Сохранить: после того, как вы нажмете кнопку «Сохранить», на левой боковой панели вашего веб-сайта появится левое меню навигации.

ПРИМЕЧАНИЕ : Для того, чтобы приведенный выше пример работал, в вашей теме должна быть доступна «Левая боковая панель». В противном случае это не будет отображаться. Меню могут дать вам много возможностей для управления и настройки вашего веб-сайта. От специальных сообщений и страниц, которые вы создали, до списка ссылок, которые, по вашему мнению, нужны вашей целевой аудитории, — меню WordPress позволяет вам доставлять эту информацию в понятной форме. Поэкспериментируйте со своими собственными меню и посмотрите, как они могут помочь вам создать замысловатый веб-сайт.

Какие вещи вы добавляете в свои меню? Могут ли они стать частью дизайна вашего веб-сайта, не загромождая его?

Автор: Каумил Патель

Каумил Патель является главным операционным директором GreenGeeks и имеет более чем 13-летний опыт работы в индустрии веб-хостинга, работая с компаниями веб-хостинга и владея ими. Каумил специализируется на маркетинге, развитии бизнеса, операциях, слияниях и поглощениях.

Примеры оформления меню сайта

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

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

Хорошему сайту абсолютно необходима навигация с:

1. Это помогает понять, о чем веб-сайт (магазин, журнал или портфолио?), Не просматривая все страницы.
2. Navigation помогает содержимому веб-сайта выглядеть логичным, организованным и хорошо структурированным, что способствует лучшему взаимодействию с пользователем.
3. Это побуждает пользователей оставаться на сайте дольше и проверять другие разделы.
4. Навигация хороша для SEO, поскольку помогает сканерам индексировать контент вашего сайта.

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

Горизонтальное меню

Горизонтальное меню используется веб-сайтами с несколькими разделами и макетом в одну колонку. Обычно он размещается ниже или выше заголовка.Вот несколько вариантов оформления такого меню:

Дизайн с вкладками:

Дизайн с элементами, отображаемыми в виде ссылок или кнопок:

Использование иконок:

Выделение текущего раздела меню полезно для удобства использования: пользователи четко видят, какой раздел они просматривают в данный момент:

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

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

Недостатком горизонтального меню является то, что количество ссылок, которые они могут содержать, довольно ограничено.Вот почему сайты со сложной структурой предпочитают использовать раскрывающиеся меню или использовать как горизонтальные, так и вертикальные меню. Например, на этом веб-сайте используются как выпадающее гамбургер-меню, так и горизонтальное меню (в виде вкладок Журнал, Популярные и Рекомендуемые):

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

И здесь одновременно используются горизонтальное и вертикальное меню:

Вертикальное меню

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

В отличие от горизонтального меню вкладки в дизайне вертикальных меню веб-сайтов используются реже:

Но вертикальные меню чаще используют группировку ссылок:

Использование значков также является обычным явлением. Кроме того, иногда вертикальное меню можно свернуть, чтобы отображались только значки:

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

Раскрывающееся меню

Выпадающие меню подходят для сайтов со сложной структурой: интернет-магазины с широким ассортиментом товаров и множеством товарных групп. С их помощью вы можете скрыть подразделы и сохранить незагроможденное драгоценное пространство:

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

Или целая куча разделов и подразделов:

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

У этого типа меню есть недостаток — его сложно заметить. Вот почему он используется для второстепенных данных. Тем не менее, дизайнер должен сделать его достаточно видимым для пользователя:

И при объединении различных типов меню вы должны решить, какие части будут выпадать и показывать дополнительные разделы:

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

В вертикальном меню:

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

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

Идея всплывающего меню хорошо развита в шаблоне Wordie WordPress:

Issuefly имеет креативное и уникальное меню с привычной для операционных систем оконной навигацией:

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

Мы, студия stfalcon.com, разрабатываем дизайн с функциональной и удобной навигацией и будем рады создать веб-сайт или приложение для вашего бизнеса.

17 основных ошибок в главном меню

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

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

1. Вы говорите «Свяжитесь с нами» вместо «Свяжитесь с нами»

Когда Стив Джобс сказал «Будьте другим», он не имел в виду в вашем главном меню.Так что будьте ясны, а не умны в главном меню. Использование таких фраз, как «Свяжитесь с нами», «Давай поговорим» или «Давай поговорим», сбивает с толку . Многие из ваших посетителей сознательно или подсознательно ищут старую-добрую кнопку «Связаться». Не усложняйте контакт с вами просто потому, что вы хотите быть умным.

2. Ссылка на ваш блог находится в главном меню

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

[att_highlight color = ”red”] Как превратить 30% посетителей в лиды SEO: наука о целевой странице [/ att_highlight]

3. Вы говорите «Услуги» вместо того, чтобы перечислять эти фактические услуги

Помните, ваше главное меню помогает посетителям понять ваш сайт.Если возможно, перечислите свои услуги в главном меню вместо использования общего слова, такого как «услуги». Я понимаю, что это работает, только если у вас ограниченный объем услуг. Но если вы это сделаете, это сработает как шарм. С одной стороны, он информирует людей о том, что вы делаете, а с другой — приближает их на шаг ближе к вашим услугам.

4. Главное меню слишком длинное

Закон Хика гласит, что чем больше вариантов вы дадите кому-то, тем больше времени у него уйдет на принятие решения. Так что помогите своим посетителям принять решение, сделав главное меню коротким и, следовательно, простым для понимания.

5. Главное меню привлекает слишком много внимания

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

6.Главное меню не отвечает

Вы когда-нибудь пробовали использовать главное меню на сотовом телефоне, которое не реагирует? Раздражающий! Вы должны увеличивать и уменьшать масштаб и изо всех сил стараться не нажимать на другие пункты меню рядом с кнопкой, которую вы пытаетесь нажать. Адаптивный — это отраслевой стандарт, который обычно преобразует главное меню в раскрывающееся меню, которое легко для мобильных пользователей .

7. В главном меню все еще есть кнопка «Домой»

В течение многих лет промышленным стандартом было не включать кнопку «домой» в главное меню.Логотип должен быть ссылкой на ваше главное меню. Размещение ссылки «домой» в главном меню тратит впустую место и отвлекает внимание от важного содержимого .

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

8. У вас в главном меню есть страницы с низкой посещаемостью

Перестаньте загромождать главное меню бесполезными страницами, такими как FAQ. Просмотрите аналитику и посмотрите, какие страницы в главном меню наиболее важны. Если некоторые из этих страниц никогда или почти не нажимаются, переместите их в нижний колонтитул. Не забывайте о законе Хика в № 4.

9. Вы не используете активные состояния в главном меню

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

10. Слишком длинные текстовые ссылки в главном меню

Ссылки в главном меню не должны быть предложениями. Максимум — три слова или меньше, но предпочтительно 1-2 слова . Удивительно, но об этом просят многие клиенты, и я ловлю себя на том, что уговариваю их сойти с опасного уступа как можно быстрее.Некоторые из наиболее приемлемых длинных ссылок в меню: «Что мы делаем», «Кто мы» и «Как это работает».

11. Вы используете всплывающие меню вместо мегаменю

Вам не нравится фраза «Мега Меню»! Похоже на мультфильм 80-х. Но это не единственная причина, по которой вы должны его любить. Они гораздо более полезны, чем те хитрые всплывающие окна, которые показывают меню за меню, когда вы их пролистываете. Мега-меню отображаются в большом раскрывающемся списке со всеми подменю в этой категории. В Consumers Digest есть отличный пример мегаменю.

12. Ваше меню находится не в стандартном месте

ОК, дизайнеры, это для вас. Вы так виноваты в этом. Не пытайтесь обвинить своих клиентов. Признай это. Иногда вам наскучивают одни и те же старые дизайны, и вы хотите что-то поменять. Что ж, не помещайте меню внизу страницы. Держите его на вершине, где его знают все. Что, если я попытаюсь продать вам машину с рулем на заднем сиденье? Опять же, будь ясным, а не умным .

[att_highlight color = ”red”] Как превратить 30% посетителей в лиды SEO: наука о целевой странице [/ att_highlight]

13. Вы ошиблись при заказе

Опять же, изучите свою аналитику, чтобы знать, какие страницы у вас самые важные. Прекратите размещать страницы, которые не привлекают столько трафика, на первую позицию в главном меню .

14. Ваше главное меню меняется на разных страницах

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

15. Вы не используете аналитику для улучшения своего главного меню

Не делайте только то, что делают ваши конкуренты или ваш веб-дизайнер. Проверьте это и внесите стратегические изменения.Есть три инструмента, которые вы должны использовать, чтобы определить навигацию по меню. Google Analytics, Qualaroo и Crazy Egg.

• Google Analytics даст вам количественное представление о том, какие страницы должны быть перечислены в вашем главном меню.
• Qualaro позволит вам спросить ваших посетителей, какие пункты меню должны быть в главном меню.
• Crazy Egg позволит вам визуально увидеть, какие страницы принадлежат главному меню.

16.Вы используете кнопки вместо текстовых ссылок

Использование текстовых ссылок имеет два ОГРОМНЫХ преимущества. Прежде всего, вы можете легко обновить эти ссылки в своей CMS без веб-разработчика. Во-вторых, Google может читать текст, но не умеет читать кнопки. Google использует ссылки на ваши страницы как указание на то, что это за страница . Это напрямую влияет на ваш рейтинг в поисковых системах. Конечно, вы можете размещать alt-теги на кнопках, но, будучи экспертом по SEO, я настоятельно рекомендую вам использовать вместо них текстовые ссылки.

17. В главном меню нет кнопки призыва к действию

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

Заключение

Не усложняйте пользователям поиск вашего контента.