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

História do Design Digital
Eduardo Novais - Design de Interfaces Gráﬁcas

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?


Olhar a
evolução em
função de 4
grandes áreas
Javier Royo (2008)


Projetos de sinalização
Sist. Visuais de Inf
Identidade Visual
Evoluçã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)


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


London Underground Map
(Harry Beck, 1933)


Beck substituiu a ﬁdelidade geográﬁca por
uma interpretação diagramática


Outro avanço foi codiﬁcar a identiﬁcação das
diferentes linhas com cores brilhantes.


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


Uniﬁcação dos
sinais de
circulação
Vienna 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áﬁcas
Federal Design Improvement Program (1974)


"I believe that we all can ﬁnd 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 especiﬁcações de papel, cores,
tipograﬁa e sistema de retícula


Sistema de
Símbolos para
Pasageiros
AIGA (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
Desktop
Xerox 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áﬁcas que contêm um alto
grau de informação e tem um objetivo
didático


Isotype
Otto Neurath (1920)


Desenvolver uma padronização visual para
ﬁns 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
Design
Will 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áﬁco
Mundial
Herbet Bayer (1953)


Nessa obra, Bayer apresentava toda a
informação por meio de símbolos mapas
geográﬁcos 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áﬁco Mundial
(Herbert Mayer, 1953)


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


Identidade
Corporativa -
AEG
Otto 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 Ulm
Otl 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áﬁco


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 ﬂexí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ória
Visualizar a informática
Mudança de Paradigma
Interface gráﬁca atual
Internet e Ciberespaço
Guerra dos Navegadores


A história da interface gráﬁca 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
Diferencial
Charles Babbage (1835)


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


Cartões
Perfurados
Joseph 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 classiﬁcadora rudimentar, e
uma unidade tabuladora (somava e imprimia
resultados)


Cartão Perfurado
(Hollerith, 1890)


ENIAC
J. Eckert e J. Mauchly (1945)


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áﬁcos


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


Whirlwind
MIT (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


Sketchpad
Ivan 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


Bloco de Desenho
(Sutherland, 1962)


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


Dynabook
Alan 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áﬁca
dentro da interface e fácil de usar por alunos
de educação primária


Protótipo do Dynabook
(Alan Kay)


Mouse
Douglas Engelbart (1968)


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


Sistema
Operacional
com Janelas
Augmentation 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.


Hipertexto
Theodore 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


ArpaNET
SRI, 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


Atari
Nolan Bushnell (1980)


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


Chip
Intel (1971)


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


Desktop e
WIMP
Alan Kay (1973)


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


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


Lisa
Apple (1976)


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


Viewtel 202
Birmingham 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 decodiﬁcador e
funcionava de Segunda a Sábado, doze horas
por dia


Lisa
Apple (1983)


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


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


O sucesso deﬁnitivo 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


Habitat
Lucasﬁlm 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áﬁcas que têm a
responsabilidade de conectar muita gente
entre si por meio de comunidade virtuais,
com comunicação em tempo real.


Habitat
(Lucasﬁlm Games, 1986)


HyperCard
Bill Atkinson (1987)


Desenvolvido como uma ferramenta com a
ﬁnalidade 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.


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


World Wide
Web
Tim 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 modiﬁcou
completamente a nossa forma de interagir.
Eram as ideias de Ted Nelson em estado
latente.


Mosaic
Marc 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
MediaLab
Muriel Cooper e Visible
Language Workshop - MIT
(1974 a 1994)


Cabe ressaltar o resultado das pesquisas
ligadas à interface gráﬁca 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áﬁcos)
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 tipograﬁa elegante, cores
exuberantes e animações vivas.


Financial Viewpoints
(Lisa Strausfeld)


Netscape
Navigator 1.0
Netscape (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.0
Microsoft (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.


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


Mosaic 2.0
NCSA (1995)


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.0
Netscape (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.0
Microsoft (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áﬁca em relação
ao conjunto de todos os ícones


Mosaic 3.0
NCSA (1997)


Os ditos 5 ícones agora pertenciam a uma
janela ﬂutuante


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


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

Mais conteúdo relacionado

Mais procurados (20)

Destaque (8)

Mais de Eduardo Novais (20)

Último (13)

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