Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Дискуссии по понедельникам: подчёркивание ссылок

Сегодня начинаем новую рубрику — дискуссии по понедельникам. В понедельничных заметках будут разрешены комментарии. Я буду удалять офтопик, мат не по делу, личные оскорбления. Темы дискуссий — это темы моего блога: дизайн, технологии, музыка и жизнь. Посмотрим, что из этого выйдет.

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

Какой у вас опыт в этом вопросе? Как вы относитесь к дизайнерам, которые не подчёркивают ссылки? Что думаете о тех, кто подчёркивает? Что будет, если в вашем дизайне убрать подчёркивания у всех ссылок, что он потеряет? А если, наоборот, добавить? Включаете ли вы подчёркивание ссылок на Айфоне? Как вам тренд с тонкими подчёркиваниями? Стоит ли убирать подчёркивание при наведении? Или, может, наоброт, как раз рисовать при наведении? Когда подчёркиванию придёт конец? Когда произойдёт возрождение подчёркивания?

Пишите всё, что думаете по этому вопросу.

Подписаться на блог
Поделиться
Отправить
38 комментариев
Алексей Касаев

Стараюсь подчёркивать ссылки всегда, люблю тонкое подчёркивание и небольшой fade out при наведении.

Единственное, что всё ещё кажется странным — это подчёркивание ссылок в навигационном меню (не в таком, как на этом сайте, а, например, как на apple.com).

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

Илья

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

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

Ну и Гугль в последнее время к этому располагает ;-) Всё это из серии КО, конечно.

Александр

А кто-нибудь может объяснить, почему в Хроме сделали жирное подчёркивание у ссылок с большим кеглем?

Тим Глушков

Сегодня подчёркивание ссылок — исключительно дело вкуса. Фейсбук и «Вконтакте» научили всех, что на синенькое можно нажимать.

Если есть нужда, «синенький» может быть любым достаточно насыщенным цветом, контрастирующим с цветом текста.

Тонкое подчёркивание — замечательно; необходимые костыли с border-bottom отвратительны.

По наведении ссылку нужно перекрашивать и сохранять подчёркивание (или его отсутствие).

Денис

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

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

А подчёркивание, например, в уже выделенных это лишнее.

Вопрос для Ильи: зачем выделять на этой страница Блог и Илья Бирман? Не лишнее ли это?

Александр Колодько́́

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

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

@geekparad

Подчёркивание ссылок — это олдскул. Сегодня кнопки должны быть яркими и большими под нажатие пальцем на планшете — вот примерно как у кнопки «Отправить». Красным цветом — нельзя. Зелёным — можно. Лишние ссылки пугают людей и случайно нажимаются.

Андрей

Фейсбук, Гугл, Айфон и другие — интерфейсы повседневного пользования.

Даже если бы Гугл сделал ссылки в поисковой выдаче черными и отразил слева направо, ничего не изменилось бы. Так же и на Айфоне. Хоть обведи ссылку, хоть в кнопку засунь — и так будет понятно, что нужно жать на неё.

Но нельзя проецировать эту практику на обычные сайты или сайты с большим количеством изменяемого контента, особенно если контент является элементом навигации (привет, Лента.ру).

Вот правило в стиле Бирмана:
Всегда подчёркивайте ссылки. Потому что в тех случаях, когда подчёркивать не нужно, это будет настолько очевидно, что вы это сразу поймете.

Антон Назаров

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

Если уж все про меню, то там подчёркивание излишне.

Илья Бирман

Вот эту логику я никак не могу понять.

Если «на ранних порах» народ ещё не понимал, то как подчёркивание помогало? В нём же нет ничего, что говорило бы «в меня можно тыкнуть». И что сейчас изменилось по сравнению с ранними порами?

Руст Кулматов

И что сейчас изменилось по сравнению с ранними порами?

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

Илья Бирман

Это общие слова. Что изменилось по сути? Почему новичку нужно подчёркивание, как оно ему помогает? Как опытный пользователь без подчёркивания понимает, где ссылка?

Антон Назаров

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

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

Руслан Кеба

Тонкое подчёркивание — хорошее решение. Только делать его нужно без просвета.

Женя Арутюнов
artli

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

Станислав Биченко

Два исследования по теме:

Comparing Link Marker Visualization Techniques — Changes in Reading Behavior
Среди выводов: подчёркнутые ссылки ухудшают восприятие информации в тексте.

A Comparison of Link Readability Techniques
Подчёркнутые ссылки улучшают читаемость и удобство навигации (т. к. они привычнее — здесь важно заметить, что исследование проводилось в 2004 году).

Оба исследования не учитывают возможность «тонкого» подчёркивания ссылок.

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

Георгий Марков

Универсальных правил не существует. Где-то подчёркивание ссылок обязательно, где-то они только создают лишний шум.

Подчёркивание, каким его рисуют браузеры, избыточно и уродливо, поэтому его и стали делать «тонким». Если уж подчёркивать, то лучше так.

Если ссылки не подчёркиваются, то их хорошо подчёркивать при наведении: дополнительная обратная связь. Кстати, Бирман писал, что ссылка должна мгновенно зажигаться при наведении, а гаснуть постепенно. Я считаю, что и подсвечивать, и гасить интерактивные элементы нужно мгновенно, чтобы у них были чёткие «территориальные воды» и однозначные состояния.

Игнат Филиппов

Смысл подчёркивания — быстро отличить ссылку от не ссылки в одинаково оформленном блоке текста, не зависимо от особенностей зрения. При выделении только цветом смело говорим «пока» дальтоникам и слабовидящим (поди быстро найди серые слова в абзаце чёрного текста). Даже цветные ссылки в простыне текста найти не сразу удается без подчёркивания.

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

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

Отдельно стоящие слова в привычном месте для нахождения меню подчёркивать не обязательно, если оформление блока позволяет догадаться, что там только ссылки с вероятностью близкой к единице. Иначе говоря, если из контекста увиденного на экране понятно, что вот это должно быть ссылкой (слово «Каталог» на пустом экране — утрированный пример), то необходимости это подчёркивать нет.

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

Мигать подчёркиванием, особенно при изменении цвета ссылки при наведении, лично мне создает лишний дискомфорт. Но если в убирании подчёркивания при наведении я ещё могу узреть смысл (например, чтобы ещё проще прочитать стало), то в появлении подчёркивания при наведении — совсем не могу.

Станислав Биченко

Важный момент — различение ссылок и псевдоссылок. В русскоязычном интернете пунктирное подчёркивание означает псевдоссылку, т. е. ссылку, которая не уводит на другую страницу. Если у обычных ссылок подчёркивания нет, то псевдоссылки выглядят довольно странно. С другой стороны, в Яндекс.Авто (арт-директор — Рома Воронежский, дизайнеры — Олег Пшеничный и Федор Фокин) именно так и сделано:
http://i.imgur.com/gHbUs9U.png

Паша Омелёхин

Ссылки надо подчёркивать обязательно. Без подчёркивания получается непонятно что. А ещё на экранах e-ink ссылку от текста не отличишь.

Единственный сайт, где, как я думаю, обосновано то, что ссылки не подчёркнуты — http://briefly.ru/

Ещё иногда можно не подчёркивать ссылки в меню. Ясно же, что в меню не текст.

Практически во всех остальных случаях ссылки надо подчёркивать.

P. S. Тонкое подчёркивание, конечно, круто, но ещё лучше — это подчёркивание с разрывами у букв р, ф, у, как в Ай-ОСе. К сожалению, на сайтах это пока можно реализовать только достаточно криво и проблематично.

Алексей

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

Хорошим примером может служить недавний редизайн Ленты.ру. Изменений к лучшему очень много, но всё перечёркнуто лишёнными подчёркивания ссылками, которые абсолютно незаметны в тексте статей, особенно на не особо качественных экранах ноутбуков и мобильных устройств, там они вообще сливаются с обычным текстом. Логика решения (не давать пользователю уходить с сайта) понятна, однако намеренное ухудшение юзер-экспириенса ради своих целей — хамство. Считаю, что кармический груз отсутствия подчёркиваний предопределил все, что с ними недавно случилось, и весьма по этому поводу злорадствую. Если их новая оккупационная администрация вернёт подчёркивания, буду им рукоплескать и восславлять их менеджерский гений.

Денис Талала

Про подчёркивания существует уже такое количество статей, что говорить об этом становится всё скучнее из раза в раз. Вот хорошая статья: Хотелось бы подчеркнуть.

Илья Бирман

Главное предложение из текста:

Я вижу яблоко и хватаю яблоко, его не нужно для этого подчёркивать.

Матвей Правосудов

В большинстве случаев ссылки нужно подчёркивать (как минимум, выделять акцидентным цветом), но необязательно: на том же Брифли все бы рябило и шумело, что не есть хорошо. Но мы-то ссылки видим, так?

И еще: подчёркивание бордюром — отлично смотрится, а вот стандартный text-decoration ужасен, особенно с большим кеглем.

Igor Schnaider

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

Матвей Андриенко

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

Даниил Воробьев

Это рудимент эпохи, атавизм.

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

Минус подчёркивания не в том, что это «некрасиво», а в том что:

  1. Традиционный, многовековой смысл подчёркивания слов в тексте — это акцентирование внимания на слове или фразе. Мы даже вслух говорим: «Я подчёркиваю…», когда хотим чтобы слушатель вычленил суть из монолога. В случае с ссылками мы подчёркиваем не суть текста, главную мысль, а совсем другие слова, с другой целью.
  2. Это мешает чтению. Подобно тому как точки буквы ё. Равномерное ритмичное чтение прерывается длинной палкой под словами, которое акцентирует на себе внимание и заставляет остановиться, чтобы обдумать почему здесь акцент (см. пункт 1).
  3. Ну и чисто эстетически это атавизм, как я уже говорил. Тут логических аргументов нет, это чистая эстетика. Подчёркивание ассоциируется со старьем, со старыми пердунами, с доисторической эпохой чёрно-белых мониторов. Это как телевизор у бабушки, накрытый скатертью.
Илья Бирман

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

Матвей Андриенко

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

Станислав Биченко

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

Иван Волков

Если «на ранних порах» народ ещё не понимал, то как подчёркивание помогало?

Изначально это была вроде бы традиция. Так сделал типа первый создатель гипертекста. А потом пошло. В целом, подчёркивание было нужно раньше, так как действительно выделяло кусочек текста. Помимо цвета. Которого, кстати, на первых страницах было много. Это как текущая повальная мода на всякие анимации и большие кнопки.

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

Александр Сарычев

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

А мне-то плевать. Я за 14 лет в интернете уже привык.

Илья Бирман

Вроде звучит как натяжка. У вас правда был такой диалог с родителями?

По моему ощущению, тем, кто плохо знаком с компьютерами, как раз бессмысленно такие нюансы объяснять, они просто тыкают на всё, что похоже на то, что они хотят, и дальше уже смотрят, сработает или нет. А вот для опытных пользователей подсказки вроде подчёркиваний или пунктирных подчёркиваний экономят наносекунды и повышают удовлетворение от использования интерфейса, потому что они полагаются на их привычки, выработанные годами. У вас не так?

Андрей Столешников

Здравый смысл, ребята. Только он.

Если есть возможность чётко обозначить ссылки контрастным цветом, то подчёркивать нет смысла. Так же, как и в меню это делать совсем необязательно.

Или, например, в интернет-магазине с кучей карточек товаров. ну зачем подчёркивать каждую? Первое же наведение на заголовок-ссылку товара даст пользователю понять, что в каждой карточке так можно делать. Здесь даже цветом кодировать необязательно.

В общем, строго по ситуации.

Илья Бирман

Андрей, у вас противоречие. Вы пишете, что «подчёркивать нет смысла», но из ваших же слов «первое же наведение на заголовок-ссылку товара даст пользователю понять» вытекает, что смысл в том, чтобы было понятно без наведения. Или я что-то не так понял?

Андрей Столешников

Илья, смену курсора и выделение цветом никто не отменял.

Речь о том, что наведя курсор на блок с товаром, мы сразу поймём, что он кликабелен. И, соответственно, кликабельны все остальные подобные блоки. Люди не первый день в интернете, не надо каждый сайт превращать в азбуку для новичков.

Но, опять же — всё по ситуации. На новостном сайте, например, выделение ссылок без подчёркивания только вредит. Даже если они выделены более-менее контрастным цветом — считать в словесной массе статьи кросс-ссылки довольно затруднительно, поэтому тут нужно максимально их выделить.

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

Илья Бирман

Из ваших слов получается, что смысл подчёркивания в том, что не приходится наводить, а сразу понятно. Что, снова, вступает в конфликт с вашим же утверждением, что смысла нет.

«Люди не первый день в интернете, не надо каждый сайт превращать в азбуку для новичков» — не понимаю. Почему по отношению к людям, которые не первый день в интеренете, можно позволить себе ухудшение интерфейса? Или я вас снова не так понял?

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

Кстати, вы пишете о «визуальном шуме» — что вы вкладываете в это понятие? Как вы отличаете, где сигнал, а где — шум?

Артём Самохин

На большинстве сайтов ссылки не подчёркиваю, и судя по Вебвизору, люди понимают где ссылка есть, а где её нет. К тем кто не подчёркивает, отношусь равнодушно, но попадались такие, у которых не поймёшь, ссылка это или нет. Айфона нет ;-) Тонкие подчёркивания нравятся, но не везде. Конец ему придёт только тогда, когда самые известные и посещаемые ресурсы уберут его на своих сайтах.

Артём Зорин

Вопрос, подчёркивать ли ссылки — это сферический конь в вакууме. Если он стоит именно так, то я поддерживаю Женю Арутюнова (ссылки подчёркивать надо всегда) с дополнением, что нельзя подчёркивать простой текст. Почему? Потому что мне так нравится.

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

Нельзя просто взять наполненный контентом сайт и думать, подчёркивать ли ссылки или нет. Ссылка — это лишь способ организации взаимодействия с пользователем (читайте «Психбольницу в руках пациентов» Алана Купера). Лебедев ещё 12 лет назад написал: «Для начала нужно просто написать человеческий текст, а потом уже расставить в нем ссылки».

Андрей Столешников

Илья, я действительно считаю, что от подчёркивания нужно избавляться, где это возможно. То есть, это некое начало отсчёта в вопросе о подчёркивании. А дальше уже смотреть по ситуации — можно ли убрать его или не стоит. То есть, начинается поиск компромисса.

Про сигнал и шум — это очевидно же. Когда меню лежит на плашке с градиентами и бликами, с буллетами-распорками, а пункты в нём написаны прописными, но при этом разработчик, следуя заповедям, добавляет православное подчёркивание — это слишком «громко», чтобы быть сигналом. Поэтому и шум.

Матвей Андриенко

Игорь, в обоих случаях полупрозрачный элемент располагается поверх непрозрачного. Просто полупрозрачный синий, наложенный на непрозрачный синий, выглядит как непрозрачный синий :-)

I.Denis

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

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

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

Антон Иванов

Простой пример. Корпоративная соцсеть Яммер рассылает ежедневный дайджест постов. Пост открывается по нажатию на дату и время, которые не подчеркнуты. 90% коллег не знали, что так можно делать — приходилось открывать сайт, долго искать нужный пост вручную. Просто потому что ссылка была не подчёркнута, да ещё и текст был чуть более светлого цвета. Каково же было ликование масс, когда они узнали, что по нажатию на дату открывается страница с постом.

Пользовательский интерфейс
Доступны три раздела
электронного учебника

Популярное