Оформление гиперссылок - не всё так просто!

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

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

Оформление HTML элемента <a> - очень важный момент; так что потратьте время, чтобы найти наиболее лучший вариант.

В этой статье мы рассмотрим несколько хороших примеров оформления гиперссылок.

Ссылки должны выглядеть как ссылки

Все гиперссылки должны нести вашим читателям явное послание: "Я ссылка. Кликни на меня"

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

Думаю, что многие уже настолько привыкли к этому стандарту, что не стоит от него сильно отходить.

Примеры оформления гиперссылок

Ниже вы найдёте 3 разных примера оформления гиперссылок. Они взяты с самых разных популярных новостных порталов.

На первый взгляд, каждый из этих примеров хорош. Все они синего оттенка и хорошо выделяются из основного текста.

Почему же тогда ссылки с сайта The New York Times смотрятся лучше, чем другие?

Позвольте, я поясню.

Простой тест дизайна гиперссылки

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

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

Делается это очень просто:

Сделайте скриншот и вставьте его в Photoshop. Проделайте следующие операции:

  • Image > Adjustments > Desaturate
  • Filter > Blur > Gaussian Blur

Теперь давайте ещё раз взглянем на наши экспериментальные ссылки.

Вот пример для The Guardian; Трудно найти ссылку:

BBC использует жирный текст, поэтому если постараться, то её можно различить среди остального текста.

В The NY Times ссылку найти проще всего.

Подчёркивание ссылок

Вот тут-то есть небольшой подвох.

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

Главной причиной того, что подчёркивание ссылок снижает разборчивость текста, заключается в том, что данный эффект перекрывает некоторые символы, элементы которых выходят за базовую линию — такие как p, g, j, и q. Эти буквы особенно подвержены данному эффекту, если мы применяем к ним text-decoration: underline.

Вот пример стандартной ссылки в Google Chrome (версия 28):

Какое решение может быть тут?

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

Как же? Мы можем воспользоваться CSS свойством border-bottom, вместо CSS text-decoration, тем самым, подчеркнув ссылки.

Используя свойство border-bottom, мы можем сместить подчёркивание на несколько пикселей ниже, тем самым, улучшив читабельность.

Вот пример CSS кода:

a {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid blue;
}

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

К примеру, мы можем уменьшить толщину линии и поработать над цветом, чтобы сделать ссылку более приятной.

В моём примере, я чуть изменил цвет подчёркивания. Сделал светлее:

CSS:

a {
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px solid #8d8df3;
}

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

Следующая тема, которую я хотел бы обсудить, относится больше к стратегиям.

За основу данного подхода, возьмём Закон Фиттса.

Фишка данного закона проста. Чем больше размер объекта, тем его легче заметить и сделать клик.

Данное высказывание имеет огромный смысл, если речь касается тачскринов.

Бывает сложно попасть пальцем по ссылке; часто приходится увеличивать масштаб страницы, чтобы сделать это.

К счастью, мы можем исправить это, отредактировав стили.

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

А что вы скажете на счёт того, чтобы изменить их размер?

Если мы изменим размер элементов <a>, то это отразится на всём остальном тексте. Базовая линия будет смещена, тем самым, вызвав новые проблемы.

Поэтому единственное, что мы можем сделать, расширить ссылки горизонтально.

Должны ли гиперссылки быть синими?

Согласно исследованиям Google, по синим ссылкам совершается больше кликов, нежели по каким-либо другим.

Если пользователь видит синий подчёркнутый текст, то сразу воспринимает его, как ссылку.

Хотя, по моему мнению, не все ссылки должны быть синими.

Есть так же примеры, где синие ссылки никуда не годятся.

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://sixrevisions.com/usability/hyperlink-design/
Перевел: Станислав Протасевич
Урок создан: 5 Сентября 2013
Просмотров: 30751
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Сентября 2013 17:19
    nekal_san
    По моему это переводчик гугла переводил. Или того хуже - промт. Хотя статья познавательная.
  • 6 Сентября 2013 07:50
    carrier490
    Принял к сведению, страница - в закладки.
  • 6 Сентября 2013 09:13
    wedoca
    Статья понравилось... Так же хотел добавить что на многих сайтах стало нормой прописывать цвет ссылки по умолчанию. При этом дизайнеры и разработчики часто забывают прописывать цвета посещенных ссылок и цвет при нажатии.
  • 6 Сентября 2013 11:09
    mccrush
    Статья полезная. Но самое интересное, это рассказывать о вреде курения и при этом самому курить. Это по идее абсурд. Так почему же у вас, прям в этой статье, ссылки не подчеркнуты?????!!!!!
    • 6 Сентября 2013 16:06
      rubyx
      :) сам я курю и говорю что курить вредно другим, наверно это нормально.
  • 6 Сентября 2013 11:28
    ppaull
    И в каком месте статья познавательная?
  • 6 Сентября 2013 16:08
    rubyx
    Тут не только о не читаемых ссылках говорить надо, но и о "сером" тексте на белом фоне что вызывает напряжение глаз. Статья нужная.
  • 7 Сентября 2013 12:27
    micha
    По мне, так отличная статья. А сколько ещё всяких нюансов в том, чем пользуемся постоянно!
  • 19 Мая 2014 21:58
    alexgoluk
    Подчеркивание ссылок устарело. Ссылки можно делать любым цветом, а не только синим. Пост про это и ссылка на еще два поста с убедительной аргументацией: http://alexgoluk.blogspot.com/2013/06/blog-post_22.html
^ Наверх ^