Diretrizes de submenus

Applies to Windows and Windows Phone

Uma amostra da aparência do controle de submenu padrão

Descrição

Um submenu é um pop-up leve que é usado para mostrar temporariamente a interface do usuário relacionada ao que o usuário está fazendo no momento. Ele pode ser usado para mostrar um menu, exibir um controle oculto, mostrar mais detalhes de um item ou pedir que o usuário confirme uma ação. Você só deve mostrar um submenu em resposta ao toque ou clique do usuário. O submenu é sempre descartado quando o usuário toca fora dele.

Exemplo

Uma captura de tela que ilustra o controle de submenu padrão

O que fazer e o que não fazer

  • Use submenus para mostrar uma parte da interface do usuário que você não quer sempre na tela. Um usuário pode descartar um submenu a qualquer momento, clicar fora dele ou pressionar ESC. Quando o usuário faz uma seleção no submenu, o submenu deve ser ignorado.
  • Posicione o submenu próximo à seu ponto de invocação. Se o usuário toca em um botão na barra de aplicativos para ativar um submenu, então ele deve aparecer acima ou abaixo do botão da barra de aplicativos. Se mostrar o submenu acima ou abaixo do controle obscurecer conteúdo importante, então ele pode ser colocado à esquerda ou à direita dele. Ao implementar um submenu, posicione-o especificando o objeto ao qual você quer ancorá-lo e a lateral do objeto na qual ele deve aparecer. submenus devem ser centralmente alinhados em relação à âncora, a menos que a âncora esteja no canto da tela (como o submenu de bloco do usuário na tela inicial).
  • Use submenus para o seguinte:
    • Coletando informações: se o usuário selecionar uma ação que exija mais dados, como escolher uma opção ou digitar informações, então essa interface do usuário pode ser colocada em um submenu para manter o usuário no contexto original em que ele estava. Por exemplo, digamos que, em um aplicativo de mapa, os usuários possam rotular os locais que marcam. Os usuários tocam no local para marcá-lo e o aplicativo apresenta um submenu para que os usuários possam inserir seus próprios rótulos.

      Exemplo: no navegador, para fixar um item na tela Inicial, o usuário toca no ícone de ajuste na barra de aplicativos. Em seguida, o usuário insere o nome do novo bloco em um submenu

    • Avisos e confirmações: avise o usuário antes que ele execute uma ação potencialmente destrutiva.

      Exemplo: em uma aplicativo de fotos, o usuário pressiona um ícone de exclusão na barra de ferramentas. Ao lado do botão da barra de ferramentas, aparece um submenu que avisa o usuário de que as fotos serão excluídas permanentemente e fornece o comando de exclusão. O usuário pode facilmente pressionar o comando de exclusão que aparece ou ignorar o submenu se ele pressionar o ícone de exclusão sem querer.

      Observação  Os únicos avisos ou erros que devem aparecer em um submenu são aqueles que podem ser mostrados imediatamente e que são o resultado direto da ação do usuário. Para saber mais, veja Selecionando as superfícies corretas da interface do usuário: erros.

    • Menus suspensos: se um botão em uma barra de aplicativos tiver mais de uma opção, então exiba um submenu para que o usuário escolha a opção.

      Exemplo: em um aplicativo de email, o usuário pressiona Responder na barra de aplicativos e aparece um menu para que o usuário escolha entre as formas para responder: Responder, Responder a todos ou Encaminhar. Se o usuário pressionar o botão Cancelar na barra de aplicativos, então um menu será exibido para que o usuário escolha entre os modos para Cancelar: Descartar ou Salvar Rascunho.

      Observação  Use menus contextuais, não submenus, para ações contextuais em seleções de texto.

    • Exibindo mais informações: mostre mais detalhes sobre um item na tela em que o usuário esteja interessado.

      Exemplo: no navegador, ao navegar InPrivate, o usuário seleciona o ícone InPrivate. Um submenu, então, aparece para fornecer ao usuário mais informações sobre o modo InPrivate. Na maioria das vezes, a UI do navegador é mantido limpa, mas, se solicitado, pode fornecer mais detalhes para os usuários que estiverem interessados.

  • Identifique a ordem em que os usuários usam a tecla TAB para navegar de um item para outro em seu submenu. Lembre-se de definir os índices de tabulação com valores positivos (0 é considerado como se não estivesse definido) e verifique se o intervalo de índices de tabulação no submenu não sobrepõe os intervalos de índices de tabulação dos elementos fora do submenu ou os usuários pulam entre o submenu e a página do aplicativo principal.
  • Não descarte um submenu programaticamente, a menos que o usuário tenha pressionado um botão de comando ou selecionado um item de menu no submenu. Um submenu não deve ser ignorado automaticamente se o usuário simplesmente tiver alternado uma configuração, por exemplo.
  • Não use um submenu se a mensagem, erro, aviso ou outra parte da interface de usuário não for invocada diretamente pelo usuário no momento. Exemplo: notificações de que existem atualizações disponíveis, que uma avaliação expirou ou que a Internet não está disponível não devem ser exibidas em submenus. Para obter orientação sobre como aplicar a superfície desta interface do usuário, veja Escolhendo as superfícies corretas da interface do usuário: erros.
  • Não use um submenu se a experiência é uma que exige interação prolongada, múltiplas telas ou várias interfaces do usuário. Em vez disso, integre a interface do usuário à tela do aplicativo. Por exemplo:
    • O usuário está trabalhando por meio de um assistente com muitas entradas de texto.
    • O usuário está alterando uma lista longa de configurações.
  • Não use um submenu para a lista principal de comandos do seu aplicativo. Para isso, use a barra de aplicativos. Para saber mais, veja Diretrizes de barras de aplicativos.
  • Não use um submenu se um menu é exigido somente para comandos relacionados à seleção de texto. Em vez disso, use um menu de contexto. Veja Diretrizes de menus de contexto.
  • Não inclua controles em um submenu que não sejam necessários para a situação. Por exemplo, se não houver ações para o usuário executar, então não inclua nenhum botão. Não são necessários os botões Fechar ou OK; ignorar funciona bem (o submenu desaparece quando o usuário toca em qualquer lugar na tela fora do submenu). Da mesma forma, se um título não for absolutamente necessário, então não o inclua.
  • Não adicione preenchimento extra além do que é fornecido pelo próprio submenu. O submenu deve ter o menor tamanho possível, de acordo com seu conteúdo.
  • Não posiciones os submenus em locais não contextuais, como o centro da tela, por várias razões:
    • Quando a interface do usuário é mostrada em uma posição desconectada da ação que a invocou, o usuário precisa procurar essa interface do usuário e fica mais lento. A experiência geral é interrompida, criando uma interface do usuário menos agradável e fluida.
    • O usuário pode não perceber que o submenu apareceu e pode acidentalmente ignorá-lo ao continuar tocando na tela, fazendo com que o aplicativo pare de responder.
    • Os usuários esperam que as janelas centralizadas (ou outras posicionadas arbitrariamente) tenham um botão Cancelar ou Fechar e iriam usá-los, mesmo se uma opção de descarte leve estivesse presente, reduzindo o seu objetivo de interface do usuário leve.

Diretrizes de uso adicional

Partes de um submenu

Um submenu tem três componentes: o título, o conteúdo principal e botões de comando.

Veja aqui as recomendações de quando usar cada componente de cada uso comum do submenu.

  • Coletando informações:
    TítuloNenhum
    Conteúdo principalInclua apenas os controles necessários. Mantenha as instruções ou os links "Saiba mais" no mínimo. Se o usuário estiver alterando uma configuração ou ligando/desligando um botão, por exemplo, então a mudança deve ser confirmado assim que for feita. Interagir com conteúdo personalizado não deve ignorar o submenu; a menos que haja um botão de comando, o usuário deve estar no controle de ignorar o submenu manualmente.
    ControlesSe o botão for apenas para confirmar as alterações do usuário, então ele não é obrigatório, e essas alterações devem ser confirmadas automaticamente. Se o botão iniciar alguma ação (como Logon ou Salvar Documento) ou o usuário tiver inserido texto que deseja confirmar, então um botão é adequado, e o submenu deve ser ignorado quando o usuário pressiona o botão. Mas o usuário pode cancelar sem confirmar, ignorando o submenu.

    Submenu com caixa de entrada de texto e botão

     

  • Avisos e confirmações:
    TítuloNenhum
    Conteúdo principalInforme o aviso que o usuário deve considerar antes de executar a ação. Não coloque isso como uma pergunta.

    Submenu com botão de confirmação

    Controles Inclua apenas a ação que o usuário iniciou, como Excluir. Não inclua a ação oposta nem um botão Cancelar; isso pode ser feito ignorando o submenu.

     

  • Menus suspensos:
    TítuloNenhum
    Conteúdo principalRelacione os itens de menu com os quais o usuário pode interagir.

    Submenu com itens de menu

    ControlesUse o MenuCommand para esses botões.

     

  • Exibindo mais informações:
    TítuloTítulo opcional para relacionar o status ou uma descrição de um ícone que foi usado para chamá-lo.

    Submenu com título e conteúdo

    Conteúdo principalInclua as informações.

    Submenu com conteúdo e sem título

    ControlesColoque botões opcionais para fazer mais com as informações no submenu.

     

Tópicos relacionados

Para designers
Adicionando barras de aplicativos
Adicionando menus de contexto
Diretrizes de submenus
Diretrizes de comandos da área de transferência
Definindo o layout da interface do usuário
Diretrizes de caixas de diálogo
Para desenvolvedores (HTML)
WinJS.UI.Flyout
Para desenvolvedores (XAML)
Flyout class

 

 

Mostrar:
© 2014 Microsoft