SlideShare una empresa de Scribd logo
1 de 51
Descargar para leer sin conexión
• 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
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

Más contenido relacionado

La actualidad más candente

Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
Deisi Motter
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
clafajardo
 
Teoria Das Cores
Teoria Das CoresTeoria Das Cores
Teoria Das Cores
martha
 

La actualidad más candente (20)

A comunicação visual
A comunicação visualA comunicação visual
A comunicação visual
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 
Signos Visuais
Signos VisuaisSignos Visuais
Signos Visuais
 
Bitmap x Vetor
Bitmap x VetorBitmap x Vetor
Bitmap x Vetor
 
Identidade Visual
Identidade VisualIdentidade Visual
Identidade Visual
 
Comunicacao Visual
Comunicacao VisualComunicacao Visual
Comunicacao Visual
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
Aula 4 - Comunicação Gráfica e Design
Aula 4  - Comunicação Gráfica e DesignAula 4  - Comunicação Gráfica e Design
Aula 4 - Comunicação Gráfica e Design
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
 
Aula de revisão de word
Aula de revisão de wordAula de revisão de word
Aula de revisão de word
 
comunicação e cartaz
 comunicação e cartaz comunicação e cartaz
comunicação e cartaz
 
Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Aula 2 ppm
Aula 2 ppm Aula 2 ppm
Aula 2 ppm
 
Projecto MultiméDia
Projecto MultiméDiaProjecto MultiméDia
Projecto MultiméDia
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
 
Aula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e DesignAula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e Design
 
Teoria Das Cores
Teoria Das CoresTeoria Das Cores
Teoria Das Cores
 

Destacado

Metáforas de interface
Metáforas de interfaceMetáforas de interface
Metáforas de interface
NiurcaC
 
Design do interface
Design do interfaceDesign do interface
Design do interface
beatrizantos
 
Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuário
irlss
 
Módulo 4 design multimédia
Módulo 4   design multimédiaMódulo 4   design multimédia
Módulo 4 design multimédia
beatrizantos
 

Destacado (16)

Metáforas de interface
Metáforas de interfaceMetáforas de interface
Metáforas de interface
 
Design do interface
Design do interfaceDesign do interface
Design do interface
 
Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuário
 
Gabriel Quelhas
Gabriel QuelhasGabriel Quelhas
Gabriel Quelhas
 
Ricardo Lopes
Ricardo LopesRicardo Lopes
Ricardo Lopes
 
Eliana Reis
Eliana ReisEliana Reis
Eliana Reis
 
Ficções de Design, Design Crítico e Design Livre. WTF?
Ficções de Design, Design Crítico e Design Livre. WTF?Ficções de Design, Design Crítico e Design Livre. WTF?
Ficções de Design, Design Crítico e Design Livre. WTF?
 
Módulo 4 design multimédia
Módulo 4   design multimédiaMódulo 4   design multimédia
Módulo 4 design multimédia
 
Trabalho metáfora
Trabalho metáforaTrabalho metáfora
Trabalho metáfora
 
Affordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitaisAffordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitais
 
Aula: Tipos de Interface
Aula: Tipos de InterfaceAula: Tipos de Interface
Aula: Tipos de Interface
 
Cultura da Catedral - Arte Mudejar
Cultura da Catedral - Arte MudejarCultura da Catedral - Arte Mudejar
Cultura da Catedral - Arte Mudejar
 
Metáforas visuais
Metáforas visuaisMetáforas visuais
Metáforas visuais
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da Interface
 
Arte Gótica
Arte GóticaArte Gótica
Arte Gótica
 
Metafora Visual
Metafora VisualMetafora Visual
Metafora Visual
 

Más de Rodrigo Freese Gonzatto

Más de Rodrigo Freese Gonzatto (20)

Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
 
Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?
 
Fluxogramas
FluxogramasFluxogramas
Fluxogramas
 
Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?
 
Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)
 
Brainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em gruposBrainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em grupos
 
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
 
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
 
Diagrama de afinidades
Diagrama de afinidadesDiagrama de afinidades
Diagrama de afinidades
 
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
 
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
 
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
 
Design de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoDesign de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projeto
 
Interação, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoInteração, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pinto
 
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
 
Projetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroProjetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiro
 
Projetando interações com vídeo
Projetando interações com vídeoProjetando interações com vídeo
Projetando interações com vídeo
 
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
 
Música e Tecnologia
Música e TecnologiaMúsica e Tecnologia
Música e Tecnologia
 
Comida e Tecnologia
Comida e TecnologiaComida e Tecnologia
Comida e Tecnologia
 

Último

Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
Natalia Granato
 

Último (6)

Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 

Metáforas em interfaces digitais