SlideShare uma empresa Scribd logo
Design de Ícones e
Semiótica da Interação
Humano Computador
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br
Ícone mais antigo que sobreviveu à iconoclastia da
Igreja Ortodoxa: Cristo Pantocrátor (Século VI)
O ícone provavelmente representaria a posição dual de
Jesus Cristo como homem e como Deus
A contradição entre representação e realidade deu
origem ao movimento iconoclasta Bizantino (séc. VIII)
A contradição entre representação e realidade se
intensificou no século XX (René Magritte, 1928)
A representação se tornou tão oposta à realidade que
foi necessário construir máquinas semióticas (1939)
Representações computacionais eram abstratas demais
para quem não era matemático ou engenheiro (1964)
Ícones em computadores poderiam ser abstratos e
concretos ao mesmo tempo (David Smith, 1975)
Esboços da metáfora desktop, que aproveitava a
experiência concreta do escritório (Tim Mott, 1973)
Primeiros ícones aplicados a interfaces gráficas no
Xerox Alto baseados na metáfora desktop (1974)
Primeira família de ícones do Xerox Star testada com
usuários (1981)
Ícones “icônicos" do Macintosh que concretizavam o
conceito de Computação Pessoal (Susan Kare, 1984)
iPhone: o primeiro produto feito de ícones (2007)
iPhone X: animojis transformam expressões faciais em
ícones em tempo real (2017)
Porque ícones são relevantes na
Interação Humano Computador
• Relacionam conceitos abstratos a experiências
concretas
• Mnemônicos (fácil memorizar e reconhecer)
• Localização rápida na tela
• Economia de espaço na tela
• Internacionalização
• Afeto emocional
Anatomia do ícone: partes constitutivas
Borda
Rótulo
Fundo
Cor predominante
Iluminação
Ação
Figura
Processo de memorização do ícone
Silhueta da 

figura e cor
Figura e 

fundo
Traço
distintivo
Imagem
complexa
Processo de reconhecimento do ícone
Significado do ícone: radares militares, roubo,
normalização da vigilância, pais preocupados, etc.
Engenharia Semiótica
• Teoria brasileira de
Interação Humano
Computador
• O computador como
uma máquina capaz de
processar signos
• A interface como um
processo de
comunicação baseado
em signos
Metacomunicação segundo a Engenharia Semiótica
Metacomunicação
operacional
(como usar?)
Metacomunicação
estratégica
(por quê usar?)
Designer como um tradutor da linguagem de
programação para a linguagem de interação
Diferenças entre linguagens
Programação
• Instruções para o
computador
• Código definido por
poucos
• Formal
• Expressa conceitos
computacionais
Interação
• Instruções para o
usuário
• Código definido por
muitos
• Informal
• Expressa diversos tipos
de conceitos
Padrões de interação (patterns) são as unidades básicas
da linguagem de interação.
Ícones são interpretados como parte
de uma linguagem de interação.
Ícones não são meras palavras.
Ícones são frases.
Estrutura frasal de um ícone: sujeito (usuário) verbo
(ação possível) advérbio (qualificativo da ação)
predicado (objeto) adjetivo (qualificativo do objeto).
Firefox Crystal
Everaldo Coelho
Visual Interactive Syntax Learning
Ícones padrão da iOS Toolbar e Navigation Bar possuem
verbos sem predicados, pois estão implícitos.
Ícones padrão da iOS Tab Bar possuem o mesmo verbo
implícito (ver) com diversos predicados.
Os predicados dos ícones do Home Screen do iOS
possuem muitos adjetivos para qualificar a experiência.
Uma linguagem de ícones deve utilizar verbos,
substantivos e adjetivos de maneira consistente
(Spotify).
Porém, uma linguagem de ícones deve apresentar
também variação formal (@MegDraws).
O que é interface?
Forma que possibilita Informação
Estrutura que possibilita Interação
Função que possibilita Experiência
Sistemas
Pessoas
Interface é uma área cinza com diversas
possibilidades de comportamento.
O signo triádico de Peirce aplicado ao ícone de uma
pasta com fotos.
Objeto:
Dados no disco
rígido
Representamen:
Pasta na janela do
Finder
Interpretante:
meu álbum de fotos
Semiose ilimitada: um signo leva à outro signo.
Interpretante:
Ideia de imprimir
o álbum
Representamen:
Meu álbum virtual
de fotos
Objeto: Meu
álbum
impresso
Objeto:
Álbum
impresso de
presente
Interrupção da semiose (breakdown): não há como
encomendar livros pelo Fotos estando no Brasil
Expressões de comunicabilidade para distinguir
diferentes tipos de breakdowns (De Souza et al, 1999)
Interrupções na semiose seriam causadas por uma
mensagem com ruídos ou desvios de interpretação.
designer
usuário
Onde estou? Obrigado, mas não
quero deletar o DVD.
Na minha visão, a semiose é, na maior parte do tempo,
interrompida pela falta de interesse ou atenção.
O que mais interessa aos usuários não é como o
ícone foi desenhado (sintática), nem o que ele
representa computacionalmente (semântica),
mas o que é possível fazer com ele (pragmática).
Emojis são os ícones mais populares do momento
porque não representam um conceito computacional.
Ícones representam cada vez mais conceitos não-
computacionais. Isso torna ícones cada vez mais
sujeitos às contradições da sociedade, em
particular, entre representação e realidade. Porque
mulheres não deveriam ser representadas se elas
figuram na lista de contatos?
iOS 10 iOS 11
Relações entre o representamen e ele mesmo:
qualidade, particularidade e lei.
Sinsigno
Qualisigno
Legisigno
Relações entre representamen e objeto:
similaridade, causalidade, arbitrariedade (Nadin, 2017).
Relações entre representamen e interpretante:
certeza, fato e possibilidade (Van Amstel, 2005).
Rema
Dicente
Argumento
Representamens podem estar mais próximos do objeto
(reality) ou do interpretante (meaning) (McCloud, 1993)
O representamen não determina
o interpretante do signo, pois o
objeto tem caráter dinâmico.
Ora o signo representa uma
coisa, ora outra.
1. Definir parâmetros de representação antes de pensar
no representamen (Kare, 1982).
2. Gerar alternativas para encontrar representamens
potenciais do objeto (Bigelajzen, 2008).
3. Testar com usuários para verificar a relação entre
representamen e interpretante.
70% de concordância ou mais 50% de concordância
Recursivas
Hotsites
Mercado
Arquitetura da Informação
Usabilidade
Links
Programação
Consultoria
A melhor maneira de projetar
um novo ícone, muitas vezes é
não fazê-lo.
Se existe um ícone que atingiu o
status de símbolo para aquele
objeto, é melhor utilizá-lo do que
criar um novo.
Bibliotecas de ícones
• iconfinder.com
• icons8.com
• flaticon.com
• nounproject.com
Porém, a contradição entre representação e realidade
corrói até os símbolos mais convencionais.
Exercício 1
• Conversar todo mundo no mesmo chat sobre o
uso de ícones em aplicativos
• Só é permitido utilizar emojis para se
expressar
• Discutir as facilidades e dificuldades de
comunicação
Exercício 2
• Jogar uma partida do
jogo de tabuleiro Concept
• Cronometrar a rodada
para no máximo 5
minutos
• Discutir o processo de
decomposição de
conceitos através de
analogias com ícones
Obrigado!
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br

Mais conteúdo relacionado

Semelhante a Design de Ícones e Semiótica da Interação Humano Computador

Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
Luiz Agner
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgos
Luara Schamó
 
Facetas do Design de Interação
Facetas do Design de InteraçãoFacetas do Design de Interação
Facetas do Design de Interação
Rodrigo Freese Gonzatto
 
O computador como interface humano-humana
O computador como interface humano-humanaO computador como interface humano-humana
O computador como interface humano-humana
UTFPR
 
Interações opressivas e libertárias
Interações opressivas e libertáriasInterações opressivas e libertárias
Interações opressivas e libertárias
UTFPR
 
Designing for Social Interactions
Designing for Social InteractionsDesigning for Social Interactions
Designing for Social Interactions
Carlos Kramer
 
A interatividade nos livros infantis em tablets e outros aspectos
A interatividade nos livros infantis em tablets e outros aspectosA interatividade nos livros infantis em tablets e outros aspectos
A interatividade nos livros infantis em tablets e outros aspectos
Rodrigo Cunha
 
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use QualitiesPatterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Rodrigo Freese Gonzatto
 
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRiosCap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
Marcelo Bitencourt
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2
Gustavo Fischer
 
Arquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do UsuárioArquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do Usuário
Thais Campas
 
Engenharia semiotica
Engenharia semioticaEngenharia semiotica
Engenharia semiotica
Denilson Sousa
 
Perspectivas em design de interacao
Perspectivas em design de interacaoPerspectivas em design de interacao
Perspectivas em design de interacao
Robson Santos
 
Artigo realidade aumentada
Artigo realidade aumentadaArtigo realidade aumentada
Artigo realidade aumentada
Vinicius Dos Santos
 
Design de interação ecológico
Design de interação ecológicoDesign de interação ecológico
Design de interação ecológico
UTFPR
 
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbotsKelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
UXPA-Rio
 
Relacao design individuos e artefatos
Relacao design individuos e artefatosRelacao design individuos e artefatos
Relacao design individuos e artefatos
Marco Ogê Muniz
 
Semiótica
SemióticaSemiótica
Semiótica
Daniela Macêdo
 
Estética da Interação e Opressão Mediada pelo Computador
Estética da Interação e Opressão Mediada pelo ComputadorEstética da Interação e Opressão Mediada pelo Computador
Estética da Interação e Opressão Mediada pelo Computador
UTFPR
 
1 conceitos, aplicações e recursos multimídia
1 conceitos, aplicações e recursos multimídia1 conceitos, aplicações e recursos multimídia
1 conceitos, aplicações e recursos multimídia
Tatiana Fernández
 

Semelhante a Design de Ícones e Semiótica da Interação Humano Computador (20)

Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgos
 
Facetas do Design de Interação
Facetas do Design de InteraçãoFacetas do Design de Interação
Facetas do Design de Interação
 
O computador como interface humano-humana
O computador como interface humano-humanaO computador como interface humano-humana
O computador como interface humano-humana
 
Interações opressivas e libertárias
Interações opressivas e libertáriasInterações opressivas e libertárias
Interações opressivas e libertárias
 
Designing for Social Interactions
Designing for Social InteractionsDesigning for Social Interactions
Designing for Social Interactions
 
A interatividade nos livros infantis em tablets e outros aspectos
A interatividade nos livros infantis em tablets e outros aspectosA interatividade nos livros infantis em tablets e outros aspectos
A interatividade nos livros infantis em tablets e outros aspectos
 
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use QualitiesPatterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
 
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRiosCap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
Cap 5 Compreendendo Como As Interfaces Afetam Os UsuáRios
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2
 
Arquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do UsuárioArquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do Usuário
 
Engenharia semiotica
Engenharia semioticaEngenharia semiotica
Engenharia semiotica
 
Perspectivas em design de interacao
Perspectivas em design de interacaoPerspectivas em design de interacao
Perspectivas em design de interacao
 
Artigo realidade aumentada
Artigo realidade aumentadaArtigo realidade aumentada
Artigo realidade aumentada
 
Design de interação ecológico
Design de interação ecológicoDesign de interação ecológico
Design de interação ecológico
 
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbotsKelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
Kelly Shigeno | Conversando com ninguém – uma reflexão sobre os chatbots
 
Relacao design individuos e artefatos
Relacao design individuos e artefatosRelacao design individuos e artefatos
Relacao design individuos e artefatos
 
Semiótica
SemióticaSemiótica
Semiótica
 
Estética da Interação e Opressão Mediada pelo Computador
Estética da Interação e Opressão Mediada pelo ComputadorEstética da Interação e Opressão Mediada pelo Computador
Estética da Interação e Opressão Mediada pelo Computador
 
1 conceitos, aplicações e recursos multimídia
1 conceitos, aplicações e recursos multimídia1 conceitos, aplicações e recursos multimídia
1 conceitos, aplicações e recursos multimídia
 

Mais de UTFPR

Cascading oppression in design
Cascading oppression in designCascading oppression in design
Cascading oppression in design
UTFPR
 
Inteligência artificial e o trabalho de design
Inteligência artificial e o trabalho de designInteligência artificial e o trabalho de design
Inteligência artificial e o trabalho de design
UTFPR
 
Expanding the design object
Expanding the design objectExpanding the design object
Expanding the design object
UTFPR
 
Creating possibilities for service design innovation
Creating possibilities for service design innovationCreating possibilities for service design innovation
Creating possibilities for service design innovation
UTFPR
 
Contradiction-driven design
Contradiction-driven designContradiction-driven design
Contradiction-driven design
UTFPR
 
Design expansivo: pensar o possível para fazer o impossível
Design expansivo: pensar o possível para fazer o impossívelDesign expansivo: pensar o possível para fazer o impossível
Design expansivo: pensar o possível para fazer o impossível
UTFPR
 
Metacriatividade: criatividade sobre criatividade
Metacriatividade: criatividade sobre criatividadeMetacriatividade: criatividade sobre criatividade
Metacriatividade: criatividade sobre criatividade
UTFPR
 
Gestão do conhecimento na pesquisa de experiências
Gestão do conhecimento na pesquisa de experiênciasGestão do conhecimento na pesquisa de experiências
Gestão do conhecimento na pesquisa de experiências
UTFPR
 
Jogos Surrealistas e Inteligência Artificial
Jogos Surrealistas e Inteligência ArtificialJogos Surrealistas e Inteligência Artificial
Jogos Surrealistas e Inteligência Artificial
UTFPR
 
El hacer como quehacer: notas para un diseño libre
El hacer como quehacer: notas para un diseño libreEl hacer como quehacer: notas para un diseño libre
El hacer como quehacer: notas para un diseño libre
UTFPR
 
Expressando a posicionalidade do cria-corpo
Expressando a posicionalidade do cria-corpoExpressando a posicionalidade do cria-corpo
Expressando a posicionalidade do cria-corpo
UTFPR
 
Pensamento visual expansivo
Pensamento visual expansivoPensamento visual expansivo
Pensamento visual expansivo
UTFPR
 
O segredo da criatividade no design
O segredo da criatividade no designO segredo da criatividade no design
O segredo da criatividade no design
UTFPR
 
Por que pesquisar e não somente fazer design?
Por que pesquisar e não somente fazer design?Por que pesquisar e não somente fazer design?
Por que pesquisar e não somente fazer design?
UTFPR
 
Making work visible in the theater of service design
Making work visible in the theater of service designMaking work visible in the theater of service design
Making work visible in the theater of service design
UTFPR
 
Can designers change systemic oppression?
Can designers change systemic oppression?Can designers change systemic oppression?
Can designers change systemic oppression?
UTFPR
 
Design contra opressão
Design contra opressãoDesign contra opressão
Design contra opressão
UTFPR
 
O papel da teoria na pesquisa de experiências
O papel da teoria na pesquisa de experiênciasO papel da teoria na pesquisa de experiências
O papel da teoria na pesquisa de experiências
UTFPR
 
Diseño y la colonialidad del hacer
Diseño y la colonialidad del hacerDiseño y la colonialidad del hacer
Diseño y la colonialidad del hacer
UTFPR
 
Problematizando a experiência do usuário (ExU)
Problematizando a experiência do usuário (ExU)Problematizando a experiência do usuário (ExU)
Problematizando a experiência do usuário (ExU)
UTFPR
 

Mais de UTFPR (20)

Cascading oppression in design
Cascading oppression in designCascading oppression in design
Cascading oppression in design
 
Inteligência artificial e o trabalho de design
Inteligência artificial e o trabalho de designInteligência artificial e o trabalho de design
Inteligência artificial e o trabalho de design
 
Expanding the design object
Expanding the design objectExpanding the design object
Expanding the design object
 
Creating possibilities for service design innovation
Creating possibilities for service design innovationCreating possibilities for service design innovation
Creating possibilities for service design innovation
 
Contradiction-driven design
Contradiction-driven designContradiction-driven design
Contradiction-driven design
 
Design expansivo: pensar o possível para fazer o impossível
Design expansivo: pensar o possível para fazer o impossívelDesign expansivo: pensar o possível para fazer o impossível
Design expansivo: pensar o possível para fazer o impossível
 
Metacriatividade: criatividade sobre criatividade
Metacriatividade: criatividade sobre criatividadeMetacriatividade: criatividade sobre criatividade
Metacriatividade: criatividade sobre criatividade
 
Gestão do conhecimento na pesquisa de experiências
Gestão do conhecimento na pesquisa de experiênciasGestão do conhecimento na pesquisa de experiências
Gestão do conhecimento na pesquisa de experiências
 
Jogos Surrealistas e Inteligência Artificial
Jogos Surrealistas e Inteligência ArtificialJogos Surrealistas e Inteligência Artificial
Jogos Surrealistas e Inteligência Artificial
 
El hacer como quehacer: notas para un diseño libre
El hacer como quehacer: notas para un diseño libreEl hacer como quehacer: notas para un diseño libre
El hacer como quehacer: notas para un diseño libre
 
Expressando a posicionalidade do cria-corpo
Expressando a posicionalidade do cria-corpoExpressando a posicionalidade do cria-corpo
Expressando a posicionalidade do cria-corpo
 
Pensamento visual expansivo
Pensamento visual expansivoPensamento visual expansivo
Pensamento visual expansivo
 
O segredo da criatividade no design
O segredo da criatividade no designO segredo da criatividade no design
O segredo da criatividade no design
 
Por que pesquisar e não somente fazer design?
Por que pesquisar e não somente fazer design?Por que pesquisar e não somente fazer design?
Por que pesquisar e não somente fazer design?
 
Making work visible in the theater of service design
Making work visible in the theater of service designMaking work visible in the theater of service design
Making work visible in the theater of service design
 
Can designers change systemic oppression?
Can designers change systemic oppression?Can designers change systemic oppression?
Can designers change systemic oppression?
 
Design contra opressão
Design contra opressãoDesign contra opressão
Design contra opressão
 
O papel da teoria na pesquisa de experiências
O papel da teoria na pesquisa de experiênciasO papel da teoria na pesquisa de experiências
O papel da teoria na pesquisa de experiências
 
Diseño y la colonialidad del hacer
Diseño y la colonialidad del hacerDiseño y la colonialidad del hacer
Diseño y la colonialidad del hacer
 
Problematizando a experiência do usuário (ExU)
Problematizando a experiência do usuário (ExU)Problematizando a experiência do usuário (ExU)
Problematizando a experiência do usuário (ExU)
 

Design de Ícones e Semiótica da Interação Humano Computador

  • 1. Design de Ícones e Semiótica da Interação Humano Computador Frederick van Amstel @usabilidoido Escola de Arquitetura e Design - PUCPR www.usabilidoido.com.br
  • 2. Ícone mais antigo que sobreviveu à iconoclastia da Igreja Ortodoxa: Cristo Pantocrátor (Século VI)
  • 3. O ícone provavelmente representaria a posição dual de Jesus Cristo como homem e como Deus
  • 4. A contradição entre representação e realidade deu origem ao movimento iconoclasta Bizantino (séc. VIII)
  • 5. A contradição entre representação e realidade se intensificou no século XX (René Magritte, 1928)
  • 6. A representação se tornou tão oposta à realidade que foi necessário construir máquinas semióticas (1939)
  • 7. Representações computacionais eram abstratas demais para quem não era matemático ou engenheiro (1964)
  • 8. Ícones em computadores poderiam ser abstratos e concretos ao mesmo tempo (David Smith, 1975)
  • 9. Esboços da metáfora desktop, que aproveitava a experiência concreta do escritório (Tim Mott, 1973)
  • 10. Primeiros ícones aplicados a interfaces gráficas no Xerox Alto baseados na metáfora desktop (1974)
  • 11. Primeira família de ícones do Xerox Star testada com usuários (1981)
  • 12. Ícones “icônicos" do Macintosh que concretizavam o conceito de Computação Pessoal (Susan Kare, 1984)
  • 13. iPhone: o primeiro produto feito de ícones (2007)
  • 14. iPhone X: animojis transformam expressões faciais em ícones em tempo real (2017)
  • 15. Porque ícones são relevantes na Interação Humano Computador • Relacionam conceitos abstratos a experiências concretas • Mnemônicos (fácil memorizar e reconhecer) • Localização rápida na tela • Economia de espaço na tela • Internacionalização • Afeto emocional
  • 16. Anatomia do ícone: partes constitutivas Borda Rótulo Fundo Cor predominante Iluminação Ação Figura
  • 17. Processo de memorização do ícone Silhueta da 
 figura e cor Figura e 
 fundo Traço distintivo Imagem complexa Processo de reconhecimento do ícone
  • 18. Significado do ícone: radares militares, roubo, normalização da vigilância, pais preocupados, etc.
  • 19. Engenharia Semiótica • Teoria brasileira de Interação Humano Computador • O computador como uma máquina capaz de processar signos • A interface como um processo de comunicação baseado em signos
  • 20. Metacomunicação segundo a Engenharia Semiótica
  • 22. Designer como um tradutor da linguagem de programação para a linguagem de interação
  • 23. Diferenças entre linguagens Programação • Instruções para o computador • Código definido por poucos • Formal • Expressa conceitos computacionais Interação • Instruções para o usuário • Código definido por muitos • Informal • Expressa diversos tipos de conceitos
  • 24. Padrões de interação (patterns) são as unidades básicas da linguagem de interação.
  • 25. Ícones são interpretados como parte de uma linguagem de interação. Ícones não são meras palavras. Ícones são frases.
  • 26. Estrutura frasal de um ícone: sujeito (usuário) verbo (ação possível) advérbio (qualificativo da ação) predicado (objeto) adjetivo (qualificativo do objeto). Firefox Crystal Everaldo Coelho Visual Interactive Syntax Learning
  • 27. Ícones padrão da iOS Toolbar e Navigation Bar possuem verbos sem predicados, pois estão implícitos.
  • 28. Ícones padrão da iOS Tab Bar possuem o mesmo verbo implícito (ver) com diversos predicados.
  • 29. Os predicados dos ícones do Home Screen do iOS possuem muitos adjetivos para qualificar a experiência.
  • 30. Uma linguagem de ícones deve utilizar verbos, substantivos e adjetivos de maneira consistente (Spotify).
  • 31. Porém, uma linguagem de ícones deve apresentar também variação formal (@MegDraws).
  • 32. O que é interface? Forma que possibilita Informação Estrutura que possibilita Interação Função que possibilita Experiência Sistemas Pessoas Interface é uma área cinza com diversas possibilidades de comportamento.
  • 33. O signo triádico de Peirce aplicado ao ícone de uma pasta com fotos. Objeto: Dados no disco rígido Representamen: Pasta na janela do Finder Interpretante: meu álbum de fotos
  • 34. Semiose ilimitada: um signo leva à outro signo. Interpretante: Ideia de imprimir o álbum Representamen: Meu álbum virtual de fotos Objeto: Meu álbum impresso Objeto: Álbum impresso de presente
  • 35. Interrupção da semiose (breakdown): não há como encomendar livros pelo Fotos estando no Brasil
  • 36. Expressões de comunicabilidade para distinguir diferentes tipos de breakdowns (De Souza et al, 1999)
  • 37. Interrupções na semiose seriam causadas por uma mensagem com ruídos ou desvios de interpretação. designer usuário Onde estou? Obrigado, mas não quero deletar o DVD.
  • 38. Na minha visão, a semiose é, na maior parte do tempo, interrompida pela falta de interesse ou atenção.
  • 39. O que mais interessa aos usuários não é como o ícone foi desenhado (sintática), nem o que ele representa computacionalmente (semântica), mas o que é possível fazer com ele (pragmática).
  • 40. Emojis são os ícones mais populares do momento porque não representam um conceito computacional.
  • 41. Ícones representam cada vez mais conceitos não- computacionais. Isso torna ícones cada vez mais sujeitos às contradições da sociedade, em particular, entre representação e realidade. Porque mulheres não deveriam ser representadas se elas figuram na lista de contatos? iOS 10 iOS 11
  • 42. Relações entre o representamen e ele mesmo: qualidade, particularidade e lei. Sinsigno Qualisigno Legisigno
  • 43. Relações entre representamen e objeto: similaridade, causalidade, arbitrariedade (Nadin, 2017).
  • 44. Relações entre representamen e interpretante: certeza, fato e possibilidade (Van Amstel, 2005). Rema Dicente Argumento
  • 45. Representamens podem estar mais próximos do objeto (reality) ou do interpretante (meaning) (McCloud, 1993)
  • 46. O representamen não determina o interpretante do signo, pois o objeto tem caráter dinâmico. Ora o signo representa uma coisa, ora outra.
  • 47. 1. Definir parâmetros de representação antes de pensar no representamen (Kare, 1982).
  • 48. 2. Gerar alternativas para encontrar representamens potenciais do objeto (Bigelajzen, 2008).
  • 49. 3. Testar com usuários para verificar a relação entre representamen e interpretante. 70% de concordância ou mais 50% de concordância Recursivas Hotsites Mercado Arquitetura da Informação Usabilidade Links Programação Consultoria
  • 50. A melhor maneira de projetar um novo ícone, muitas vezes é não fazê-lo.
  • 51. Se existe um ícone que atingiu o status de símbolo para aquele objeto, é melhor utilizá-lo do que criar um novo.
  • 52. Bibliotecas de ícones • iconfinder.com • icons8.com • flaticon.com • nounproject.com
  • 53. Porém, a contradição entre representação e realidade corrói até os símbolos mais convencionais.
  • 54. Exercício 1 • Conversar todo mundo no mesmo chat sobre o uso de ícones em aplicativos • Só é permitido utilizar emojis para se expressar • Discutir as facilidades e dificuldades de comunicação
  • 55. Exercício 2 • Jogar uma partida do jogo de tabuleiro Concept • Cronometrar a rodada para no máximo 5 minutos • Discutir o processo de decomposição de conceitos através de analogias com ícones
  • 56. Obrigado! Frederick van Amstel @usabilidoido Escola de Arquitetura e Design - PUCPR www.usabilidoido.com.br