Noções básicas de comando

Em um aplicativo do Windows, elementos de comando são os elementos interativos da interface do usuário que permitem aos usuários executar ações como enviar um email, excluir um item ou enviar um formulário. As interfaces de comando são formadas por elementos de comando comuns, as superfícies de comando que as hospedam, as interações compatíveis com elas e as experiências que elas oferecem.

Proporcionar a melhor experiência de comando

O aspecto mais importante de uma interface de comando é o que você está tentando permitir que o usuário realize. Ao planejar a funcionalidade de um aplicativo, considere seguir as etapas necessárias para realizar essas tarefas e as experiências de usuário que você quer oferecer. Após concluir um rascunho inicial dessas experiências, tome decisões sobre as ferramentas e as interações para implementá-las.

Veja algumas experiências de comando comuns:

• Enviando ou enviando informações
• Selecionar configurações e opções
• Conteúdo de filtro e pesquisa
• Abrir, salvar e excluir arquivos
• Editar ou criar conteúdo

Seja criativo ao projetar experiências de comando. Escolha quais dispositivos de entrada serão compatíveis e como o aplicativo responderá a cada um deles. Ao oferecer compatibilidade com a mais ampla variedade de funcionalidades e preferências, você torna o aplicativo o mais utilizável, portátil e acessível possível (confira mais detalhes em Design de comandos para aplicativos do Windows).

Escolher os elementos de comando certos

Usar os elementos certos em uma interface de comando pode fazer a diferença entre um aplicativo que parece intuitivo e fácil de usar e um que parece difícil ou confuso. Um conjunto abrangente de elementos de comando está disponível no aplicativo do Windows. Veja uma lista de alguns dos elementos de comando mais comuns da UWP.

Botões

Os Botões disparam uma ação imediata. Dentre os exemplos estão: enviar um email, enviar dados de formulários ou confirmar uma ação em uma caixa de diálogo.

Listas

Listas apresentam itens em uma lista interativa ou em uma grade. Geralmente usado para muitas opções ou itens de exibição. Dentre os exemplos estão: lista suspensa, caixa de listagem, exibição de lista e exibição de grade.

Controles de seleção

Permite que os usuários escolham entre algumas opções, por exemplo, ao concluir uma pesquisa ou definir as configurações do aplicativo. Os exemplos incluem o comutador CheckBox, RadioButton e Toggle.

Seletores de calendário, data e hora

Os Seletores de calendário, data e hora permitem que os usuários exibam e modifiquem informações de data e hora, por exemplo, ao criar um evento ou definir um alarme. Dentre os exemplos estão: seletor de data do calendário, exibição de calendário, seletor de data e seletor de hora.

Entrada de texto preditiva

Fornece sugestões à medida que os usuários digitam, por exemplo, ao inserir dados ou realizar consultas. Os exemplos incluem AutoSuggestBox.

Para obter uma lista completa, consulte Controles e elementos de interface do usuário

Colocar comandos na superfície certa

É possível colocar elementos de comando em várias superfícies no aplicativo, inclusive na tela do aplicativo ou em contêineres de comando especial, como uma barra de comando, o submenu de uma barra de comando, a barra de menus e as caixas de diálogo.

Sempre tente permitir que os usuários manipulem o conteúdo diretamente em vez de por meio de comandos que atuam no conteúdo, como arrastar e soltar para reorganizar itens de lista em vez de botões de comando para cima e para baixo.

No entanto, talvez isso não seja possível com determinados dispositivos de entrada ou ao acomodar as preferências e as habilidades de um usuário específico. Nesses casos, oferecer o maior número possível de funcionalidades e colocar esses elementos de comando em uma superfície de comando no aplicativo.

Veja uma lista das superfícies de comando mais comuns.

Tela do aplicativo (área de conteúdo)

Se um comando for constantemente necessário para que os usuários concluam os principais cenários, coloque-o na tela. Como você pode colocar comandos próximos dos objetos que eles afetam (ou sobre eles), colocar os comandos na tela torna seu uso fácil e evidente. No entanto, escolha com atenção os comandos que você colocará na tela. O excesso de comandos na tela do aplicativo ocupa espaço valioso e pode sobrecarregar o usuário. Se o comando não for usado com frequência, considere a possibilidade de colocá-lo em outra superfície de comando.

Barras de comandos e barras de menus

As Barras de comandos ajudam a organizar os comandos e facilitam o acesso a eles. As barras de comandos podem ser colocadas na parte superior da tela, na parte inferior da tela ou em ambas ao mesmo tempo (uma MenuBar também pode ser usada quando a funcionalidade do seu aplicativo é complexa demais para uma barra de comandos).

Menus e menus de contexto

Menus e menus de contexto economizam espaço organizando os comandos e ocultando-os até que o usuário precise deles. Normalmente, os usuários acessam um menu ou um menu de contexto clicando em um botão ou clicando com o botão direito do mouse em um controle.

O CommandBarFlyout é um tipo de menu contextual que combina os benefícios de uma barra de comandos e um menu de contexto em um único controle. Eles podem fornecer atalhos para ações usadas com frequência e fornecer acesso a comandos secundários que são relevantes somente em determinados contextos, como na área de transferência ou em comandos personalizados.

A UWP também fornece um conjunto de menus e menus de contexto tradicionais; para obter mais informações, consulte Menus e menus de contexto.

Fazer comentários sobre o comando

Os comentários sobre o comando comunicam aos usuários que uma interação ou comando foi detectado, como o comando foi interpretado e manipulado e se o comando foi bem-sucedido ou não. Isso ajuda os usuários a entender o que fizeram e o que pode ser feito. Idealmente, os comentários devem ser integrados naturalmente em sua interface do usuário para que os usuários não precisem ser interrompidos ou executar nenhuma ação adicional, a menos que absolutamente necessário.

Observação

Faça comentários somente quando necessário e se não estiver disponível em outro local. Mantenha a interface do usuário do aplicativo limpa e organizada, a menos que você esteja agregando valor.

Aqui estão algumas maneiras de fazer comentários em seu aplicativo.

Barra de comandos

A área de conteúdo do CommandBar é um local intuitivo para comunicar status aos usuários se eles quiserem ver comentários.

Submenus

Submenus são pop-ups contextuais leves que podem ser ignorados tocando ou clicando em algum lugar fora deles.

Controles de caixa de diálogo

Os Controles de caixa de diálogo são sobreposições de interface do usuário modais que fornecem informações contextuais de aplicativo. Na maioria dos casos, as caixas de diálogo bloqueiam interações com a janela do aplicativo até que sejam explicitamente ignoradas e muitas vezes solicitam algum tipo de ação do usuário. As caixas de diálogo podem causar interrupções e só devem ser usadas em determinadas situações. Para obter mais informações, consulte a seção Quando confirmar ou desfazer ações.

Dica

Tome cuidado com a quantidade de caixas de diálogo de confirmação que seu aplicativo usa; elas podem ser muito úteis quando o usuário comete um erro, mas são um obstáculo sempre que ele está tentando executar intencionalmente uma ação.

Quando confirmar ou desfazer ações

Não importa se a interface do usuário do aplicativo foi bem projetada, todos os usuários podem executar as ações indesejadas. O aplicativo pode ajudar nessas situações ao exigir que a confirmação de uma ação ou ao fornecer uma forma de desfazer ações recentes.

Para ações que não podem ser desfeitas e têm consequências importantes, recomendamos o uso de uma caixa de diálogo de confirmação. Exemplos de tais ações incluem:

• Substituir um arquivo
• Não salvar um arquivo antes de fechar
• Confirmar a exclusão permanente de um arquivo ou dados
• Fazer uma compra (a menos que o usuário opte por não exigir uma confirmação)
• Enviar um formulário, por exemplo, inscrever-se para algo

Para ações que podem ser desfeitas, oferecer um comando Desfazer simples geralmente é suficiente. Exemplos de tais ações incluem:

• Excluir um arquivo
• Excluir um email (não permanentemente)
• Modificar o conteúdo ou editar texto
• Renomear um arquivo

Otimizar para tipos específicos de entrada

Consulte a Cartilha de interação para obter mais detalhes sobre a otimização de experiências do usuário em relação a um tipo de entrada ou um dispositivo específico.