Где нужен текст ссылки, до или после стрелки?

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

Стрелки перед и после ссылки
Стрелки перед и после ссылки

Теперь – вопрос. Должны ли эти стрелки быть до или после текста ссылки? Рассмотрим оба варианта:

Стрелка перед ссылкой.

Когда стрелка стоит перед текстом ссылки, она указывает на ссылку и как бы говорит «Эй! Нажми эту ссылку». Стрелка рекламирует ссылку, поскольку стрелка привлекает наше внимание к ссылке. Я думаю, что это очень хорошая идея, которую можно использовать для обозначения важных ссылок.

Стрелка после ссылки.

Когда стрелка стоит после текста ссылки, то она указывает на переход, куда-то еще – «Эй! Нажми эту ссылку, чтобы перейти туда». Она похожа на дорожный знак, указывающий направление до ближайшего города. Мне это не очень нравится, поскольку такая стрелка никуда не указывает и уводит внимание от самой ссылки, в отличие от стрелки перед ссылкой.

Что стоит использовать?

Я думаю, что лучше всего исходить из контекста. Если ссылка ведет на другую страницу или полный текст статьи, то, возможно, стрелку лучше поставить после ссылки. Это как указатель на направление – если вы кликните эту ссылку, вы пойдёте туда.

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

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

Оригинал: Should Arrows be Placed Before Link Text or After?

Leave a Reply

Your email address will not be published. Required fields are marked *