На оптимизированном веб-сайте легко ориентироваться. Фактически, одной из основных причин, по которой люди переходят на сайт конкурента, является сложность навигации. Поэтому я создал этот контрольный список по навигации, чтобы помочь веб-профессионалам убедиться, что навигационная система их сайта эффективна как для людей, так и для технологий.
В первой части я рассмотрел следующие лучшие практики проектирования навигации и архитектуры:
- Навигация по веб-сайту поддерживает и позволяет выполнять задачи
- Навигация по сайту поддерживает и укрепляет информационную архитектуру сайта
- Навигация по сайту должна быть заметной и отличаться от других разделов веб-страницы
- Навигация по сайту должна быть простой для сканирования
- Навигация по сайту должна иметь смысл для пользователей
- Навигация по сайту не должна форматироваться с правильным обоснованием
Ниже приведены следующие пункты контрольного списка. Соблюдает ли ваш сайт эти рекомендации по навигации?
7. Убедитесь, что пункты меню расположены в логическом порядке
Если навигация вашего сайта использует раскрывающиеся (вертикальные) меню, важно иметь логически и последовательно организованные пункты меню. Многие оптимизаторы виноваты в том, что создают навигацию по принципу «смешивай и сочетай», особенно в вертикальном меню нижнего колонтитула. Стремясь разместить важные ключевые слова на каждой странице сайта, они добавляют в навигацию по сайту всевозможные причудливые и запутанные пункты меню.
Например, я видел все следующие пункты в одном вертикальном меню:
- Аренда на время отпуска в Орландо
- Аренда на время отпуска в Диснее
- Аренда на время отпуска во Флориде
- Аренда на время отпуска в Калифорнии
Уже сейчас мы видим категорические несоответствия. Калифорния и Флорида - штаты. Орландо - город. А Диснейленд и Мир Диснея - это курорты/парки развлечений (первый расположен в Анахайме, Калифорния, а второй - в Орландо, Флорида).
Более того, элементы в этом частичном списке даже не расположены таким образом, чтобы их можно было легко сканировать, например, в алфавитном порядке. (Я избавил читателей Marketing Land от остальной части этой запутанной навигации, но достаточно сказать, что она была неоптимальной.)
Когда посетители сайта не уверены, на какую ссылку нажать, я часто наблюдаю застревание. По словам эксперта по юзабилити Джареда Спула, «пого-залипание» - это когда пользователи переключаются между страницами продуктов с общей страницы галереи (категории).
Spool имел в виду иерархическое прилипание, но я также наблюдал переходы вперед и назад между страницами одного уровня, чтобы определить, находится ли та или иная страница на нужной странице. Другими словами, застревание в пого - это негативное поведение при поиске. Обычно это означает, что что-то не так с навигацией по сайту.
8. Навигация на веб-сайте должна передавать ощущение места
На этапах проектирования и разработки веб-сайта я обычно проверяю, насколько хорошо вся навигационная система обеспечивает подсказки «вы здесь». Один из способов сделать это - удалить контент, чтобы увидеть, включили ли дизайнеры/разработчики состояние «включено» или «активно» в элементы навигации на нескольких уровнях.
Ниже показано особенно эффективное активное состояние (A) глобальной навигации и (B) локальной навигации.
Без меток контента и меток документов пользователи все равно могут определить, какой раздел этого веб-сайта они просматривают, просто сканируя активные состояния в глобальной и локальной навигации.
На веб-сайте ориентация - это поведение, при котором пользователи определяют свое положение на веб-сайте относительно другой точки - установления чувства места. В поисковой оптимизации ориентация очень важна, поскольку поисковики не начинают с главной страницы вашего сайта. Они приземляются прямо посередине. Наличие включенного или активного состояния в навигации помогает пользователям веб-поисковика ориентироваться.
Подробнее прочитайте «Понимание ориентации поискового поведения для SEO и конверсий в поисковых системах».
9. Ссылки на контент должны иметь состояния при наведении, посещенное и непосещенное
Веб-страницы могут выглядеть перегруженными из-за слишком большого количества цветов в системе навигации по сайту. Единственное место, где я всегда сообщаю о посещенном и непосещенном состоянии, - это содержимое сайта.
Одна из наиболее распространенных целей конверсии, которую я слышу, - это увеличение количества просмотров страниц на одного посетителя. Это разумная цель для веб-сайта, особенно если это блог или сайт издателя. Чтобы помочь пользователям выполнить задачу, владельцы сайтов должны сообщать им, какие сообщения или статьи они уже прочитали.
Согласно соглашению использовать синий цвет для непосещенных ссылок и фиолетовый для посещенных ссылок. Однако следовать этим соглашениям не обязательно.
Пока 4 цвета используются последовательно (хотя я бы избегал серого в качестве цвета при наведении) по всему сайту и текст, который можно кликнуть/нажать и не нажимать/не нажимать, выглядит слишком похожим, я не буду Я не слышу, как пользователи жалуются, и меньше думают о сайте, потому что дизайнеры и разработчики не додумались сообщать о посещенных и непосещенных состояниях.
10. Текст, на который можно нажимать/нажимать, должен выглядеть кликабельным/нажимаемым и быть кликабельным/нажимаемым
В этом руководстве по навигации я не призываю форматировать каждый кликабельный элемент как синюю подчеркнутую текстовую ссылку. Я просто говорю, что для того, чтобы сделать навигацию эффективной, посетители сайта должны знать это, сканируя текст, на который можно кликнуть, и текст, на который нельзя кликнуть.
Причина? На протяжении многих лет я постоянно наблюдал, как пользователи не нажимали на элемент навигации, потому что не верили, что этот элемент доступен для клика. Не имеет значения, что присутствует состояние наведения. Если курсор или палец не находятся на элементе навигации, то вряд ли по нему можно будет нажать.
Локальная навигация на туристическом сайте. Несмотря на то, что элементы в маркированном списке под «Функции» представляют собой текст, на который можно нажать или нажать, пользователи не нажимали на них.
В опровержение этого утверждения многие дизайнеры и разработчики утверждают, что пользователи могут легко обнаружить ссылки путем поиска мин. Согласно usability.gov, «минирование» - это действие, предназначенное для определения того, где на странице расположены ссылки.
Сапер предполагает, что пользователь быстро перемещает курсор или указатель по странице и наблюдает, где курсор или указатель изменится, чтобы указать на наличие ссылки. Требование к пользователям «минировать» замедляет их работу.
На самом деле, лично я знаю только одну группу людей, которые любят минировать: детей. Дети входят в вашу целевую аудиторию?
Подробнее читайте в разделе «кликабельность и дизайн, удобный для поисковых систем».
11. Метки ссылок должны напоминать названия страниц назначения
Эффективная навигация по сайту должна передавать четкую информацию. Один из способов передать информацию как людям, так и технологиям - использовать метки ссылок, напоминающие метки целевой страницы.
Например, из трех элементов ниже, какая страница, по вашему мнению, лучше всего соответствует кнопке навигации «О нас»?
- О.php
- Company.php
- WhoWeAre.php
Надеюсь, ответ на этот вопрос очевиден. №1 - лучший ответ.
Я постоянно наблюдаю, как маркетологи ссылаются на одну и ту же страницу с разными метками ссылок. Например, ожидаете ли вы просмотреть один и тот же контент, когда нажмете на все три метки ссылок?
- Свяжитесь с нами
- Найти местоположение
- Забронируйте посещение
Во время юзабилити-тестов большинству участников теста показалось, что это 3 совершенно разные страницы. Почти все из них демонстрировали поведение «пого-залипаний», чтобы убедиться, что они перешли на нужную страницу. И снова я увидел, как нахмурились брови и развалилось доверие, когда метки ссылок и метки целевой страницы были слишком разными. Постарайтесь поддерживать и проверять информацию.
12. Ссылка на карту сайта Wayfinder или указатель сайта
Карта сайта Wayfinder - это не то же самое, что карта сайта XML. Карта сайта-путеводителя - это средство навигации и средство предотвращения ошибок на веб-сайте. Для тех, кто хочет пропустить просмотр или не может найти нужный контент с помощью глобальной/формальной/контекстной навигации, карта сайта может быть отличным ярлыком.
Индекс сайта также отличается от карты сайта. Индекс сайта, как следует из названия, представляет собой список важных областей веб-сайта от А до Я. Эффективный индекс сайта:
- Включает перекрестные ссылки на синонимы или термины, которые часто путают (Овощи > Помидоры, См. Фрукты > Помидоры) и сокращения (Губчатая энцефалопатия крупного рогатого скота (ГЭКРС), см. Коровье бешенство.
- Реализует ротацию сроков (Бенджамин Франклин, См. Франклин, Бенджамин)
- Показывает посещенные и непосещенные ссылки.
У меня есть много других передовых методов навигации по сайту, но это те, к которым я постоянно возвращаюсь из года в год. Насколько ваш сайт соответствует требованиям? Есть ли у вас какие-либо другие рекомендации по навигации, которые можно добавить в этот список?