Estilos de Interação Usabilidade

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.

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)

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.

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

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

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

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.

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

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.

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

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.

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

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;

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

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.

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

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.

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

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.

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

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.

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

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

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

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.

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

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;

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;

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.

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

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;

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 .

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.

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

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

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.