Elementos de interao > Interface grfica

Elementos de interao

Formulrios
Engenharia de Usabilidade Prof.: Clarindo Isaas Pereira da Silva e Pdua
Gestus Departamento de Cincia da Computao - UFMG

l Um

formulrio uma tela contendo campos

rotulados que podem ser preenchidos pelo usurio, geralmente atravs de digitao ou por escolha em menus.

26/8/2008
Clarindo Pd u a

Elementos de interao > Interface grfica > Formulrios

Elementos de interao > Interface grfica > Formulrios

Tipos de valores usados em campos em um formulrio

n n n n n

Caracteres digitados pelo usurio; Escolha feita pelo usurio atravs de uma lista; Valores defaults para campos; Valores requeridos ou opcionais; Valores dependentes.

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Elementos de interao > Interface grfica > Formulrios > Tipos de valores usados em campos em um formulrio n

Elementos de interao > Interface grfica > Formulrios > Tipos de valores usados em campos em um formulrio

Lista para escolha pelo usurio

l l

Strings: h dois tipos de strings de entrada :

l l

evita erros no requer que o usurio se lembre de todas as opes

validados: deve haver indicao visual; no validados.

n

Valores defaults para campos

l

So valores j preenchidos pelo sistema mas que podem ser modificados pelo usurio.

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Elementos de interao > Interface grfica > Formulrios > Tipos de valores usados em campos em um formulrio

Elementos de interao > Interface grfica > Formulrios

Diretrizes
n

Valores requeridos x valores opcionais

l

n n

Use um leiaute visualmente atraente e conte do consistente No assuma que os formulrios de papel possam ser convertidos diretamente para o desenho na tela e sejam uma boa interface
l l

interessante haver indicao visual distinguindo os dois tipos de campos

Valores dependentes
l

Tela tem dimenses diferente.

So campos que s fazem sentido e tm que ser preenchidos se outro campo tiver sido preenchido com determinados valores.

Aproveite para redesenhar, eliminando redundncias e melhorando o formulrio.

O sistema pode forar essa dependncia entre campos.

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Elementos de interao > Interface grfica > Formulrios > DIretrizes

Elementos de interao > Interface grfica > Formulrios > DIretrizes

Use indicadores apropriados para campos no formulrio;

l l

n n n

Use uma navegao lgica entre os campos. Use uma navegao lgica dentro dos campos. Apoio edio e correo de erros dos campos.
l

indicadores visuais como /.../ para datas organizao em sees: campos opcionais, campos obrigatrios, etc

facilite correo de caracteres individuais sem necessidade de entrar-se com todo o campo novamente em caso de erro.

Use de rtulos e abreviaes consistentes e familiares;

l

ex: CPF, CEP

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

10

Elementos de interao > Interface grfica > Formulrios > DIretrizes

Elementos de interao > Interface grfica

Use mensagens de erros informativas e consistentes para caracteres e valores invlidos. Fornea mensagens explicativas para preenchimento de campos.
l

Caixas
n

Uma caixa (box) uma tela delimitada em formato retangular, usada para mensagens, entrada de textos, comandos, seleo e controle do usurio.
l

Mensagens devem ser curtas e no intrusivas

Fornea valores defaults nos campos quando possvel. Fornea um indicador de concluso para cada tela de formulrio preenchido.

So utilizadas para agrupar visualmente diferentes objetos relacionados funcionalmente.

26/8/2008
Clarindo Pd u a

11

26/8/2008
Clarindo Pd u a

12

Elementos de interao > Interface grfica > Caixas

Elementos de interao > Interface grfica > Caixas

H vrios tipos de caixas:

n

Caixa de lista
uma seqncia de itens de escolhas para o usurio, que geralmente aparece dentro de uma pequena janela.
l l

l l l l

caixas de lista; caixas de entrada; caixas de mensagem; caixas de dilogo.

Evita erros. No requer que o usu rio se lembre de todas as opes.

26/8/2008
Clarindo Pd u a

13

26/8/2008
Clarindo Pd u a

14

Elementos de interao > Interface grfica > Caixas

Elementos de interao > Interface grfica > Caixas

Caixa de mensagem
n

Caixas de entrada
n

utilizada para apresentar mensagens de sada (ex.: mensagem de erro, mensagens de confirmao) para o usurio.

Permite entrada de texto; usualmente possui funes bsicas de edio de texto (como inserir, apagar e quebrar linhas (wraparound).

26/8/2008
Clarindo Pd u a

15

26/8/2008
Clarindo Pd u a

16

Elementos de interao > Interface grfica > Caixas

Elementos de interao > Interface grfica > Caixas > Caixa de dilogo

Caixas de dilogo
n

uma caixa composta de vrios objetos de interao como listas, botes, caixas, campos para entradas de texto, dentre outros.
l

Os v rios objetos devem estar relacionados com uma funo no sistema.

Existem dois modos de se conduzir a comunicao:

u

dilogo modal: restringe o uso de outras janelas dilogo no modal: permite o usu rio trabalhar fora da caixa de di logo

26/8/2008
Clarindo Pd u a

17

26/8/2008
Clarindo Pd u a

18

Elementos de interao > Interface grfica > Caixas

Elementos de interao > Interface grfica > Caixas

Diretrizes
n n n

Diretrizes
n

Use instrues breves mas compreensveis; Use as palavras com cuidado para elabora o de mensagens; Organize logicamente agrupamento e ordenao de objetos nas caixas;
n n

Mantenha o layout consistente e o visual atraente; Coloque defaults nos botes de escolha, tornando-os visualmente diferentes; Selees em menus que levam a caixas de dilogo devem conter um indicadores visuais

Use indicadores visuais ou espao em branco para demarcar grupos dentro das caixas;
n

Caixas devem desaparecer sob controle do usurio.

26/8/2008
Clarindo Pd u a

19

26/8/2008
Clarindo Pd u a

20

Elementos de interao

Elementos de interao > Interface grfica em sentido amplo

Interface grfica em sentido amplo

n

Visualizao cientfica de dados

n

Usaremos o termo interface grfica no sentido de uso de representao visual da informao em contraste com o uso de textos ou nmeros - mais amplo que o conceito WIMP.

um dos primeiros usos de grficos em interao de usurios.

n
n

Inclui grficos, diagramas, histogramas e vrios tipos de imagens elaboradas de tela.

A principal vantagem de interfaces grficas bem colocado por Richard Hamming: The purpose of computing is insight, not number.
n

usado por exemplo em diagnsticos mdicos usando ultrasom, simulao de fluxo de fluido, transferncia de calor, etc

26/8/2008
Clarindo Pd u a

21

26/8/2008
Clarindo Pd u a

22

Elementos de interao > Interface grfica em sentido amplo

Elementos de interao > Interface grfica em sentido amplo

Banco de dados visual

n

Animao
n

As tcnicas para navegao atravs de uma representao visual para banco de dados esto se tornando mais populares.

Animao, ou simplesmente desenho animado, pode ser utilizado para representar as sadas de uma simulao.

Exemplos: bancos de dados de imagens usados em museus, relevo

n

de terreno, documentos histricos, etc.

n

Constitui um excelente meio para para produ o de simuladores para treinamento. Pode incluir, alm de imagens visuais, sons, vibra es e temperaturas de um ambiente real.

Imagens podem tambm ser geradas a partir de bancos de dados com informao numrica, ex.: imagens geolgicas utilizadas em explora o de petrleo.
n

muito usado em jogos.

26/8/2008
Clarindo Pd u a

23

26/8/2008
Clarindo Pd u a

24

Elementos de interao > Interface grfica em sentido amplo

Elementos de interao > Interface grfica em sentido amplo

Vdeo
n

O vdeo com animao realstica, e o udio que tipicamente o acompanha, pode ser combinado com outros Elementos de interao em uma interface - por exemplo, em uma janela.
n

Multimdia e hipermdia
Envolve a associao de grficos, udios e vdeos, muitas vezes associados a animaes.
n

Os vdeos do uma noo mais realista das atividades do mundo real e, como a animao, pode ser usado de modo especialmente efetivo para treinamento.

A hipermdia permite uma navegao mais livre em busca de informao.

Produo muito cara e requer capacitao especfica.

26/8/2008
Clarindo Pd u a

25

26/8/2008
Clarindo Pd u a

26

Elementos de interao > Interface grfica em sentido amplo

Elementos de interao > Interface grfica em sentido amplo

Realidade virtual

DIretrizes
n

O termo realidade virtual ou realidade artificial usado para se referir a

n

Use analogias com o mundo real o tanto quanto poss vel; Mantenha a representao visual o mais simples possvel;
l

qualquer simulao interativa.

n n n n

Constitui-se, provavelmente, no estilo de interao mais interativo poss vel.

Excesso de elementos visuais prejudica o entendimento

Custos so muito elevados

n

Mostre diferentes vises de um mesmo objeto visual;

l

Aplicaes mais utilizadas so simuladores e treinamentos de pessoas

Por exemplo, pode-se usar diferentes vistas de um mesmo objeto para facilitar a apreenso pelo usu rio.

onde se requer realismo - ex.: treinamento de piloto, polcia e cirurgio.

26/8/2008
Clarindo Pd u a

27

26/8/2008
Clarindo Pd u a

28

Elementos de interao > Interface grfica em sentido amplo > Diretrizes

Elementos de interao Linguagens de comandos

n n

Use cores significativas e com moderao; Use vdeos com moderao.

l l l

Linguagem de linhas de comandos so strings de caracteres alfanum ricos representando comandos, parmetros e/ou opes que so digitadas pelo usurios.

Pelo custo prefervel no se utilizar v deo a t-lo de baixa qualidade Usar em aplicaes que realmente requeiram vdeo como em treinamento e educao, por exemplo.
n n n n

Representam um estilo de comunicao conciso, poderoso e rpido. Requerem mais treino do usurio e do margem a um maior nmero de erros do que os estilos de manipulao direta. Podem ser utilizadas tambm em associao com entrada de voz.

Ex.

ls -la

26/8/2008
Clarindo Pd u a

29

26/8/2008
Clarindo Pd u a

30

Elementos de interao > Interface grfica > Linguagens de comandos

Elementos de interao > Interface grfica > Linguagens de comandos > DIretrizes

Diretrizes
n

Use regras consistentes de formao para comandos de entrada.

n n

Aplique regras consistentes para abreviaes de comandos.

n

Usar sintaxe consistente.

Pode-se usar 3 primeiras letras ou suprimir vogais, por exemplo.

O paradigma padro ao-modificador-objeto, que difere do padro para manipulao direta em que muitas vezes seleciona-se o objeto primeiro e depois define-se a ao. n

Permita correo fcil em erros de digitao.

Escolha nomes de comandos significativos, especficos e distintos.

Permita que o usurio freqente desenvolva macros.

26/8/2008
Clarindo Pd u a

31

26/8/2008
Clarindo Pd u a

32

Elementos de interao

Elementos de interao > Outros Elementos de interao

Outros Elementos de interao

n

Sntese de fala
n

Tela de toque: as telas de toque esto entre os mais durveis e robustos de todos os dispositivos de entrada. So indicados para:
l l l l

A gera o de sons audveis e palavras com o computador uma tecnologia relativamente bem dominada, conseguindo-se atualmente que soe mais natural.

usurios novios, em que se-chega-e-usa, pela sua simplicidade; usurios freqentes quando h pouco espao para o teclado e/ou mouse situaes que requerem equipamento robusto; situaes em que os usurios tm que ser guiados atrav s de seqncias complexas de tarefas; exemplos tpicos: ambientes pblicos, de uso pesado, assim como cho de f brica e quiosques de informao ao pblico.
n n

Pode ser usado de forma redundante, associado a textos. Tem aplicao bvia para deficientes fsicos visuais.

26/8/2008
Clarindo Pd u a

33

26/8/2008
Clarindo Pd u a

34

Elementos de interao > Outros Elementos de interao

Reconhecimento de fala linguagem natural

n

O reconhecimento da fala pelo computador ainda bastante limitado a palavras discretas, e domnios especficos de vocabulrios e situaes. As aplicaes so bvias - comunicao natural com o computador mas existem dificuldades de reconhecimento dos sons e de entendimento da linguagem falada.

Exemplo de dificuldade: how view wonder stood mice peaches

26/8/2008
Clarindo Pd u a

35