Оформление гиперссылок

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

Правила

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

Как не нужно делать ссылки?

Пример: www.amapproved.com¹

Сайт предназначен для поиска доступных Aston Martin по всему миру. На скриншоте пример результатов поиска. Догадайтесь, как можно получить более подробную информацию о каждом автомобиле? Ссылка здесь только модель автомобиля (в колонке Vehicle summary).

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

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

Нажимаю на «Aston Martin DB7 GT» я ожидаю увидеть описание этого автомобиля, нарушено правило 3², потому что ссылка не отвечает на вопрос, что я увижу, если нажму на нее.

Как нужно было сделать?

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

Точный размер в гиперссылках

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

PDF (46,764 байт)⁴

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

Как это сделать правильно?

Нет никаких причин для указания более чем двух цифр в размере файла. В предыдущей ссылке достаточно указать 47KB. Старайтесь использовать килобайты или мегабайты для указания размеров файлов: 4.7KB, 47KB, 470KB, 4.7MB и т.д.

Оформление гиперссылок

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

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

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

Синие гиперссылки в черно-белом отображении, с подчеркиванием и без него.

Должны ли гиперссылки использовать подчеркивание?

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

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

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

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

Обратите внимание, что чтение списка ссылок без подчеркивания быстрее и проще.

Во втором примере для лучшего разделения тем немного увеличен интервал между элементами списка.

Логичность

Очень важно чтобы гиперссылки вели себя достаточно последовательно.

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

Посмотрите на пример взятый с сайта Guardian Online⁵.

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

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

В данном случае нет никаких причин для различий в поведении ссылок. Третий пример к тому же противоречит правилу 2², потому что при наведении мышки ссылка становиться слабой и менее заметной, а это не «подсветка».

Заключение

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