В этой статье я поделюсь с вами мнением, которое основано на ряде проведенных исследований, целью которых было выяснить, как же все-таки оформлять ссылки в тех или иных случаях. Здесь будут даны ответы на вопросы:

• какое подчеркивание использовать для обычных ссылок, открывающих другую страницу;

• как подчеркивать ссылки, по нажатию на которые изменяется, но не перезагружается страница;

• какое подчеркивание использовать для ссылок, по наведению на которые появляется подсказка или изменяется текущая страница без перезагрузки;

• как оформлять ссылки, открывающие страницы в новом окне (в новой вкладке браузера).

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

Мнения специалистов

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

Другие, учитывая подсказки, утверждают:

• сплошное подчеркивание необходимо использовать для ссылок, которые приводят к переходу на другую страницу;

• штриховое — для ссылок, по нажатию на которые изменяется страница без перезагрузки;

• точечное — для ссылок, при наведении на которые появляются всплывающие подсказки.

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

Ошибки взаимодействия с несколькими сайтами

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

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

Исследование решений ведущих веб-студий рунета

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

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

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

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

Исследование мнения пользователей рунета

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

По мнению пользователей:

• «Сплошное подчеркивание используется для обычных ссылок», — так отозвалось большинство. Некоторые опрошенные предположили, что такое подчеркивание используется просто для красоты, выделения текста;

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

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

Необходимо отметить, что меньше всего утвердительных ответов было о точечном подчеркивании, ему же было адресовано большинство ответов «для красоты».

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

Решение проблем

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

• сплошное подчеркивание необходимо использовать для ссылок, которые приводят к переходу на другую страницу;

• штриховое — для ссылок, по нажатию на которые изменяется страница без перезагрузки;

• точечное — для ссылок, при наведении на которые появляются всплывающие подсказки.

Я придерживаюсь этому мнению не только потому, что необходимо использовать различные оформления, большинство ведущих веб студий используют штриховое подчеркивание, как в этом утверждении, и большинство пользователей предполагают такое поведение сайта при взаимодействии со ссылками со штриховым подчеркиванием. Но и потому что, не смотря на отсутствие стандартов об использовании подчеркивания, организацией W3C, был принят стандарт об использовании тегов <acronym> и <abbr> для расшифровки сокращений и аббревиатур в виде всплывающих подсказок, при этом слова, заключенные в эти теги, автоматически подчеркиваются точечной линией, пусть и не во всех браузерах. (http://www.w3.org/TR/WCAG20-TECHS/H28.html)

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

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

Оформление ссылок, открывающих страницу в новом окне (вкладке браузера)

Неожиданное открытие нового окна приводит иногда к не желаемой реакции пользователей. Заметив это, пользователи могут подумать о том, что:

• случайно открыли несколько страниц;

• ссылка открыла сразу несколько страниц (обычно так делают на сайтах с не очень хорошей репутацией, которые зарабатывают на переходах на другие сайты);

• на сайте был вирус, который открыл эту страницу и т.д.

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

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

Резюме

Если необходимо оформлять ссылки подчеркиванием, рекомендую:

• сплошным подчеркиванием оформлять ссылки, которые открывают другую страницу;

• штриховым — ссылки, по нажатию, на которые изменяется страница без ее перезагрузки;

• точками — текста с подсказкой или ссылки, по наведению на которые изменяется страница без ее перезагрузки.

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

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

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

Конечно, можно попытаться привести все в некую стройную систему, тогда получится, что:

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

— пунктирное подчеркивание: перезагрузка страницы в асинхронном режиме (AJAX или аналоги), которое происходит на фоне (например, сортировка списка, кликнул, увидел крутилку, данные в центральной части страницы перезагрузились);

— точечки: нет никаких перезагрузок, даже асинхронных, то есть данные уже есть на странице, мы их просто отображаем (например, текстовая расшифровка параметров фильтра во всплывающем диве);

— отсутствие какого-либо подчеркивания: вообще не ссылка :-).

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

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