Modelo de Componentes de IHC

6.042 visualizações

Publicada em

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.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
6.042
No SlideShare
0
A partir de incorporações
0
Número de incorporações
25
Ações
Compartilhamentos
0
Downloads
113
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Modelo de Componentes de IHC

  1. 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. 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. 3. Componente O que compõe ou entra na composição de alguma coisa.
  4. 4. Comunicar-se é difícil!
  5. 5. Comunicação – Modelo OSI Imagem retirada de http://www.infocellar.com/networks/images/OSI-1.png
  6. 6. Comunicação – Funções da Linguagem Imagem retirada de http://acd.ufrj.br/ead/tema01/lingfuncoes.html
  7. 7. O real não existe!
  8. 8. Não há nada novo!
  9. 9. Vídeo – Waking Life: Language Vídeo retirado de http://www.youtube.com/watch?v=LXHy28mQO_s
  10. 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. 11. Modelo de Componentes de IHC
  12. 12. Entendimentos da IHC ● Subsistema do Software Interativo ● Estrutura ● Processos Créditos: Anderson Luiz Mendes Matos, 2009. Título: Modelo MVC.
  13. 13. Entendimentos da IHC ● Linguagem ● Sistemas de sinais ● Estrutura léxical e sintática Interface Sistema Informatizado Usuário
  14. 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. 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. 16. Classes de Elementos ● Diálogos (Sintaxe Sequencial) ● Objetos de Interação (Sintaxe Concorrente) ● Sistemas de Significados (Léxico) ● Primitivas
  17. 17. Diálogos ● Ações ● Ação de entrada de dados ou comandos ● Tarefas ● Tarefas de diagnóstico ● Tarefas corretivas ● Tarefas destrutivas
  18. 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. 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. 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. 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. 22. Objetos de Interação – Painés de Controle - Janelas
  23. 23. Objetos de Interação – Painés de Controle - Caixa de Diálogo Não Modal Modal
  24. 24. Objetos de Interação – Painés de Controle - Caixa de Ação/Tarefa
  25. 25. Objetos de Interação – Painés de Controle - Tela de Consulta e Formulário
  26. 26. Objetos de Interação – Painés de Controle - Caixa de Mensagem
  27. 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. 28. Objetos de Interação – Controles Complexos - Painel de Menu PopUp
  29. 29. Objetos de Interação – Controles Complexos - Barra de Menu
  30. 30. Objetos de Interação – Controles Complexos - Página de Menu
  31. 31. Objetos de Interação – Controles Complexos - Hipertexto
  32. 32. Objetos de Interação – Controles Complexos - Barra de Ferramentas
  33. 33. Objetos de Interação – Controles Complexos - Lista de Seleção
  34. 34. Objetos de Interação – Controles Complexos - Caixa de Combinação
  35. 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. 36. Objetos de Interação – Grupos de Controle - Grupos de botões de radio
  37. 37. Objetos de Interação – Grupos de Controle - Grupo de caixas de atribuição
  38. 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. 39. Objetos de Interação – Controles Simples - Botão de Comando
  40. 40. Objetos de Interação – Controles Simples - Botão de Seleção
  41. 41. Objetos de Interação – Controles Simples - Cursos do Dispositivo de Apontamento
  42. 42. Objetos de Interação – Controles Simples - Escala
  43. 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. 44. Objetos de Interação – Campos de Entrada - Linha e Área de Comando
  45. 45. Objetos de Interação – Campos de Entrada - Campo de Dado
  46. 46. Objetos de Interação – Campos de Entrada - Campo de Texto
  47. 47. Objetos de Interação – Mostrador Simples • Identificar e Descrever os dados. • Divide-se em: • Mostrador de Dados
  48. 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. 49. Objetos de Interação – Mostradores Estruturados - Lista / Coluna de Dados - Tabela de Dados
  50. 50. Objetos de Interação – Mostradores Estruturados - Texto
  51. 51. Objetos de Interação – Mostradores Estruturados - Gráfico
  52. 52. Objetos de Interação – Mostradores Estruturados - Diagrama de Figuras - Diagrama de Fluxo
  53. 53. Objetos de Interação – Mostradores Estruturados - Mapa
  54. 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. 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. 56. Primitivas ● Formas Visuais ● Cores ● Fontes ● Bordas ● Arranjo (Layout) ● Fundos (Background) ● Formas Sonoras
  57. 57. “Novos” Componentes de Interação
  58. 58. IHC e Inteligência Artificial ● Interfaces Tangíveis ● Interfaces Intangíveis
  59. 59. IHC e Inteligência Artificial AGENTE Percepções SENSORES PROGRAMA AMBIENTE Ações ATUADORES
  60. 60. Vídeo – Microsoft Vision For 2019 Vídeo retirado de http://www.youtube.com/watch?v=VpiIr8wcv0Y
  61. 61. Microsoft Vision For 2019 ● Alguns componentes de interação identificados: ● Botões; ● Janelas; ● Formulários; ● Menus; ● Barra de Ferramentas;
  62. 62. É possível?
  63. 63. Vídeo – Nokia Mixed Reality Vídeo retirado de http://www.youtube.com/watch?v=CGwvZWyLiBU
  64. 64. Referência Bibliográficas • Cybis, Walter de Abreu. Engenharia de Usabilidade: Uma Abordagem Ergonômica. 2003. Florianópolis-SC.
  65. 65. Obrigado!

×