СсылкаLink

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

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

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

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

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

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

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

Если ссылка запускает действие, в верстке, такая «ссылка» должна быть сделана кнопкой.

Соответственно она должна вести себя как кнопка:

  • У такой ссылки должна быть кликабельная область как у кнопки.
  • Нужно блокировать открытие такой ссылки в новом окне. Т. е. Cmd+Click в MacOS и Ctrl+Click в Windows должны восприниматься интерфейсом как обычный клик.
  • Лучше сопровождать такую ссылку иконкой.

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

Ссылки в продуктах Контура окрашиваются в дефолтный цвет контролов — #3D3D3D, и имеют подчёркивание того же цвета с 50% непрозрачностью.

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

Иконки в ссылках также помогают идентифицировать её как интерактивный элемент.

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

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

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

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

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

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

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

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

Картинка и подпись должны быть единым блоком с ховером:

Название

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

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

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

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

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

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

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

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

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

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

Иконка

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

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

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

Цвет

Стандартный и фирменный

В сервисах контура ссылки окрашиваются в стандартный чёрный цвет контролов #3D3D3D и имеют подчёркивание. При необходимости ссылки допускается выделять синим. Пользователи однозначно воспринимают синий текст, как ссылку.

В интерфейсах Контура используйте синий — #1874CF. Подробней смотрите в Гайде по цвету.

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

Зеленый и красный

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

Оформлять ссылки таким образом уместно, если они стоят рядом.

Так как это ссылки для действий, используйте их вместе с иконками.

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

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

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

Если нет другого способа сообщить об ошибке и необходимо привлечь внимание к ссылке — сделайте заливку у фона.

Посещенные ссылки

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

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

Серый

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

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

Если это серая ссылка с иконкой, вместо неё лучше использовать кнопку-ссылку.

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

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

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

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

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

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

Дизайн

Курсор мыши при наведении на ссылку меняется на «руку», подчёркивание становится полностью непрозрачным. В момент нажатия ссылка становится темнее — #292929, в момент клика — #141414.

Состояния

По умолчанию

Фокус и наведение курсора

В момент нажатия

Неактивные