(cdi) aula02 - história da interface gráfica digital

Design de Interfaces Gráficas

Carlos Eduardo Brito NovaisLízie Sancho Nascimento

Unifor - Universidade de Fortaleza

Interface Gráfica

3

Interface



4

Interface



Interface

“Área de comunicacao entre o homem e a máquina.” (ROYO, 2008, p.89)

5

6

Interface



7

Interface



“Desde muito tempo, o homem utiliza instrumentos para comunicar-se com outros homens". (MEGGS, 2013)

8

Interface



De acordo com Giedion (1995), o homem se diferencia dos outros animais, por sua capacidade de utilizar símbolos como instrumentos conceituais.

9

Interface



Onde utilizamos símbolos como instrumentos conceituais?

10

Interface



11

Interface Gráfica do Usuário



"Toda a civilizacao existe em funcao dos símbolos que cria, e o que permanece ao longo da história sao também os símbolos que vao mudando segundo as necessidades sociais de cada época.”

(ROYO, 2008, p. 48)

12

Interface Gráfica do Usuário



É importante ressaltar que a sociedade soube usar dos meios técnicos disponíveis em sua época para se comunicar e, também, para a manipulacao da massa receptora.

13

Interface Gráfica do Usuário



14

Interface Gráfica do Usuário



História da Interface Gráfica

Para Javier Royo, a história do design digital tem a mesma origem da história da interface do usuário, pois o meio de comunicacao apresenta uma superfície, a qual o usuário utiliza-a para ler, essa superfície, é a própria interface.

16

História da Interface Gráfica



1. Evolucao dos Processos de Sinalizacao;

2. Aparicao dos Sistemas Pictográficos Para Transmissao da Informacao;

3. Alguns Marcos Históricos Relacionados Com a Identidade Visual; e

4. Evolucao Tecnológica (a própria evolucao da interface gráfica do usuário).

17

Evolucao dos Diferentes Campos do Design:



Sistemas de sinalizacao como precursores dos sistemas de navegacao.

18

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

Objetivo:

• Padronizar o sistema de circulacao, a fim de melhorar o trânsito.

19

1.5

1.6



20

1.1. Sistemas de Sinalizacao



21

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



22

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Plano de Sinalizacao do Metrô de Londres

23

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



24

1.2. Plano de Sinalizacao do Metrô de Londres (Harry Beck,1933)



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

Contribuições de Beck

• Substituicao da fidelidade geográfica para interpretacao diagramática.

• Codificacao das linhas através de cores.

• Aumento da escala onde havia grande volume de linhas passando.

25

1.5

1.6



1. Evolucao dos Processos de Sinalizacao

Como esse sistema contribuiu para o design de informacao nos dias atuais?

26

1.1

1.2

1.3

1.4

1.5

1.6



Viena Convention on Road Signs and Signals

27

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

Objetivo:

• Padronizar o sistema de circulacao, a fim de melhorar o trânsito.

28

1.5

1.6



29

1.3. Viena Convention on Road Signs and Signals (1968)



Federal Design Improvement Program

30

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



1.4. Federal Design Improvement Program (1974)



Programa Federal de Melhoria do Design

32

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



1.4. Programa de Melhoria do Design Federal (1974)



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

Resultado:• Manual de normas gráficas para

publicacões e comunicacao, com especificacões de tamanhos e formatos de papel, cores, tipografia e sistemas de retícula.

1.5

1.6



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Sistema De Símbolos Para Passageiros

1.5. Sistema De Símbolos Para Passageiros (1974)



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Objetivo:• Sistema de símbolos destinados a

passageiros, pedestres e usuários de transportes.

Resultado• Roger Cook e Don Shanosky

elaboraram uma série de símbolos que contribuiu para a unificacao de significados da comunicacao gráfica.

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



40

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Metáfora da Interface

41

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Objetivo:• Influenciado pelo trabalho dos

símbolos Roger Cook e Don Shanosky. A Xerox criou o 1º sistema operacional com interface gráfica, baseado na metáfora da interface.

42

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



Resultado:• O desenvolvimento do sistema de

sinalizacao viário nao só ajudou na ambientacao do usuário ao espaco digital, como também contribuiu para mostrar a importância da sinalizacao na concepcao do ciberespaco.

43

1.6. Sistema MS-DOS (1981)



1.6. Sistema Xerox Star (1984)



1.6. MacOS X Snow Leopard (Apple, 2010)



46

1. Evolucao dos Processos de Sinalizacao

1.1

1.2

1.3

1.4

1.5

1.6



O que mudou de lá para cá?

Fazem parte dos sistemas visuais de informacao toda representacao gráfica que contém um alto grau de informacao e um objetivo didático. Por exemplo: mapas de sites, representacões de processos, que nao podem ser visualizadas pelo usuário, etc.

47

2. Sistemas Pictográficos Para Transmissao da Informacao

2.1

2.2

2.3





Sistemas de sinalizacao como precursores dos sistemas de navegacao.

49

2.1

2. Sistemas pictográficos para transmissao da informacao

2.2

2.3



Objetivo:

• Otto Neurath foi o pioneiro na realizacao de sistemas de signos e símbolos. Ele pretendia criar um sistema de padronização visual para fins educativos. Acreditava que a linguagem visual de signos era compreensível por qualquer cidadao, por mais modesto que fosse seu grau de instrucao.

2.1

2.2

2.3

2. Sistemas pictográficos para transmissao da informacao



Resultado:

• A ideia do Isotype era criar uma linguagem pictográfica mundial. Ainda hoje, ela exerce forte influência na comunicacao das novas tecnologias.

2.1

2.2

2.3

2. Sistemas pictográficos para transmissao da informacao



2.1. Isotype





Design Centrado no Usuário (Will Burtin, 1949)

56

2. Sistemas pictográficos para transmissao da informacao

2.1

2.2

2.3



História:

• Will Burtin foi um dos pioneiros no design de informacao. Ele também se destacou por pensar o design a partir do usuário, hoje campo conhecido como design centrado no usuário. Ele acreditava que se devia estudar a percepcao que o usuário tinha da informacao.

57

2.1

2.2

2.3

2. Sistemas pictográficos para transmissao da informacao



58

2.2. The Brain



Atlas Geográfico Mundial (Herbert Mayer, 1953)

59

2. Sistemas pictográficos para transmissao da informacao

2.1

2.2

2.3



História:

• Herbert Mayer fez um atlas que transmitia informacões de diversas áreas: astronomia, geografia, etc.

2.1

2.2

2.3

2. Sistemas pictográficos para transmissao da informacao



Resultado:

• “Este trabalho de representacao em mapas representou um dos primeiros grandes trabalhos dedicados à visualizacao da informacao em estado puro (dados, limites geopolíticos etc.) e, portanto, é claro antecedente da representacao da informacao tal como a conduzimos na internet.”(ROYO, 2008, p.57)

2.1

2.2

2.3

2. Sistemas pictográficos para transmissao da informacao



62

No início do século XX surgiram as primeiras iniciativas para padronizar a imagem corporativa das empresas.

63

3. Sistemas de Identidade Visual

3.2

3.1



Identidade Corporativa AEG(Otto Neurath e Peter Behrens)

3.1

3.2

3. Sistemas de Identidade Visual





Objetivo:

• Otto Neurath e Peter Behrens acreditavam na identidade visual coordenada da forma como vemos hoje. Ele acreditava que toda a comunicacao da empresa deveria seguir um conjunto harmônico, coordenado e organizado, desde a marca, vestimenta, faixada das lojas até a moradia dos funcionários.

3.1

3.2

3. Sistemas de Identidade Visual





Resultado:

• Após a Segunda Guerra Mundial, as empresas viram os benefícios de se padronizar a comunicacao.

3. Sistemas de Identidade Visual

3.1

3.2



Escola da forma em Ulm3.1

3.2

3. Sistemas de Identidade Visual





Objetivo:

• A importância da Escola de Ulm reside na renovacao do conceito metodológico aplicado à imagem da marca e aos signos visuais.

• Otl Aicher e Martin Krampen foram uns dos fundadores da escola.

3.1

3.2

3. Sistemas de Identidade Visual



Resultado:

• 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.

72

3. Sistemas de Identidade Visual

3.1

3.2















O que essa experiência trouxe para os dias atuais?

79

3. Sistemas de Identidade Visual

3.1

3.2



Consequência:

• Trazendo essa experiência para os dias atuais, a percepcao que o cliente tem do site, aplicativos ou qualquer outro dispositivo deve estar atrelada a marca da empresa. Se a empresa busca passar uma imagem de inovacao, moderna e tecnológica, seu site e produtos devem estar relacionas e devem transmitir essa percepcao.

80

3. Sistemas de Identidade Visual

3.1

3.2



A história da interface gráfica do usuário acompanha a evolucao tecnológica.

Quanto mais espaços foram criados, mais interfaces foram desenvolvidas.

81

4. Evolucao Tecnológica

4.1

4.2

4.3

4.4

4.5

4.6



Pré-História

Visualizar a Informática

Mudanca de Paradigma

Interface Gráfica Atual

Internet e Ciberespaco

Guerra dos Navegadores

82

4. Evolucao Tecnológica

4.1

4.2

4.3

4.4

4.5

4.6



Pré-história:

• Antes dos computadores eletrônicos, existiam pessoas especializadas para controlá-los, pois o homem era quem deveria compreender a máquina e nao o contrário. Usabilidade era algo que ainda estava bem distante de se alcancar.

83

4. Evolucao Tecnológica

4.2

4.3

4.4

4.5

4.6

4.1



Na época da interface pré-gráfica, Charles Babbage idealizou uma máquina analítica, chamada de diferencial, que seria capaz de receber, armazenar, processar e exibir dados.

84

4. Evolucao Tecnológica

4.2

4.3

4.4

4.5

4.6

4.1



85

4.1. Máquina diferencial de Charles Babbage (1835)



Em 1890, Hollerith inventou o primeiro sistema de processamento de informacao, afim de processar e tratar dados administrativos para o censo norte-americano. Ele era composto por uma leitora de cartões perfurados, calculava e imprimia resultados.

86

4. Evolucao Tecnológica

4.2

4.3

4.4

4.5

4.6

4.1



4.1. Cartao Perfurado (Hollerith, 1890)



Royo (2008) fala que conforme o avanco das tecnologias, o tamanho desses dispositivos iam diminuindo, vide o caso do ENIAC, primeiro computador eletrônico, o qual pesava mais de 30 toneladas. Com esse crescimento, a capacidade de cálculo e memória aumentaram até chegar aos gráficos atuais.

88

4. Evolucao Tecnológica

4.2

4.3

4.4

4.5

4.6

4.1



89

4.1. ENIC (J. Eckert e J. Mauchly (1945))



Foi no MIT que apareceram os primeiros resultados de pesquisas em relacao às imagens geradas por computador.

90

4. Evolucao Tecnológica

4.3

4.4

4.5

4.6

4.2

4.1



91

4.2. Sketchpad (Ivan Sutherland, 1962)



O Sketchpad foi a primeira interface aplicada ao desenho, o início do Computer-Aided Design (C.A.D.).

92

4. Evolucao Tecnológica

4.3

4.4

4.5

4.6

4.2

4.1



4.2. Dynabook (Alan Kay, 1960)



O Dynabook seria uma plataforma criada para um computador pessoal usando sistema de orientacao gráfica dentro da interface e fácil de usar por alunos de educacao primária

94

4. Evolucao Tecnológica

4.3

4.4

4.5

4.6

4.2

4.1



95

4.2. Protótipo do Dynabook



96

4.2. Mouse (Douglas Engelbart, 1968)



A invencao do mouse gerou o princípio da manipulacao direta da interface.

97

4. Evolucao Tecnológica

4.3

4.4

4.5

4.6

4.2

4.1



Mudanca de paradigma em relacao a informacao

98

4. Evolucao Tecnológica

4.4

4.5

4.6

4.1

4.2

4.3



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

99

4. Evolucao Tecnológica

4.4

4.5

4.6

4.1

4.2

4.3



100

4.3. Hipertexto (Theodore Holm Nelson, 1960)



101

4.3. Arpanet (SRI, UCLA, UCSB e UU; 1969)



102

4.3. Atari (Nolan Bushnell; 1980)



Os jogos de arcade, como o Pong, foram a primeira forma de utilizacao exclusiva do computador para puro entretenimento.

103

4. Evolucao Tecnológica

4.4

4.5

4.6

4.1

4.2

4.3



Interface Gráfica Atual

104

4. Evolucao Tecnológica

4.5

4.6

4.1

4.2

4.3

4.4



105

4.4. Desktop e WIMP (Alan Kay, 1960)



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

4. Evolucao Tecnológica

4.5

4.6

4.1

4.2

4.3

4.4



4.4. Apple Lisa (Apple, 1976)



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

4. Evolucao Tecnológica

4.5

4.6

4.1

4.2

4.3

4.4



4.4. Viewtel (Birmingham Post and Mail, 1979)



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

Era necessário um aparelho decodificador e funcionava de segunda a sábado, doze horas por dia.

4. Evolucao Tecnológica

4.5

4.6

4.1

4.2

4.3

4.4



4.4. Apple Lisa (Apple, 1976)



4.4. Macintosh (Apple, 1984)



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 recuperacao da linguagem pictográfica para a gestao da informacao e a sinalizacao do espaco de informacao.O sucesso definitivo desse novo modelo de interface chegou em 1984 com o Macintosh.

4. Evolucao Tecnológica

4.5

4.6

4.1

4.2

4.3

4.4



Internet e Ciberespaco

114

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

Um dos avancos mais importantes no que se refere à história da interatividade é o progresso das telecomunicacões.

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. Habitat (Lucas Films, 1984)



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

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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. Habitat (Lucas Films, 1984)



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 comunicacao em tempo real.

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. Hypercard (Bill Atkinson, 1987)



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

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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. Internet e Ciberespaco (Tim Berners-Lee, 1989)



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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. 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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

4.5. Navigator (Netscape, 1994)



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

4. Evolucao Tecnológica

4.6

4.1

4.2

4.3



4.4

4.5

Guerra dos navegadores

129

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

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

130

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

131

132

4.6. Internet Explorer 1.0 e 2.0 (Microsoft, 1995)



A tela enche-se de ícones em uma tentativa de oferecer mais servicos e arrebatar o mercado.

134

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

4.6. Mosaic 2.0 (NCSA, 1995)



Essa versao inclui dois ícones a mais: Recarga e Salvar Documento.

Até esse momento era o navegador que conseguia, com cinco ícones, a maior concisao de acões

136

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

4.6. Navigator (Netscape, 1996)



Apresenta uma importante melhora ao colocar dentro da janela de navegacao um ícone que levava a um programa de correio eletrônico.

138

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

4.6. Internet Explorer 3.0 (Microsoft, 1996)



Essa versao do IE marcou eliminacao dos botões quadrados como conhecíamos.

Apesar desse avanco o Netscape continuava com maior consistência gráfica em relacao ao conjunto de todos os ícones.

140

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

4.6. Mosaic 3.0 (NCSA, 1997)



Levava a navegacao com apenas 5 botões para um janela flutuante.

142

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

4.6. Chrome (Google)



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

144

4. Evolucao Tecnológica

4.1

4.2

4.3



4.4

4.5

4.6

Design de Interfaces Gráficas

Carlos Eduardo Brito NovaisLízie Sancho Nascimento

Unifor - Universidade de Fortaleza