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!