Ссылки на хлебную крошку и пользовательский опыт

вспышка Filament.io 1 вспышка ×

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

Грани пользовательского опыта (UX) по словам Питера Морвиля. Используется с разрешения

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

Я признаю, что подобные ситуации сложны, потому что: (А) группа разработка / дизайн веб-страницы очевидно, он не заинтересован в обсуждении темы, и (B) эта же группа может иметь иное представление о пользовательском опыте (UX).

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

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

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

Что такое Хлебные крошки?

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

Ссылки хлебной крошки в зависимости от местоположения

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

Рисунок 1: Основанные на местоположении ссылки Pan Miga для особенно полезных в качестве дополнительных инструментов навигации. Вы можете сообщить людям (пользователям) и технологиям (поисковым системам), что такое содержание веб-страницы.

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

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

Ссылка хлебных крошек на основе маршрутов

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

1. Дублируйте функциональность, предлагаемую кнопкой «Перейти назад» браузера.
2. Они сбивают с толку пользователей, которые, возможно, перемещались не по тем разделам веб-страницы.
3. Журнал истории не помогает пользователям, которые переходят непосредственно в иерархию веб-страницы, например страницы продукта. (Например, пользователь может перейти на страницу продукта через Google.)
4. Они могут дублировать доставку контента поисковым системам веб-страницы. Доставка дублирует контент, так что поисковые системы уменьшают количество страниц, доступных для классификации.

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

О нас > Пресса и медиа > новости > Домашняя страница Персонал > Индекс AZ > Поисковые центры > Исследования и здоровье

Хлебные крошки на основе атрибутов

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

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

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

Хлебные крошки в зависимости от местоположения имеют разные цвета для посещенных ссылок и для тех, которые не посещали. Каждый элемент отделен знаком «меньше» (<). Вы не можете нажать на текст крошки, основанный на Атрибуции, но вы можете удалить его из содержимого страницы, нажав на «X» на синем фоне. Каждый элемент атрибуции разделен вертикальной линией (|).

Преимущества хлебных крошек

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

1. Ссылки на хлебную крошку поддерживают навигацию сайта.

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

2. Ссылки на хлебную крошку поддерживают юзабилити сайта

В серии статей Оптимизация конверсий: измерение юзабилити в пользовательском интерфейсе (UX) (Оптимизация конверсий: измерение юзабилити в пользовательском опыте (UX)), я показал фундаментальные аспекты юзабилити веб-страницы. Два из этих основных аспектов:

• Производительность (завершение задач) . Могут ли пользователи достичь желаемых целей на вашей веб-странице?
• Эффективность (простота и скорость) : как быстро пользователи достигают своих целей на вашей веб-странице?

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

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

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

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

Во время выполнения юзабилити-тестов я периодически спрашиваю участников, какую страницу или контент они просматривают на веб-странице.

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

Изображение 4: По словам гуру юзабилити Якоба Нильсена и его соавтора Кары Пернис в их книге «Eyetracking Web Usability», люди смотрят на крошечные ссылки 30% времени.

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

3. Ссылки на хлебную крошку поддерживают возможность поиска контента.

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

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

Рисунок 5: Хлебные крошки в списке веб-поиска. В этом списке напитки, чай и образцы чая; каждый переносит нас на другую страницу сайта.

Чтобы увидеть подробности о ссылках на хлебную крошку в списке поиска в Интернете, см. Богатые фрагменты - панировочные сухари Обогащенные фрагменты - хлебные крошки.

4. Ссылки на хлебную крошку обеспечивают информационный след

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

• Они облегчают четкую навигацию (Куда я могу пойти?)
• Они позволяют быстро ориентироваться (Где я?
• Сообщите ценный контент (я нажимаю на это?

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

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

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

5. Мига де Пан ссылки связывают тему контента

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

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

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

Подробнее о теме вы можете прочитать Ключевые слова, Aboutness & SEO (Ключевые слова, тема и SEO).

Да и нет ссылки на хлебную крошку

Да:

• Начните путь ссылок на крошки хлеба в зависимости от местоположения со ссылкой на домашнюю страницу. Завершите путь крошки с текущей страницей.
• Используйте простой разделитель между уровнями ссылок на хлебную крошку. Вы можете использовать косую черту (/), знак «меньше» (<) или два знака «меньше».
• Убедитесь, что ссылки на хлебную крошку выглядят и доступны для навигации. Для мобильных устройств обязательно используйте хлебные крошки в зависимости от местоположения, а также убедитесь, что все ссылки выглядят и доступны для навигации.
• Ссылки на хлебную крошку следует размещать над отформатированным заголовком H1, чтобы способствовать их использованию (для пользовательских моделей и дальнейшего изучения веб-страниц).

нет:

• Используйте ссылки на крошки в заголовке HTML (X) вашей веб-страницы.
• Вы используете структурные ссылки для структуры вашего URL. Помните, что URL-адреса должны быть удобными для написания и запоминания.
• Размер текста хлебных крошек должен быть таким маленьким, что пользователям будет трудно его читать. Имейте в виду, что люди замечают крошки хлеба в 30% случаев. Если пользователи считают, что ваш контент трудно читать, они могут не читать контент с вашей веб-страницы.
• Убедитесь, что ссылки на крошки не доминируют на странице. Они не должны быть отформатированы, чтобы отвлекать пользователей при чтении: (A) заголовка содержимого и (B) локальной и глобальной навигации.
• Используйте ссылки на крошки без локальной и глобальной навигации (если они используются). Эти ссылки дополняют друг друга, они представляют собой контекстную справочную информацию. Они не должны быть основным средством навигации на веб-странице.

[Translation1 url = "http://marketingland.com/breadcrumb-links-good-user-experience-yes-97848" name = "Маркетинговая земля"]

1

Flares Facebook 0 0 Google+ 0 Pin It Share 1 Электронная почта - Filament.io 1 Flares × Следующие две вкладки изменяют содержимое ниже.