Mobile Design Pattern: Menu Drop-down (Português)
Dados do artigo
Artigo
Este padrão de projeto é parte da série Mobile Design Patterns.
Contents |
Descrição
Uma modelo de menu contextual que permite a seleção de apenas um item de uma lista. Menus Drop-down podem obter seu nome como usado em desktops comuns, no qual é mostrada uma lista abaixo do menu, dentro de uma visão.
Figura: Um típico menu Drop-down em uma aplicação desktop.
Vantagens
- Economiza espaço valioso em telas pequenas.
Desvantagens
- Pode sofrer uma má usabilidade e percepção.
Quando usar
Menus suspensos devem ser usados com cautela em dispositivos móveis. Ao contrário dos contextuais ou meu de opções, que normalmente ganham foco quando ativado, menus drop-down podem simplesmente abrir dentro da visão. Isso pode causar vários problemas:
- O menu pode obstruir os controles relevantes e/ou controles originais, os quais solicitam o menu.
- Ao contrário dos menus de contexto (ex. menus de opções) que tem foco principal na visão do usuário, pode não ser claro como fechar o menu se nenhuma seleção está sendo feita.
- Como o menu não pode ter foco total, os usuários podem tentar interagir com os itens 'abaixo'. Isso pode ser particularmente susceptível a dispositivos sensíveis ao toque.
- Se a lista de opções dentro do menu é longa, pode não haver espaço suficiente na vertical para mostrar todas as opções e o usuário pode, portanto, parar de se deslocar. Em dispositivos com tela sensível ao toque, a rolagem pode ser particularmente difícil, uma vez que a rolagem pode ser muito pequena para usarmos.
Nota: Menus drop-down híbridos estão começando a aparecer dentro de aplicações nativas. Estes assemelham-se a um menu drop-down, mas por ter foco primário na exibição, seu comportamento assemelha-se mais a um menu contextual. Em todo caso, a concepção e execução devser cuidadosamente otimizada para minimizar a confusão a respeito do comportamento esperado e modelos de manipulação. Se o menu se comporta de forma muito parecida com um menu contextual, a analogia drop-down pode não ser a mais adequada.
Como usar
Aplicações nativas, Flash Lite
O uso dentro de aplicações nativas ou em aplicações Flash Lite não é recomendado, sem que seja feita uma cuidados implementação otimizada para minimizar a rolagem e comportamentos inesperados. Sempre que possível, considerar o uso de um menu contextual padrão em vez disso.
Figura: Nokia Messaging utiliza dois menus drop-down. Um para fornecer acesso as caixas de mensagens e outro para filtrar a lista. Os menus drop-down são curtos, não necessitam de rolagem e os rótulos de texto, são igualmente curtos e familiares. Se o usuário não faz uma seleção, a tecla de menu direita pode ser usada para fechar o menu.
Figura: Yahoo Go criou um menu drop down personalizado, cujo painel de menu desliza para cima quando você rola. Este acesso não usual, permite-nos lembra do menu, apesar da sua posição muito em baixo na tela.
HTML
Dentro dos navegadores S40 e S60, menus HTML pull-down (ou seja, <select>) não abrem diretamente no navegador. Em vez disso, uma consulta de seleção nativa é lançada, o que permite a rolagem completa do menu de seleção, e seleção confortável de uma item da lista.
Figura: Um menu de seleção nativa em HTML é automaticamente convertido para uma consulta de seleção nativa.
Dicas de design
- Use uma seta para baixo ou um indicador, de preferência familiares, para auxiliar os usuários ao antecipar o que vai acontecer quando eles clicarem sobre este controle.
- Mantenha a lista de opções curta para evitar a rolagem dentro do próprio menu.
- Use destaques auto-contraste para garantir que o item da lista focalizado é facilmente perceptível.
- Se possível, usar esse tipo de menu para listas de itens que são familiares ao usuário, ou onde a sequência dos itens (em ordem alfabética, numérica ou cronológica), irá fornecer os waypoints visuais que deve ser inevitável ao entendimento.
- Evite usar esses menus para mostrar para o usuário ou outra forma desconhecida de dados dinâmicos, cujo comprimento não pode ser controlado e, portanto, pode se tornar ruim para o usuário.
- Menus drop-down multi-níveis( ou seja, aqueles que geram sub-menus) devem ser evitados, pois podem diminuir ainda mais a usabilidade deste controle.
(no comments yet)