A internet se enraizou em todos os aspectos de nossas vidas, mas há um aspecto do mundo digital que aposto que você dá como certo. Você já percebeu que muitos links, especificamente hiperlinks, são azuis? Quando um colega de trabalho me perguntou casualmente por que os links são azuis, fiquei perplexo. Como designer de experiência do usuário que cria sites desde 2001, sempre deixei meus links azuis. Defendi o tom específico de azul e a aplicação consistente do azul, sim, mas nunca parei e me perguntei: por que os links são azuis? Era apenas um fato da vida. A grama é verde e os hiperlinks são azuis. Culturalmente, associamos links com a cor azul tanto que em 2016, quando o Google mudou seus links para preto, criou uma grande perturbação .
Mas agora, me encontro consumido pela pergunta: POR QUE os links são azuis? QUEM decidiu torná-los azuis? QUANDO essa decisão foi tomada e COMO ela teve um impacto tão duradouro?
Procurei meus colegas de trabalho para me ajudar na pesquisa e começamos a encontrar a resposta. O Mosaic, um dos primeiros navegadores lançado por Marc Andreessen e Eric Bina em 23 de janeiro de 1993, tinha hiperlinks azuis. Para entender verdadeiramente a origem e a evolução dos hiperlinks, porém, fiz uma viagem pela história da tecnologia e interfaces para explorar como os links eram tratados antes dos monitores coloridos e como as interfaces e os hiperlinks evoluíram rapidamente quando a cor se tornou uma opção.
Os ancestrais do hiperlink azul
Observando essas soluções de hiperlinks pré-coloridos, podemos ver como os hiperlinks evoluíram ao longo do tempo e como essas inovações iniciais impactam a usabilidade na web hoje.
1964 – Projeto Xanadu
O Projeto Xanadu conectou duas páginas de informações pela primeira vez na história. Os links eram linhas visuais entre as páginas.
1983 – sistema HyperTIES
Esse sistema apresenta cores, pois usa hiperlinks ciano em um fundo preto. HyperTies foi usado como um “jornal elétrico”. Este pode ser um ancestral de nosso hiperlink azul que conhecemos e amamos hoje, mas não acredito que esta seja a primeira instância do hiperlink azul, pois essa cor é ciano, e não azul escuro.
1985 – Windows 1.0
O Windows 1.0 trouxe uma interface gráfica colorida. Os links e botões ainda estão pretos, semelhante à interface da Apple na época. O que acho interessante, no entanto, é que esta é a primeira instância do nosso azul escuro usado em um layout. O azul escuro é muito usado nos cabeçalhos e nas bordas dos modais.
Outra coisa interessante sobre o Windows 1.0 que ainda aparece em sites modernos é o hiperlink sublinhado. Este é o primeiro exemplo de sublinhado sendo usado para indicar um hiperlink que consegui encontrar.
Para tornar o Windows 1.0 ainda mais interessante, vemos a introdução de um estado de foco. As marcas do design de interação moderno estavam vivas e bem em 1985.
1987 – HyperCard
Lançado pela Apple para o Macintosh, este programa usava hiperlinks entre páginas e aplicativos. Embora esteticamente bonita, esta versão não usa cores em seus hiperlinks.
1987 – WorldWideWeb ( WWW)
WWW foi o primeiro navegador criado por Tim Berners-Lee enquanto trabalhava no CERN. Começou em preto e branco, com sublinhados sob hiperlinks, que ainda hoje são usados em sites modernos e são uma ótima solução para o daltonismo.
A caça por quem fez isso azul
Agora, conseguimos reduzir o prazo para a origem do hiperlink azul. WWW, o primeiro navegador, foi criado em 1987 e era preto e branco. Sabemos que o Mosaic foi lançado em 23 de janeiro de 1993 e foi creditado como o primeiro navegador com hiperlinks azuis. Até agora, não conseguimos encontrar o azul sendo usado para hiperlinks em qualquer interface antes de 1987, mas conforme os monitores coloridos se tornam mais disponíveis e as interfaces começam a oferecer suporte a cores, as coisas mudam rapidamente. Os próximos anos verão grande inovação e experimentação no gerenciamento de cores e hiperlinks.
1990 – Windows 3.0
O Windows 3 incluía suporte para 16 cores, no entanto, os links de texto ainda eram links pretos em um fundo branco, que se transformavam em texto branco em um fundo preto quando selecionados.
1991 – Protocolo Gopher
O protocolo Gopher foi criado na Universidade de Minnesota para pesquisar e recuperar documentos. Seu projeto original apresentava texto verde sobre fundo preto.
1991 – HyperCard (cor)
A Apple trouxe cor para seus HyperCards, mas notavelmente, os links de texto ainda eram pretos e não azuis. No entanto, alguns elementos da IU tinham acentos azuis quando interagidos, o que é incrivelmente importante, pois mostra a mudança lenta do azul sendo usado como uma cor de interação.
5 de outubro de 1991 – Kernel Linux
O Linux usou texto branco em um fundo preto.
1992 – ViolaWWW
No navegador ViolaWWW, os links de texto estão sublinhados e a cor de fundo é cinza, como veríamos na versão inicial do Mosaic. No entanto, os links de texto são pretos.
6 de abril de 1992 – Windows 3.1
A Microsoft usa o azul escuro para interfaces desde 1985, mas a partir de 1990 também começou a usá-lo para interação. Aqui, a Microsoft usa o “hiperlink azul” para estados ativos quando um usuário clica em diferentes unidades, pastas e ícones. Isso é extremamente importante porque mostra a lenta evolução desse azul de uma cor de layout para uma cor interativa, precedendo o tempo em que o azul teria sido adicionado ao Mosaic em quase exatamente um ano.
16 de janeiro de 1992 – 21 de junho de 1992 – Linux Kernel
Em 1992, o Linux Kernel ganhou suporte para cores em seu console.
Quem fez isso primeiro?
Janeiro, 1993 – Mosaic
A primeira versão beta do Mosaic foi criada para o X Window System da University of Illinois. A interface original era em preto e branco e não tinha hiperlinks azuis, mas tinha hiperlinks pretos com contorno com borda. De acordo com o guia do usuário do X System, os hiperlinks foram sublinhados ou destacados.
12 de abril de 1993 – versão 0.13 do mosaico
No changelog do Mosaic para a versão 0.13, há um marcador que é de grande importância para nós:
Representações de âncora padrão alteradas: sublinhado azul e sólido único para os não visitados, roxo escuro e sublinhado único tracejada para os visitados.
Notas de Lançamento
Nas palavras imortais do personagem Ian Malcom de Jeff Goldblum em Jurassic Park, “Bem, aí está.”
21 de abril de 1993 – versão 1 do mosaico
Mosaic lançado para o sistema X Window. Não consegui encontrar capturas de tela de como era a interface para este lançamento, mas de acordo com as notas de lançamento, a cor visitada foi alterada para uma “Cor âncora melhor visitada para não-SGI’s”.
8 de junho de 1993 – Beta do violoncelo
O Cello foi criado na Cornell Law School para que os advogados pudessem acessar seu site jurídico a partir de computadores Windows. Minha colega de equipe, Molly, conseguiu baixar o 0.1 beta para mim, e ficamos chocados com o que descobrimos:
Lá estava! Nosso estilo de hiperlink, exceto que não era um hiperlink, era o título. Nosso “link azul” nunca tinha aparecido em interfaces de usuário antes de 1993 e, de repente, ele aparece em duas instâncias com dois curtos meses um do outro em dois navegadores separados em duas universidades diferentes sendo construídas ao mesmo tempo.
Setembro de 1993 – Portas Mosaic
Em setembro, uma versão do Mosaic foi lançada para o sistema operacional Macintosh 7.1. Consegui localizar uma captura de tela dessa versão que incluía um hiperlink azul que é a primeira evidência visual da cor azul sendo usada para denotar um hiperlink.
O que veio depois do link azul?
Junho de 1993 – Unix GUI – Common Desktop Environment
Common Desktop Environment é uma GUI para o sistema operacional UNIX, o mesmo sistema operacional usado para construir o Mosaic. Essa interface apresentava texto em preto com um sublinhado para hiperlinks.
1994 – Violoncelo Versão 1
O Cello saiu da versão beta, mas agora apresenta um fundo amarelo, manteve seus cabeçalhos sublinhados em azul e ainda tem hiperlinks pretos com uma borda.
13 de outubro de 1994 – Netscape Navigator
Criado por Marc Andreessen e James H. Clark, o Netscape usou a mesma linguagem visual do Mosaic: hiperlinks azuis e um fundo cinza.
Julho de 1995 – Internet Explorer 1.0
Em 1995, a Microsoft produziu o Internet Explorer e, sem surpresa, ele também apresentava hiperlinks azuis e um fundo cinza. O Internet Explorer foi fornecido com o Windows 95, que foi a primeira vez que um navegador veio com um sistema operacional. Por volta dessa época, a guerra dos navegadores começou , mas a aparência dos hiperlinks estava firmemente estabelecida.
9 de novembro de 2004 – Firefox 1.0
O Mozilla Firefox foi lançado e também apresentava hiperlinks azuis, que estão em uso até hoje. Essas imagens são do Netscape 1.22 e do Firefox Nightly hoje.
Então, por que hiperlinks azuis?
O que aconteceu em 1993 para tornar os hiperlinks azuis repentinamente? Ninguém sabe, mas tenho algumas teorias.
Costumo ouvir que o azul foi escolhido como a cor do hiperlink para o contraste de cores. Bem, embora o W3C não tenha sido criado até 1994, e os padrões pelos quais julgamos a acessibilidade da web ainda não foram definidos, se olharmos para o contraste entre preto como cor de texto e azul como cor de link, é uma taxa de contraste de 2,3: 1, que não passaria como contraste de cor suficiente entre o hiperlink azul e o texto preto.
Em vez disso, gosto de imaginar que Cello e Mosaic foram inspirados pelas mesmas tendências que aconteciam no design de interface do usuário na época. Minha teoria é que o Windows 3.1 tinha acabado de sair alguns meses antes do início dos dois projetos, e essa interface foi a primeira a usar o azul com destaque como uma cor de seleção, abrindo caminho para que o azul fosse usado como uma cor de hiperlink.
Além disso, sabemos que o Mosaic foi inspirado no ViolaWWW e manteve o mesmo plano de fundo cinza e texto preto que usavam em sua interface. Revendo as notas de lançamento do Mosaic, vemos na versão 0.7 texto preto com sublinhados aparecendo como a forma preferida de transmitir hiperlinks, e podemos inferir que ainda era o caso até algo acontecer em meados de abril, quando os hiperlinks azuis apareceram na versão 0.13 . Na verdade, transmitir links como texto preto com sublinhados era o padrão desde 1985 com a Microsoft 1, que alguns alegaram que a Microsoft havia roubado da aparência do Lisa, da Apple.
Acho que a verdadeira razão de termos hiperlinks azuis é simplesmente porque os monitores coloridos estavam se tornando mais populares nessa época. O mosaico como produto também se tornou popular, e os hiperlinks em azul o acompanharam. O Mosaic foi lançado durante um momento importante em que o suporte para monitores coloridos estava mudando; o padrão era que os hiperlinks usassem texto em preto com algum tipo de sublinhado, estado de foco ou borda. A Mosaic optou por usar o azul e optou por portar seu navegador para vários sistemas operacionais. Isso ajudou o Mosaic a se tornar o navegador padrão para uso da Internet e ajudou a solidificar sua interface de usuário como o idioma padrão para interagir com a web.
Quando o Netscape e o Internet Explorer foram criados, o hiperlink azul já era sinônimo de web e interação. O link azul agora era independente do navegador e estava a caminho de se tornar um símbolo do que significa usar a Internet.
Rapsódia em # 0000FF
Já se passaram quase 30 anos desde que a Mosaic incluiu o agora onipresente azul em suas notas de lançamento, mas não é mais o início dos anos 1990. Embora seja muito divertido descobrir os segredos de como os navegadores são feitos, aqui no presente, aceitamos como verdade do evangelho que os links só podem e devem ser azuis porque esses primeiros pioneiros disseram que deveria ser.
Quando o hiperlink foi criado, cores limitadas estavam disponíveis. Hoje temos quase todas as opções de cores, então qual deve ser a cor padrão e o estado dos links na internet? Quando temos todas as oportunidades de nos desviarmos da tradição, fazemos isso em prol do progresso ou devemos manter o azul porque é um padrão visual estabelecido?
Se você deseja alterar a cor do link, aqui estão minhas listas de requisitos para a cor perfeita ao escolher uma cor de link:
- Acessibilidade de texto ideal com a cor de fundo e o texto ao redor. Suas decisões de design não devem ser o motivo pelo qual um usuário não pode acessar o conteúdo de uma página.
- Os estados interativos devem sempre ser estilizados em suas folhas de estilo. Os exemplos incluem: toque, visitado, pairar, ativo e foco.
- Os links e botões devem ser grandes o suficiente para tocar ou clicar. Você não pode ter certeza de como as pessoas estão interagindo com seu conteúdo em dispositivos usando stylus, dedos, mouse ou trackpads. É seu trabalho garantir que seus links sejam fáceis de navegar e tenham espaço suficiente ao redor deles.
Para encerrar, todos os links devem ser azuis? Talvez sim, ou talvez não. Tem havido um longo caminho de elementos visuais usados para denotar hiperlinks, e a cor azul é apenas um dos muitos elementos que passaram a representar um hiperlink. Os links são sobre como conectar informações. Sempre certifique-se de que um hiperlink se destaque do resto do conteúdo circundante. Às vezes, isso significa que você precisa de um sublinhado ou de uma cor de fundo, ou talvez apenas de uma cor azul.