- PVSM.RU - https://www.pvsm.ru -
Интернет проник во все аспекты нашей жизни, но мы уверены, что один аспект цифрового мира вы считаете чем-то само собой разумеющимся. Замечали ли вы, что множество ссылок, в частности, гипессылок, имеет синий цвет? Когда коллега спросил меня, почему ссылки синие, я была поражена. Я UX-дизайнер и создаю веб-сайты с 2001 года, и я всегда делала ссылки синими. Да, я отстаивала выбор конкретного оттенка синего и согласованное применение синего цвета, но никогда не задумывалась: почему же ссылки синие? Это просто был факт из жизни. Трава зелёная, гиперссылки синие. В нашей культуре настолько принято ассоциировать ссылки с синим цветом, что когда в 2016 году Google изменила цвет ссылок на чёрный, это вызвало разногласия [1].
Но теперь меня поглотил вопрос: ПОЧЕМУ же ссылки синие? КТО решил сделать их синими? КОГДА было принято это решение и КАК это решение оказалось таким влиятельным?
Я обратилась за помощью в моём расследовании к коллегам и мы начали искать ответ. Один из первых браузеров Mosaic, выпущенный Марком Андриссеном и Эриком Бина [2] 23 января 1993 года, имел синие гиперссылки. Чтобы полностью понять происхождение и эволюцию гиперссылок, я предприняла путешествие через историю технологий и интерфейсов, чтобы узнать, как обозначались ссылки до появления цветных мониторов, и как интерфейсы и гиперссылки начали быстро эволюционировать после появления цвета.
Изучая обозначения гиперссылок до пришествия цвета, мы можем понять, как гиперссылки эволюционировали со временем и как эти первые инновации повлияли на юзабилити современного веба.
Проект Xanadu впервые в истории соединил между собой две страницы информации. Ссылки были визуальными линиями между страницами.
В этой системе впервые появился цвет: в ней использовались голубые гиперссылки на чёрном фоне. HyperTies использовалась в качестве «электрического журнала». Возможно, это был предок наших синих гиперссылок, которые мы знаем и любим сегодня, но я не считаю, что это стало первым примером синей гиперссылки, потому что они были голубыми, а не тёмно-синими.
Windows 1.0 привнесла полностью цветной графический интерфейс. Ссылки и кнопки по-прежнему были чёрными, похожими на интерфейс Apple того времени. Однако мне показалось интересным, что это был первый случай использования в цветовой схеме тёмно-синего. Тёмно-синий активно применялся в заголовках и на границах модальных окон.
Ещё один интересная особенность Windows 1.0, до сих пор встречающаяся на современных веб-сайтах — подчёркнутая гиперссылка. Это первый пример подчёркивания, используемого для обозначения гиперссылки, который мне удалось найти.
Чтобы сделать Windows 1.0 ещё интереснее, отметим появление выделенного состояния (hover). Отличительные черты современного дизайна интерактивности вполне неплохо существовали и в 1985 году.
Эта программа, выпущенная Apple для компьютера Macintosh, использовала гиперссылки для переходов между страницами и приложениями. Несмотря на эстетичность, эта версия не использовала в гиперссылках цвета.
WWW был первым браузером, созданным Тимом Бернерсом-Ли [6] во время работы в CERN. Изначально он был чёрно-белым, с подчёркиванием гиперссылок. Такое решение до сих пор используется на современных веб-сайтах и отлично подходит для людей с дальтонизмом.
Нам удалось сузить временные рамки происхождения синих гиперссылок. Первый браузер WWW написали в 1987 году и он был чёрно-белым. Мы знаем, что Mosaic был выпущен 23 января 1993 года и он считается первым браузером с синими гиперссылками. Пока нам не удалось найти синий, используемый для гиперссылок, ни в одном интерфейсе до 1987 года, но с ростом доступности цветных мониторов и появлением интерфейсов с поддержкой цветов ситуация начала быстро меняться. Следующие несколько лет стали временем масштабных инноваций и экспериментов с цветом и управлением гиперссылками.
Windows 3 имела поддержку 16 цветов, однако текстовые ссылки по-прежнему были чёрными на белом фоне, а при выборе превращались в белый текст на чёрном фоне.
Протокол Gopher был создан Миннесотским университетом для поиска и получения документов. В его изначальном дизайне использовался зелёный цвет на чёрном фоне.
Apple добавила цвет в свои HyperCards, но примечательно, что текстовые ссылки по-прежнему оставались чёрными, а не синими. Однако некоторые элементы UI имели синие акценты при взаимодействии, что невероятно важно, поскольку демонстрирует медленный переход к синему как к цвету интерактивности.
В Linux использовался белый текст на чёрном фоне.
В браузере ViolaWWW текстовые ссылки подчёркивались, а фон был серым, как и позже в первой версии Mosaic. Однако текстовые ссылки были чёрными.
Microsoft использовала тёмно-синие интерфейсы с 1985 года, но начиная с 1990 года стала применять его и для интерактивности. Здесь Microsoft использует «синий цвет гиперссылок» для активных состояний, когда пользователь нажимает на разные диски, папки и значки. Это невероятно важно, поскольку демонстрирует медленную эволюцию этого синего из цвета схемы в цвет интерактивности, примерно на год раньше того, как синий был добавлен в Mosaic.
В 1992 году ядро Linux получило поддержку цвета в консоли.
Первая бета-версия Mosaic была создана для X Window System для Иллинойсского университета. Изначально интерфейс был чёрно-белым и не имел синих гиперссылок, ссылки были чёрными с контуром-границей. Согласно руководству пользователя X System, гиперссылки подчёркивались или подсвечивались.
В журнале изменений Mosaic версии 0.13 есть один очень важный для нас пункт:
Изменены стандартные отображения якорей: синий с одиночным сплошным подчёркиванием для непосещённых, тёмно-фиолетовый с одиночным пунктирным подчёркиванием для посещённых. — Release Notes [8]
Вот оно!
Mosaic выпущена для X Window System. Мне не удалось найти скриншоты того, как выглядел интерфейс этой версии, но согласно примечаниям о релизе, цвет посещённых ссылок изменён на «улучшенный цвет посещённого якоря для систем, отличающихся от SGI».
Cello был создан на Юридическом факультете Корнелльского университета, чтобы юристы могли получать доступ к своему юридическому веб-сайту с компьютеров под Windows. Моей коллеге Молли удалось скачать бету 0.1, и мы были поражены найденному:
Нашли! Наш стиль гиперссылок, только это не гиперссылка, а заголовок. Наш «синий цвет ссылок» не появлялся в интерфейсах пользователя до 1993 года и внезапно за два месяца появился в двух версиях двух отдельных браузеров, создававшихся одновременно в двух разных университетах.
К сентябрю порт Mosaic был выпущен для операционной системы Macintosh 7.1. Мне удалось найти скриншот этой версии с синей гиперссылкой, который стал первым визуальным свидетельством использования синего цвета для обозначения гиперссылки.
Common Desktop Environment — это GUI операционной системы UNIX, которая использовалась для создания Mosaic. В этом интерфейсе для ссылок применялся чёрный цвет с подчёркиванием.
Cello вышел из состояния беты, но теперь имел жёлтый фон, сохранил свои заголовки с подчёркиванием синего цвета ссылок и по-прежнему имел чёрные гиперссылки с границей.
Netscape, созданный Марком Андриссеном и Джеймсом Кларком, использовал тот же визуальный язык, что и Mosaic: синие гиперссылки на сером фоне.
В 1995 году Microsoft выпустила Internet Explorer, и неудивительно, что в нём тоже были синие гиперссылки и серый фон. Internet Explorer поставлялся в комплекте с Windows 95, и это стало первым случаем распространения браузера вместе с ОС. Примерно в то же время начались браузерные войны [9], но внешний вид гиперссылок уже полностью устоялся.
Выпущен Mozilla Firefox, тоже с синими гиперссылками, которые используются и сегодня. Эти скриншоты сделаны в Netscape 1.22 и в современном Firefox Nightly [10].
Что произошло такого в 1993 году, сделав гиперссылки синими? Этого не знает никто, но у меня есть теории.
Я часто слышу, что синий был выбран в качестве цвета гиперссылок из-за цветового контраста. Однако W3C был создан только в 1994 году, а значит, стандарты, определяющие доступность веба, ещё не были выпущены. Кроме того, достаточно посмотреть на чёрный как на цвет текста и на синий как на цвет ссылок, чтобы понять, что их соотношение контрастов 2,3:1, и это нельзя считать достаточным цветовым контрастом между синей гиперссылкой и чёрным текстом.
Лично мне нравится думать, что и Cello, и Mosaic вдохновлялись одними тенденциями в дизайне интерфейсов пользователя того времени. Моя теория заключается в том, что Windows 3.1 вышла всего за несколько месяцев до начала обоих проектов, и её интерфейс впервые использовал синий как цвет выбора, проложив дорогу синему для применения в качестве цвета гиперссылок.
Кроме того, мы знаем, что создатели Mosaic вдохновлялись ViolaWWW и сохранили те же серый фон и чёрный текст, которые использовались в интерфейсе этого браузера. Просматривая примечания о выпуске Mosaic, мы видим в версии 0.7 [11], что предпочтительным способом обозначения гиперссылок является чёрный цвет с подчёркиванием, и можем прийти к выводу, что ситуация оставалась такой же, пока что-то не произошло примерно в середине апреля, непосредственно перед тем, как синие гиперссылки появились в версии 0.13 [12]. На самом деле, обозначение ссылок чёрным текстом с подчёркиванием было стандартом с 1985 года в Windows 1, и, по некоторым заявлениям [13], Microsoft украла этот стиль у Apple Lisa.
Я думаю, реальной причиной существования синих гиперссылок попросту стал рост популярности цветных мониторов в то время. Также стал популярным Mosaic, и синие гиперссылки распространились вместе с ним. Mosaic вышел в важный период, когда происходил переход к цветным мониторам; стандартом гиперссылок был чёрный текст с подчёркиванием, выделенным состоянием или границей. Разработчики Mosaic решили использовать синий и портировали свой браузер на множество операционных систем. Это помогло Mosaic стать стандартным браузером для работы в Интернете и сделать его интерфейс пользователя стандартным языком взаимодействия с вебом.
Когда создавались Netscape и Internet Explorer, синяя гиперссылка уже стала синонимом веба и интерактивности. Теперь синяя ссылка стала стандартом и уверенно шагала по пути превращения в символ использования Интернета.
Прошло почти 30 лет с тех пор, как Mosaic упомянула в своих примечаниях о релизе синий цвет, но сегодня уже не начало 1990-х. Хотя довольно любопытно оказалось раскрывать секреты создания браузеров, здесь, в настоящем, мы приняли как истину, что ссылки могут и должны быть только синими, потому что так решили первопроходцы Интернета.
Когда создавали гиперссылки, нам было доступно ограниченное количество цветов. Сегодня мы можем выбрать практически любой вариант, так каким же должен быть цвет и состояние ссылок по умолчанию в Интернете? Имея все возможности отойти от традиции, сделаем ли мы это ради прогресса, или нам стоит придерживаться синего, потому что это уже привычный визуальный шаблон?
Если вы собираетесь изменить цвет ссылок, то вот мой список требований к идеальному цвету:
В заключение зададимся вопросом — должны ли все ссылки быть синими? Может быть да, а может быть и нет. Визуальные элементы для обозначения гиперссылок прошли долгий путь, и синий цвет стал просто одним из множества элементов, представляющих гиперссылку. Главное в ссылках — это связывание информации. Всегда делайте так, чтобы гиперссылка выделялась из окружающего контента. Иногда это означает необходимость подчёркивания или фонового цвета или, возможно, синего цвета.
Автор:
PatientZero
Источник [15]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/dizajn-interfejsov/367399
Ссылки в тексте:
[1] это вызвало разногласия: https://mashable.com/article/google-black-link-analysis
[2] Марком Андриссеном и Эриком Бина: https://www.livinginternet.com/w/wi_mosaic.htm
[3] проект Xanadu: https://en.wikipedia.org/wiki/Project_Xanadu
[4] система HyperTIES: http://www.cs.umd.edu/hcil/hyperties/
[5] HyperCard: https://en.wikipedia.org/wiki/HyperCard
[6] Тимом Бернерсом-Ли: https://en.wikipedia.org/wiki/Tim_Berners-Lee
[7] протокол Gopher: https://en.wikipedia.org/wiki/Gopher_(protocol)
[8] Release Notes: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/47.html
[9] начались браузерные войны: https://www.mozilla.org/en-US/firefox/browsers/browser-history/
[10] Firefox Nightly: https://www.mozilla.org/en-US/firefox/all/#product-desktop-nightly
[11] версии 0.7: https://www.desy.de/web/mosaic/help-on-version-0.7.html
[12] версии 0.13: https://www.desy.de/web/mosaic/help-on-version-1.0.html
[13] по некоторым заявлениям: https://www.wired.com/2010/01/0119apple-unveils-lisa/
[14] доступность текста: https://www.w3.org/TR/WCAG21/
[15] Источник: https://habr.com/ru/post/574896/?utm_source=habrahabr&utm_medium=rss&utm_campaign=574896
Нажмите здесь для печати.