Интернет прочно вошел в каждый аспект нашей жизни, но есть один аспект цифрового мира, который, я уверен, вы принимаете как должное. Вы когда-нибудь замечали, что многие ссылки, особенно гиперссылки, имеют синий цвет? Когда коллега случайно спросил меня, почему ссылки синие, я был в тупике. Как дизайнер пользовательского интерфейса, который создает веб-сайты с 2001 года, я всегда делал свои ссылки синими. Я выступал за определенный оттенок синего и за последовательное применение синего, да, но я никогда не останавливался и не задавался вопросом, почему ссылки синие? Это был просто факт жизни. Трава зеленая, а гиперссылки синие. В культурном отношении мы так сильно ассоциируем ссылки с синим цветом, что в 2016 году, когда Google изменил свои ссылки на черный, это произвело настоящий прорыв .
Но теперь меня полностью поглощает вопрос: ПОЧЕМУ ссылки синие? КТО решил сделать их синими? КОГДА было принято это решение и КАК оно имело такое долгосрочное влияние?
Я обратился к своим коллегам с просьбой помочь мне в исследовании, и мы начали искать ответ. В Mosaic, раннем браузере, выпущенном Марком Андреессеном и Эриком Биной 23 января 1993 года, были синие гиперссылки. Чтобы по-настоящему понять происхождение и эволюцию гиперссылок, я совершил путешествие по истории технологий и интерфейсам, чтобы изучить, как обрабатывались ссылки до появления цветных мониторов и как быстро развивались интерфейсы и гиперссылки, когда цвет стал опцией.
Предки синей гиперссылки
Глядя на эти решения для гиперссылок с предварительной раскраской, мы можем увидеть, как гиперссылки развивались с течением времени и как эти ранние инновации влияют на удобство использования в Интернете сегодня.
1964 — Проект Xanadu
Проект Xanadu впервые в истории соединил две страницы информации. Ссылки представляли собой визуальные линии между страницами.
1983 — Система HyperTIES
В этой системе используется цвет, поскольку в ней используются голубые гиперссылки на черном фоне. HyperTies использовался как «электронный журнал». Возможно, это предок нашей синей гиперссылки, которую мы знаем и любим сегодня, но я не верю, что это первый экземпляр синей гиперссылки, поскольку этот цвет голубой, а не темно-синий.
1985 — Windows 1.0
В Windows 1.0 появился полноцветный графический интерфейс. Ссылки и кнопки по-прежнему черные, как и интерфейс Apple того времени. Что мне действительно интересно, так это то, что это первый экземпляр темно-синего цвета, использованный в макете. Темно-синий цвет часто используется в заголовках и на границах модальных окон.
Еще одна интересная особенность Windows 1.0, которая до сих пор появляется на современных веб-сайтах, — это подчеркнутая гиперссылка. Это первый пример подчеркивания, которое используется для обозначения гиперссылки, которую мне удалось найти.
Чтобы сделать Windows 1.0 еще более интересной, мы видим введение состояния наведения. Признаки современного интерактивного дизайна были живы и здоровы в 1985 году.
1987 — HyperCard
Эта программа, выпущенная Apple для Macintosh, использовала гиперссылки между страницами и приложениями. Несмотря на то, что эта версия эстетически прекрасна, в гиперссылках не использовался цвет.
1987 — WorldWideWeb ( WWW)
WWW был первым браузером, созданным Тимом Бернерсом-Ли во время работы в CERN. Он начинался как черно-белый, с подчеркиванием под гиперссылками, которые до сих пор используются на современных веб-сайтах и являются отличным решением для дальтонизма.
Охота за тем, кто сделал это синим
Теперь мы смогли сузить временные рамки для происхождения синей гиперссылки. WWW, первый браузер, был создан в 1987 году и был черно-белым. Мы знаем, что Mosaic был выпущен 23 января 1993 года и считался первым браузером с синими гиперссылками. Пока что мы не смогли найти синий цвет, который использовался для гиперссылок в каком-либо интерфейсе до 1987 года, но по мере того, как цветные мониторы становятся более доступными, а интерфейсы начинают поддерживать цвет, все быстро меняется. В следующие несколько лет мы увидим массовые инновации и эксперименты в области управления цветом и гиперссылками.
1990 — Windows 3.0
Windows 3 включала поддержку 16 цветов, однако текстовые ссылки по-прежнему были черными ссылками на белом фоне, которые при выборе превращались в белый текст на черном фоне.
1991 — Протокол суслика
Gopher Protocol был создан в Миннесотском университете для поиска и извлечения документов. В оригинальном дизайне использовался зеленый текст на черном фоне.
1991 — HyperCard (цвет)
Apple привнесла цвет в свои HyperCard, но при этом текстовые ссылки по-прежнему были черными, а не синими. Тем не менее, некоторые элементы пользовательского интерфейса имели синие акценты при взаимодействии, что невероятно важно, поскольку показывает медленное смещение синего цвета, используемого в качестве цвета взаимодействия.
5 октября 1991 г. — ядро Linux
В Linux использовался белый текст на черном фоне.
1992 — ВиолаWWW
В браузере ViolaWWW текстовые ссылки подчеркнуты, а цвет фона серый, как мы видим, это первая версия Mosaic. Однако текстовые ссылки черные.
6 апреля 1992 г. — Windows 3.1
Microsoft использует темно-синий для интерфейсов с 1985 года, но, начиная с 1990 года, они также начали использовать его для взаимодействия. Здесь Microsoft использует «синюю гиперссылку» для активных состояний, когда пользователь нажимает на разные диски, папки и значки. Это невероятно важно, потому что показывает медленную эволюцию этого синего цвета от цвета макета к интерактивному цвету, предшествовавшему времени, когда синий был бы добавлен в мозаику почти ровно на год.
16 января 1992 г. — 21 июня 1992 г. — ядро Linux
В 1992 году ядро Linux получило поддержку цвета в своей консоли.
Кто это сделал первым?
Январь 1993 — Мозаика
Первая бета-версия Mosaic была создана для системы X Window для Университета Иллинойса. Первоначальный интерфейс был черно-белым и не имел синих гиперссылок, но имел черные гиперссылки с рамкой. Согласно руководству пользователя X System, гиперссылки были подчеркнуты или выделены.
12 апреля 1993 г. — Mosaic Version 0.13
В журнале изменений Mosaic для версии 0.13 есть один пункт, который очень важен для нас:
Изменены представления привязок по умолчанию: синяя и одинарная сплошная линия подчеркивания для непосещенных, темно-фиолетовая и одинарная пунктирная линия подчеркивания для посещенных.
Примечания к выпуску
По бессмертным словам персонажа Джеффа Голдблюма Иэна Малкома из «Парка Юрского периода»: «Ну вот и все».
21 апреля 1993 г. — Мозаика Версия 1
Запущена Mosaic для системы X Window. Мне не удалось найти скриншоты того, как интерфейс выглядел в этом выпуске, но, согласно примечаниям к выпуску, посещаемый цвет был изменен на «Лучше посещаемый цвет привязки для не-SGI».
8 июня 1993 г. — бета виолончели
Виолончель была создана в юридической школе Корнелла, чтобы юристы могли получать доступ к своим юридическим веб-сайтам с компьютеров Windows. Мой товарищ по команде, Молли, смогла загрузить для меня бета-версию 0.1, и мы были шокированы тем, что обнаружили:
Вот оно! Наш стиль гиперссылки, за исключением того, что это не была гиперссылка, это был заголовок. Наша «синяя ссылка» никогда не отображалась в пользовательских интерфейсах до 1993 года, и внезапно она появляется в двух случаях в течение двух коротких месяцев друг от друга в двух отдельных браузерах в двух разных университетах, создаваемых одновременно.
Сентябрь 1993 г. — Мозаичные порты
К сентябрю был выпущен перенос Mosaic на операционную систему Macintosh 7.1. Мне удалось найти снимок экрана этой версии, который включал синюю гиперссылку, которая является первым визуальным свидетельством того, что синий цвет используется для обозначения гиперссылки.
Что было после синей ссылки?
Июнь 1993 г. — графический интерфейс Unix — Common Desktop Environment
Common Desktop Environment — это графический интерфейс для операционной системы UNIX, той же самой операционной системы, которая использовалась для создания Mosaic. В этом интерфейсе был черный текст с подчеркиванием гиперссылок.
1994 — Версия для виолончели 1
Виолончель вышла из бета-тестирования, но теперь имеет желтый фон, сохранила подчеркнутые заголовки синего цвета и все еще имеет черные гиперссылки с рамкой.
13 октября 1994 г. — Netscape Navigator
Созданный Марком Андреессеном и Джеймсом Х. Кларком, Netscape использовал тот же визуальный язык, что и Mosaic: синие гиперссылки и серый фон.
Июль 1995 г. — Internet Explorer 1.0
В 1995 году Microsoft выпустила Internet Explorer, и неудивительно, что в нем также были синие гиперссылки и серый фон. Internet Explorer был упакован с Windows 95, что было первым случаем, когда браузер поставлялся с операционной системой. Примерно в это же время начались войны браузеров , но внешний вид гиперссылок был твердо установлен.
9 ноября 2004 г. — Firefox 1.0
Был выпущен Mozilla Firefox с синими гиперссылками, которые используются по сей день. Эти изображения взяты из Netscape 1.22 и Firefox Nightly сегодня.
Так почему синие гиперссылки?
Что случилось в 1993 году, когда гиперссылки внезапно стали синими? Никто не знает, но у меня есть теории.
Я часто слышу, что синий был выбран в качестве цвета гиперссылки для цветового контраста. Что ж, хотя W3C не был создан до 1994 года, и стандарты, по которым мы оцениваем веб-доступность, еще не были определены, если мы посмотрим на контраст между черным цветом текста и синим цветом ссылки, то мы увидим, что — коэффициент контрастности 2,3: 1, что не соответствует достаточному цветовому контрасту между синей гиперссылкой и черным текстом.
Вместо этого мне нравится представлять, что и Cello, и Mosaic были вдохновлены одними и теми же тенденциями, происходившими в дизайне пользовательских интерфейсов в то время. Моя теория заключается в том, что Windows 3.1 вышла всего за несколько месяцев до начала обоих проектов, и этот интерфейс был первым, в котором синий заметно использовался в качестве цвета выбора, открывая путь для использования синего цвета в качестве цвета гиперссылок.
Кроме того, мы знаем, что Mosaic был вдохновлен ViolaWWW и сохранил тот же серый фон и черный текст, которые они использовали для своего интерфейса. Просматривая примечания к выпуску Mosaic, мы видим в версии 0.7 черный текст с подчеркиванием, который является предпочтительным способом передачи гиперссылок, и мы можем сделать вывод, что так было до тех пор, пока что-то не произошло примерно в середине апреля прямо перед тем, как синие гиперссылки появились в версии 0.13 . Фактически, передача ссылок в виде черного текста с подчеркиванием была стандартом с 1985 года с Microsoft 1, которую некоторые однажды утверждали, что Microsoft украла внешний вид Лизы от Apple.
Я думаю, что настоящая причина, по которой у нас есть синие гиперссылки, просто в том, что в это время все более популярными становились цветные мониторы. Мозаика как продукт также стала популярной, и голубые гиперссылки не остались незамеченными. Mosaic появилась в важный период, когда поддержка цветных мониторов менялась; стандарт заключался в том, что гиперссылки должны использовать черный текст с каким-либо подчеркиванием, состоянием наведения или рамкой. Mosaic выбрала синий цвет, и они решили перенести свой браузер на несколько операционных систем. Это помогло Mosaic стать стандартным браузером для использования в Интернете и укрепить его пользовательский интерфейс в качестве языка по умолчанию для взаимодействия с Интернетом.
Когда были созданы Netscape и Internet Explorer, синяя гиперссылка уже была синонимом Интернета и взаимодействия. Синяя ссылка теперь не зависела от браузера и постепенно становилась символом использования Интернета.
Рапсодия в # 0000FF
Прошло почти 30 лет с тех пор, как Mosaic поместила теперь вездесущий синий цвет в свои примечания к выпуску, но это уже не начало 1990-х годов. Хотя открывать секреты того, как создаются браузеры, довольно интересно, здесь, в настоящее время, мы приняли как евангельскую истину, что ссылки могут и должны быть только синими, потому что эти первые пионеры сказали, что так и должно быть.
При создании гиперссылки было доступно ограниченное количество цветов. Сегодня у нас есть почти все варианты цвета, так какой же цвет и состояние ссылок в Интернете должны быть по умолчанию? Когда нам предоставляется всякая возможность отклониться от традиций, делаем ли мы это ради прогресса или мы должны оставить синий цвет, потому что это установленный визуальный образец?
Если вы хотите изменить цвет ссылки, вот мои списки требований к идеальному цвету при выборе цвета ссылки:
- Оптимальная доступность текста благодаря цвету фона и окружающему тексту. Ваши дизайнерские решения не должны быть причиной того, что пользователь не может получить доступ к контенту на странице.
- В таблицах стилей всегда должны быть стили для интерактивных состояний. Примеры: касание, посещение, наведение, активность и фокус.
- Ссылки и кнопки должны быть достаточно большими, чтобы их можно было нажимать или нажимать. Вы не можете быть уверены в том, как люди взаимодействуют с вашим контентом на устройствах с помощью стилусов, пальцев, мышей или трекпадов. Ваша задача — убедиться, что по вашим ссылкам легко перемещаться и вокруг них достаточно места.
В заключение, все ссылки должны быть синими? Может так, а может и нет. Для обозначения гиперссылок использовался длинный путь визуальных элементов, и синий цвет — лишь один из многих элементов, которые стали представлять гиперссылки. Ссылки предназначены для объединения информации. Всегда следите за тем, чтобы гиперссылка выделялась на фоне остального окружающего контента. Иногда это означает, что вам нужно подчеркивание или цвет фона, а может быть, вам нужен синий цвет.