Interação

Dispositivos de tela pequena, como smartphones, geralmente têm telas sensíveis ao toque. Dispositivos de tela grande, como laptops e computadores desktop, geralmente vêm com hardware, como um mouse ou um trackpad. É tentador comparar telas pequenas com telas sensíveis ao toque e telas grandes com ponteiros.

Mas a realidade é mais complexa. Alguns laptops têm recursos de tela touch. Os usuários podem interagir com uma tela touchscreen ou um trackpad ou ambos. Da mesma forma, é possível usar um teclado ou mouse externo com um dispositivo touchscreen, como um tablet.

Em vez de tentar inferir o mecanismo de entrada pelo tamanho da tela, use os recursos de mídia no CSS.

Apontador

É possível testar três valores com o recurso de mídia pointer: none, coarse e fine.

Se um navegador informar um valor de pointer de none, o usuário pode estar usando um teclado para interagir com seu site.

Se um navegador informar um valor de pointer de coarse, significa que o mecanismo de entrada principal não é muito preciso. Um dedo em uma tela touchscreen é um ponteiro grosseiro.

Se um navegador informar um valor pointer de fine, isso significa que o mecanismo de entrada principal é capaz de controlar com precisão. Um mouse ou uma stylus é um ponteiro fino.

É possível ajustar o tamanho dos elementos da interface para se adequar ao valor pointer. Acesse este site em diferentes tipos de dispositivos para ver como a interface se adapta.

Neste exemplo, os botões são aumentados para ponteiros grosseiros:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Também é possível diminuir o tamanho dos elementos para ponteiros finos, mas tenha cuidado ao fazer isso:

O que não fazer
@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Mesmo que alguém tenha um mecanismo de entrada principal capaz de controlar com precisão, pense duas vezes antes de reduzir o tamanho dos elementos interativos. A Lei de Fitts ainda se aplica. Um alvo menor exige mais concentração, mesmo com um ponteiro fino. Uma área de destino maior beneficia todos, independentemente do dispositivo de ponteiro.

Qualquer ponteiro

O recurso de mídia pointer informa a precisão do mecanismo de entrada principal. No entanto, muitos dispositivos têm mais de um mecanismo de entrada. É possível que alguém esteja interagindo com seu site usando uma tela touchscreen e um mouse ao mesmo tempo.

O any-pointer é diferente do recurso de mídia pointer porque informa se algum dispositivo de ponteiro passou no teste.

Um valor any-pointer de none significa que nenhum dispositivo de ponteiro está disponível.

Um valor de any-pointer de coarse significa que pelo menos um dispositivo apontador não é muito preciso. Mas esse não é o mecanismo de entrada principal.

Um valor de any-pointer de fine significa que pelo menos um dispositivo apontador pode ter controle detalhado. Mas, novamente, esse pode não ser o mecanismo de entrada principal.

Como a consulta de mídia any-pointer vai informar um resultado positivo se qualquer dos mecanismos de entrada passar no teste, é possível que um navegador informe um resultado para any-pointer: fine e também para any-pointer: coarse. Nesse caso, a ordem das consultas de mídia é importante. O último vai ter prioridade.

Neste exemplo, se o dispositivo tiver um mecanismo de entrada fino e grosseiro, os estilos grosseiros serão aplicados.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Passar cursor

O recurso de mídia hover informa se o mecanismo de entrada principal pode passar o cursor sobre os elementos. Isso geralmente significa que há algum tipo de cursor na tela sendo controlado por um mouse ou um trackpad.

Ao contrário do recurso de mídia pointer, que diferencia entre ponteiros finos e grossos, o recurso de mídia hover é binário. Se o dispositivo de entrada principal puder passar o cursor sobre os elementos, ele vai informar um valor de hover. Caso contrário, o valor será none.

Neste exemplo, um ícone complementar está disponível ao passar o cursor, mas somente se o dispositivo de entrada principal puder passar o cursor sobre um elemento.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Se você passar o cursor sobre esse botão, o ícone vai aparecer. Mas se você usar o teclado para selecionar o botão, o ícone vai permanecer invisível. Ao usar o teclado, você está focando em vez de passar o cursor. Um dispositivo de computador com um mouse conectado vai informar que o mecanismo de entrada principal é capaz de pairar, o que é verdade. No entanto, quem usar um teclado enquanto um mouse estiver conectado não vai aproveitar os estilos :hover. Portanto, é recomendável combinar os estilos :hover e :focus para abranger as duas interações.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Mesmo que o dispositivo de entrada principal seja capaz de passar o cursor sobre elementos, tenha cuidado ao ocultar informações por trás de uma interação com o cursor. As informações ficam menos detectáveis. Não use o passar o cursor para ocultar informações importantes ou um elemento importante da interface.

Qualquer passagem do cursor

A consulta de mídia hover só informa sobre o mecanismo de entrada principal. Alguns dispositivos têm vários mecanismos de entrada: touchscreen, mouse, teclado, trackpad.

Assim como any-pointer informa sobre qualquer um dos mecanismos de entrada, any-hover será verdadeiro se algum dos mecanismos de entrada disponíveis puder passar o cursor sobre os elementos.

Se você decidir reverter a lógica no exemplo anterior, poderá definir os estilos de passar o cursor como padrão e removê-los se any-hover tiver um valor de none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Em um dispositivo que não tem um mecanismo de entrada capaz de passar o cursor, o ícone extra fica sempre visível.

Teclados virtuais

As pessoas usam cursores e dedos para explorar interfaces, mas, quando chega a hora de inserir informações, elas precisam de um teclado. Isso não é um problema se houver um teclado físico conectado ao dispositivo, mas se a pessoa estiver usando um dispositivo touchscreen, será um pouco mais complicado. Esses dispositivos oferecem teclados virtuais na tela.

Tipos de entrada

Ao contrário de um teclado físico, os teclados virtuais podem ser adaptados para corresponder à entrada esperada. Se você fornecer informações sobre a entrada esperada, os dispositivos poderão oferecer o teclado virtual mais adequado.

Os tipos de entrada do HTML5 são uma ótima maneira de descrever seus elementos input. O atributo type aceita valores como email, number, tel, url e muito mais.

  <label for="email">Email</label>
  <input type="email" id="email">
  <label for="number">Number</label>
  <input type="number" id="number">
  <label for="tel">Tel</label>
  <input type="tel" id="tel">
  <label for="url">URL</label>
  <input type="url" id="url">

Modos de entrada

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

O atributo inputmode oferece controle detalhado sobre teclados virtuais. Por exemplo, se houver um type input com um valor de number, você poderá usar o atributo inputmode para diferenciar números inteiros e decimais.

Se você estiver pedindo um número inteiro, como a idade de alguém, use inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Se você estiver pedindo um número que inclua casas decimais, como um preço, use inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Preenchimento automático

Ninguém gosta de preencher formulários. Como designer, você pode melhorar a experiência dos usuários permitindo que eles preencham automaticamente os campos do formulário. O atributo autocomplete oferece várias opções para melhorar formulários de contato, de login e de finalização de compra.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Esses atributos HTML (type, inputmode e autocomplete) são pequenas adições aos campos do formulário, mas podem fazer uma grande diferença na experiência do usuário. Ao antecipar e responder às capacidades do dispositivo do seu usuário, você está capacitando seus usuários. Para mais informações, há um curso dedicado a ajudar você a aprender sobre formulários.

No próximo passo deste curso, vamos examinar alguns padrões de interface comuns.

Teste seu conhecimento

Teste seus conhecimentos sobre interações

Qual recurso você deve usar em vez de tentar inferir o tipo de entrada de um usuário pelo tamanho da tela?

Tipo de mídia CSS handheld
Perguntar ao usuário com prompt() do JavaScript
Recursos de mídia CSS

Qual é a diferença entre @media (pointer) e @media (any-pointer)?

Qualquer ponteiro vai informar "verdadeiro" quando entradas não primárias adicionais, como uma stylus, passarem no teste.
Os ponteiros não incluem coisas como um mouse.
Qualquer ponteiro inclui coisas como seu dedo como um ponteiro.

Quais tipos de entrada mostram um teclado virtual mais adequado para os usuários?

type="url"
type="number"
type="tel"
type="email"