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 equiparar telas pequenas com toque e telas grandes com ponteiros.

Mas a realidade é mais sutil. Alguns laptops têm tela sensível ao toque. Os usuários podem interagir com uma tela sensível ao toque, 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 recursos de mídia em CSS.

Apontador

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

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

Se um navegador informar um valor pointer de coarse, isso 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 controle refinado. Um mouse ou uma caneta stylus são bons ponteiros.

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

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

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

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

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Mesmo que alguém tenha um mecanismo de entrada principal capaz de controle refinado, pense duas vezes antes de reduzir o tamanho dos elementos interativos. A lei de Fitts ainda é válida. Um alvo menor exige mais concentração, mesmo com um ponteiro fino. Uma área de destino maior beneficia todos, independente do dispositivo de apontamento.

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 difere do recurso de mídia pointer porque informa se algum dispositivo apontador passa no teste.

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

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

Um valor any-pointer de fine significa que pelo menos um dispositivo apontador é capaz de controle refinado. Mas, de novo, 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 um 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. A última opção terá precedência.

Neste exemplo, se o dispositivo tiver um mecanismo de entrada refinado e um 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 controlado por um mouse ou 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 fica disponível ao passar o cursor, mas apenas se o dispositivo de entrada principal for capaz de 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 do mouse sobre esse botão, o ícone vai aparecer. Mas se você usar o teclado para navegar até o botão, o ícone vai continuar invisível. Ao usar o teclado, você está focando em vez de passar o cursor. Um dispositivo desktop com um mouse conectado vai informar que o mecanismo de entrada principal é capaz de passar o cursor, o que é verdade. Mas quem usa um teclado enquanto um mouse está conectado não se beneficia dos estilos :hover. Por isso, é uma boa ideia combinar os estilos :hover e :focus para cobrir 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 os elementos, tenha cuidado ao ocultar informações atrás de uma interação de passar o cursor. As informações ficam menos fáceis de encontrar. Não use o passar o cursor para ocultar informações ou um elemento de interface importante.

Qualquer ação de passar o cursor

A consulta de mídia hover informa apenas 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 qualquer um dos mecanismos de entrada disponíveis puder passar o cursor sobre os elementos.

Se você decidir inverter 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 sem 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 precisam inserir informações, precisam de um teclado. Isso não é um problema se houver um teclado físico conectado ao dispositivo, mas é um pouco mais complicado se o usuário estiver usando um dispositivo touchscreen. Esses dispositivos oferecem teclados virtuais na tela.

Tipos de entrada

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

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

  <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

O atributo inputmode oferece controle refinado sobre teclados virtuais. Por exemplo, enquanto há um input type com um valor de number, você pode usar o atributo inputmode para diferenciar entre 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 de 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 aos recursos do dispositivo do usuário, você está capacitando seus usuários. Para mais informações, há um curso dedicado a ajudar você a aprender sobre formulários.

Em seguida, vamos examinar alguns padrões de interface comuns.

Teste seu conhecimento

Teste seus conhecimentos sobre interações