Apresentação sobre Modelo de Componentes de Interface Humano Computador, desenvolvida por alunos da Universidade Federal de Sergipe para a disciplina de Interface Humano Computador. Este trabalho tem o intuito de apresentar os modelos de componentes mais comuns, mostrando o seu propósito, possibilitam a criação de aplicações mais usáveis.

1. Universidade Federal de Sergipe
Departamento de Computação
Interface Humano Computador
Modelo de Componentes de IHC
Diego Martins, Diego Meneses, Felipe Vieira, Jefferson Santos

2. Modelo
●
Cópia de algo em tamanho bem menor que o original;
●
Um tipo ou design particular de algo;
●
Representação simplificada de algo do mundo real.

3. Componente
O que compõe ou entra na composição de alguma coisa.

4. Comunicar-se é difícil!

5. Comunicação – Modelo OSI
Imagem retirada de http://www.infocellar.com/networks/images/OSI-1.png

6. Comunicação – Funções da Linguagem
Imagem retirada de http://acd.ufrj.br/ead/tema01/lingfuncoes.html

7. O real não existe!

8. Não há nada novo!

9. Vídeo – Waking Life: Language
Vídeo retirado de http://www.youtube.com/watch?v=LXHy28mQO_s

10. Representações – mais de 6 bilhões
Imagem retirada de http://blog.rodrigoallemand.com.br/wp-content/uploads/2009/02/mapa_mundi_politico.jpg

11. Modelo de Componentes de IHC

12. Entendimentos da IHC
●
Subsistema do Software Interativo
●
Estrutura
●
Processos
Créditos: Anderson Luiz Mendes Matos, 2009. Título: Modelo MVC.

13. Entendimentos da IHC
●
Linguagem
●
Sistemas de sinais
●
Estrutura léxical e sintática
Interface
Sistema Informatizado Usuário

14. Camadas de Abstração
●
Nível de Objetivos
●
Nível Pragmático
●
Nível Semântico
●
Nível Sintático
●
Nível Lexical
●
Nível de Primitivas
●
Nível Físico

15. Os Componentes das IHC
O modelo representa uma maneira de organizar a
estrutura dessas interfaces e os conhecimentos para
selecionar, configurar e avaliar os elementos.

16. Classes de Elementos
●
Diálogos (Sintaxe Sequencial)
●
Objetos de Interação (Sintaxe Concorrente)
●
Sistemas de Significados (Léxico)
●
Primitivas

17. Diálogos
●
Ações
●
Ação de entrada de dados ou comandos
●
Tarefas
●
Tarefas de diagnóstico
●
Tarefas corretivas
●
Tarefas destrutivas

18. Diálogos
●
Estilos de Diálogos
●
Diálogo por menu
●
Diálogo por linguagem de comando
●
Diálogo por preenchimento de formulário
●
Diálogo por manipulação direta
●
Estruturas de interações
●
Estruturas sequenciais
●
Estruturas paralelas
●
Estruturas repetitivas

19. Objetos de Interação
• Objetos de Interface que interagem com o usuário.
• Podem ser baseados em metáforas do mundo real.
• Padronizam elementos lexicos e sintáxicos da interface.
• Demanda de atenção.
• Containers.
• Noção de Parte
• Primeiro Plano
• Plano de Fundo
• Bordas

20. Objetos de Interação
• Classificação
• Paineis de Controle
• Controles Complexos
• Grupos de Controle
• Controles Simples
• Campos de Entrada
• Mostrador Simples
• Mostradores Estruturados
• Orientações

21. Objetos de Interação – Painés de Controle
• Objetos compostos.
• Proporcionam cenários adequados
• Divide-se em:
• Janela
• Caixa de Diálogo
• Caixa de Ação/Tarefa
• Tela de Consulta/Formulário
• Caixa de Mensagem

22. Objetos de Interação – Painés de Controle
- Janelas

23. Objetos de Interação – Painés de Controle
- Caixa de Diálogo
Não Modal Modal

24. Objetos de Interação – Painés de Controle
- Caixa de Ação/Tarefa

25. Objetos de Interação – Painés de Controle
- Tela de Consulta e Formulário

26. Objetos de Interação – Painés de Controle
- Caixa de Mensagem

27. Objetos de Interação – Controles Complexos
• Objetos com estrutura composta.
• Navegação interna
• Seleção de outros controles e comandos
• Divide-se em:
• Painel de Menu
• Barra de Menu
• Página de Menu
• Hipertexto
• Barra de Ferramentas
• Lista de Seleção
• Caixa de Combinação

28. Objetos de Interação – Controles Complexos
- Painel de Menu
PopUp

29. Objetos de Interação – Controles Complexos
- Barra de Menu

30. Objetos de Interação – Controles Complexos
- Página de Menu

31. Objetos de Interação – Controles Complexos
- Hipertexto

32. Objetos de Interação – Controles Complexos
- Barra de Ferramentas

33. Objetos de Interação – Controles Complexos
- Lista de Seleção

34. Objetos de Interação – Controles Complexos
- Caixa de Combinação

35. Objetos de Interação – Grupos de Controle
• Organiza por Contexto as ações e controles da interface
• Divide-se em:
• Grupos de botões de comando
• Grupos de botões de radio
• Grupo de caixas de atribuição
• Grupo de campos/ mostradores de dados

36. Objetos de Interação – Grupos de Controle
- Grupos de botões de radio

37. Objetos de Interação – Grupos de Controle
- Grupo de caixas de atribuição

38. Objetos de Interação – Controles Simples
• Objetos com ações unicas.
• Divide-se em:
• Botão de Comando
• Botão de Seleção
• Cursor do dispositivo de apontamento
• Escala
• Dial

39. Objetos de Interação – Controles Simples
- Botão de Comando

40. Objetos de Interação – Controles Simples
- Botão de Seleção

41. Objetos de Interação – Controles Simples
- Cursos do Dispositivo de Apontamento

42. Objetos de Interação – Controles Simples
- Escala

43. Objetos de Interação – Campos de Entrada
• Controles editáveis.
• Textos e objetos gráficos.
• Divide-se em:
• Linha e área de comando
• Campo de Dado
• Campo de Texto
• Campo Gráfico

44. Objetos de Interação – Campos de Entrada
- Linha e Área de Comando

45. Objetos de Interação – Campos de Entrada
- Campo de Dado

46. Objetos de Interação – Campos de Entrada
- Campo de Texto

47. Objetos de Interação – Mostrador Simples
• Identificar e Descrever os dados.
• Divide-se em:
• Mostrador de Dados

48. Objetos de Interação – Mostradores Estruturados
• Representação dos dados.
• Facilita o exame de dados numerosos.
• Identificação de relações entre os dados.
• Critério lógico de agrupamento dos dados.
• Divide-se em:
• Lista / Coluna de dados
• Tabela de dados
• Texto
• Gráfico
• Diagrama de Figuras
• Diagrama de Fluxo
• Mapa

49. Objetos de Interação – Mostradores Estruturados
- Lista / Coluna de Dados
- Tabela de Dados

50. Objetos de Interação – Mostradores Estruturados
- Texto

51. Objetos de Interação – Mostradores Estruturados
- Gráfico

52. Objetos de Interação – Mostradores Estruturados
- Diagrama de Figuras
- Diagrama de Fluxo

53. Objetos de Interação – Mostradores Estruturados
- Mapa

54. Objetos de Interação – Orientações
• Representação dos dados.
• Facilita o exame de dados numerosos.
• Identificação de relações entre os dados.
• Critério lógico de agrupamento dos dados.
• Divide-se em:
• Rótulo
• Mensagem
• Indicador de Progressão
• Efeito Sonoro
• Motivo Melódico
• Locução e Fala

55. Sistemas de Significado
●
Símbolos e Sinais Arbitrários
●
Representação Concreta
●
Componentes:
●
Ícones
●
Denominações
●
Abreviaturas
●
Cores
●
Fontes
●
Textura
●
Vídeo Reverso
●
Intermitência Visual (pisca-pisca)

56. Primitivas
●
Formas Visuais
●
Cores
●
Fontes
●
Bordas
●
Arranjo (Layout)
●
Fundos (Background)
●
Formas Sonoras

57. “Novos” Componentes de Interação

58. IHC e Inteligência Artificial
●
Interfaces Tangíveis
●
Interfaces Intangíveis

59. IHC e Inteligência Artificial
AGENTE
Percepções
SENSORES
PROGRAMA AMBIENTE
Ações
ATUADORES

60. Vídeo – Microsoft Vision For 2019
Vídeo retirado de http://www.youtube.com/watch?v=VpiIr8wcv0Y

61. Microsoft Vision For 2019
●
Alguns componentes de interação identificados:
●
Botões;
●
Janelas;
●
Formulários;
●
Menus;
●
Barra de Ferramentas;

62. É possível?

63. Vídeo – Nokia Mixed Reality
Vídeo retirado de http://www.youtube.com/watch?v=CGwvZWyLiBU

64. Referência Bibliográficas
• Cybis, Walter de Abreu. Engenharia de Usabilidade: Uma
Abordagem Ergonômica. 2003. Florianópolis-SC.

65. Obrigado!