Í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

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

21. Metacomunicação
operacional
(como usar?)
Metacomunicação
estratégica
(por quê usar?)

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