Гиперссылки — отличный способ добавить интерактивности контенту. С их помощью посетитель сайта может мгновенно переместиться в нужном направлении, сделав один-единственный клик. Другими словами ссылки — это именно то, что связывает воедино всю всемирную Паутину. Без них Интернет был бы совсем другим «местом», перемещение по которому было бы куда более проблематичным. Простой HTML-тег <a> связывает вашу страничку с любым другим ресурсом в Сети. В том числе и поэтому гиперссылкам нужно уделять особое внимание, если вы являетесь владельцем сайта.

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

На что обратить внимание перед созданием ссылки?

• Контент, который скрывается за ссылкой должен соответствовать тому, о чем ведется речь. Ресурс, на который ведет ссылка, должен давать обещанную информацию. Если посетитель сочтет эту информацию полезной, тогда в будущем он вновь воспользуется ссылками на вашей странице.
• При разработке дизайна учтите, что вид ссылки имеет значение. Желательно, чтобы цвет ссылок был отличным от цвета основного текста. Также рекомендуется все ссылки делать с нижним подчеркиванием, чтобы пользователь знал, что по ним можно кликнуть.
• Пользователи становятся все более Интернет-грамотными, и более не нуждаются в подсказках типа «НАЖМИ СЮДА». Достаточно обычного подчеркнутого текста.
• Когда ссылка уводит пользователя с вашего сайта на любой другой, убедитесь что страница не открывается в том же окне. У пользователя всегда должна быть комфортная возможность вернуться в кашей странице и дочитать содержимое. Поэтому сделайте так, чтобы ваши гиперссылки открывались к новой вкладке (за исключением страницы оплаты).
• Также полезно прописывать ссылкам заголовок (title), чтобы пользователь знал куда конкретно он попадет, нажав на ссылку. Заведите привычку прописывать заголовки всем ссылкам.

Проверьте дизайн ваших ссылок:

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

Сделать это вы можете, изменяя параметры CSS для тегов <a> и <p>, снижая контраст цвета ссылок или присваивая им цвет основного текста.

Как решить вопрос читабельности?

Подчеркнутые ссылки снижают читабельность текста. Вы можете решить эту проблему, используя свойство CSS border-bottom вместо text-decoration, чтобы подчеркнуть гиперссылку.

Кроме того, этими двумя параметрами ссылки можно оперировать независимо друг от друга, изменяя стиль подчеркивания border-bottom и цвет ссылки text-decoration. Также вы можете сделать подчеркивание менее ярко выраженным, чтобы повысить читабельность.

Делайте ссылки длиннее

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

Возникает необходимость выделять ссылки шрифтом большего размера. Если размер шрифта для тегов <a> изменен, это сказывается и на высоте строчек, в которых встречаются эти теги. Гиперссылка, выделенная шрифтом большего размера — это SEO-прием, который делает ссылку более интуитивно понятной для пользователя и видимой для поисковых машин, а также рассказывает и тем и другим о чем идет речь.

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

Чаще ли кликают по ссылкам синего цвета?

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

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

Автор материала William Johnson

Перевод — Дежурка

Смотрите также:

• Секреты фриланс веб-дизайна
• Увеличение производительности труда на дому: 10 мощных советов для фрилансеров веб-дизайна
• Стереотипы индустрии веб-дизайна и веб-разработки