(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

http://buscatextual.cnpq.br/buscatextual/visualizacv.do?id=K4753973Y0


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


É 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


14


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

1.2

1.3

1.4

1.5

1.6

22


1.1

1.2

1.3

1.4

1.5

1.6

Plano de Sinalizacao do Metrô de Londres

23


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


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

1.2

1.3

1.4

1.5

1.6


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

1.2

1.3

1.4

1.5

1.6

1.4. Programa de Melhoria do Design Federal (1974)


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

1.2

1.3

1.4

1.5

1.6

40


1.1

1.2

1.3

1.4

1.5

1.6

Metáfora da Interface

41


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


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.1. Isotype

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

56


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


58

2.2. The Brain

Atlas Geográfico Mundial (Herbert Mayer, 1953)

59


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


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


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


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


Resultado:

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


3.1

3.2

Escola da forma em Ulm3.1

3.2


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


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

3.2

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

79


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

4.4

4.5

4.6

4.2

4.1

Mudanca de paradigma em relacao a informacao

98


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

4.5

4.6

4.1

4.2

4.3

Interface Gráfica Atual

104


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

4.6

4.1

4.2

4.3

4.4

Internet e Ciberespaco

114


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

4.1

4.2

4.3

4.4

4.5

Guerra dos navegadores

129


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

4.2

4.3

4.4

4.5

4.6

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



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

Technology