link

Ссылка (html тег <a>) — это элемент навигации, который отвечает за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.

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

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

Как и любой компонент ссылки обладают разными состояниями и адаптируются при взаимодействии пользователя с ними. Однако, важно упомянуть, что в отличие от кнопки у ссылки нет штатного состояния disabled (заблокирована), отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят ссылку в активное состояние.

В основном выделяют 5 основных состояний при взаимодействии со ссылкой:

  • нормальное состояние (не посещённая ссылка) - этот компонент интерфейса является интерактивным и готов к использованию.
  • наведение мыши(:hover) - курсор расположен над ссылкой без клика.
  • visited (:visited) - ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор.
  • активное состояние (:active) - ссылка в процессе нажатия. Состояние очень быстрое, происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил. Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.
  • фокус (:focus) - визуально отображается после клика по ссылке, после нажатия курсором, но отпускании уже за границами ссылки, а также при работе с клавиатурой: если табом перенести фокус на ссылку появляется подчеркивание (в браузерах по умолчанию используется рамка синего цвета). При наведении курсора мыши и в фокусе ссылка выглядит одинаково. Если ссылка в фокусе, то при нажатии клавиши Enter происходит переход по ссылке.

Различия между кнопкой и ссылкой

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

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

Не рекомендуется использовать в работе ссылку-кнопку, т.к. она не будет иметь корректного URL-адреса и при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#». Браузер обработает ссылку-кнопку как ссылку и при правом клике предложит сохранить ссылку или поделиться ею, что не имеет смысла, так как ссылка-кнопка не имеет корректного адреса.

Оформление ссылок

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

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

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

Использование иконок при оформлении ссылок

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

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

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

Цвета

По умолчанию браузеры используют следующие стили для оформления ссылок:

  • стандартная, не посещенная ссылка — синий.
  • посещенная ссылка — фиолетовый.
  • активная ссылка — красный.
  • ссылка в состоянии фокуса имеет нижнее подчеркивание.
  • при наведении курсора мыши на ссылку изменяется указатель мыши со стрелки на иконку маленькой руки.

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

Также, возможно использование и фирменного цвета проекта.

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

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

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

Название ссылок

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

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

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

Оформление текста ссылок

  • при выборе шрифта убедитесь, что он разборчивый.
  • не рекомендуется использовать слишком большой или маленький размер шрифта, т.к. такие ссылки могут отвлекать пользователя, создавать ненужный шум или вовсе сделать текст трудно читаемым.
  • не рекомендуется использовать пунктирное подчеркивание ссылок, т.к. в современных интерфейсах большинство ссылок работает без перезагрузки, и пользователи не замечают или не понимают разницы в подчеркивании.
  • не рекомендуется размещать ссылки слишком близко друг к другу, поскольку пользователи с ограниченными двигательными навыками будет трудно взаимодействовать с такими компонентами.
  • не рекомендуется использовать шрифты с засечками или наклоном. Такие шрифты трудно сочетать с другими.
  • именование ссылок рекомендуется начинать с заглавной буквы, однако, не стоит капитализировать все буквы или использовать только строчные буквы в названии, поскольку при таком оформлении текст становится неудобным для прочтения.
  • рекомендуется делать название ссылки достаточно большим, чтобы было удобно нажимать: 2–3 слова.