Usabilidade
Estilos de Interação
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 .
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.
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
Estilos de Interação
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.