×
Namespaces

Variants
Actions

Mobile Design Pattern: Menu Drop-down (Português)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Artigo
Tradução:
Por maiconherverton
Última alteração feita por lpvalente em 04 Dec 2012

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.


08-drop-down.jpg


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.


09-native-app-dropdown.jpg


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.


10-yahoo-dropdown.jpg


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.


11-native-drop-down.jpg


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.
This page was last modified on 4 December 2012, at 22:44.
95 page views in the last 30 days.
×