10 золотых правил оформления ссылок на сайте

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

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

Правило №1

Текстовая ссылка должна быть подчеркнутой.

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

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

Правило №2

Ссылка должна иметь свой собственный цвет.

Лучше всего, если ссылки в тексте будут синими (голубыми, как вариант). Это тоже уже своего рода традиция, такая же, как и подчеркивание. Пользователь, увидев синий подчеркнутый текст, с почти стопроцентной вероятностью воспримет этот текст как ссылку.

Правило №3

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

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

Правило №4

Не размещайте ссылки близко друг другу.

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

Правило №5

Шрифт ссылки и шрифт основного текста должны быть одинаковыми и не отличаться по размеру.

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

Правило №6

Посещенная ссылка должна отличаться от нетронутой по цвету или оттенку.

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

Лучше всего, если посещенные ссылки будут более темных тонов — это тоже уже своего рода классика.

Правило №7

При наведении на ссылку курсора всегда должен происходить интерактив.

Чаще (и лучше) всего, если ссылка просто будет менять свой цвет или оттенок. Классикой считается замена цвета на оранжевый или на красный. Менее предпочтительны, но также допустимы и другие формы интерактива: убирание подчеркивания, выделение фона, подсвечивание рамки и прочие.

Правило №8

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

Это правило часто нарушается, что приводит к существенным неудобствам.

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

Ссылка с пунктирным подчеркиванием используется тогда, когда нужно открыть какое-то дополнительное окно на текущей странице. Это может быть, например, подсказка, более детальная информация и т. п. Повторный клик по такой ссылке данное окно должен просто закрыть.

Правило №9

Ссылка на внутреннюю страницу сайта не должна открываться в новой вкладке.

Открытие ссылки в новой вкладке по умолчанию допустимо только в том случае, если ссылка ведет на сторонний ресурс.

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

Правило №10

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

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

Как привести ссылки в соответствие

Если вы заметили несоответствия в своих ссылках правилам, описанным выше, исправить их можно правкой файла style.css, который расположен в корневой папке шаблона сайта.

Вот кусок кода моего шаблона, подлежащий редактированию.

1 Блок исходных ссылок:

• 1.1 Шрифт;
• 1.2 Начертание (жирный, полужирный, без выделения);
• 1.3 Курсив
• 1.4 Подчеркивание;
• 1.4 Размер шрифта;
• 1.5 Цвет.

2 Блок посещенных ссылок:

• 2.1 Шрифт;
• 2.2 Подчеркивание;
• 2.3 Цвет;

3 Блок ссылок при наведении на них курсором:

• 3.1 Шрифт;
• 3.2 Подчеркивание;
• 3.3 Цвет.

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