Pull to refresh

Про ссылки

Reading time 2 min
Views 791
Ссылки — это один из главных элементов всех сайтов, существование и тем более развитие интернета трудно представить без них. Про ссылки говорилось много, но не видел что бы это собирали в отдельную тему, может быть плохо искал.

Так что, попробую собрать все в кучу.

Cсылка должна быть подчеркнута

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

В данном примере слева просто выделение названия компании, а справа ссылка. Не наведя курсор — определить чем является данное выделение невозможно. При подчеркнутой ссылке мы сразу видим разницу между ссылкой и выделением.

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

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

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

При наведении на ссылку должна быть реакция

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

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

Сразу понятно на что нажимаешь.
Не рекомендую использовать изменение размера шрифта, его толщины или наклона — из за этого строки начинают «прыгать» при наведении курсора.

Ссылки в меню

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

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

Пример с символами
Tags:
Hubs:
+10
Comments 12
Comments Comments 12

Articles