Teclado

Diretrizes de design do teclado

Imagem de hero do teclado

Um teclado é o dispositivo principal de inserção de texto, e geralmente é indispensável para pessoas portadoras de determinadas deficiências ou usuários que o consideram um método mais rápido e mais eficiente de interagir com um aplicativo.

Os usuários podem interagir com aplicativos universais por meio de teclado de hardware e dois teclados de software: o teclado virtual (OSK) e o teclado touch.

Teclado virtual

O teclado virtual é um teclado de software visual, que você pode usar no lugar do teclado físico para digitar e inserir dados usando touch, mouse, caneta ou outro dispositivo apontador (uma tela touch não é necessária). O teclado virtual é fornecido para sistemas que não têm um teclado físico ou para usuários cujos problemas de mobilidade impedem o uso de dispositivos de entrada físicos tradicionais. O teclado virtual emula a maior parte, se não toda a funcionalidades de um teclado de hardware.

O teclado virtual pode ser ativado na página Teclado no Settings > Ease of access.

Observação  O Teclado Virtual tem prioridade sobre o teclado touch, que não será mostrado se o Teclado Virtual estiver presente.
 

O teclado virtual

Teclado virtual

Teclado virtual

O teclado virtual é um teclado de software visual usado para entrada de texto por touch. Ele não é substitui o teclado virtual, pois é usado somente para entrada de texto (ele não emula o teclado de hardware).

Dependendo do dispositivo, o teclado virtual aparece quando um campo de texto ou outro controle de texto editável é focalizado ou quando o usuário o ativa manualmente por meio do Centro de Notificações:

Ícone de teclado virtual no Centro de Notificações

Observação  O usuário talvez precise ir para a tela Modo Tablet em Settings > System e ativar "O Windows fica mais fácil de usar com toque quando você usa o dispositivo como tablet" para ativar a aparência automática do teclado virtual.
 

Se seu aplicativo define o foco por meio de programação para um controle de entrada de texto, o teclado virtual não é invocado. Isso elimina comportamentos inesperados não instigados diretamente pelo usuário. No entanto, o teclado é ocultado automaticamente quando o foco é movido por meio de programação para um controle de entrada que não é de texto.

Normalmente, o teclado virtual permanece visível enquanto o usuário navega entre controles em um formulário. Esse comportamento pode variar com base nos outros tipos de controle no formulário.

A seguir há uma lista de controles que não são de edição que podem receber o foco durante uma sessão de entrada de texto por meio do teclado virtual sem descartar o teclado. Ao invés de mover desnecessariamente a interface do usuário e possivelmente desorientar o usuário, o teclado virtual permanece à vista, pois pode ser que o usuário alterne entre esses controles e a entrada de texto com o teclado virtual.

  • Caixa de seleção
  • Caixa de combinação
  • Botão de opção
  • Barra de rolagem
  • Árvore
  • Item de árvore
  • Menu
  • Barra de menu
  • Item de menu
  • Barra de ferramentas
  • Lista
  • Item de lista

Veja aqui exemplos de modos diferentes do teclado virtual. A primeira imagem ilustra o layout padrão; a segunda, o layout em miniatura (que pode não estar disponível em todos os idiomas).

O teclado virtual no modo de layout padrão

O teclado virtual no modo de layout padrão

O teclado virtual no modo de layout expandido

O teclado virtual no modo de layout expandido

O teclado virtual no modo de layout em miniatura

O teclado virtual no modo de layout em miniatura padrão

O teclado virtual no modo de layout em miniatura numérico

O teclado virtual no modo de layout em miniatura numérico

Princípios

Interações de teclado bem-sucedidas permitem que os usuários utilizem cenários básicos de aplicativos apenas com o teclado, ou seja, os usuários podem acessar todos os elementos interativos da interface do usuário e ativar a funcionalidade padrão. Diversos fatores podem afetar o grau de sucesso, incluindo a navegação por teclado, as teclas de acesso para acessibilidade e as teclas de atalho para usuários avançados.

Observação  O teclado virtual não oferece suporte para alternância e a maioria dos comandos do sistema (veja Padrões).
 

Navegação

Para usar um controle (incluindo os elementos de navegação) com o teclado, o controle precisa ter foco. Uma maneira de um controle receber o foco do teclado é torná-lo acessível via navegação por tabulação. Um modelo de navegação de teclado bem projetado oferece uma ordem de tabulação previsível e lógica que permite que um usuário explore e use seu aplicativo de forma rápida e eficiente.

Todos os controles interativos devem ter paradas de tabulação (a menos que estejam em um grupo), enquanto os controles não interativos, como rótulos, não devem.

Um conjunto de controles relacionados pode ser incluído em um grupo de controles e ter atribuída uma única parada de tabulação. Grupos de controle são usados para conjuntos de controles que se comportam como um único controle, como botões de opção. Eles também podem ser usados quando há muitos controles para navegar de forma eficiente somente com a tecla Tab. As teclas de seta, Home, End, Page Up e Page Down movem o foco de entrada entre os controles dentro de um grupo (não é possível navegar para fora de um grupo de controles usando essas teclas).

Você deve definir o foco de teclado inicial no elemento com o qual os usuários intuitivamente (ou mais provavelmente) vão interagir primeiro quando seu aplicativo for iniciado. Frequentemente, esse é o modo de exibição de conteúdo principal do aplicativo para que um usuário possa iniciar usando as teclas de seta para rolar o conteúdo do aplicativo.

Não defina o foco inicial do teclado em um elemento com resultados potencialmente negativos ou até mesmo desastrosos. Isso pode impedir a perda de dados ou o acesso ao sistema.

Experimente classificar e apresentar os comandos, os controles e os conteúdos mais importantes primeiro na ordem de tabulação e na ordem de exibição (ou hierarquia visual). Entretanto, a posição de exibição real pode depender do contêiner de layout pai e de certas propriedades dos elementos filho que influenciam o layout. Em particular, layouts que usam uma metáfora de grade ou uma metáfora de tabela podem ter uma ordem de leitura bem diferente da ordem de tabulação. Isso não é sempre um problema, mas você deve testar a funcionalidade do aplicativo, como uma interface do usuário com touch e uma interface do usuário acessível por teclado.

A ordem de tabulação deve seguir a ordem de leitura, sempre que possível. Isso pode reduzir a confusão e depende da localidade e do idioma.

Associe botões de teclado à interface do usuário adequada (botões Voltar e Avançar) no seu aplicativo.

Tente tornar a navegação de volta para a tela inicial de seu aplicativo e entre o conteúdo principal tão fácil e simples quanto possível.

Use as teclas de seta como atalhos de teclado para permitir uma navegação interna adequada entre elementos filho de elementos compostos. Se os nós de exibição de árvore tiverem elementos filho separados para lidar com expansão e recolhimento e ativação de nós, use as teclas de seta para esquerda e direita para obter a funcionalidade de expansão e recolhimento. Isso é consistente com os controles da plataforma.

Devido ao fato de o teclado virtual obstruir uma grande parte da tela, a UWP (Plataforma Universal do Windows) garante que o campo de entrada com foco role para a exibição à medida que um usuário navegar pelos controles no formulário, incluindo os controles que não estejam em exibição no momento. Controles personalizados devem emular esse comportamento.

Um formulário com e sem o teclado virtual em exibição

Em alguns casos, há elementos da interface do usuário que devem ficar na tela o tempo todo. Projete a IU de forma que os controles do formulário fiquem em uma região de movimento panorâmico e os elementos importantes da IU fiquem estáticos. Por exemplo:

Um formulário que contém áreas que devem ser sempre exibidas

Ativação

Um controle poderá ser ativado de diversas formas diferentes, se ele tiver foco no momento ou não.

Barra de espaços, Enter e Esc

A barra de espaços deve ativar o controle com foco de entrada. A tecla Enter deve ativar o controle com foco de entrada ou um controle padrão. Um controle padrão é o controle com foco inicial ou que responde exclusivamente à tecla Enter (geralmente ele é alterado com foco de entrada). Além disso, a tecla Esc deve fechar ou sair da interface do usuário transitória, como menus e caixas de diálogo.

O aplicativo Calculadora mostrado aqui usa a barra de espaços para ativar o botão com foco, bloqueia a tecla Enter para o botão "=" e bloqueia a tecla Esc para o botão "C".

O aplicativo Calculadora

Teclas de acesso e teclas aceleradoras

Implemente os atalhos de teclado para a funcionalidade principal do aplicativo. (Um atalho é uma combinação de teclas que aumenta a produtividade, fornecendo uma maneira eficiente para o usuário acessar a funcionalidade do aplicativo.)

Fornece atalhos de teclado por meio de teclas de acesso e teclas aceleradoras (descritas posteriormente na seção de padrões de teclado) para dar suporte à interação com controles diretamente em vez da navegação com a tecla Tab.

Observação  Embora alguns controles tenham rótulos intrínsecos, como botões de comando, caixas de seleção e botões de opção, outros controles têm rótulos externos, como modos de exibição de lista. Para controles com rótulos externos, a tecla de acesso é atribuída ao rótulo, que, quando invocado, define o foco para um elemento ou valor dentro do controle associado.
 

O exemplo aqui mostra as teclas de acesso da guia Layout de Página no Word.

As teclas de acesso da guia Layout de Página no Word

Aqui, o valor do campo de texto Recuo à esquerda está realçado após a inserção da tecla de acesso identificada no rótulo associado.

O valor do campo de texto Recuo à esquerda está realçado após a inserção da tecla de acesso identificada no rótulo associado.

Usabilidade e acessibilidade

Uma experiência de interação do teclado bem projetada é um aspecto importante da acessibilidade do software. Ela permite que os usuários com deficiência visual ou que possuam determinadas deficiências motoras naveguem em um aplicativo e interajam com seus recursos. Esses usuários talvez não consigam usar um mouse e devem, em vez disso, contar com diversas tecnologias assistenciais que incluem ferramentas avançadas de teclado e teclados virtuais (junto com ampliadores de tela, leitores de tela e utilitários de entrada de voz). Para esses usuários, a capacidade de abrangência é mais importante do que consistência.

Os usuários experientes muitas vezes têm uma forte preferência por usar o teclado, pois os comandos de teclado podem ser inseridos mais rapidamente e não exigem remover as mãos do teclado. Para esses usuários, eficiência e consistência são cruciais; capacidade de abrangência é importante apenas para os comandos usados com mais frequência.

Há distinções sutis ao projetar para usabilidade e acessibilidade, por isso, há suporte para dois mecanismos de acesso de teclado diferentes.

Teclas de acesso têm as seguintes características:

  • Uma tecla de acesso é um atalho para um elemento da interface do usuário em seu aplicativo.
  • Elas usam a tecla Alt mais uma tecla alfanumérica.
  • Elas são principalmente para acessibilidade.
  • Elas são atribuídas a todos os menus e a maioria dos controles de caixa de diálogo.
  • Elas não devem ser memorizadas, portanto, estão documentadas diretamente na interface do usuário, com o caractere de rótulo de controle correspondente sublinhado.
  • Elas têm efeito somente na janela atual e navegam até o item de menu ou controle correspondente.
  • Elas não são atribuídas consistentemente porque nem sempre podem. No entanto, as teclas de acesso devem ser atribuídas consistentemente a comandos usados comumente, em especial os botões de confirmação.
  • Elas são localizadas.

Como as teclas de acesso não precisam ser memorizadas, a elas são atribuídos um caractere que está no início do rótulo para torná-las fáceis de encontrar, mesmo se houver uma palavra-chave que apareça posteriormente no rótulo.

Em compensação, as teclas aceleradoras têm as seguintes características:

  • Uma tecla aceleradora é um atalho para um comando do aplicativo.
  • Elas usam principalmente as sequências de tecla Ctrl e Função (teclas de atalho de sistema do Windows também usam teclas Alt + teclas não alfanuméricas e o logotipo do Windows).
  • Elas são principalmente para eficiência de usuários avançados.
  • Elas são atribuídas apenas a comandos usados mais comumente.
  • Elas devem ser memorizadas e estão documentadas apenas em menus, dicas de ferramentas e na Ajuda.
  • Elas têm efeito em todo o programa, mas não têm nenhum efeito caso não se apliquem.
  • Elas devem ser atribuídas consistentemente porque são memorizadas e não diretamente documentadas.
  • Elas não são localizadas.

Como as teclas aceleradoras destinam-se a ser memorizadas, idealmente, as teclas aceleradoras usadas com mais frequência usam letras dos primeiros caracteres ou dos caracteres mais memorizáveis nas palavras-chave do comando, como Ctrl + C para Copiar e Ctrl + Q para Solicitar.

Os usuários devem conseguir realizar todas as tarefas com suporte em seu aplicativo usando somente o teclado de hardware ou o Teclado Virtual.

Você deve oferecer aos usuários que dependem de leitores de tela e outras tecnologias auxiliares uma maneira fácil de descobrir as teclas aceleradoras em seu aplicativo. Comunique as teclas aceleradoras usando dicas de ferramentas, nomes acessíveis, descrições acessíveis ou alguma outra forma de comunicação na tela. No mínimo, as teclas de acesso e aceleradoras devem ser bem documentadas no conteúdo da Ajuda do seu aplicativo.

Não atribua teclas aceleradoras conhecidas ou padrão à outra funcionalidade. Por exemplo, Ctrl + F normalmente é usado para localizar ou pesquisar.

Não se preocupe tentando atribuir as teclas de acesso a todos os controles interativos em uma interface do usuário densa. Basta garantir que os mais importantes e mais usados tenham teclas de acesso, ou use os grupos de controle e atribua uma tecla de acesso ao rótulo do grupo de controle.

Não altere comandos usando modificadores de teclado. Isso não pode ser descoberto e pode causar confusão.

Não desabilite um controle enquanto ele tem foco de entrada. Isso pode interferir na entrada do teclado.

Para garantir experiências de interação do teclado bem-sucedidas, é fundamental testar seu aplicativo completamente e exclusivamente com o teclado.

Entrada de texto

Sempre consulte as funcionalidades do dispositivo ao contar com a entrada do teclado. Em alguns dispositivos (como um telefone), o teclado virtual só pode ser usado para entrada de texto, já que ele não fornece muitos teclas aceleradoras ou de comando encontradas em um teclado de hardware, (como a tecla Alt, as teclas de função ou a tecla do logotipo do Windows).

Não faça com que os usuários tenham de navegar o aplicativo usando o teclado virtual. Dependendo do controle que tem o foco, o teclado virtual pode ser ignorado.

Tente exibir o teclado virtual durante toda a interação com seu formulário. Isso elimina a variação de interface do usuário que pode confundir o usuário no meio de um fluxo de entrada de texto ou de formulário.

Verifique se os usuários sempre podem ver o campo de entrada no qual estão digitando. O teclado virtual fecha metade da tela, para que o campo de entrada com foco role para a exibição conforme o usuário percorre o formulário.

Padrões

Um teclado de hardware padrão ou teclado virtual consiste em sete tipos de teclas, cada uma com funcionalidade única:

  • Tecla de caractere: envia um caractere literal para a janela com o foco de entrada.
  • Tecla modificadora: altera a função de uma tecla primária quando pressionada simultaneamente, como Ctrl, Alt, Shift e a tecla de logotipo do Windows.
  • Tecla de navegação: move o foco de entrada ou de localização da entrada do texto, como Tab, Home, End, Page Up, Page Down e as teclas de seta direcional.
  • Tecla de edição: manipula texto, como as teclas Shift, Tab, Enter, Insert, Backspace e Delete.
  • Tecla de função: desempenha uma função especial, como as teclas F1 a F12.
  • Tecla de alternância: coloca o sistema em um modo, como as teclas Caps Lock, ScrLk e Num Lock.
  • Tecla de comando: executa uma tarefa ou um comando de ativação do sistema, como as teclas Barra de espaços, Enter, Esc, Pause/Break e Print Screen.

Além dessas categorias, existe uma classe de secundária de teclas e combinações de teclas que pode ser usada como atalhos para a funcionalidade do aplicativo:

  • Tecla de acesso: expõe controles ou itens de menu, quando pressionada a tecla Alt com uma tecla de caractere, indicada pelo sublinhado da atribuição de caractere da tecla de acesso em um menu, ou pela exibição do(s) caractere(s) de tecla de acesso em uma sobreposição.
  • Tecla aceleradora: expõe comandos do aplicativo, pressionando uma tecla de função ou a tecla Ctrl com uma tecla de caractere. Seu aplicativo pode ou não ter uma interface do usuário que corresponde exatamente ao comando.

Outra classe de combinações de teclas, conhecida como sequência segura (SAS), não pode ser interceptada por um aplicativo. Esse é um recurso de segurança destinado a proteger o sistema do usuário durante o logon e inclui Ctrl-Alt-Del e Win-L.

O aplicativo Bloco de notas é mostrado aqui com menu Arquivo expandido que inclui as teclas de acesso e as teclas aceleradoras.

O aplicativo Bloco de notas com o menu Arquivo expandido que inclui as teclas de acesso e as teclas aceleradoras.

Comandos de teclado

A seguir há uma lista abrangente das interações de teclado fornecidas em vários dispositivos que dão suporte à entrada de teclado. Alguns dispositivos e plataformas exigem interações e pressionamentos de teclas nativos; eles são indicados.

Ao projetar interações e controles personalizados, use este idioma do teclado consistentemente para tornar seu aplicativo familiar, confiável e fácil de aprender.

Não redefina os atalhos de teclado padrão.

As tabelas seguintes listam os comandos de teclado usados ​​com frequência. Para ver uma lista completa de comandos de teclado, consulte Teclas de atalho de teclado do Windows.

Comandos de navegação

AçãoComando de tecla
VoltarAlt+À esquerda ou o botão Voltar em teclados especiais
AvançarAlt+À direita
Para cimaAlt+Acima
Cancelar ou sair do modo atualEsc
Percorrer itens em uma listaTecla de cursor (à esquerda, à direita, acima, abaixo)
Saltar para a próxima lista de itensCTRL+À esquerda
Zoom semânticoCtrl++ ou Ctrl+-
Ir para um item nomeado em uma coleçãoComeçar a digitar o nome do item
Próxima páginaPage Up, Page Down ou Barra de Espaço
Guia PróximoCtrl+Tab
Guia AnteriorCtrl+Shift+Tab
Abrir barra de aplicativosWindows+Z
Ativar ou navegar em um itemTecla Enter
SelecionarBarra de espaço
Selecionar continuamenteShift+Tecla de cursor
Selecionar tudoCtrl+A

 

Comandos comuns

AçãoComando de tecla
Fixar um itemCtrl+Shift+1
SalvarCtrl+S
LocalizarCtrl+F
ImpressãoCtrl+P
CopiarCtrl+C
RecortarCtrl+X
Novo itemCtrl+N
ColarCtrl+V
AbrirCtrl+O
Abrir um endereço (por exemplo, uma URL no Internet Explorer)Ctrl+L ou Alt+D

 

Comandos de navegação de mídia

AçãoComando de tecla
Reproduzir/PausarCtrl+P
Próximo itemCtrl+F
Visualizar itemCtrl+B

 

Observação: os comandos de tecla de navegação de mídia para Reproduzir/Pausar e Próximo item são iguais aos comandos de tecla para Imprimir e Localizar, respectivamente. Comandos comuns devem ter prioridade sobre comandos de navegação de mídia. Por exemplo, se um aplicativo der suporte para reprodução de mídia e impressão, o comando de tecla Ctrl+P deverá imprimir.

Comentários visuais

Use retângulos de foco somente com interações de teclado. Se o usuário iniciar uma interação por toque, faça com que a interface do usuário de teclado desapareça gradualmente. Dessa forma, a interface do usuário fica mais organizada.

Não exiba comentários visuais quando um elemento não permite interação (como texto estático). Novamente, isso mantém a interface do usuário mais organizada.

Tente exibir comentários visuais simultaneamente para todos os elementos que representam o mesmo destino de entrada.

Tente fornecer botões virtuais (por exemplo, + e -) como dicas para emulação de manipulações baseadas em touch, ou seja, movimento panorâmico, rotação, zoom etc.

Para obter diretrizes mais gerais sobre comentários visuais, veja Diretrizes para comentários visuais.

Tópicos relacionados

Diretrizes da experiência do usuário para interações personalizadas do usuário
Desenvolvedores
Interações por teclado
Exemplos
Entrada: exemplo de entrada de texto em teclado virtual
Respondendo ao exemplo de teclado virtual na tela
Entrada: exemplo de teclado virtual (C#/C++ somente)

 

 

Mostrar:
© 2016 Microsoft