Estilos de Interacção - Técnico Lisboa · Pergunta Resposta Formulários Manipulação Directa...

Inte

rfac

es

Pe

sso

a M

áqu

ina

Estilos de Interacção

17

Cap. 3.2 – Estilos de Interacção

Melhor e Pior ?

Resumo Aula Anterior

Capacidade para processar informação é limitada

Implicações no design de IUs

Informação é recebida e transmitida

Visão, audição, tato, movimento

Informação guardada na memória

Sensorial, STM, LTM

Informação Processada e Aplicada

Raciocínio

Perguntas!

Que tipo de memória tem um acesso mais lento?

Em que consiste o raciocínio indutivo?

Sumário

Estilos de Interacção

Linguagem de Comandos

Menus

Lingua Natural

Pergunta Resposta

Formulários

Manipulação Directa

Novos Paradigmas

01ESTILOS DE

INTERACÇÃO

Estilos de Interacção

Estilos de Interacção

02MENUS

Menus

Escolha de uma opção numa lista de opções.

Menu Bar

Pop-up e CascataPull-Down Página Web

Largura vs Profundidade

Demasiado Larga

Largura vs Profundidade

Demasiado Profunda

Largura vs Profundidade

Estrutura Equilibrada

Largura vs Profundidade

Largura preferível a profundidade

Profundidade máxima: 3 a 4

Esquemas de Ordenação

Frequência de Utilização

Ordem de Utilização

Categorias

Alfabeticamente

Categorias Semânticas

Texto Breve, Acção!

Open

Open a file from disk

Saved file

Texto Breve, Acção!

Open

Open a file from disk

Saved file

Navegação – Atalhos

Navegação – Teclas Aceleradoras

.

.

.

H2-?

Navegação – Retorno ao nível anterior

, ESC

20 opções max!

Lei de Hick

T = k log2(n+1) n – número de opções

Decisões complexas levam mais tempo...

Não se esqueçam destes...

Menus Circulares

0.5s mais rápidos em média

Número limitado de opções (max. 8)

Fáceis de Seleccionar

Mesma Distância

Tamanho dos alvos

Número de Opções...

12

3

4

5

6

78

9

10

11

12

13

1415

Número de Opções...

1

2

3

45

6

7

8

Vantagens dos Menus

Reconhecimento em vez de lembrança

Auto-Explicativos

Aprendizagem rápida

Rápidos para principiantes

Configuráveis

Desvantagens dos Menus

Lentos para peritos

Escolha dos nomes é critica

Inflexibilidade

Número limitado de opções (<20)

Ocupa muito espaço do ecrã

03LINGUAGENS DE

COMANDO

Linguagem de Comandos

Vantagens das LC

Potentes

Flexíveis, utilizador tem o controlo

Boas para tarefas repetitivas

Rápidas e eficientes para peritos

Uso mínimo do ecrã

Desvantagens das LC

Difíceis de aprender e de relembrar

Nomes dos comandos, argumentos e opções

Viola Heurística H2-...

Obrigam a utilização eficiente do teclado

ls em vez de list(Heurística: menos teclas = menos erros)

Melhores para peritos que para principiantes

04FORMULÁRIOS

Formulários

Campos Identificados e Estruturados

Já em papel...

Agrupamento de Campos

Ordenação dos Campos

Desordenado

Ordenado

Ordenação semântica por...

Sequência de utilização (H2-...)

Frequência de utilização

Importância relativa (obrigatórios primeiro)

Assinalar Campos Obrigatórios

Fornecer Valores por Omissão

Escolher melhor que Escrever

Autocomplete

Validação dos Dados

Flexibilidade nos dados

Tab-Order...

Navegação nos Campos

Cursor em Campo Mais Provável

Vantagens

Pouca memorização (reconhecimento)

Utilização eficiente do ecrã

Vários tipos de dados de entrada

Desvantagens

Assumem conhecimento sobre tipos de dados

de entrada

Para peritos em introdução de dados por

teclado

Inflexíveis (controlo interno)

05LINGUAGEM

NATURAL

Linguagem Natural

Linguagem Natural

Problemas

Vaga, Ambígua

Requer confirmações / Reiterações

Assume conhecimento do domínio

Soluções

Tentar perceber um subconjunto

Identificar apenas palavras-chave

06PERGUNTA /

RESPOSTA

Diálogos Pergunta / Resposta

Mecanismo simples para introdução de dados numa

aplicação

Utilizador responde a uma série de perguntas

Sim/Não, escolha múltipla ou códigos

Pergunta – Resposta (Ex.)

Guiado Passo a Passo...

Vantagens das Perg./Resp.

Auto-Explicativos

o quê? - semântica;

como? - sintáctica

Pouca memorização

Reconhecimento em vez de lembrança

Simples e não intimidante

Bom para principiantes

Vários tipos de dados de entrada

Tarefas com uma estrutura hierárquica

Desvantagens das Perg./Resp.

Pouco eficientes

Obrigam à utilização eficiente do teclado

Inflexíveis (controlo interno)

Não fornecem contexto seguinte

07MANIPULAÇÃO

DIRECTA

Exemplo: Video Jogos

Exemplo: Desktop

Acções directamente sobre objectos visíveis

Representação visual dos objetos

Ações físicas ou botões premidos em vez de

linguagem de comandos

Operações incrementais reversíveis com

apresentação imediata dos resultados

Exemplo: Apagar Ficheiro

% rm myfile.txt

% _

Manipulação Directa

Vantagens Manipulação Directa

Fáceis de aprender e relembrar

WYSIWYG (What You See Is What You Get)

Acessíveis a utilizadores principiantes e experientes

Flexíveis e c/ ações fáceis de desfazer (undo)

Fornecem realimentação visual e contextual constante

Exploram as capacidades humanas para usar pistas visuais

“À prova de erros”

Desvantagens Manip. Directa

Podem ser ineficientes para peritos

Nem sempre são auto-explicativas

Difícil de desenhar ícones e gestos facilmente

reconhecíveis

Ícones usam mais espaço de ecrã que palavras

Não suportam operações repetitivas

08ESCOLHAM COM

CUIDADO...

Como escolher?

Ponderar vantagens e desvantagens

Adequado aos utilizadores

Adequado ao dispositivo

Adequado ao Dispositivo

09NOVOS

PARADIGMAS

Novos paradigmas

Computação ubíqua

Pervasive computing (smart devices)

Wearable computing (computadores de vestir)

Tangible User Interfaces

Augmented reality

Attentive environments

Transparent computing

E muitos mais….

I/O Brush (http://web.media.mit.edu/~kimiko/iobrush/)

I/O Brush

ReactTable

Google Project Glass

BlobMaker – Interação Caligráfica

SketchAR – Virtual Taping

Laser Interaction

NavTouch

Resumo

Tipos de diálogo

Menus, Formulários, LC e MD

Principais características, vantagens e desvantagens

Princípios de navegação

Menus = WWW

Novos paradigmas de interação

TPC – Dispositivos de Interação

Ler Cap. 3 do Livro

Secção 3.1