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