[dig2012] 02 - história do design de interfaces

História do Design DigitalEduardo Novais - Design de Interfaces Gráficas

sexta-feira, 16 de março de 2012

Em vários momentos, você deve ter ouvido falar sobre a história da tecnologia em diversos meios.


Vamos tentar fazer isso de uma forma diferente?


Javier Royo (2008)

Olhar a evolução em função de 4 grandes áreas


Projetos de sinalizaçãoSist. Visuais de InfIdentidade VisualEvolução tecnológica


Os sistemas de sinalização são antecessores dos sistemas de navegação


Saída da estação de metrô em Paris


Interface do TripView Sydney(GROFSOFT, 2011)


https://play.google.com/store/apps/developer?id=Grofsoft

https://play.google.com/store/apps/developer?id=Grofsoft

Plano de Sinalização do Metrô de Londres Harry C. Beck (1933)


London Underground Map (Harry Beck, 1933)


http://www.patricktaylor.com/1933-underground-map

http://www.patricktaylor.com/1933-underground-map

Beck substituiu a fidelidade geográfica por uma interpretação diagramática


Outro avanço foi codificar a identificação das diferentes linhas com cores brilhantes.


O avanço alcançado por Beck foi fundamental para o desenvolvimento do Design da Informação


Unificação dos sinais de circulaçãoVienna Convention on Road Signs and Signals (1968)


A padronização dos sinais de circulação criou uma linguagem global para o trânsito de veículos


Normas gráficasFederal Design Improvement Program (1974)


"I believe that we all can find that the arts have a great deal more to contribute to what we in government are seeking to accomplish -- and that this will be good for the arts and good for the country."

President Richard Nixon, 1971


O objetivo era melhorar a qualidade da comunicação visual e otimizar a relação entre os órgãos governamentais e os cidadãos.


Estabeleceram normas para tamanho, formatos e especificações de papel, cores, tipografia e sistema de retícula


Sistema de Símbolos para PasageirosAIGA (1974)


Esta foi mais uma iniciativa do Governo dos Eua na área de Design


Foi encomendado à AIGA um sistema de símbolos destinado a passageiros, pedestres e usuários de transporte


A importância desse trabalho residiu no passo definitivo na unificação de significados que transcende as barreiras culturais e idiomáticas


Metáfora do DesktopXerox Star (1981)


Estabelece-se pela primeira vez uma série de ícones herdeiros dos sinais viários que funcionarão como sinais para navegar pelo sistema


Ao executar um clique duplo em um ícone, uma pasta se abria em forma de janela


Os espaços do nosso mundo começam a se estabelecer como espaços virtuais, espaços de informação representados por metáforas e ícones


Representações gráficas que contêm um alto grau de informação e tem um objetivo didático


IsotypeOtto Neurath (1920)


Desenvolver uma padronização visual para fins educativos compreensível por qualquer cidadão


A idéia central era desenvolver uma linguagem mundial sem palavras


Essa vocação de globalidade é aplicada à comunicação das novas tecnologias


Não ao acaso, muito dos pictogramas atuais são encotrados em uso na Internet


User Centered DesignWill Burtin (1949)


Upjohn para a Scope Magazine(Will Burtin, 1951)


The brain(Will Burtin, 1964)


Quatro realidades principais: “A o do homem, como unidade e mediador; a da luz, da cor e da textura; a do espaço, do tempo e do movimento; e a da ciência”


Burtin dizia que o homem era o aspecto mais importante para o designer. Nele já estava latente a ideia do design centrado no usuário


Todo o conhecimento pertence ao estudo da percepção do usuário, de como ele recebe a informação


Atlas Geográfico MundialHerbet Bayer (1953)


Nessa obra, Bayer apresentava toda a informação por meio de símbolos mapas geográficos e diagramas


Esse trabalho representou um dos primeiros grande trabalhos dedicados à visualização da informação em estado puro e um antecedente da representação da informação tal como a conduzimos na internet


Atlas Geográfico Mundial(Herbert Mayer, 1953)


No inicío do século XX surgiram as primeiras iniciativas para padronizar a imagem corportava das empresas


Identidade Corporativa - AEGOtto Neurath e Peter Behrens (1920)


Eles foram os primeiros a sistematizar uma imagem de identidade visual coordenada da forma como vemos hoje


Organizaram todo o sistema de projeção da identidade da forma como até hoje conhecemos


Escola de Design de UlmOtl Aicher e Martin Krampen (1949 - 1964)


A importância da Escola de Ulm reside na renovação do conceito metodológico aplicado à imagem da marca e aos signos visuais


Entre os principais feitos de Otl Aicher estão a elaboração das imagens corporativas para a Lufthansa e Braun


Estes trabalhos foram resultados de um estudo metodológico que levava a entender a imagem corporativa como uma imagem global que organizava todo o material gráfico


Hoje em dia os sistemas de identidade visual optam por soluções estruturais menos rígidas, nos quais a marca e suas aplicações são mais flexíveis e permeáveis


Nas novas tecnologias, a importância da marca é medida também em termos de uso das ferramentas


A representação da identidade visual e o seu uso converge e se mistura no ciberespaço


Bem, aqui a coisa é longa e são várias as iniciativas. Vamos dividir em algumas subcategorias


Pré-históriaVisualizar a informáticaMudança de ParadigmaInterface gráfica atualInternet e CiberespaçoGuerra dos Navegadores


A história da interface gráfica do usuário acompanha a evolução tecnológica. Quanto mais espaços foram criados, mais interfaces foram desenvolvidas


A era dos pré-computadores eletrônicos caracteriza-se por dispositivos de input e output e que desempenhavam funções relacionadas com cálculos


Eram máquinas extremamente adaptadas. O homem é que tinha que se adaptar à máquina.


Nuria Almirón: Anti-interface em seu estado puro


Maquina DiferencialCharles Babbage (1835)


Aplicava cinco conceitos modernos dos computadores modernos: entrada de dados, armazenamento, processador, unidade de controle, dispositivo de saída


Cartões PerfuradosJoseph Marie Jacquard (1891)


Os cartões perfurados foram criados para o tear automático. Depois foram adptados pela Hollerith para o censo dos EUA, sendo o primeiro sistema de processamento de informação


Composto de uma leitora elétrica de cartões perfurados, uma classificadora rudimentar, e uma unidade tabuladora (somava e imprimia resultados)


Cartão Perfurado(Hollerith, 1890)


ENIACJ. Eckert e J. Mauchly (1945)


http://pt.wikipedia.org/wiki/John_Eckert

http://pt.wikipedia.org/wiki/John_Eckert

http://pt.wikipedia.org/wiki/John_Mauchly

http://pt.wikipedia.org/wiki/John_Mauchly

O desenvolvimento tecnológico durante o século XX até a chegada das primeiras interfaces levaram à construção de computadores cada vez menores


Tido como o primeiro computador digital eletrônico de grande escala


Paralelamente foi-se ampliando a memória e a capacidade de cálculo até que o computador conseguisse suportar e apresentar gráficos


Foi no MIT que apareceram os primeiros resultados de pesquisas em relação às imagens geradas por computador


WhirlwindMIT (1949)


Foi o primeiro computador com capacidade de realizar cálculos de forma digital e representá-los diretamente em uma tela de raios catódicos


SketchpadIvan Sutherland (1962)


Diante de uma tela, podia-se desenhar linhas, mudá-las, repeti-las, armazená-las etc.


Abriu caminho para uma conceituação diferente da interface e das relações entre pessoas e computadores


Além disso, foi a primeira interface aplicada ao desenho, o início do Computer-aided design


http://en.wikipedia.org/wiki/Computer-aided_design




Bloco de Desenho(Sutherland, 1962)


Sutherland também desenvolveu geradores de cenas para simuladores de aviões militares e comerciais


DynabookAlan Kay (1960)


Esse projeto é o embrião do que chamamos hoje de laptop


Uma plataforma criada para um computador pessoal usando sistema de orientação gráfica dentro da interface e fácil de usar por alunos de educação primária


Protótipo do Dynabook(Alan Kay)


MouseDouglas Engelbart (1968)


A invenção do mouse gerou o princípio da manipulação direta da interface.


Sistema Operacional com JanelasAugmentation Research Center (1968)


O próprio Engelbart realizou a primeira demonstração pública de um sistema operacional com janelas


A navegação era realizada por teclado e mouse


As pesquisas realizadas foram as precursoras do conceito de interface atual


Que mudança de paradigma é essa?


Essa mudança diz respeito à forma em que a informação era pensada. Em princípio, se pensava em informação estanque, depois, em informação compartilhada.


HipertextoTheodore Holm Nelson (1960)


Vislumbrava o computador como uma máquina fácil de usar, divertida e que tivesse uma interface com imagem e som


Além de ser esse entusiasta, ele desenvolveu o conceito de hipertexto


O termo referia-se a um acúmulo de de informações ou escrita, unidas de forma não-sequêncial, mas horizontal, que permitia ao usuário buscar informações com maior liberdade, gerando seu próprio conteúdo.


Ted Nelson observava também os jogos de video-game como uma experiência com alto grau de imersão por parte do usuário


ArpaNETSRI, UCLA, UCSB, UU (1969)


Baseada nos conceitos de hipertexto e das pesquisas do projeto Xanadu, de Ted Nelson


A primeira mensagem nodo a nodo entre a UCLA e a SRI


Outros produtos acabaram sendo desenvolvidos, o correio eletrônico, por exemplo


AtariNolan Bushnell (1980)


Os jogos de arcade, como o Pong, foram a primeira forma de utilização exclusiva do computador para puro entretenimento


ChipIntel (1971)


Possibilitou o nascimento da informática pessoal, com o consequente desenvolvimento da interface destinada ao usuário


Desktop e WIMPAlan Kay (1973)


O Xerox Parc é considerado o primeiro computador de uma interface gráfica


A Rank Xerox teve muito pouca visão de futuro ao não querer incorporar a nova interface WIMP


LisaApple (1976)


No projeto Lisa é que foi estabelecido a ideia de interface amiga do usuário


Viewtel 202Birmingham Post and Mail (1979)


Considerado o primeiro jornal do mundo que tinha por base um suporte eletrônico


Foi o primeiro jornal a ser lido em uma tela e era considerado como um serviço complementar do jornal.


Era necessário um aparelho decodificador e funcionava de Segunda a Sábado, doze horas por dia


LisaApple (1983)


Estabeleceu-se entre os usuários uma nova forma de entender a interface gráfica; pela primeira vez foram utilizados os menus deslocáveis


Como resultado, houve a recuperação da linguagem pictográfica para a gestão da informação e a sinalização do espaço de informação


O sucesso definitivo desse novo modelo de interface chegou em 1984 com o Macintosh


Macintosh(Apple, 1984)


Um dos avanços mais importantes no que se refere à história da interatividade é o progresso das telecomunicações


HabitatLucasfilm Games (1986 e 1988)


Comunidades Virtuais acessíveis a milhares de computadores pessoais unidos entre si via modem.


Nesse espaço as pessoas poderiam fazer negócios, publicar jornais, assim como muitas outras coisas que podem ser feitas em um lugar real.

Bom, ao menos foi assim que foi registrado.


O Habitat indica o caminho a ser seguido pelas interfaces gráficas que têm a responsabilidade de conectar muita gente entre si por meio de comunidade virtuais, com comunicação em tempo real.


Habitat(Lucasfilm Games, 1986)


HyperCardBill Atkinson (1987)


Desenvolvido como uma ferramenta com a finalidade de buscar, administrar e guardar todo tipo de informação e ligá-la entre si.


Foi um dos primeiros sistemas hipermédia de sucesso antes do surgimento do World Wide Web.


http://pt.wikipedia.org/wiki/Hiperm%C3%A9dia

http://pt.wikipedia.org/wiki/Hiperm%C3%A9dia

http://pt.wikipedia.org/wiki/World_Wide_Web




Curiosamente, Atkinson utilizou o ícone de uma casa (home) para representar a tela principal.


World Wide WebTim Berners-Lee (1989)


Tudo começou quando Berners-Lee escreveu um documento apresentando uma proposta de gestão da informação divulgando-a por meio de um sistema de hipertexto.


O advento da internet modificou completamente a nossa forma de interagir. Eram as ideias de Ted Nelson em estado latente.


MosaicMarc Andressen (1991)


Considerado o primeiro navegador popular, permitia passar de uma página para outra clicando o mouse em uma série de ícones


Mosaic 1.0(NCSA, 1991)


Pesquisas no MediaLabMuriel Cooper e Visible Language Workshop - MIT (1974 a 1994)


Cabe ressaltar o resultado das pesquisas ligadas à interface gráfica do grupo de Muriel Cooper


Muriel Cooper defendia em sua tese a ideia de abster-se dos ícones, de forma que os textos representassem a si próprios


Seu projeto defendia que a forma mais potente de se trabalhar com ideias era recorrer a abstrações (símbolos tipográficos) ao invés de se recorrer às metáforas


Ela mostrou que as telas com informações preenchidas com o códigos poderiam ser preenchidas com tipografia elegante, cores exuberantes e animações vivas.


Financial Viewpoints(Lisa Strausfeld)


Netscape Navigator 1.0Netscape (1994)


O Netscape foi responsável por consolidar o público da internet.


No seu painel de controle, podemos observar os ícones setas, home e recarga.


Os ícones encontrados nesses navegadores são imagens oriundos de pictogramas que utilizamos na sinalização tradicional


O valor da visualidade adquire um novo sentido: a escrita alfabética perde seu papel mais importante de comunicar ideias para esse símbolos


Internet Explorer 1.0 e 2.0Microsoft (1995)


Guerra dos Browsers foi o nome dado a um período (1995 a 1999) na história da Internet no qual a Netscape perde a sua liderança absoluta no mercado para a Microsoft e o Internet Explorer.


http://pt.wikipedia.org/wiki/1995




http://pt.wikipedia.org/wiki/Internet

http://pt.wikipedia.org/wiki/Internet

http://pt.wikipedia.org/wiki/Netscape_Communications_Corp

http://pt.wikipedia.org/wiki/Netscape_Communications_Corp

http://pt.wikipedia.org/wiki/Microsoft

http://pt.wikipedia.org/wiki/Microsoft

http://pt.wikipedia.org/wiki/Internet_Explorer

http://pt.wikipedia.org/wiki/Internet_Explorer

O navegador da Microsoft foi lançado em agosto de 1995 e, em novembro já estava sendo lançada a versão 2.0


A tela enche-se de ícones em uma tentativa de oferecer mais serviços e arrebatar o mercado


NCSA (1995)

Mosaic 2.0


Essa versão inclui dois ícones a mais: Recarga e Salvar Documento.


Até esse momento era o navegador que conseguia, com cinco ícones, a maior concisão de ações


Netscape Navigator 2.0Netscape (1996)


Apresenta uma importante melhora ao colocar dentro da janela de navegação um ícone que levava a um programa de correio eletrônico


Internet Explorer 3.0Microsoft (1996)


Essa versão do IE marcou eliminação dos botões quadrados como conhecíamos


Apesar desse avanço o Netscape continuava com maior consistência gráfica em relação ao conjunto de todos os ícones


NCSA (1997)

Mosaic 3.0


Os ditos 5 ícones agora pertenciam a uma janela flutuante


O Navegador Chrome retoma a interface do Mosaic ao incluir uma lista mínima de ícones e intergrar funções como uma página do próprio navegador
