СсылкаLink

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По умолчанию

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

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

Неактивные