Утерянное искусство оформления посещенных ссылок

Цвет другого измерения

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

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

Путешествие во времени

Просмотр web-страниц в основном двумерный: вы либо прокручиваете (ось y) или кликаете (ось z).

Цвет ссылок добавляет третье измерение: время.

  • фиолетовые ссылки из прошлого
  • синие ссылки — потенциальные кандидаты на настоящее или будущее

В зависимости от того, какова ваша цель, вид посещенных ссылок может вызывать две основные реакции:

Список ссылок как чек-лист

Агрегаторы ссылок, типа Reddit или Hacker News, являются теми немногими сайтами, которые по прежнему отличают просмотренные ссылки от “новых”.

“Ах, как много нового контента!”

Страница с результатами поиска в Google, как правило, отображает ссылки подобным образом. Скажем, вы изучаете JavaScript и хотите знать, как проверить, пуст ли массив.

Первые два результата не дали ответа, так что давайте теперь проверим третий

Фиолетовые ссылки воспринимаются как выполненные задания, так как:

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

Разница цветов дает информацию о том, на сколько далеко вы продвинулись по списку.

Фиолетовые ссылки? Фуу!

Но почему выделение посещенных ссылок — такое редкое явление? Потому что дизайнеры (такие как я) слишком ленивы и придирчивы.

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

Если вы профессиональны, то вы нарисовали дизайн для разных состояний кнопок и полей ввода (состояние по умолчанию, при наведении, нажатое, с фокусировкой, неактивное). Но состояние “посещенное” никогда не придет вам на ум.

Это одно из первых css правил, которое пишет дизайнер :

a {
color: $anythingButBlue;
}

Это повлияет на все ссылки в любом состоянии: hover, active, focus и visited. Это как сброс цвета. Вы пишите это правило и забываете. Вы можете использовать псевдокласс :link, но никто не узнает об этом. Но вы в любом случае забыли установить правило для :visited.

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

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

Вопрос приватности

Несколько лет назад кто-то провел эксперимент: создал веб-сайт со списком из 1000 самых посещаемых сайтов. Сайт потенциально может “украсть” вашу историю просмотра путем вычисления цвета каждой ссылки.

Но браузеры, например Firefox, сейчас предотвратили подобное поведение:

В результате стилизация посещенных ссылок очень ограничена:

Вы можете повлиять только на цвет посещенных ссылок

Не все ссылки равны

Большинство ссылок выделения цветом, если по ним был переход:

  • навигационные ссылки (главная страница, учетная запись, настройки), те, что посещаются неоднократно
  • интерфейсные ссылки, влияющие на состояние страницы
Ссылки должны оставаться черными

Как решить, какие ссылки стоит выделять после их посещения?

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

Для примера возьмем The Guardian и представим, что вы его просматриваете. Главная страница динамичная, ее контент обновляется каждые несколько минут. Вам, как пользователю, не нужно знать о том, что вы посетили главную страницу, так как:

  • вы наверняка там уже были
  • вероятно вы будете там снова

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

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

В следующий раз при создании дизайна сайта подумайте о :visited!
Веб (интернет) и его пользователи оценят это по достоинству.

Перевод статьи The lost art of visited links by Jeremy Thomas

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.