Modelo de Componentes de IHC
-
Upload
felipe-j-r-vieira -
Category
Design
-
view
4.809 -
download
2
description
Transcript of Modelo de Componentes de IHC
Diego Martins, Diego Meneses, Felipe Vieira, Jefferson Santos
Modelo de Componentes de IHC
Universidade Federal de SergipeDepartamento de ComputaçãoInterface Humano Computador
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.
Componente
O que compõe ou entra na composição de alguma coisa.
Comunicar-se é difícil!
Comunicação – Modelo OSI
Imagem retirada de http://www.infocellar.com/networks/images/OSI-1.png
Comunicação – Funções da Linguagem
Imagem retirada de http://acd.ufrj.br/ead/tema01/lingfuncoes.html
O real não existe!
Não há nada novo!
Vídeo – Waking Life: Language
Vídeo retirado de http://www.youtube.com/watch?v=LXHy28mQO_s
Representações – mais de 6 bilhões
Imagem retirada de http://blog.rodrigoallemand.com.br/wp-content/uploads/2009/02/mapa_mundi_politico.jpg
Modelo de Componentes de IHC
Entendimentos da IHC
● Subsistema do Software Interativo● Estrutura
● Processos
Créditos: Anderson Luiz Mendes Matos, 2009. Título: Modelo MVC.
Entendimentos da IHC
● Linguagem● Sistemas de sinais
● Estrutura léxical e sintática
Interface
Sistema Informatizado Usuário
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
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.
Classes de Elementos
● Diálogos (Sintaxe Sequencial)
● Objetos de Interação (Sintaxe Concorrente)
● Sistemas de Significados (Léxico)
● Primitivas
Diálogos
● Ações● Ação de entrada de dados ou comandos
● Tarefas● Tarefas de diagnóstico
● Tarefas corretivas
● Tarefas destrutivas
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
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
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
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
- Janelas
Objetos de Interação – Painés de Controle
- Caixa de Diálogo
Não Modal Modal
Objetos de Interação – Painés de Controle
- Caixa de Ação/Tarefa
Objetos de Interação – Painés de Controle
- Tela de Consulta e Formulário
Objetos de Interação – Painés de Controle
- Caixa de Mensagem
Objetos de Interação – Painés de Controle
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
Objetos de Interação – Controles Complexos
- Painel de Menu
PopUp
Objetos de Interação – Controles Complexos
- Barra de Menu
Objetos de Interação – Controles Complexos
- Página de Menu
Objetos de Interação – Controles Complexos
- Hipertexto
Objetos de Interação – Controles Complexos
- Barra de Ferramentas
Objetos de Interação – Controles Complexos
- Lista de Seleção
Objetos de Interação – Controles Complexos
- Caixa de Combinação
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
Objetos de Interação – Grupos de Controle
- Grupos de botões de radio
Objetos de Interação – Grupos de Controle
- Grupo de caixas de atribuição
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
Objetos de Interação – Controles Simples- Botão de Comando
Objetos de Interação – Controles Simples- Botão de Seleção
Objetos de Interação – Controles Simples- Cursos do Dispositivo de Apontamento
Objetos de Interação – Controles Simples- Escala
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
Objetos de Interação – Campos de Entrada- Linha e Área de Comando
Objetos de Interação – Campos de Entrada- Campo de Dado
Objetos de Interação – Campos de Entrada- Campo de Texto
Objetos de Interação – Mostrador Simples
• Identificar e Descrever os dados.
• Divide-se em:
• Mostrador de Dados
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
- Lista / Coluna de Dados- Tabela de Dados
Objetos de Interação – Mostradores Estruturados
- Texto
Objetos de Interação – Mostradores Estruturados
- Gráfico
Objetos de Interação – Mostradores Estruturados
- Diagrama de Figuras- Diagrama de Fluxo
Objetos de Interação – Mostradores Estruturados
- Mapa
Objetos de Interação – Mostradores Estruturados
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
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)
Primitivas
● Formas Visuais● Cores
● Fontes
● Bordas
● Arranjo (Layout)
● Fundos (Background)
● Formas Sonoras
“Novos” Componentes de Interação
IHC e Inteligência Artificial
● Interfaces Tangíveis
● Interfaces Intangíveis
AMBIENTE
IHC e Inteligência Artificial
SENSORES
PROGRAMA
ATUADORES
Percepções
Ações
AGENTE
Vídeo – Microsoft Vision For 2019
Vídeo retirado de http://www.youtube.com/watch?v=VpiIr8wcv0Y
Microsoft Vision For 2019
● Alguns componentes de interação identificados:
● Botões;
● Janelas;
● Formulários;
● Menus;
● Barra de Ferramentas;
É possível?
Vídeo – Nokia Mixed Reality
Vídeo retirado de http://www.youtube.com/watch?v=CGwvZWyLiBU
• Cybis, Walter de Abreu. Engenharia de Usabilidade: Uma Abordagem Ergonômica. 2003. Florianópolis-SC.
Referência Bibliográficas
Obrigado!