View
389
Download
1
Category
Preview:
Citation preview
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
Recommended