Оформление гиперссылок - не всё так просто!

Гиперссылки - это неотъемлемая часть любого сайта. Без них всё было бы по-другому, если бы вообще было. Используя простой HTML элемент — <a> – вы можете связать страницы и сайты друг с другом. Гиперссылки - это что-то магическое.

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

Оформление HTML элемента <a> - очень важный момент; так что потратьте время, чтобы найти наиболее лучший вариант.

В этой статье мы рассмотрим несколько хороших примеров оформления гиперссылок.

Ссылки должны выглядеть как ссылки

Все гиперссылки должны нести вашим читателям явное послание: "Я ссылка. Кликни на меня"

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

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

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

Ниже вы найдёте 3 разных примера оформления гиперссылок. Они взяты с самых разных популярных новостных порталов.

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

Почему же тогда ссылки с сайта The New York Times смотрятся лучше, чем другие?

Позвольте, я поясню.

Простой тест дизайна гиперссылки

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

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

Делается это очень просто:

Сделайте скриншот и вставьте его в Photoshop. Проделайте следующие операции:

• Image > Adjustments > Desaturate
• Filter > Blur > Gaussian Blur

Теперь давайте ещё раз взглянем на наши экспериментальные ссылки.

Вот пример для The Guardian; Трудно найти ссылку:

BBC использует жирный текст, поэтому если постараться, то её можно различить среди остального текста.

В The NY Times ссылку найти проще всего.

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

Вот тут-то есть небольшой подвох.

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

Главной причиной того, что подчёркивание ссылок снижает разборчивость текста, заключается в том, что данный эффект перекрывает некоторые символы, элементы которых выходят за базовую линию — такие как p, g, j, и q. Эти буквы особенно подвержены данному эффекту, если мы применяем к ним text-decoration: underline.

Вот пример стандартной ссылки в Google Chrome (версия 28):

Какое решение может быть тут?

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

Как же? Мы можем воспользоваться CSS свойством border-bottom, вместо CSS text-decoration, тем самым, подчеркнув ссылки.

Используя свойство border-bottom, мы можем сместить подчёркивание на несколько пикселей ниже, тем самым, улучшив читабельность.

Вот пример CSS кода:

a {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid blue;
}

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

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

В моём примере, я чуть изменил цвет подчёркивания. Сделал светлее:

CSS:

a {
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px solid #8d8df3;
}

Делайте тест ссылок длинным

Следующая тема, которую я хотел бы обсудить, относится больше к стратегиям.

За основу данного подхода, возьмём Закон Фиттса.

Фишка данного закона проста. Чем больше размер объекта, тем его легче заметить и сделать клик.

Данное высказывание имеет огромный смысл, если речь касается тачскринов.

Бывает сложно попасть пальцем по ссылке; часто приходится увеличивать масштаб страницы, чтобы сделать это.

К счастью, мы можем исправить это, отредактировав стили.

Мы можем сделать ссылки жирными, подчеркнуть, изменить цвет.

А что вы скажете на счёт того, чтобы изменить их размер?

Если мы изменим размер элементов <a>, то это отразится на всём остальном тексте. Базовая линия будет смещена, тем самым, вызвав новые проблемы.

Поэтому единственное, что мы можем сделать, расширить ссылки горизонтально.

Должны ли гиперссылки быть синими?

Согласно исследованиям Google, по синим ссылкам совершается больше кликов, нежели по каким-либо другим.

Если пользователь видит синий подчёркнутый текст, то сразу воспринимает его, как ссылку.

Хотя, по моему мнению, не все ссылки должны быть синими.

Есть так же примеры, где синие ссылки никуда не годятся.

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

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