А. Г. |
Игорь! Многие читатели считают подчёркивание ссылок священной коровой бюро. На самом деле наше отношение простое, рациональное и без догматизма. Этим советом я надеюсь закрыть вопрос хотя бы на некоторое время. |
||||||||||||||||||||||||
Дизайнер Яндекса |
Я называю это формулой продукта — продукт не будет работать без причины. | |||||||||||||||||||||||
Но этой фразой нельзя оправдать запутанные интерфейсы. Если посетителю сайта непонятно, где на сайте меню, как узнать подробности о продукте, куда нажимать в форме ввода — никакая мотивация не поможет. В дизайне сайтов больше свободы, чем в приложениях для компьютеров, планшетов и телефонов. Приложения состоят из стандартных окон, панелей, элементов управления, их типографика тоже стандартизирована и минималистична. На сайтах же могут использоваться любые шрифты, разноцветные и разнокалиберные заголовки, цветовые палитры, плашки, рамки, линейки рядом с картинками и текстом. Всё это буйство должно Люди подолгу пользуются приложениями и привыкают к их элементам. А на сайте посетитель может оказаться один раз в жизни — и должен сразу разобраться в его системе обозначения заголовков, ссылок, кнопок и других элементов управления. Чтобы конверсия сайта была выше, человеку должно быть легко отличить ссылку от простого текста. Заметьте, пока ни слова о подчёркивании. Представим себе простой текст на сферической
Если в нём появится цветная строка, пользователь наверняка решит, что это ссылка:
Если мы добавим чёрный крупный заголовок другим шрифтом, хуже не станет. Цвет — всё ещё достаточный признак, чтобы отличить ссылку:
Более того, если мы последовательно используем цвет, то теперь любой синий объект будет казаться кликабельным:
Именно так используется цвет в приложениях АйОС. Но такой лаконизм редко встречается на сайтах. В реальной жизни сайты чаще выглядят
Синий цвет теряет монопольность. Логотип — зелёненький, уж какой есть. А ведь ещё бывают крупные заголовки на банерах и сервисные ссылки, которые вообще не хочется выделять цветом. Становится трудно разобраться, какие надписи покрашены, потому что нажимаются; какие покрашены, но не нажимаются; какие не покрашены, но нажимаются; какие не покрашены и не нажимаются. А ведь мы даже не обсуждали пользователей с нарушениями восприятия цвета. Вывод: если мы хотим сделать сложный сайт понятнее, нам мало цветового выделения ссылок. Нужен хотя бы ещё один отличительный признак.
Какой это может быть признак? Первое, что приходит в голову — подчёркивание:
У меня простое отношение к подчёркнутым ссылкам: если ссылки подчеркнуть, они станут почти гарантированно узнаваемыми. Поэтому синие подчёркнутые ссылки — дизайн по умолчанию не только в браузере, но и в дизайнерских стандартах бюро (которые мы, разумеется, никому не навязываем). Но подчёркивание уродливо. Слава богу, его часто можно заменить на другой признак. Если мы убираем подчёркивание, его функция переходит на Например, Эпл использует на своём сайте для отдельно стоящих ссылок угловые стрелки. Подчёркивание как будто растворилось и проявилось в виде стрелки:
Угловая стрелка — типографический элемент. А если использовать рядом с текстом иконку, то даже без цвета строка будет казаться нажимаемой:
|
А это — целостностью продукта. Низкий КПД убьёт любой нужный людям продукт. | |||||||||||||||||||||||
Если крупный красивый заголовок не хочется подчёркивать, можно пойти на хитрость — поставить под него маленькую ссылочку с подчёркиванием или стрелочкой, но кликабельным сделать весь модуль. Маленькая ссылка служит элементом «икс» всему заголовку: ясно, что сюда в принципе можно нажать, а область нажатия становится больше видимой — Фиттс доволен.
В новостях «Системы Главбух» функцию подчёркивания взяли на себя разделительные линейки в списке: ![]() Обратите внимание — плашка под списком новостей тоже придаёт ему вид особого элемента управления. Элемент «икс» может быть почти незаметным, но дополнительно намекать на интерактивность. На ![]() На Пинтересе у картинок слегка скруглены уголки, а подписи не выделены даже цветом: ![]() Пинтерес мог бы и не скруглять уголки. Ведь весь его сайт — панно из нажимаемых картинок. Индикатором нажимаемости могут выступать самые разные признаки — цвет, подчёркивание, иконка, фон, формат. Элементом «икс» может служить даже расположение. Любая строка из коротких слов наверху сайта будет воспринята как меню. Поэтому подчёркивание ссылок в меню обычно не нужно — и его нет на сайте бюро. |
Это работает, если под заголовком только одна ссылка. Если под заголовком несколько ссылок в колонку или в ряд, заголовок не должен объединяться с одной из них. | |||||||||||||||||||||||
Предостережение. Несмотря на всё вышесказанное, нельзя относиться к подчёркиванию как чисто оформительскому приёму, который можно беззаботно заменить на любой другой. |
Свойство работоспособной системы, которое определяет соответствие продукта привычкам людей, я называю образованием. | |||||||||||||||||||||||
Поэтому все признаки ссылки, кроме синего подчёркнутого текста, недостаточно надёжны. Если вы как дизайнер уверены в своём «неподчёркнутом» решении — прекрасно. Если у вас есть возможность проверить свой «неподчёркнутый» дизайн А/ В учебниках бюро P. S. Уважаемые советчики! Я прощаюсь с вами до февраля 2018 года. |
А вот чего делать точно не надо — это убирать подчёркивание ссылки при наведении. Это самое бессмысленное и нелогичное поведение, которое только можно придумать. Наоборот — подчёркивать при наведении — пожалуйста. |