Estilos de Interação Usabilidade.

Apresentação em tema: "Estilos de Interação Usabilidade."— Transcrição da apresentação:

1 Estilos de Interação Usabilidade

2 Estilos de Interação Coleções de objetos de interface e técnicas associadas que são utilizadas para desenhar os componentes de interação de uma interface.

3 Estilos de interação mais populares
 Linhas de comandos  Janelas (windows)  Cardápios (menus)  Formulários (forms)  Interfaces pictóricas  Outros estilos (incluindo touchscreen e voz)

4 Estilos de Interação Linhas de comandos
Não envolve o conceito de manipulação direta. Existe a necessidade do usuário conhecer os comandos do sistema para poder executá-lo, ao invés de apenas manipulá-los.

5

6 Estilos de Interação Janelas
Objeto de tela que fornece uma arena para apresentação e interação com outros objetos de interação.  Janela primária  Janela secundária  Janela partida

7

8

9 Diretrizes para projeto de janelas
 Evite excesso de janelas em cada aplicativo  Permita que as janelas sejam reposicionadas e redimensionadas  Mantenha a consistência da aparência das janelas  Use diferentes janelas para diferentes tarefas independentes

10 Estilos de Interação Cardápios
Lista de itens de onde uma ou mais seleções são feitas pelo usuário.  reduz necessidade de memorização  elimina digitação, reduzindo erros  reduz necessidade de treinamento

11 Estilos de Interação Cardápios Menus Push-button – Botões de apertar
 Botões separados; sempre visíveis;  Interface possui poucos comandos, por ocupar muito espaço;  Rótulos dos botões bem claros e precisos;  Botão default, com aparência diferente;  Realce quando um botão é escolhido pelo usuário.

12 Estilos de Interação Cardápios Menus Push-button – Botões de apertar

13 Estilos de Interação Cardápios Menus Radio-button – Botões de opção
 Oferecem escolhas que são mutualmente exclusivas;  Aplicado quando a quantidade de opções é pequena;  Marcas para indicar escolha corrente.

14 Estilos de Interação Cardápios Menus Radio-button – Botões de opção

15 Estilos de Interação Cardápios Menus Check-button – Botões de checar
 Oferecem escolhas que não são mutualmente exclusivas;  Aplicado quando a quantidade de opções é pequena;  Marcas para indicar escolha corrente.

16 Estilos de Interação Cardápios Menus Check-button – Botões de checar

17 Estilos de Interação Cardápios Pop-up menus – Cardápios instantâneos
 Aparecem em diferentes lugares na tela, determinado pela posição do cursor;  Geralmente não há indicação de existência do menu pop-up;  Não utiliza espaço permanente da tela: economia de espaço;  Economiza movimento do mouse;

18 Estilos de Interação Cardápios Pop-up menus – Cardápios instantâneos

19 Estilos de Interação Cardápios Pull-down – Cardápios permanentes
 São sempre visíveis;  Utilizado para acesso às grandes e principais funções.

20 Estilos de Interação Cardápios Pull-down – Cardápios permanentes

21 Estilos de Interação Cardápios Pallete menus – Cardápios de Paleta
 Opções representadas por ícones gráficos;  Escolhas geralmente mutuamente exclusivas;  Muito usados em editores gráficos.

22 Estilos de Interação Cardápios Pallete menus – Cardápios de Paleta

23 Estilos de Interação Cardápios Options menus – Menu de Opções
 Parece muito com um campo (em um formulário), mas seu valor pode ser sempre visível;  Itens mutualmente excludentes e podem aparecer quando o mouse é pressionado sobre um indicador de expansão.

24 Estilos de Interação Cardápios Options menus – Menu de opções

25 Estilos de Interação Cardápios Cascading menus – Menu de Cascata
 Também chamados de menus andantes;  Parecem e comportam-se como uma seqüência de menus pull-down.

26 Estilos de Interação Cardápios Cascading menus – Menu de Cascata

27 Estilos de Interação Cardápios Embedded menus – Menu de hiperligações
 Utilizados geralmente em documentos de hipertextos, na www.

28 Estilos de Interação Cardápios Embedded menus – Menu de hiperligações

29 Estilos de Interação Cardápios Pies menus – Menu de imagens
 São cardápios nos quais os itens são constituídos por partes de uma imagem. Muito utilizado nos Sistemas de Informação Geográficos – SIG.

30 Estilos de Interação Cardápios Pies menus – Menu de imagens

31 Diretrizes para projeto de menus
Use as tarefas de usuários e funções de sistema para organizar menus hierárquicos; Prefira uma estrutura hierárquica larga e rasa ao invés de uma estrutura estreita e funda; Normalmente, deve-se ter até 3 ou 4 níveis hierárquicos e até 4 a 8 itens por menu; Use agrupamentos de opções de menus que têm alguma relação entre si;

32 Diretrizes para projeto de menus
Use ordenação significativa das opções de menus: ordenação alfabética é boa quando há uma longa lista de opções; use critérios adequados como freqüência de uso, mais recentemente utilizado ou importância, para a ordenação; Use uma breve descrição para as opções de menu: escolher palavras o mais claras e concisas possíveis, considere a possibilidade do usuário reconhecer seu significado imediatamente ou com pouca investigação;

33 Diretrizes para projeto de menus
use terminologias consagradas quando possível; Use layout consistente em todos os menus e deixe a tela organizada: defina e mantenha um formato consistente em todos os menus; use espaços em branco ou linhas para separar pequenos grupos de opções em um menu; Permita atalhos: Teclas aceleradoras podem evitar a necessidade de uso de menus pull-down ou pop-up.

34 Estilos de Interação Formulários
Um formulário é uma tela contendo campos rotulados que podem ser preenchidos pelo usuário, geralmente através de digitação ou por escolha em menus.  Texto livre  Texto validado  Lista de escolha

35

36 Diretrizes para projeto de formulários
 Use um lay-out visualmente atraente e conteúdo consistente;  Reavalie formulários prontos no papel;  Use indicadores apropriados para campos no formulário;  Use rótulos e abreviações consistentes e familiares: CPF, CEP;  Dê ao usuário apoio à edição e correção de erros dos campos;

37 Diretrizes para projeto de formulários
 Use mensagens de erros informativas e consistentes;  Forneça mensagens explicativas para preenchimento de campos;  Forneça valores defaults nos campos quando possível;  Forneça um indicador de conclusão para formulário preenchido .

38 Interfaces pictóricas - gráficas
Estilos de Interação Interfaces pictóricas - gráficas Qualquer estilo de interação que proveja uma janela, botões, ícones, e outros, é geralmente chamada de interface gráfica do usuário.

39 Interfaces pictóricas - gráficas
Estilos de Interação Interfaces pictóricas - gráficas  Visualização científica e de dados  Banco de dados visual  Animação  Vídeo  Multimídia e Hipermídia  Realidade virtual

40 Outros estilos de interação
 Tela de toque  Síntese de fala  Reconhecimento da fala

41 Referência Bibliográfica
FILHO, Wilson P.P. Engenharia de Software – Fundamentos, Métodos e Padrões. Rio de Janeiro: LTC HIX, D; HARDTSON, H.R. Developing User Interfaces: ensuring usabiliby trrough product & process, John Wiley and Sons, 1993.