Wikipedia в будущем: underline and none 

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

Борьба с несуществующей проблемой

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

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

Часть 1. О меньшинстве.

Мне нравится, как позиция сторонников расписана в статье «Хотелось бы подчеркнуть». Рекомендую ознакомиться.

Хочу привести цитату, где на мой взгляд, кроется суть:

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

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

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

Звучит действительно как решение. Но давайте разберемся.

1. В хроме есть специальные возможности (озвучивание действий, режим высокой контрастности и экранная лупа). Но включить их можно только при первом включении браузера. В противном случае рекомендуется использовать средство чтения с экрана ChromeVox. Очень странно.
2. В Firefox, Opera и IE можно настроить шрифты, цвет текста, фона, ссылок. Но достаточно ли этого? Жирность ссылок и кнопок, как единственных элементов управления и навигации, не настроить.
3. В Safari таких настроек вообще нет — используются настройки операционной системы. Но в MacOS, к примеру, можно лишь инвертировать все цвета и включить лупу. Крайне скудно.
4. Добиться более близкого к желаемому результата можно только с использованием плагинов. Стандартные средства браузеров настраивают лишь минимум. Ссылки на аддоны приведены в конце статьи.
5. В любом случае все это пагубно повлияет на дизайн всех сайтов.
6. Чтение с экрана вообще не имеет никакого отношения к навигации и никаким образом ей не способствует.

Настройка цвета в Firefox. Как и в Opera есть настройка подчеркивания ссылок. В первых двух можно настроить подчеркивание ссылок. Свои настройки включаются после снятия галочки «Разрешить веб-сайтам использовать свои цвета/шрифты».

Что имеем в итоге?

Несколько решений, которые не только полны недостатков, но и портят дизайн сайтов.

Часть 2. Большинство

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

Для остальных есть «нишевые решения», делайте с ними что хотите.

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

А какие есть варианты?

1. Подчеркивание.
2. Цвет.
3. Цвет фона.
4. Рамка.
5. Иконка до или после.
6. Еще? Предлагайте.

Преимущество цвета очевидно — он мусорит меньше всего. И для большинства выделения ссылок цветом будет достаточно.

Казалось бы, решение замечательное. Но я хочу показать, что и оно имеет недостатки.

Искажение цвета ссылок. MacBook Air, вид сбоку.

Вид под углом сверху.

Даже на MacBook Air небольшой угол наклона дает искажение цвета. Мелочь, но в таких ситуация навигация ухудшается.

Пример с углами несколько натянут. Тут скорее идея плохой передачи цвета.

Плюс большинство не умеет настраивать цветовые профили, калибровать мониторы.

Плюс снижение яркости экрана при работе от батареи.

Плюс автоматическое снижение яркости экрана при ярком освещении (уже достаточно сильно распространено на смартфонах и ноутбуках).

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

И еще: вспомните о пожилых людях. Согласно исследованиям, количество пожилых пользователей интернета растет со скоростью примерно 8-9% в год. Выявление ссылки в тексте и простота попадания по ней — очень важны.

Далее. Взглянем еще раз на скриншот Википедии.

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

Сейчас ссылки подчеркиваются при наведении курсора. Представьте, что вы зашли с планшета, где курсор и :hover отсутствует. Как вы определите, является ли ссылкой словосочетание «гипертекстового документа» или ссылками являются слова «гитертекстового» и «документа»?

Вспомним, что вся писанина этой статьи, и регулярные споры дизайнеров в интернете — всего лишь о подчеркивании ссылок.

Может просто использовать золотую середину? Полупрозрачное однопиксельное подчеркивание?

Пример Википедии взят из статьи «Хотелось бы подчеркнуть». Он сильно преувеличен, и потому отлично демонстрирует ситуацию.

Опрос

Оставляйте комментарий +1 к нужному пункту (без комментариев). Свой комментарий, мнение или свой вариант предлагайте в пункте 4.

Что делать?

1. text-decoration: underline;
2. text-decoration: none;
3. border-bottom: 1px solid rgba(color, 0.3);
4. комментарии, мнения и свои варианты

Вывод

Разумеется не стоит фанатично относиться к какому-либо способу. Все зависит от конкретной ситуации и от кучи разных факторов.

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

Думайте о людях, для которых делаете интерфейсы, делайте интернет удобнее.