Как правильно оформить гиперссылку. И почему «подробнее» или «узнать больше» — не вариант

Гиперссылка кажется простым элементом, над оформлением которого даже нечего думать. Вот нужно сослаться на какой-то материал — помечаешь несколько слов гиперссылкой. Или добавляешь приписку  «Узнать подробнее». Готово.

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

Для написания этого материала я использовал англоязычную статью в блоге UX Collective. Я добавил множество своих мыслей из опыта работы редактором и обновил примеры гиперссылок с учетом языка.

Для начала давайте выясним, чем плохи гиперссылки вида «Узнать больше», «Подробнее» и подобные.

Проблема 1

Абстрактные гиперссылки замедляют чтение

По исследованию Nielsen Norman Group, в среднем на веб-странице пользователи успевают прочитать 20-28% слов. Посетители страницы как можно быстрее хотят выполнить свою задачу. Для этого они ищут в тексте маркеры, которые указывают, что ответ содержится в этом предложении или абзаце. Такими маркерами могут быть заголовки, жирный текст, гиперссылки.

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

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

Проблема 2

Читатель не знает, что его ждет после клика по абстрактной гиперссылке

Гиперссылки типа «Узнать больше» трудно воспринимать вне контекста. Чтобы понять, куда ведет такая гиперссылка, нужно прочитать предложение целиком, а иногда и целый абзац. Сама ссылка не говорит, что за ней скрывается, а лишь просит по ней перейти. Из-за этого читатель беспокоится — он не знает что его ждет на той странице:

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

Как написать хороший текст гиперссылки

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

Делайте гиперссылки короткими. Выше мы выяснили, что в среднем пользователи читают около 25% слов на странице. Конечно, пользователь не выдергивает случайные слова из страницы — он сканирует ее по определенному шаблону. Их бывает несколько, по исследованию Nielsen Norman Group статьи обычно просматривают по F-шаблону.

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

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

Та же Nielsen Norman Group рекомендует делать гиперссылки не больше 11 букв — гиперссылки длинее просматривают менее охотно. Их общий вывод: пользователи видят около двух слов в гиперссылке.

Я бы не привязался к цифре в 11 символов или к двум словам, а просто держал в уме, что чем короче ссылка, тем больше шансов что пользователь не поленится ее просмотреть. Я все-таки считаю, что главное, куда ведет гиперссылка.

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

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

У повторяющихся ссылок, задуманных для одного действия (например, кликнуть на новость), есть другой недостаток — они захламляют страницу. Чем больше новостей на странице, тем больше гиперссылок «подробнее».

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

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

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

Цвет гиперссылки может быть любым. Стандартное обозначение гиперссылки — синий подчеркнутый текст. Но если у вас необычный дизайн, то гиперссылку можно сделать другого цвета. Например, в нашем дайджесте мы используем сиреневый цвет гиперссылок, в РБК он черный.

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

Кратко. О чем помнить при добавлении в текст гиперссылок

1. «Узнать больше», «Нажмите здесь», «Подробнее» и других синонимы — неинформативные гиперссылки. Вместо них лучше использовать описательные гиперссылки.
2. Читатель должен вне контекста понимать, на какую страницу ведет гиперссылка. Для этого не нужно читать предложение целиком.
3. Чем короче гиперссылка, тем лучше. Выкиньте из гиперссылки лишние слова или перенесите их в основной текст. Но не всегда нужно гнаться за краткостью — информативная длинная гиперссылка лучше короткой неинформативной.
4. Много гиперссылок отвлекают от чтения. Если вам обязательно необходимо сослаться на все, то их можно разместить справа от основного текста или выделить под них отдельный блок.
5. Если гиперссылка ведет не на веб-страницу, а на особую страницу, то это лучше указать в скобках. Особыми страницами могут быть: видео, PDF-файл, ссылка на приложение в магазине, веб-игра, юридический документ.