Дискуссии по понедельникам: подчёркивание ссылок
Сегодня начинаем новую рубрику — дискуссии по понедельникам. В понедельничных заметках будут разрешены комментарии. Я буду удалять офтопик, мат не по делу, личные оскорбления. Темы дискуссий — это темы моего блога: дизайн, технологии, музыка и жизнь. Посмотрим, что из этого выйдет.
Сегодня тестируем формат, поэтому обсуждаем самую важную тему в дизайне: подчёркивать ли ссылки.
Какой у вас опыт в этом вопросе? Как вы относитесь к дизайнерам, которые не подчёркивают ссылки? Что думаете о тех, кто подчёркивает? Что будет, если в вашем дизайне убрать подчёркивания у всех ссылок, что он потеряет? А если, наоборот, добавить? Включаете ли вы подчёркивание ссылок на Айфоне? Как вам тренд с тонкими подчёркиваниями? Стоит ли убирать подчёркивание при наведении? Или, может, наоброт, как раз рисовать при наведении? Когда подчёркиванию придёт конец? Когда произойдёт возрождение подчёркивания?
Пишите всё, что думаете по этому вопросу.
Стараюсь подчёркивать ссылки всегда, люблю тонкое подчёркивание и небольшой fade out при наведении.
Единственное, что всё ещё кажется странным — это подчёркивание ссылок в навигационном меню (не в таком, как на этом сайте, а, например, как на apple.com).
Ещё, если так подумать, кажется, что стоит подчёркивать и изображения, при клике не которые происходит переход куда-нибудь.
Подчёркивать или нет — зависит от контекста, от конкретно решаемой задачи. По идее, без подчёркивания явно уменьшается визуальный шум, а заменить можно выделением цветом, на айфоне это отлично работает. Я, в основном, делаю именно так.
Ховер важен только на дескотопах и подчёркивать при этом, на мой взгляд стоит, как лишнее указание на ссылку.
Ну и Гугль в последнее время к этому располагает ;-) Всё это из серии КО, конечно.
А кто-нибудь может объяснить, почему в Хроме сделали жирное подчёркивание у ссылок с большим кеглем?
Сегодня подчёркивание ссылок — исключительно дело вкуса. Фейсбук и «Вконтакте» научили всех, что на синенькое можно нажимать.
Если есть нужда, «синенький» может быть любым достаточно насыщенным цветом, контрастирующим с цветом текста.
Тонкое подчёркивание — замечательно; необходимые костыли с border-bottom отвратительны.
По наведении ссылку нужно перекрашивать и сохранять подчёркивание (или его отсутствие).
Это дело вкуса и самого интерфейса. Главное, чтобы пользователь всегда понимал где можно нажать, а где это элемент декора.
Обязательным считаю выделение и подчёркивание ссылок в тексте, меню как на этом блоге, в Популярном и похожих местах.
А подчёркивание, например, в уже выделенных это лишнее.
Вопрос для Ильи: зачем выделять на этой страница Блог и Илья Бирман? Не лишнее ли это?
На мой взгляд, подчёркивание необязательно только в том случае, если все ссылки выделены одинаково, например, только синим цветом (Википедия, Вконтакте) и такое выделение больше нигде не используется. Т. е. там, где ясно, что на это можно кликнуть. А вот, например, на Ленте.ру не всегда очевидно, куда кликать, но все попривыкли уже.
Если используются ссылки с разными стилями, например в заголовках и в тексте, то подчёркивание всегда покажет, что это все ссылки.
Подчёркивание ссылок — это олдскул. Сегодня кнопки должны быть яркими и большими под нажатие пальцем на планшете — вот примерно как у кнопки «Отправить». Красным цветом — нельзя. Зелёным — можно. Лишние ссылки пугают людей и случайно нажимаются.
Фейсбук, Гугл, Айфон и другие — интерфейсы повседневного пользования.
Даже если бы Гугл сделал ссылки в поисковой выдаче черными и отразил слева направо, ничего не изменилось бы. Так же и на Айфоне. Хоть обведи ссылку, хоть в кнопку засунь — и так будет понятно, что нужно жать на неё.
Но нельзя проецировать эту практику на обычные сайты или сайты с большим количеством изменяемого контента, особенно если контент является элементом навигации (привет, Лента.ру).
Вот правило в стиле Бирмана:
Всегда подчёркивайте ссылки. Потому что в тех случаях, когда подчёркивать не нужно, это будет настолько очевидно, что вы это сразу поймете.
Подчёркивание ссылок имело смысл на ранних порах, когда народ ещё не понимал, куда можно кликать. Сейчас все это прекрасно понимают и без таких прямых намёков. Слишком много подчёркивания рябит в глазах, но это тонкая грань.
Если уж все про меню, то там подчёркивание излишне.
Вот эту логику я никак не могу понять.
Если «на ранних порах» народ ещё не понимал, то как подчёркивание помогало? В нём же нет ничего, что говорило бы «в меня можно тыкнуть». И что сейчас изменилось по сравнению с ранними порами?
Поколение сменилось. Новичков в интернете становится меньше, цифровых аборигенов всё больше. Это сродни переходу от скеоморфизма к плоскому дизайну.
Это общие слова. Что изменилось по сути? Почему новичку нужно подчёркивание, как оно ему помогает? Как опытный пользователь без подчёркивания понимает, где ссылка?
Непосредственно «в меня можно тыкнуть» ничего не говорило конечно, подчёркивание и синий цвет были эдаким условным обозначением, принятым всеми.
А сейчас из-за наличия огромного количества визуальных инструментов нет смысла привязываться к этому условному обозначению, людям не нужно такое явное и стандартизированное указание чтобы понять что «в него можно тыкнуть».
Тонкое подчёркивание — хорошее решение. Только делать его нужно без просвета.
Понятно о ссылках :-)
Подчёркивать. Заходя на сайты, где подчёркивания нет, часто путаюсь, остаётся неприятное ощущение. Цвет тоже не всегда спасает: некоторые, например, выделяют текст синим, а ссылки красят в жёлтый или красный (тут ещё путаница с посещённостью ссылки, потому что на цвет посещённых ссылок часто забивают).
Два исследования по теме:
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 ужасен, особенно с большим кеглем.
Руслан Кеба, в вашем примере в идеальном варианте линия подчёркивания перекрывает текст.
Руслан, отличный вариант! Только цвет подчёркивания лучше делать таким же, как у текста, но полупрозрачным.
Это рудимент эпохи, атавизм.
Тогда, когда не было ЦССа, а мониторы почти у всех были чёрно-белые, — подчёркивание было наилучшим решением задачи выделения ссылок. Но технологии-то продвинулись — уже и любой цвет доступен, и пальцем можно тыкать, и руками махать перед сенсором. Теперь эту задачу можно решать куда более изящно.
Минус подчёркивания не в том, что это «некрасиво», а в том что:
По поводу первого и вторго пункта замечу, что хорошие дизайнеры относятся к ссылкам именно как к выделению, независимо от наличия подчёркивания: внимательно подбирают, что именно сделать ссылкой; как сделать, чтобы текст ссылки, вырванный из контекста, хорошо работал; расставляют ссылки в тексте очень умеренно, смотря на то, как это влияет на его восприятие.
Игорь, благодря вашему комментарию обнаружилось ещё одно преимущество варианта с полупрозрачным подчёркиванием: в нём подчёркивание не перекрывает текст. Мне сложно сказать, почему так происходит. Могу предположить, что использование прозрачности создает новый контекст наложения (stacking context, описанный, например, в документации Мозиллы), который и влияет на взаимное расположение текста и подчёркивания.
Матвей, использование опасити для определения цвета подчёркивания может замедлить работу страницы на слабых компьютерах, если ссылок много.
Изначально это была вроде бы традиция. Так сделал типа первый создатель гипертекста. А потом пошло. В целом, подчёркивание было нужно раньше, так как действительно выделяло кусочек текста. Помимо цвета. Которого, кстати, на первых страницах было много. Это как текущая повальная мода на всякие анимации и большие кнопки.
В целом, от подчёркивания можно отказаться когда в тексте, например, очень много ссылок, для общей разгрузки внешнего вида. Так, вроде бы, совсем недавно сделали в Гугле. Но они очень приятно и деликатно смотрятся в твоём блоге, даже в комментариях к нему сейчас. Просто синего цвета было бы недостаточно.
Мне родителям проще сказать: «Весь подчёркнутый текст на страницах это ссылки. По ним вы перейдёте на новые страницы», чем «На страницах ссылки для перехода на новые страницы могут быть красными, синими, зелёными, подчёркнутыми, неподчёркнутыми, жирными. И если вы, папа и мама, видите какое-то выделенное слово любым способом, который вам может прийти в голову, не проходите мимо. Попробуйте навести мышку. И если курсор изменится со стрелочки на пальчик, то попробуйте нажать — может быть это ссылка».
А мне-то плевать. Я за 14 лет в интернете уже привык.
Вроде звучит как натяжка. У вас правда был такой диалог с родителями?
По моему ощущению, тем, кто плохо знаком с компьютерами, как раз бессмысленно такие нюансы объяснять, они просто тыкают на всё, что похоже на то, что они хотят, и дальше уже смотрят, сработает или нет. А вот для опытных пользователей подсказки вроде подчёркиваний или пунктирных подчёркиваний экономят наносекунды и повышают удовлетворение от использования интерфейса, потому что они полагаются на их привычки, выработанные годами. У вас не так?
Здравый смысл, ребята. Только он.
Если есть возможность чётко обозначить ссылки контрастным цветом, то подчёркивать нет смысла. Так же, как и в меню это делать совсем необязательно.
Или, например, в интернет-магазине с кучей карточек товаров. ну зачем подчёркивать каждую? Первое же наведение на заголовок-ссылку товара даст пользователю понять, что в каждой карточке так можно делать. Здесь даже цветом кодировать необязательно.
В общем, строго по ситуации.
Андрей, у вас противоречие. Вы пишете, что «подчёркивать нет смысла», но из ваших же слов «первое же наведение на заголовок-ссылку товара даст пользователю понять» вытекает, что смысл в том, чтобы было понятно без наведения. Или я что-то не так понял?
Илья, смену курсора и выделение цветом никто не отменял.
Речь о том, что наведя курсор на блок с товаром, мы сразу поймём, что он кликабелен. И, соответственно, кликабельны все остальные подобные блоки. Люди не первый день в интернете, не надо каждый сайт превращать в азбуку для новичков.
Но, опять же — всё по ситуации. На новостном сайте, например, выделение ссылок без подчёркивания только вредит. Даже если они выделены более-менее контрастным цветом — считать в словесной массе статьи кросс-ссылки довольно затруднительно, поэтому тут нужно максимально их выделить.
Вывод — нужно пользоваться инструментами тогда, когда они уместны, но когда есть возможность безболезненно упростить (никто не переубедит меня, что подчёркивание не создает визуальный шум) — просто сделать это.
Из ваших слов получается, что смысл подчёркивания в том, что не приходится наводить, а сразу понятно. Что, снова, вступает в конфликт с вашим же утверждением, что смысла нет.
«Люди не первый день в интернете, не надо каждый сайт превращать в азбуку для новичков» — не понимаю. Почему по отношению к людям, которые не первый день в интеренете, можно позволить себе ухудшение интерфейса? Или я вас снова не так понял?
У вас логика, как я вижу, построена на как бы подразумевающемся требовании убрать подчёркивание, а дальше вы уже искусственно подводите доводы под это. Но эту предпосылку вы раскрываете только в самом конце: «Никто не переубедит меня, что подчёркивание не создает визуальный шум». Может, с этого и надо было начинать, типа, я предпочитаю не рисовать подчёркивания, потому что это некрасиво? Если вы заранее говорите, что вас никто не переубедит, то, выходит, это чисто религиозный выбор? Простите, не хочу тут выглядеть пропагандистом, напишите, если я что-то упустил.
Кстати, вы пишете о «визуальном шуме» — что вы вкладываете в это понятие? Как вы отличаете, где сигнал, а где — шум?
Матвей, самое интересное, что с другим цветом создается наложение, а с одинаковыми — нет.
На большинстве сайтов ссылки не подчёркиваю, и судя по Вебвизору, люди понимают где ссылка есть, а где её нет. К тем кто не подчёркивает, отношусь равнодушно, но попадались такие, у которых не поймёшь, ссылка это или нет. Айфона нет ;-) Тонкие подчёркивания нравятся, но не везде. Конец ему придёт только тогда, когда самые известные и посещаемые ресурсы уберут его на своих сайтах.
Вопрос, подчёркивать ли ссылки — это сферический конь в вакууме. Если он стоит именно так, то я поддерживаю Женю Арутюнова (ссылки подчёркивать надо всегда) с дополнением, что нельзя подчёркивать простой текст. Почему? Потому что мне так нравится.
Если же развивать модель коня, то нужна дополнительная информация: ссылки где, с какой целью? В напечатанном документе меню вообще быть не должно, а ссылки в тексте не должны выделяться, но после них должен быть напечатан адрес (если стоит задача передать его). Веб-приложение должно быть похоже на приложение, а не на сайт. Меню сайта должно быть оформлено так, чтобы было понятно, что оно является набором ссылок; (не)подчёркивание ссылок в нём — это лишь способ добиться понятности.
Нельзя просто взять наполненный контентом сайт и думать, подчёркивать ли ссылки или нет. Ссылка — это лишь способ организации взаимодействия с пользователем (читайте «Психбольницу в руках пациентов» Алана Купера). Лебедев ещё 12 лет назад написал: «Для начала нужно просто написать человеческий текст, а потом уже расставить в нем ссылки».
Илья, я действительно считаю, что от подчёркивания нужно избавляться, где это возможно. То есть, это некое начало отсчёта в вопросе о подчёркивании. А дальше уже смотреть по ситуации — можно ли убрать его или не стоит. То есть, начинается поиск компромисса.
Про сигнал и шум — это очевидно же. Когда меню лежит на плашке с градиентами и бликами, с буллетами-распорками, а пункты в нём написаны прописными, но при этом разработчик, следуя заповедям, добавляет православное подчёркивание — это слишком «громко», чтобы быть сигналом. Поэтому и шум.
Игорь, в обоих случаях полупрозрачный элемент располагается поверх непрозрачного. Просто полупрозрачный синий, наложенный на непрозрачный синий, выглядит как непрозрачный синий :-)
Я даже в сообщениях на форумах, где подчёркивания нет, принудительно подчёркиваю ссылки. Так как из опыта знаю, что часть пользователей их не видят, пока носом не ткнёшь. Многие и с подчёркиванием не сразу видят.
А как подчёркивать и где всё же можно не подчеркивать — вопрос только дизайна, и он индивидуален для каждого случая.
Но подчёркивать ссылки в тексте нужно стараться обязательно, если в ваши планы входит работа этих ссылок.
Простой пример. Корпоративная соцсеть Яммер рассылает ежедневный дайджест постов. Пост открывается по нажатию на дату и время, которые не подчеркнуты. 90% коллег не знали, что так можно делать — приходилось открывать сайт, долго искать нужный пост вручную. Просто потому что ссылка была не подчёркнута, да ещё и текст был чуть более светлого цвета. Каково же было ликование масс, когда они узнали, что по нажатию на дату открывается страница с постом.