Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

2.560 Aufrufe

Veröffentlicht am

Í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

Veröffentlicht in: Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

  1. 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. 2. Ícone mais antigo que sobreviveu à iconoclastia da Igreja Ortodoxa: Cristo Pantocrátor (Século VI)
  3. 3. O ícone provavelmente representaria a posição dual de Jesus Cristo como homem e como Deus
  4. 4. A contradição entre representação e realidade deu origem ao movimento iconoclasta Bizantino (séc. VIII)
  5. 5. A contradição entre representação e realidade se intensificou no século XX (René Magritte, 1928)
  6. 6. A representação se tornou tão oposta à realidade que foi necessário construir máquinas semióticas (1939)
  7. 7. Representações computacionais eram abstratas demais para quem não era matemático ou engenheiro (1964)
  8. 8. Ícones em computadores poderiam ser abstratos e concretos ao mesmo tempo (David Smith, 1975)
  9. 9. Esboços da metáfora desktop, que aproveitava a experiência concreta do escritório (Tim Mott, 1973)
  10. 10. Primeiros ícones aplicados a interfaces gráficas no Xerox Alto baseados na metáfora desktop (1974)
  11. 11. Primeira família de ícones do Xerox Star testada com usuários (1981)
  12. 12. Ícones “icônicos" do Macintosh que concretizavam o conceito de Computação Pessoal (Susan Kare, 1984)
  13. 13. iPhone: o primeiro produto feito de ícones (2007)
  14. 14. iPhone X: animojis transformam expressões faciais em ícones em tempo real (2017)
  15. 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. 16. Anatomia do ícone: partes constitutivas Borda Rótulo Fundo Cor predominante Iluminação Ação Figura
  17. 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. 18. Significado do ícone: radares militares, roubo, normalização da vigilância, pais preocupados, etc.
  19. 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. 20. Metacomunicação segundo a Engenharia Semiótica
  21. 21. Metacomunicação operacional (como usar?) Metacomunicação estratégica (por quê usar?)
  22. 22. Designer como um tradutor da linguagem de programação para a linguagem de interação
  23. 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. 24. Padrões de interação (patterns) são as unidades básicas da linguagem de interação.
  25. 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. 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. 27. Ícones padrão da iOS Toolbar e Navigation Bar possuem verbos sem predicados, pois estão implícitos.
  28. 28. Ícones padrão da iOS Tab Bar possuem o mesmo verbo implícito (ver) com diversos predicados.
  29. 29. Os predicados dos ícones do Home Screen do iOS possuem muitos adjetivos para qualificar a experiência.
  30. 30. Uma linguagem de ícones deve utilizar verbos, substantivos e adjetivos de maneira consistente (Spotify).
  31. 31. Porém, uma linguagem de ícones deve apresentar também variação formal (@MegDraws).
  32. 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. 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. 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. 35. Interrupção da semiose (breakdown): não há como encomendar livros pelo Fotos estando no Brasil
  36. 36. Expressões de comunicabilidade para distinguir diferentes tipos de breakdowns (De Souza et al, 1999)
  37. 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. 38. Na minha visão, a semiose é, na maior parte do tempo, interrompida pela falta de interesse ou atenção.
  39. 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. 40. Emojis são os ícones mais populares do momento porque não representam um conceito computacional.
  41. 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. 42. Relações entre o representamen e ele mesmo: qualidade, particularidade e lei. Sinsigno Qualisigno Legisigno
  43. 43. Relações entre representamen e objeto: similaridade, causalidade, arbitrariedade (Nadin, 2017).
  44. 44. Relações entre representamen e interpretante: certeza, fato e possibilidade (Van Amstel, 2005). Rema Dicente Argumento
  45. 45. Representamens podem estar mais próximos do objeto (reality) ou do interpretante (meaning) (McCloud, 1993)
  46. 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. 47. 1. Definir parâmetros de representação antes de pensar no representamen (Kare, 1982).
  48. 48. 2. Gerar alternativas para encontrar representamens potenciais do objeto (Bigelajzen, 2008).
  49. 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. 50. A melhor maneira de projetar um novo ícone, muitas vezes é não fazê-lo.
  51. 51. Se existe um ícone que atingiu o status de símbolo para aquele objeto, é melhor utilizá-lo do que criar um novo.
  52. 52. Bibliotecas de ícones • iconfinder.com • icons8.com • flaticon.com • nounproject.com
  53. 53. Porém, a contradição entre representação e realidade corrói até os símbolos mais convencionais.
  54. 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. 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. 56. Obrigado! Frederick van Amstel @usabilidoido Escola de Arquitetura e Design - PUCPR www.usabilidoido.com.br

×