Ссылка Link

Ссылка связывает веб-страницы или выступает как более легкий аналог кнопки.

Когда использовать

Ссылку нельзя использовать для основного действия в окне или лайтбоксе — используйте для этого кнопку.

Описание работы

Клик по ссылке открывает другую страницу или запускает действие.

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

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

Если ссылка запускает действие, нужно блокировать открытие такой ссылки в новом окне. Т.е. Cmd+Click в MacOS и Ctrl+Click в Windows должны восприниматься интерфейсом как обычный клик. Для этого «ссылку» нужно верстать с помощью тега <span>.

Подчеркивание

Ссылку можно не подчеркивать. Подчеркивание создает лишний визуальный шум и от него можно отказаться, убедившись, что ссылка опознается как интерактивный элемент. Как правило для этого достаточно сделать ссылку синей, см. раздел «Цвет».

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

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

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

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

Область нажатия

При верстке ссылки в несколько строк, указывайте у нее display: block, чтобы между строками курсор не превращался в стрелку. Такое происходит при интерлиньяже более 1,5 em.

Если поместить ссылку внутрь прямоугольника, она станет кнопкой. Такую «ссылку» не нужно подчеркивать при наведении, лучше менять цвет плашки. Реагировать на клик должна вся область кнопки:

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

Картинка и ссылка-подпись должны работать как единое целое: при наведении на картинку ссылка должна подчеркиваться:

Название

Если ссылка используется для запуска действия, то название должно быть инфинитивом в совершенно форме (отвечать на вопрос «Что сделать?»), должно однозначно говорить о том, что произойдет если на нее нажать.

Если ссылка используется для перехода на другую страницу — то из ее названия должно быть понятно, куда она ведет, без прочтения всего предложения или абзаца. Нельзя использовать слова «тут» «здесь» и т.п.

Место ссылки в предложении, взято из §83 Ководства:

Название ссылки должно быть достаточно большим, чтобы было удобно нажимать: 2–3 слова.

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

Предлоги и союзы можно включать в ссылку, только если они не меняют смысл ссылки. В данном случае предлог «в» можно включить, т.к. ссылка ведет в предыдущий пост:

А здесь предлог можно включить в ссылку, только если она ведет на сайт про подмосковье. Если ссылки ведет на сайт про Москву, предлог не должен включаться в ссылку, т.к. он искажает ее смысл:

Кавычки включайте в ссылку — так ссылка смотрится визуально целостнее и не возникает визуального шума:

Знаки препинания не включайте в ссылку — они относятся к предложению, а не к слову. Также восклицательный и вопросительные знаки влияют на смысл ссылки. Исключения — если знак пунктуации находится внутри ссылки или ссылкой является всё предложение.

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

Иконка

Ссылку можно дополнить иконкой:

Если по клику на ссылку с иконкой запускается продолжительное действие, иконка должна превращаться в лоадер, затем возвращаться в начальное состояние:

Иконка также реагирует на нажатие, но при наведении не подчеркивается:

Цвет

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

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

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

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

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

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

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

Если это серая ссылка с иконкой, можно подсвечивать ее как кнопку, делая темнее подложку. Реагировать на наведение и клик должна вся область 
подложки.

Расположение

При расположении в строку делайте отступы между ссылками 15 px:

Работа с клавиатурой

Ссылка получает фокус только при переходе на нее с помощью клавиатуры: табом или нажав Enter в предыдущем поле.

Ссылка с фокусом выглядит, как ссылка при наведении.

Если ссылка в фокусе, то при нажатии клавиши Enter происходит переход по ссылке.

Дизайн

Состояния: