Caneta

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Todos os aplicativos do Microsoft Windows devem ser habilitados para caneta. E fazer isso é mais fácil do que você pensa.

A entrada de caneta refere-se à maneira como o Windows permite que você interaja diretamente com um computador usando uma caneta. Uma caneta pode ser usada para apontar e também para gestos, entrada de texto simples e captura de pensamentos de forma livre em tinta digital.

A caneta usada para entrada tem uma dica fina e suave que dá suporte a apontar, escrever ou desenhar com tinta precisos. A caneta também pode ter um botão de caneta opcional (usado para executar cliques com o botão direito do mouse) e borracha (usado para apagar tinta). A maioria das canetas dá suporte ao foco.

figura de uma caneta típica

Uma caneta típica.

Quando a caneta é usada para manuscrito, os traços do usuário podem ser convertidos em texto usando o reconhecimento de manuscrito. Os traços podem ser mantidos assim como foram gravados, com o reconhecimento realizado em segundo plano para dar suporte à pesquisa e à cópia como texto. Esses traços não convertidos são chamados de tinta digital.

captura de tela de manuscrito na página do OneNote

Um exemplo de entrada à tinta.

A maioria dos programas do Windows já é compatível com canetas, pois uma caneta pode ser usada em vez de um mouse, a caneta funciona sem problemas para tarefas e interações mais importantes e o programa responde a gestos. Um programa torna-se amigável à manuscrito quando ajuda com a entrada de texto manuscrita. Um programa se torna habilitado para tinta quando pode manipular a tinta diretamente, em vez de exigir que os traços de caneta sejam convertidos em movimentos de texto ou equivalentes do mouse. Isso permite que os usuários escrevam, desenhem e adicionem comentários em tinta digital de alta qualidade e de fluxo livre. A coleta de tinta é diferente da coleta de eventos do mouse, pois a tinta requer maior resolução e uma taxa de amostra mais alta, e também pode adicionar nuances com pressão e inclinação. Para obter informações sobre como criar programas compatíveis com manuscrito e habilitados para tinta, consulte Integrando a entrada de tinta e texto usando a caneta.

Ao posicionar uma caneta, há menos necessidade de um cursor porque a dica representa a si mesma. No entanto, para obter assistência de direcionamento, o Windows fornece um cursor de caneta minúsculo que indica o local da caneta atual. Ao contrário do ponteiro do mouse que ele substitui, o cursor de caneta não é necessário, a menos que a caneta esteja perto da tela, portanto, ela desaparece após alguns segundos de inatividade para permitir uma exibição de informações desobstruída.

A maioria dos programas amigáveis à caneta dá suporte a gestos. Um gesto é um movimento rápido da caneta em uma tela que o computador interpreta como um comando, em vez de como um movimento do mouse, gravação ou desenho. Um dos gestos mais rápidos e fáceis de executar é um movimento. Um movimento é um gesto simples que resulta em navegação ou em um comando de edição. Os movimentos de navegação incluem arrastar para cima, arrastar para baixo, mover para trás e seguir em frente, enquanto os movimentos de edição incluem copiar, colar, desfazer e excluir.

Todos os ponteiros, exceto o ponteiro ocupado, têm um único ponto de acesso de pixel que define o local exato da tela do ponteiro. O ponto de acesso determina qual objeto é afetado pela interação. Os objetos definem uma zona quente, que é a área em que o ponto de acesso é considerado sobre o objeto . Normalmente, a zona quente coincide com as bordas de um objeto, mas pode ser maior para facilitar a interação.

Como uma caneta pode apontar com mais precisão do que um dedo, se a interface do usuário funcionar bem para toque, ela também funcionará bem para uma caneta. Consequentemente, este artigo se concentra principalmente na adição de suporte de caneta a programas que já foram projetados para toque.

Nota: As diretrizes relacionadas ao mouse, acessibilidade e toque são apresentadas em artigos separados.

Conceitos de design

O uso de uma caneta para entrada tem as seguintes características:

  • Natural e intuitivo. Todo mundo sabe como apontar e tocar com uma caneta. As interações de objeto são projetadas para corresponder à forma como os usuários interagem com objetos no mundo real de maneira consistente.
  • Expressivo. Traços de uma caneta são fáceis de controlar, tornando a escrita, desenho, esboço, pintura e anotações mais fáceis do que fazê-lo com um mouse.
  • Mais pessoal. Assim como uma anotação ou assinatura manuscrita é mais pessoal do que uma tipada, usar uma anotação ou assinatura digitalmente manuscrita também é mais pessoal.
  • Menos intrusivo. O uso de uma caneta é silencioso e, consequentemente, muito menos perturbador do que digitar ou clicar, especialmente em situações sociais, como reuniões.
  • Portátil. Um computador com uma funcionalidade de caneta pode ser mais compacto porque a maioria das tarefas pode ser concluída sem teclado, mouse ou touchpad. Ele pode ser mais flexível porque não requer uma superfície de trabalho. Ele habilita novos locais e cenários para usar um computador.
  • Direto e envolvente. Usar uma caneta faz você sentir que está interagindo diretamente com os objetos na tela, enquanto o uso de um mouse ou touchpad sempre exige que você coordene os movimentos das mãos com movimentos separados do ponteiro na tela, o que parece indireto por comparação.

Todos os programas do Windows devem ter uma boa experiência com caneta. Os usuários devem ser capazes de executar as tarefas mais importantes do programa com eficiência usando uma caneta. Algumas tarefas, como digitação ou manipulação detalhada de pixels, não são apropriadas para uma caneta, mas devem pelo menos ser possíveis.

Felizmente, se o programa já estiver bem projetado e for sensível ao toque, fornecer um bom suporte à caneta é fácil de fazer. Para essa finalidade, um programa bem projetado:

  • Tem um bom suporte para mouse. Os controles interativos têm recursos claros e visíveis e têm estados de foco para comentários de ponteiro. Os objetos têm comportamentos padrão para as interações padrão do mouse (clique com o botão esquerdo único e duplo, clique com o botão direito do mouse, arraste e passe o mouse). A forma do ponteiro é alterada conforme apropriado para indicar o tipo de manipulação direta.
  • Tem um bom suporte para teclado. O programa torna os usuários eficientes fornecendo atribuições de teclas de atalho padrão, especialmente para comandos de navegação e edição que também podem ser gerados por meio de gestos.
  • Tem controles grandes o suficiente para toque. Os controles têm um tamanho mínimo de 23x23 pixels (unidades de diálogo 13x13 [DLUs]), e os controles mais usados são pelo menos 40 x 40 pixels (DLUs 23x22). Para evitar comportamentos sem resposta, não deve haver pequenas lacunas entre os destinos, os elementos da interface do usuário devem ser espaçados para que os destinos adjacentes estejam tocando ou tenham pelo menos 5 pixels (3 DLUs) de espaço entre eles.
  • É acessível. Usa a MSAA (Acessibilidade Ativa da Microsoft) para fornecer acesso programático à interface do usuário para tecnologias adaptativas. O programa responde adequadamente às alterações de tema e métrica do sistema.
  • Funciona bem e fica bem em 120 dpi (pontos por polegada), que é a resolução de exibição padrão recomendada para computadores habilitados para caneta.
  • Usa controles comuns. Os controles mais comuns são projetados para dar suporte a uma boa experiência de caneta. Se necessário, o programa usa controles personalizados bem implementados projetados para dar suporte a fácil direcionamento e manipulação interativa.
  • Usa controles restritos. Quando projetados para facilitar o direcionamento, controles restritos, como listas e controles deslizantes, podem ser melhores do que controles não treinados, como caixas de texto, pois reduzem a necessidade de entrada de texto.
  • Fornece valores padrão apropriados. O programa seleciona a opção mais segura (para evitar perda de dados ou acesso ao sistema) e a opção mais segura por padrão. Se a segurança e a segurança não forem fatores, o programa selecionará a opção mais provável ou conveniente, eliminando assim a interação desnecessária.
  • Fornece preenchimento automático de texto. Fornece uma lista dos valores de entrada mais prováveis ou recentes para facilitar muito a entrada de texto.

Infelizmente, o inverso também será verdadeiro se o programa não for bem projetado, suas deficiências serão especialmente óbvias para os usuários que usam uma caneta.

Modelo para interação com caneta

Se você não tiver experiência com o uso de uma caneta, a melhor introdução é aprender fazendo. Obtenha um computador habilitado para caneta, coloque o mouse e o teclado de lado e execute as tarefas que normalmente você faz usando apenas uma caneta. Experimente programas habilitados para tinta, como o Windows Journal, e programas que não estão habilitados para tinta. Se você tiver um Tablet PC, experimente mantê-lo em diferentes posições, como no colo, deitado em uma mesa ou em seus braços enquanto estiver de pé. Tente usá-lo na orientação retrato e paisagem, e segurando a caneta para escrever e apenas para apontar, na mão esquerda, bem como na direita.

Ao experimentar o uso de uma caneta, você descobrirá que:

  • Controles pequenos são difíceis de usar. O tamanho dos controles afeta muito sua capacidade de interagir com eficiência. Controles que são 10x10 pixels funcionam razoavelmente para uma caneta, mas controles maiores são ainda mais confortáveis de usar. Por exemplo, controles de rotação (15 x 11 pixels) são muito pequenos para serem usados com uma caneta facilmente.
  • A entrega é um fator. Às vezes, sua mão cobre coisas com as quais você pode querer ver ou interagir. Por exemplo, para os menus de contexto de usuários destros são difíceis de usar se eles aparecerem à direita do ponto de clique, portanto, será melhor se eles aparecerem à esquerda. O Windows permite que os usuários indiquem sua entrega no item do painel de controle Configurações do Tablet PC.
  • A localidade da tarefa ajuda. Embora você possa mover o ponteiro através de uma tela de 14 polegadas com um movimento do mouse de 3 polegadas, usar uma caneta exige que você mova sua mão os 14 polegadas completos. Mover-se repetidamente entre destinos distantes pode ser entediante, portanto, é muito melhor manter as interações de tarefa dentro do intervalo de uma mão descansando sempre que possível. Os menus de contexto são convenientes porque não exigem movimento da mão.
  • A entrada e a seleção de texto são difíceis. A entrada de texto longa é especialmente difícil usando uma caneta, portanto, a conclusão automática e os valores de texto padrão aceitáveis podem realmente simplificar as tarefas. A seleção de texto também pode ser bastante difícil, portanto, as tarefas são mais fáceis quando não exigem o posicionamento preciso do cursor.
  • Pequenos destinos próximos à borda da tela podem ser muito difíceis de tocar. Algumas molduras de exibição se projetam, e algumas tecnologias de tela sensível ao toque são menos sensíveis nas bordas, tornando os controles próximos à borda mais difíceis de usar. Por exemplo, os botões Minimizar, Maximizar/Restaurar e Fechar na barra de título podem ser mais difíceis de usar quando uma janela é maximizada.

Local do controle

A localidade da tarefa reduz os movimentos tediosos de repetição entre telas. Para minimizar os movimentos das mãos, localize os controles próximos de onde eles provavelmente serão usados.

Incorreto:

captura de tela da paleta de cores separada das ferramentas

Neste exemplo do Windows XP, a paleta de cores está muito longe de onde é provável que ela seja usada.

Considere que o local atual do usuário é o mais próximo que um destino pode estar, tornando trivial adquirir. Assim, os menus de contexto aproveitam ao máximo a Lei de Fitts, assim como as minibarras de ferramentas usadas pelo Microsoft Office.

captura de tela de ponteiros próximos a menus

O local do ponteiro atual é sempre o mais fácil de adquirir.

Destinos pequenos próximos à borda de exibição podem ser difíceis de serem direcionados, portanto, evite colocar controles pequenos perto das bordas da janela. Para garantir que os controles sejam fáceis de direcionar quando uma janela é maximizada, torne-os pelo menos 23 x 23 pixels (13 x 13 DLUs) ou coloque-os longe da borda da janela.

Interações com caneta

Gestos do sistema

Os gestos do sistema são definidos e manipulados pelo Windows. Como resultado, todos os programas do Windows têm acesso a eles. Esses gestos têm mensagens de comando equivalentes de mouse, teclado e aplicativo:

Gesto do sistema Mensagem equivalente sintetizada
Focalizar (quando houver suporte)
Focalização do mouse
Toque (para baixo e para cima)
Clique com o botão esquerdo do mouse
Dê um toque duplo (para baixo e para cima duas vezes)
Clique duas vezes no botão esquerdo do mouse
Pressionar e segurar (para baixo, pausar, para cima)
Clique com o botão direito do mouse
Arrastar (para baixo, mover, para cima)
Arrastar o mouse para a esquerda
Pressione, segure e arraste (para baixo, pausar, mover, para cima)
Arrastar o mouse para a direita
Selecione (para baixo, mova-se sobre objetos selecionáveis, para cima)
Seleção do mouse

Desenvolvedores: Para obter mais informações, consulte SystemGesture Enumeration.

Movimentos

Os movimentos são gestos simples que são aproximadamente equivalentes aos atalhos de teclado. Os movimentos de navegação incluem arrastar para cima, arrastar para baixo, mover para trás e avançar. Os movimentos de edição incluem copiar, colar, desfazer e excluir. Para usar movimentos, seu programa só precisa responder aos comandos de pressionamentos de tecla relacionados.

Diagrama que mostra gestos de movimento e suas atribuições padrão no Windows 7.

Os oito gestos de movimento e suas atribuições padrão no Windows 7. Os movimentos de navegação foram alterados para corresponder ao movimento panorâmico (onde o objeto se move com o gesto) em vez de rolar (onde o objeto se move na direção oposta do gesto).

figura de gestos de movimento, como o gesto de movimento

Os oito gestos de movimento e suas atribuições padrão no Windows Vista.

Os movimentos de navegação têm mapeamento natural, portanto, são fáceis de aprender e lembrar. Os movimentos de edição são diagonais que exigem mais precisão e seus mapeamentos não são tão naturais (mexa em direção à Lixeira para excluir, mexa na direção da seta para trás para desfazer), portanto, eles não estão habilitados por padrão. Todas as ações de movimento podem ser personalizadas usando o item do painel de controle Dispositivos de Entrada e Caneta.

Flick Mensagem equivalente sintetizada
Mover para a esquerda
Comando Forward (comando Voltar para Windows Vista)
Mover para a direita
Comando Voltar (comando Forward para Windows Vista)
Mover para cima
Rolagem do teclado para baixo
Mover para baixo
Rolagem do teclado para cima
Mover diagonal para cima e para a esquerda
Exclusão de teclado
Mover diagonal para baixo para a esquerda
Desfazer teclado
Mover para cima na diagonal direita
Cópia do teclado
Mover diagonal para baixo para a direita
Colar Teclado

Gestos de aplicativo

Os aplicativos também podem definir e manipular outros gestos. O Reconhecimento de Gestos da Microsoft pode reconhecer mais de 40 gestos. Para usar gestos de aplicativo, seu programa deve definir os gestos que reconhece e manipular os eventos resultantes.

Capacidade de resposta e consistência

A capacidade de resposta é essencial para criar experiências de caneta que se sintam diretas e envolventes. Para se sentirem diretos, os gestos devem entrar em vigor imediatamente e os pontos de contato de um objeto devem permanecer sob a caneta sem problemas durante todo o gesto. Qualquer retardo, resposta agitada, perda de contato ou resultados imprecisos destrói a percepção de manipulação direta e também de qualidade.

A consistência é essencial para criar experiências de caneta que parecem naturais e intuitivas. Depois que os usuários aprendem um gesto padrão, eles esperam que esse gesto tenha o mesmo efeito em todos os programas aplicáveis. Para evitar confusão e frustração, nunca atribua significados não padrão a gestos padrão. Em vez disso, use gestos personalizados para interações exclusivas ao seu programa.

Editando tinta e texto

A edição de tinta e texto está entre as interações mais desafiadoras ao usar uma caneta. Usar controles restritos, valores padrão apropriados e preenchimento automático elimina ou reduz a necessidade de inserir texto. Mas se o programa envolver a edição de texto ou tinta, você poderá tornar os usuários mais produtivos ampliando automaticamente a interface do usuário de entrada em até 150% por padrão quando uma caneta é usada.

Por exemplo, um programa de email pode exibir a interface do usuário em tamanho normal, mas ampliar a interface do usuário de entrada para 150% para compor mensagens.

captura de tela da mensagem do Outlook em fonte grande

Neste exemplo, a interface do usuário de entrada é reduzida para 150%.

Se você fizer apenas quatro coisas...

    1. Faça com que seus programas do Windows tenham uma boa experiência com canetas! Os usuários devem ser capazes de executar as tarefas mais importantes do programa com eficiência usando uma caneta (pelo menos essas tarefas que não envolvem muita digitação ou manipulação detalhada de pixels).
    1. Considere adicionar suporte para escrever, desenhar e adicionar comentários diretamente usando tinta nos cenários mais relevantes.
    1. Para criar uma experiência direta e envolvente, faça com que os gestos entrem em vigor imediatamente, mantenha os pontos de contato sob a caneta do usuário sem problemas durante todo o gesto e tenha o efeito do mapa de gestos diretamente para o movimento do usuário.
    1. Para criar uma experiência natural e intuitiva, dê suporte a gestos padrão apropriados e atribua a eles seus significados padrão. Use gestos personalizados para interações exclusivas ao seu programa.

Diretrizes

Controlar o uso

  • Prefira usar controles comuns. Os controles mais comuns são projetados para dar suporte a uma boa experiência de caneta.
  • Prefira controles restritos. Use controles restritos, como listas e controles deslizantes sempre que possível, em vez de controles não treinados, como caixas de texto, para reduzir a necessidade de entrada de texto.
  • Forneça valores padrão apropriados. Selecione a opção mais segura (para evitar perda de dados ou acesso do sistema) e a opção mais segura por padrão. Se a segurança e a segurança não forem fatores, selecione a opção mais provável ou conveniente, eliminando assim a interação desnecessária.
  • Forneça preenchimento automático de texto. Forneça uma lista dos valores de entrada mais prováveis ou recentes para facilitar muito a entrada de texto.
  • Para tarefas importantes que usam várias seleções, se uma lista de seleção múltipla padrão normalmente for usada, forneça uma opção para usar uma marcar lista de caixas.
  • Respeitar as métricas do sistema. Use as métricas do sistema para todos os tamanhos que não são tamanhos rígidos. Se necessário, os usuários podem alterar as métricas do sistema ou o dpi para acomodar suas necessidades. No entanto, trate isso como um último recurso porque os usuários normalmente não devem ter que ajustar as configurações do sistema para tornar a interface do usuário utilizável.

captura de tela de menus com dimensionamento normal e grande

Neste exemplo, a métrica do sistema para a altura do menu foi alterada.

Dimensionamento, layout e espaçamento de controle

  • Para controles comuns, use os tamanhos de controle recomendados. Eles são grandes o suficiente para uma boa experiência de caneta, exceto para controles de rotação (que não são utilizáveis com uma caneta, mas são redundantes).
  • Escolha um layout que coloque controles próximos de onde eles provavelmente serão usados. Mantenha as interações de tarefa dentro de uma pequena área sempre que possível. Evite movimentos de mão de longa distância, especialmente para tarefas comuns e para arrastar.
  • Use o espaçamento recomendado. O espaçamento recomendado é amigável à caneta.
  • Os controles interativos devem ser tocantes ou, preferencialmente, ter pelo menos 5 pixels (3 DLUs) de espaço entre eles. Isso evita confusão quando os usuários tocam fora do destino pretendido.
  • Considere adicionar mais do que o espaçamento vertical recomendado dentro de grupos de controles, como links de comando, caixas de marcar e botões de opção, bem como entre os grupos. Fazer isso facilita a diferenciação.

Interação

  • Para programas projetados para aceitar manuscrito, habilite a escrita à tinta padrão. A escrita à tinta padrão permite que os usuários insiram tinta apenas começando a gravar, sem precisar tocar, dar um comando ou fazer nada especial. Isso permite a experiência mais natural com uma caneta. Para programas não projetados para aceitar manuscrito, manipule a entrada de caneta em caixas de texto como seleção.
  • Permitir que os usuários ampliem a interface do usuário do conteúdo se o programa tiver tarefas que exigem edição de texto. Considere reduzir automaticamente para 150% quando uma caneta for usada.
  • Como os gestos são memorizados, atribua-lhes significados consistentes entre programas. Não dê significados diferentes para gestos com semântica fixa. Em vez disso, use um gesto específico do programa apropriado.

Handedness

  • Se uma janela for contextual, sempre exiba-a perto do objeto do qual foi iniciada. Coloque-o fora do caminho para que o objeto de origem não seja coberto pela janela.

    • Se exibido usando o mouse, quando possível, coloque o deslocamento da janela contextual para baixo e para a direita.

      figura da janela contextual colocada à direita do objeto

      Mostrar janelas contextuais próximas ao objeto do qual ele foi iniciado.

    • Se exibido usando uma caneta, quando possível, coloque a janela contextual para não ser coberto pela mão do usuário. Para usuários destros, exiba à esquerda; caso contrário, será exibido à direita.

      figura da janela contextual colocada à esquerda do objeto

      Ao usar uma caneta, mostre também janelas contextuais para que elas não sejam cobertas pela mão do usuário.

  • Desenvolvedores: Você pode distinguir entre eventos de mouse e eventos de caneta usando a API GetMessageExtraInfo . Você pode determinar a entrega do usuário usando a API SystemParametersInfo com SPI_GETMENUDROPALIGNMENT.

Perdão

  • Forneça um comando desfazer. Idealmente, você deve fornecer desfazer para todos os comandos, mas seu programa pode ter alguns comandos cujo efeito não pode ser desfeito.
  • Forneça bons comentários de foco. Indica claramente quando a caneta está sobre um destino clicável. Esses comentários são uma ótima maneira de evitar a manipulação acidental.
  • Sempre que for prático, forneça bons comentários sobre a caneta para baixo, mas não execute ações até uma movimentação ou caneta para cima. Isso permite que os usuários corrijam erros antes de fazê-los.
  • Sempre que prático, permita que os usuários corrijam erros facilmente. Se uma ação entrar em vigor na caneta para cima, permita que os usuários corrijam erros deslizando enquanto a caneta ainda está inativa.

Documentação

Ao fazer referência à entrada de caneta:

  • Consulte um dispositivo de entrada de caneta em forma de caneta como uma caneta. Na primeira menção, use a caneta tablet.
  • Consulte o botão na lateral de uma caneta como o botão de caneta, não o botão de barril.
  • Consulte genericamente o teclado, o mouse, o trackball, a caneta ou o dedo como um dispositivo de entrada.
  • Use toque (e dê um toque duplo) em vez de clicar ao documentar procedimentos específicos ao usar uma caneta. Toque em significa pressionar a tela e, em seguida, levantar antes de um tempo de espera. Ele pode ou não ser usado para gerar um clique do mouse. Para interações que não envolvem a caneta, continue a usar o clique.