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

Почему «Нажмите здесь» и «Перейдите по этой ссылке» — это неудачные решения? И допустимо ли использовать формулировку «Читать дальше»?

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

*Если что-то широко распространено, это еще не значит, что это правильно.*

В этой статье я разберу популярные формулировки и ошибки форматирования и покажу более доступные и информативные альтернативы. Поехали!

1. Содержательные ссылки

Начнем с самого начала. Что такое гиперссылка? Комбинация веб-адреса (URL) и кликабельного элемента (чаще всего это слово или фраза, иногда изображение). Хотя это обширная тема, мы сосредоточимся на текстовых ссылках, а именно на их юзабилити и доступности.

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

Забавное совпадение: часто используемые в гиперссылках английские термины (this, link, here, read more и т.д.) можно назвать "четырехбуквенными словами", что идентично известному эвфемизму для обозначения английских ругательств.

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

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

2. Отображение URL-адресов

Если веб-адрес короткий и не выглядит как-то так: "M$c0P88%X4LHr&dxQ1A", то решение его отобразить вполне оправдано и тоже будет достаточно эффективным, особенно если предполагается, что аудитория должна скопировать URL и вставить его куда-то еще.

Если у вас имеется длинная неразборчивая цепочка символов, то в большинстве ситуаций выставлять ее напоказ не самая лучшая идея. В этом случае подумайте о том, чтобы встроить URL в лаконичную фразу или сократить адрес при помощи таких инструментов, как Bitly или Cuttly.

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

bit.ly/30SjUa4y (подозрительная и нечитабельная ссылка);
bit.ly/smashing-books (можно прочитать название темы);
smash.ing/30SjUa4y (узнаваемый домен);
smash.ing/books (полностью понятная).

3. Ссылки для скачивания

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

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

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

4. Ссылки vs. кнопки

Не все ссылки на странице или в электронном письме одинаково важны. Чаще всего авторы хотят, чтобы пользователь нажал на основную ссылку, в то время как другие можно пропустить. Если вы хотите привлечь внимание людей к главному действию, подумайте о том, чтобы представить его в виде кнопки: "Подписаться на рассылку", "Купить билеты", "Получить брошюру" или "Скачать запись".

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

Текст кнопки должен отвечать следующим требованиям:

Быть кратким (не более 4-5 слов);
В идеале начинаться с глагола (получить, купить, скачать, оформить заявку и т.д.);
Честно отражать действие (избегайте замалчивания таких неприятных шагов, как просмотр рекламы, регистрация, предоставление личных данных и т.д.).

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

5. Тексты с большим количеством ссылок

Ссылки — это основа Интернета, однако слишком активное добавление URL-адресов в каждое предложение не лучшая идея (конечно, это не касается случаев, когда вы вносите дополнительные сведения в базу знаний типа Википедии, по своей природе состоящую из связанных между собой материалов).

Самый первый шаг — убедиться, что вам действительно нужны все ссылки. Если вы удалите некоторые из них, то проблема исчезнет сама собой. В противном случае попробуйте сгруппировать их: в виде маркированного списка, сбоку от текста или под подходящим заголовком (например, "Рекомендуемые материалы", "Ресурсы").

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

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

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

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

6. Доступность ссылок

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

Различимость

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

Цветовой контраст

Ссылка — важный интерактивный элемент, поэтому она должна быть достаточно контрастной. WCAG включает 2 допустимых уровня контрастности:

AA: средний, используется на многих сайтах для массовой аудитории;
AAA: высокий, применяется в основном на правительственных сайтах и сообществами людей с ограниченными возможностями.

Например, уровень AA требует, чтобы контраст между ссылкой и фоном составлял не менее 4,5:1 для шрифта обычного размера и 3:1 для крупного текста.

Примечание: Вы всегда можете проверить свои цвета с помощью онлайн-инструмента Contrast Checker или плагина для Figma Contrast.

Фокус

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

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

Оптимизация для программ чтения с экрана

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

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

"Украинский — ссылка, английский — ссылка, немецкий — ссылка..."

Как должно быть:

"Скачать шаблон плана проекта на украинском языке — ссылка, скачать шаблон плана проекта на английском языке — ссылка..."

И, наверное, самое раздражающее — это услышать на новостном сайте следующее:

"Подробнее — ссылка, подробнее — ссылка, подробнее — ссылка..."

Зрячие люди могут догадаться, что "Подробнее..." относится к ближайшему заголовку, а для людей с нарушениями зрения нужно более продуманное решение. К счастью, здесь на помощь приходит HTML-атрибут aria-label, который позволяет добавить пояснительный текст для пользователей скринридеров.

Зачастую именно в обязанности дизайнера входит составление “доступного” текста и взаимодействие с разработчиком над оптимальной реализацией такого решения, поэтому ниже я даю вам упрощенный пример кода:

<h4>Новости</h4>

<p>Команда дизайнеров Eleks примет участие в космическом хакатоне.

<a href="aerospace-hackathon.html" aria-label="Подробнее об участии Eleks в космическом хакатоне”>Подробнее...</a>

</p>

<p>В этом году онлайн-институт технологий и творчества Projector запустит 5 курсов по веб-доступности.

<a href="new-courses.html" aria-label="Читайте подробнее о новых курсах по веб-доступности от онлайн-института Projector">Подробнее...</a>

</p>

Как вы видите, каждая надпись "Подробнее" сопровождается расшифровкой для программ чтения с экрана. Однако добавлять aria-label не нужно, если заголовок сам по себе является ссылкой.

<h4>Новости</h4>

<h5><a href="aerospace-hackathon.html">Команда дизайнеров Eleks примет участие в космическом хакатоне</a>

</h5>

<h5><a href="new-courses.html">В этом году онлайн-институт технологий и творчества Projector запустит 5 курсов по веб-доступности</a>

</h5>

Повторяющиеся ссылки

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

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

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

Теперь об электронных письмах. Допустим, у нас есть приглашение на какое-то онлайн-мероприятие, и в нем несколько раз повторяется Zoom-ссылка: в описании, разделе "что-когда-где" и в заключительной части. Такое письмо не только выглядит неаккуратно, у слабовидящих пользователей возникнут проблемы при переключении между одинаковыми ссылками.

Что почитать по теме

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

Вот немного дополнительной литературы: