Estilos de Interação

1. Usabilidade Estilos de Interação

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.

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

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

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. 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. 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. Estilos de Interação 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. 2001. HIX, D; HARDTSON, H.R. Developing User Interfaces: ensuring usabiliby trrough product & process, John Wiley and Sons, 1993.