Юзабилити ссылок: правила оформления

юзабилити ссылок рекомендации экспертов
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Важно, чтобы пользователь мог на глаз различить, что есть ссылка на сайте, а что нет. Это улучшает понимание страницы, повышает доверие и упрощает пользовательский опыт»

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

Казалось бы, что может скомпрометировать ссылку на сайте? Оказывается, не все ссылки одинаково понятны пользователям. Для начала дадим определение качественной ссылке на сайте.

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

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

Если вы хотите, чтобы пользователи кликали по ссылкам, покажите им эту возможность.

Якоб Нильсен: рекомендации по юзабилити ссылок из 2004 года

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

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

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

каталог DMOZ показывает ссылки, выделенные синим и подчеркиванием

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

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

Подчеркнутый некликабельный текст сбивает пользователей с толку.

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

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

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

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

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

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

юзабилити ссылок: цвет нессылочного текста не должен быть синим

Не стоит использовать дополнительное визуальное оформление ссылки при наведение курсора мышки.

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

анализ сайтаМобильный UX: 25 рекомендаций Google

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

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

низкая юзабилити ссылок близкое расположение элементов

3 рекомендации Baymard Institute по юзабилити ссылок

Эксперты Baymard Institute утверждают, что ссылки определяют, как пользователь перемещается по сайту. А правил юзабилити ссылок всего 3.

1. Подчеркивание ссылок

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

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

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

2. Цвет текста ссылки

И снова синий рекомендован. Хотя вебмастер не ограничен в выборе цвета для ссылки.

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

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

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

3. Оформление ссылок в едином стиле

Используйте единый стиль оформления ссылок по всему сайту. Это поможет пользователям быстрее научиться различать ссылки и нессылки на сайте.

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

Рекомендации GetGoodRank по юзабилити ссылок

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

Какие ссылки негативно влияют на доверие пользователей?

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

Добавить комментарий

Войти с помощью: 

Статьи по теме

поиск по сайту юзабилити
Статьи
Поиск по сайту: принципы юзабилити
Поиск по сайту — одна из наиболее важных опций, улучшающая пользовательский опыт в тех ...
крауд-маркетинг для продвижения сайта
Статьи
Крауд-маркетинг с точки зрения SEO: очевидная польза или бесполезные расходы?
В последние годы особой популярностью пользуется крауд-маркетинг (crowd – англ. толпа) ...