Как подчеркивания в вебе облегчают жизнь юзерам
Нужное — подчеркнуть
Сибирикс
Нужное — подчеркнуть
Как подчеркивания в вебе облегчают жизнь юзерам
Пришло время поговорить о подчеркиваниях. Разработчик Ник Бабич раскрыл суть подчеркиваний в вебе, а еще дал несколько ценных советов по их использованию в своей статье. А мы заботливо подготовили перевод для вас :)
Немного истории
Текст подчеркивали еще задолго до изобретения интернета. Его использовали в типографии, чтобы выделять важные части текста.
В рекламе:
И даже на указателях и знаках:
Но сегодня принято не подчеркивать текст, так как лишнее загромождение ухудшает восприятие. Сравните:
Подчеркнутые ссылки
В 1991 году на презентации концепции Всемирной паутины Тим Бернерс-Ли заявил, что веб «состоит из документов и ссылок». С тех пор ссылки стали основным элементом интернета.

У первых разработчиков было не так уж и много инструментов — только простые шрифты и ограниченное количество цветов (цветные мониторы отображали 16 цветов, а многие были и вовсе черно-белыми). Чтобы ссылка не затерялась в тексте, ее нужно было выделять. Решили подчеркивать. За 30 лет перепробовали и другие варианты, но все не то. С тех пор подчеркивание — стандарт оформления гиперссылок HTML.
Плюсы:

  • Известность. Все знают, что кликабельные ссылки принято подчеркивать.

  • Заметность. Подчеркнутый текст — отличный визуальный сигнал. Любая горизонтальная линия сразу бросается в глаза, когда мы пробегаем глазами по тексту сверху-вниз.


Минусы:

  • Читабельность. Исследования показывают, что излишние подчеркивания влияют на восприятие текста. Если вы хотите, чтобы текст не потерял читабельность, не усердствуйте с подчеркиваниями.

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


Простой текст — без ссылок

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


Краткость

Выделяйте ссылкой короткие фразы до 3-5 слов. Все остальное будет загромождать текст.


Якорный текст со смыслом

Текст ссылки, который видит читатель, называется якорным. Избегайте формулировки «нажмите здесь» и прочих неинформативностей — пользователи должны знать, что их ждёт при переходе по ссылке. Слабовидящие люди для чтения используют специальные программы вроде JAWS, которые считывают информацию со страниц и проговаривают её голосом. И тогда слова «ссылка: нажмите здесь» будут звучать бесполезно.
Единство

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

Единообразие важно и для крупных сайтов. Хорошим примером послужит сайт CNN, где в разных разделах используются разные стили ссылок — иногда подчеркнутые:
Иногда просто выделенные цветом:
Нестандартные буквы

Речь идет о буквах ц, у, щ, р, д, ф, которые выходят за пределы одной линии. Линия часто перечеркивает нижние элементы этих букв и текст ссылки становится менее разборчивым, да и выглядит это не очень эстетично.
Правильно, когда подчеркивание пропускает нижние элементы букв. Так текст и читается лучше, и выглядит красивее:
Разработчики оформляют ссылки в интернете с помощью тега CSS: text-decoration: underline. По умолчанию это свойство не учитывает буквы с длинными элементами.

Одно из решений — использовать тег: text-decoration-skip — он указывает, какие части пропускать при подчеркивании. В ноябре 2017 года тег переименовали в text-decoration-skip-ink для Chrome 64. Это свойство поддерживается не во всех браузерах, поэтому иногда нужно искать альтернативы.
Цвет гиперссылки
Мощный инструмент в арсенале разработчика — цвет. Его можно использовать для выделения гиперссылок.


Не выделяйте простой текст

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


Синие ссылки — мастхэв?

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

Еще одно существенное преимущество синего цвета перед другими — его могут распознать люди с цветовой слепотой (страдающие протанопией и дейтеранопией).


Разным ссылкам — разные цвета

Различие между просмотренными и непросмотренными ссылками облегчит работу пользователя и сориентирует, где он был, а где нет. Лучше, чтобы цвета были одного оттенка — это облегчит восприятие. Цвет непосещенной ссылки должен быть ярким, а посещенной — тусклым.
Списки

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


Кнопки

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

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