Design de Interfaces
e Jogos
Prof. MSc. Fábio Caparica de Luna
[email protected] http://fabiocaparica.com @caparica1975
Tipos de Menu
Menu Drop-Down
Opção Desabilitada
Tipos de Menu
Menus em “Cascata”
Tipos de Menu
Vantagens e desvantagens dos Menus em Cascata
Pontos Positivos
• É possível agrupar melhor determinados conjuntos de
funcionalidades;
• Permite oferecer ao usuário menus mais curtos.
Pontos Negativos
• Requer mais coordenação motora por parte do usuário para ser
acessado;
• Torna mais difícil para o usuário encontrar uma determinada
funcionalidade;
• Adicionam complexidade na estrutura do menu.
Tipos de Menu
Menus ‘Pop-Up’
O que os usuários
esperam encontrar?
Consistência, conforto, familiaridade, etc.
Menu: Arquivo
Menu: Editar
Menu: Formatar
Menu: Exibir
Menu: Ajuda
Recomendações
Agrupar funcionalidades.
Recomendações
Forneça atalhos de teclado.
http://morris-photographics.com/photoshop/shortcuts/
Recomendações
Não faça o usuário “advinhar” se a
funcionalidade está disponível.
Características das
Caixas de Diálogos
• Podem ser Não-Modal, Modal,
Aplicativo-Modal ou Sistema Modal;
• Podem se desdobrar ou não;
Não modal
Não exigem ações do usuário.
Informam ou aguardam
entradas dos usuários.
Não modal
Aplicativo modal
Exigem ações do usuário.
Impedem que o software
‘avance’ até que ocorra uma
intervenção do usuário.
Aplicativo modal
Sistema modal
Paralisa todo o sistema até
que o usuário realize alguma
ação.
Sistema modal
Desdobráveis
Ocultam detalhes que podem
confundir os usuários.
Desdobráveis
Desdobráveis
Recomendações
Não confunda o usuário.
Recomendações
Seja claro ao dar opções ao usuário.
Recomendações
Não permita que o usuário tenha dúvidas.
Botões
Botões de Ação
Iniciam uma ação a partir de uma caixa de diálogo.
Botões de Saltar
Fecham a caixa de diálogo atual e abrem uma nova. Por
exemplo um botão de saltar pode enviar um usuário
para uma segunda caixa de diálogo com mais detalhes
sobre as opções disponíveis na primeira.
Botões de Saltar e Retornar
Abrem uma nova caixa de diálogo mas não fecham a
antiga. Uma caixa do tipo “Detalhes...” pode funcionar
desta forma.
Botões de Saltar e Retornar
Abrem uma nova caixa de diálogo mas não fecham a
antiga. Uma caixa do tipo “Detalhes...” pode funcionar
desta forma.
Botões de Desdobrar
Expandem a caixa de diálogo atual pra mostrar mais
opções.
Botões de “Dobrar”
Redobram a caixa de diálogo.
Tipos de Controles
• Opções tradicionais;
• Conjuntos de Valores;
• Caixas de Verificação;
• Caixas de Texto
Botões de Opção tradicionais (ou
Oferece ao usuário opções distintas.
Radio Button)
Botões de Conjuntos de Valores
Uma outra forma de oferecer ao usuário opções
distintas.
Botões de Caixas de Verificação
(ou Check Box)
Oferece opções ao usuário, permitindo que ele selecione
mais de uma opção.
Caixas de Lista
(ou List Box)
Oferece uma lista de opções ao usuário.
Caixas de Lista Drop-Down
(ou List Box Drop-Down)
Oferece uma lista de opções ao usuário quando não há
espaço para uma Caixa de Lista normal.
Caixa de Texto
(ou Text Field)
Controles de edição dentro dos quais o usuário digita
informação.
Botões Deslizantes
(ou Sliders)
Controles para exibir e ajustar valores e que permite ser
manipulado com o arrastar do mouse.
Botões Deslizantes
(ou Sliders)
Controles para exibir e ajustar valores e que permite ser
manipulado com o arrastar do mouse.