Нужное — подчеркнуть
Как подчеркивания в вебе облегчают жизнь юзерам
Пришло время поговорить о подчеркиваниях. Разработчик Ник Бабич раскрыл суть подчеркиваний в вебе, а еще дал несколько ценных советов по их использованию в своей статье. А мы заботливо подготовили перевод для вас :)
Немного истории
Текст подчеркивали еще задолго до изобретения интернета. Его использовали в типографии, чтобы выделять важные части текста.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3839-3936-4533-b932-383462653764__-__empty__underlinestexthd2800.png)
В рекламе:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3361-3733-4864-a631-656563313566__-__empty__underlinestexthd5opt.png)
И даже на указателях и знаках:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild6334-3564-4130-b030-666638383166__-__empty__underlinestexthd19im.png)
Но сегодня принято не подчеркивать текст, так как лишнее загромождение ухудшает восприятие. Сравните:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3639-6636-4137-b936-653736346566__-__empty__Underlining__Butteri.png)
Подчеркнутые ссылки
В 1991 году на презентации концепции Всемирной паутины Тим Бернерс-Ли заявил, что веб «состоит из документов и ссылок». С тех пор ссылки стали основным элементом интернета.
У первых разработчиков было не так уж и много инструментов — только простые шрифты и ограниченное количество цветов (цветные мониторы отображали 16 цветов, а многие были и вовсе черно-белыми). Чтобы ссылка не затерялась в тексте, ее нужно было выделять. Решили подчеркивать. За 30 лет перепробовали и другие варианты, но все не то. С тех пор подчеркивание — стандарт оформления гиперссылок HTML.
У первых разработчиков было не так уж и много инструментов — только простые шрифты и ограниченное количество цветов (цветные мониторы отображали 16 цветов, а многие были и вовсе черно-белыми). Чтобы ссылка не затерялась в тексте, ее нужно было выделять. Решили подчеркивать. За 30 лет перепробовали и другие варианты, но все не то. С тех пор подчеркивание — стандарт оформления гиперссылок HTML.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild6437-6361-4834-b934-306539613333__-__empty__underlinestexthd8800.png)
Плюсы:
Минусы:
- Известность. Все знают, что кликабельные ссылки принято подчеркивать.
- Заметность. Подчеркнутый текст — отличный визуальный сигнал. Любая горизонтальная линия сразу бросается в глаза, когда мы пробегаем глазами по тексту сверху-вниз.
- Различимость. Если интерактивные элементы выделять только лишь цветом, то люди, не различающие цвета, не смогут с ними работать. Поэтому, согласно Международному стандарту доступности веб-контента WCAG 2.0, нужно добавить еще один различительный элемент — подчеркивание.
Минусы:
- Читабельность. Исследования показывают, что излишние подчеркивания влияют на восприятие текста. Если вы хотите, чтобы текст не потерял читабельность, не усердствуйте с подчеркиваниями.
- Эстетичность. Подчеркивания захламляют текст и общий дизайн.
Идеальная гиперссылка
Пользователь должен понимать при виде элемента, что тот интерактивен. Но ссылка не должна привлекать к себе излишнее внимание.
Простой текст — без ссылок
Если текст не является ссылкой — не подчеркивайте его. У юзеров линия под текстом ассоциируется с интерактивным элементом. Неоправданные ожидания приводят к негативному пользовательскому опыту. Поэтому, если нужно выделить текст, используйте курсив или полужирный шрифт.
Краткость
Выделяйте ссылкой короткие фразы до 3-5 слов. Все остальное будет загромождать текст.
Якорный текст со смыслом
Текст ссылки, который видит читатель, называется якорным. Избегайте формулировки «нажмите здесь» и прочих неинформативностей — пользователи должны знать, что их ждёт при переходе по ссылке. Слабовидящие люди для чтения используют специальные программы вроде JAWS, которые считывают информацию со страниц и проговаривают её голосом. И тогда слова «ссылка: нажмите здесь» будут звучать бесполезно.
Простой текст — без ссылок
Если текст не является ссылкой — не подчеркивайте его. У юзеров линия под текстом ассоциируется с интерактивным элементом. Неоправданные ожидания приводят к негативному пользовательскому опыту. Поэтому, если нужно выделить текст, используйте курсив или полужирный шрифт.
Краткость
Выделяйте ссылкой короткие фразы до 3-5 слов. Все остальное будет загромождать текст.
Якорный текст со смыслом
Текст ссылки, который видит читатель, называется якорным. Избегайте формулировки «нажмите здесь» и прочих неинформативностей — пользователи должны знать, что их ждёт при переходе по ссылке. Слабовидящие люди для чтения используют специальные программы вроде JAWS, которые считывают информацию со страниц и проговаривают её голосом. И тогда слова «ссылка: нажмите здесь» будут звучать бесполезно.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild6665-6264-4666-a630-343936333930__-__empty__underlinestexthd25im.png)
Единство
Единство оформления ссылок на сайте облегчает работу пользователей. Выберите один дизайн гиперссылок и придерживайтесь его. Не должно быть такого, что некоторые ссылки подчеркнуты, а некоторые нет.
Единообразие важно и для крупных сайтов. Хорошим примером послужит сайт CNN, где в разных разделах используются разные стили ссылок — иногда подчеркнутые:
Единство оформления ссылок на сайте облегчает работу пользователей. Выберите один дизайн гиперссылок и придерживайтесь его. Не должно быть такого, что некоторые ссылки подчеркнуты, а некоторые нет.
Единообразие важно и для крупных сайтов. Хорошим примером послужит сайт CNN, где в разных разделах используются разные стили ссылок — иногда подчеркнутые:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3839-3363-4164-b364-386637303739__-__empty__underlinestexthd6800.png)
Иногда просто выделенные цветом:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3463-6163-4034-a135-393832333064__-__empty__underlinestexthd7800.png)
Нестандартные буквы
Речь идет о буквах ц, у, щ, р, д, ф, которые выходят за пределы одной линии. Линия часто перечеркивает нижние элементы этих букв и текст ссылки становится менее разборчивым, да и выглядит это не очень эстетично.
Речь идет о буквах ц, у, щ, р, д, ф, которые выходят за пределы одной линии. Линия часто перечеркивает нижние элементы этих букв и текст ссылки становится менее разборчивым, да и выглядит это не очень эстетично.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3530-6638-4663-b832-343635356437__-__empty__underlinestexthd4opt.png)
Правильно, когда подчеркивание пропускает нижние элементы букв. Так текст и читается лучше, и выглядит красивее:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3235-6131-4934-b863-313834623031__-__empty__underlinestexthd26un.png)
Разработчики оформляют ссылки в интернете с помощью тега CSS: text-decoration: underline. По умолчанию это свойство не учитывает буквы с длинными элементами.
Одно из решений — использовать тег: text-decoration-skip — он указывает, какие части пропускать при подчеркивании. В ноябре 2017 года тег переименовали в text-decoration-skip-ink для Chrome 64. Это свойство поддерживается не во всех браузерах, поэтому иногда нужно искать альтернативы.
Одно из решений — использовать тег: text-decoration-skip — он указывает, какие части пропускать при подчеркивании. В ноябре 2017 года тег переименовали в text-decoration-skip-ink для Chrome 64. Это свойство поддерживается не во всех браузерах, поэтому иногда нужно искать альтернативы.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild6636-6338-4535-b335-333131666636__-__empty__underlinestexthd10op.png)
Цвет гиперссылки
Мощный инструмент в арсенале разработчика — цвет. Его можно использовать для выделения гиперссылок.
Не выделяйте простой текст
Если текст не ссылка — не окрашивайте его. Пользователь ожидает, что цветной текст интерактивный, а когда это не так, это ведет к негативу.
Синие ссылки — мастхэв?
Не обязательно. По словам Якоба Нильсена, написавшего не одну книгу по веб-дизайну, «оттенки синего больше всех ассоциируются с кликабельными элементами, другие цвета тоже подойдут, но если есть возможность выбора — делайте синие». А вот обычный текст синим лучше не делать — помните про негативный пользовательский опыт?
Еще одно существенное преимущество синего цвета перед другими — его могут распознать люди с цветовой слепотой (страдающие протанопией и дейтеранопией).
Разным ссылкам — разные цвета
Различие между просмотренными и непросмотренными ссылками облегчит работу пользователя и сориентирует, где он был, а где нет. Лучше, чтобы цвета были одного оттенка — это облегчит восприятие. Цвет непосещенной ссылки должен быть ярким, а посещенной — тусклым.
Не выделяйте простой текст
Если текст не ссылка — не окрашивайте его. Пользователь ожидает, что цветной текст интерактивный, а когда это не так, это ведет к негативу.
Синие ссылки — мастхэв?
Не обязательно. По словам Якоба Нильсена, написавшего не одну книгу по веб-дизайну, «оттенки синего больше всех ассоциируются с кликабельными элементами, другие цвета тоже подойдут, но если есть возможность выбора — делайте синие». А вот обычный текст синим лучше не делать — помните про негативный пользовательский опыт?
Еще одно существенное преимущество синего цвета перед другими — его могут распознать люди с цветовой слепотой (страдающие протанопией и дейтеранопией).
Разным ссылкам — разные цвета
Различие между просмотренными и непросмотренными ссылками облегчит работу пользователя и сориентирует, где он был, а где нет. Лучше, чтобы цвета были одного оттенка — это облегчит восприятие. Цвет непосещенной ссылки должен быть ярким, а посещенной — тусклым.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3062-3365-4364-b634-613930346364__-__empty__underlinestexthd3opt.png)
Списки
В списках каждая строка является ссылкой, поэтому обойдемся без подчеркиваний.
В списках каждая строка является ссылкой, поэтому обойдемся без подчеркиваний.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild6230-6462-4530-a431-626530313666__-__empty__underlinestexthd9800.png)
Мобильные устройства и ссылки
Больше 50% юзеров выходят в интернет с помощью своего мобильного. Оптимизация веб-интерфейса для мобильных пользователей является главным приоритетом для веб-дизайнеров.
Кнопки
Не используйте подчеркнутые ссылки в мобильных приложениях. Каждому свое: в компьютере — гиперссылки, в мобильных приложениях — кнопки.
Кнопки
Не используйте подчеркнутые ссылки в мобильных приложениях. Каждому свое: в компьютере — гиперссылки, в мобильных приложениях — кнопки.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1517473680/tild3439-6535-4665-a161-366435326437__-__empty__underlinestexthd1opt.png)
Размер
Большим пальцем довольно трудно попасть по некоторым элементам мобильного интерфейса. Чтобы не заниматься пиксель-хантингом, делайте интерактивные элементы крупными.
Большим пальцем довольно трудно попасть по некоторым элементам мобильного интерфейса. Чтобы не заниматься пиксель-хантингом, делайте интерактивные элементы крупными.
Конечно, подчеркивание имеет свои недостатки, но пока это лучший способ сделать ссылки доступными и понятными для всех пользователей среди всех известных приёмов веба.