• Metáforas favorecem a
familiarização. São utilizadas
para facilitar a compreensão das
funcionalidades em uma interface.
...
Você é luz,

é raio,

estrela

e luar.

Manhã de sol…
Wando
“
World Wide Web
Surfar na internet
Navegar na web
Navegador
Âncora
Cloud Computing
recortar, copiar, colar
arrastar
Radio Buttons
apenas um botão pode estar pressionado ao mesmo tempo
• Mural de recados
• Lista de discussão
• Sala de bate-papo
Texto
A metáfora do desktop (mesa de trabalho)
Ícones utilizando-se de metáforas
Magic Cap
Sistema STAR da Xerox (1981)
Interface do Macintosh (Apple, 1984)
Metáfora levada ao “pé da letra
Protótipo do Bumptop
Vídeo: Donald Norman
Vídeo: Donald Norman
Vídeo: Donald Norman
The Treachery Of Images (This Is Not A Pipe)
Rene Magritte (1948)
Uma e Três Cadeiras, de Joseph Kosuth (1965)
azulejos
Texto: Why cards are the future of Web cartas e cartões
Texto: Why cards are the future of Web
Como é “desfazer”

fora do computador?
Como representar visualmente
o “desfazer”?
...?
...?
O disquete significa... salvar?
O que significa salvar?
ZIP é... comprimir?
O que significa comprimir?
Qual o significado destes ícones?
Skeumorfism Flat Design
Skeumorfismo
Flat Design
Material Design
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Metáforas em interfaces digitais
Próximos SlideShares
Carregando em…5
×

Metáforas em interfaces digitais

280 visualizações

Publicada em

Exemplos e debates sobre uso de metáforas para o Design de Interação (e Interação Humano-Computador) em interfaces de computadores.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
280
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Metáforas em interfaces digitais

  1. 1. • Metáforas favorecem a familiarização. São utilizadas para facilitar a compreensão das funcionalidades em uma interface. • Vantagem: evocam significados preexistentes, por associação • Limitação: suposição de limitações e/ou possibilidades inexistentes, por associação. 
 (“sequestro de significado”) INTERFACES E METÁFORAS
  2. 2. Você é luz,
 é raio,
 estrela
 e luar.
 Manhã de sol… Wando “
  3. 3. World Wide Web
  4. 4. Surfar na internet Navegar na web Navegador Âncora
  5. 5. Cloud Computing
  6. 6. recortar, copiar, colar arrastar
  7. 7. Radio Buttons apenas um botão pode estar pressionado ao mesmo tempo
  8. 8. • Mural de recados • Lista de discussão • Sala de bate-papo
  9. 9. Texto
  10. 10. A metáfora do desktop (mesa de trabalho)
  11. 11. Ícones utilizando-se de metáforas
  12. 12. Magic Cap
  13. 13. Sistema STAR da Xerox (1981)
  14. 14. Interface do Macintosh (Apple, 1984)
  15. 15. Metáfora levada ao “pé da letra Protótipo do Bumptop
  16. 16. Vídeo: Donald Norman
  17. 17. Vídeo: Donald Norman
  18. 18. Vídeo: Donald Norman
  19. 19. The Treachery Of Images (This Is Not A Pipe) Rene Magritte (1948)
  20. 20. Uma e Três Cadeiras, de Joseph Kosuth (1965)
  21. 21. azulejos
  22. 22. Texto: Why cards are the future of Web cartas e cartões
  23. 23. Texto: Why cards are the future of Web
  24. 24. Como é “desfazer”
 fora do computador? Como representar visualmente o “desfazer”?
  25. 25. ...? ...? O disquete significa... salvar? O que significa salvar? ZIP é... comprimir? O que significa comprimir?
  26. 26. Qual o significado destes ícones?
  27. 27. Skeumorfism Flat Design
  28. 28. Skeumorfismo
  29. 29. Flat Design
  30. 30. Material Design

×