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

CapíTulo 2 Hardware
CapíTulo 2   HardwareCapíTulo 2   Hardware
CapíTulo 2 Hardwareguest45c85f
 
Evolução da Internet
Evolução da InternetEvolução da Internet
Evolução da InternetJorge Brandão
 
Periféricos - Curso de Informática
Periféricos - Curso de InformáticaPeriféricos - Curso de Informática
Periféricos - Curso de InformáticaLeandro Martins
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de softwareleopp
 
1ª aula introdução a informática
1ª aula introdução a informática1ª aula introdução a informática
1ª aula introdução a informáticasocrahn
 
Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10LucasMansueto
 
Informática Básica - Software de Apresentações - Microsoft Power Point
Informática Básica - Software de Apresentações - Microsoft Power PointInformática Básica - Software de Apresentações - Microsoft Power Point
Informática Básica - Software de Apresentações - Microsoft Power PointJoeldson Costa Damasceno
 
Informática Básica (Conceitos, Hardware e Software) - Copia.ppt
Informática Básica (Conceitos, Hardware e Software) - Copia.pptInformática Básica (Conceitos, Hardware e Software) - Copia.ppt
Informática Básica (Conceitos, Hardware e Software) - Copia.pptVagnerAraujo30
 
Aula 01 informatica basica - introducao a informatica
Aula 01   informatica basica - introducao a informaticaAula 01   informatica basica - introducao a informatica
Aula 01 informatica basica - introducao a informaticaKassiana Marques
 
Narrativas & Jogos Digitais
Narrativas & Jogos DigitaisNarrativas & Jogos Digitais
Narrativas & Jogos DigitaisJosé Bidarra
 
Pre-produção AV - Guiões Literários, Técnicos e Storyboard
Pre-produção AV - Guiões Literários, Técnicos e StoryboardPre-produção AV - Guiões Literários, Técnicos e Storyboard
Pre-produção AV - Guiões Literários, Técnicos e StoryboardPedro Almeida
 
Evolução dos computadores 2 pronto
Evolução dos computadores 2 prontoEvolução dos computadores 2 pronto
Evolução dos computadores 2 prontoFraan Bittencourt
 
Prototipagem
PrototipagemPrototipagem
Prototipagemjwainer
 
Tipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisTipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisLuciano Crecente
 

La actualidad más candente (20)

Apresentação sobre conceitos básicos do Adobe Photoshop
Apresentação sobre conceitos básicos do Adobe PhotoshopApresentação sobre conceitos básicos do Adobe Photoshop
Apresentação sobre conceitos básicos do Adobe Photoshop
 
CapíTulo 2 Hardware
CapíTulo 2   HardwareCapíTulo 2   Hardware
CapíTulo 2 Hardware
 
Evolução da Internet
Evolução da InternetEvolução da Internet
Evolução da Internet
 
Periféricos - Curso de Informática
Periféricos - Curso de InformáticaPeriféricos - Curso de Informática
Periféricos - Curso de Informática
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
1ª aula introdução a informática
1ª aula introdução a informática1ª aula introdução a informática
1ª aula introdução a informática
 
Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10
 
Informática Básica - Aula 03 - Hardware
Informática Básica - Aula 03 - HardwareInformática Básica - Aula 03 - Hardware
Informática Básica - Aula 03 - Hardware
 
Escrita guiao
Escrita guiaoEscrita guiao
Escrita guiao
 
Projeto multimedia tutorial
Projeto multimedia tutorialProjeto multimedia tutorial
Projeto multimedia tutorial
 
Informática Básica - Software de Apresentações - Microsoft Power Point
Informática Básica - Software de Apresentações - Microsoft Power PointInformática Básica - Software de Apresentações - Microsoft Power Point
Informática Básica - Software de Apresentações - Microsoft Power Point
 
Informática Básica (Conceitos, Hardware e Software) - Copia.ppt
Informática Básica (Conceitos, Hardware e Software) - Copia.pptInformática Básica (Conceitos, Hardware e Software) - Copia.ppt
Informática Básica (Conceitos, Hardware e Software) - Copia.ppt
 
Aula I - Word
Aula I - WordAula I - Word
Aula I - Word
 
Aula 01 informatica basica - introducao a informatica
Aula 01   informatica basica - introducao a informaticaAula 01   informatica basica - introducao a informatica
Aula 01 informatica basica - introducao a informatica
 
Narrativas & Jogos Digitais
Narrativas & Jogos DigitaisNarrativas & Jogos Digitais
Narrativas & Jogos Digitais
 
Pre-produção AV - Guiões Literários, Técnicos e Storyboard
Pre-produção AV - Guiões Literários, Técnicos e StoryboardPre-produção AV - Guiões Literários, Técnicos e Storyboard
Pre-produção AV - Guiões Literários, Técnicos e Storyboard
 
Informatica
InformaticaInformatica
Informatica
 
Evolução dos computadores 2 pronto
Evolução dos computadores 2 prontoEvolução dos computadores 2 pronto
Evolução dos computadores 2 pronto
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
Tipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisTipos de Sistemas Operacionais
Tipos de Sistemas Operacionais
 

Destacado (17)

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

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]Rodrigo Freese Gonzatto
 
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?Rodrigo Freese Gonzatto
 
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)Rodrigo Freese Gonzatto
 
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 gruposRodrigo Freese Gonzatto
 
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) 2019Rodrigo Freese Gonzatto
 
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...Rodrigo Freese Gonzatto
 
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 ...Rodrigo Freese Gonzatto
 
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 ...Rodrigo Freese Gonzatto
 
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...Rodrigo Freese Gonzatto
 
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 projetoRodrigo Freese Gonzatto
 
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 pintoRodrigo Freese Gonzatto
 
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...Rodrigo Freese Gonzatto
 
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 inteiroRodrigo Freese Gonzatto
 
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]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
 

Metáforas interfaces