Ícones foram criados para relacionar conceitos computacionais com objetos do dia-a-dia que as pessoas já conhecem e sabem usar. Porém, com o passar do tempo, ícones passaram a representar conceitos não necessariamente computacionais. A semiótica aplicada ao design de ícones permite estudar esses novos processos de significação e sua contribuição para a Interação Humano Computador. Veja a gravação e transcrição destes slides em
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)
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
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
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
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.
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