Ссылка Link

Давно не обновляли

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По умолчанию

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

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

Неактивные

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

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

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