Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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 19:44.
351 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×