Interação

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

Mas a realidade tem mais nuances. Alguns laptops têm recursos touchscreen. Os usuários podem interagir com uma tela touchscreen, 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 com base no tamanho da tela, use os recursos de mídia no CSS.

Apontador

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

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

Se um navegador informa um valor pointer de coarse, isso significa que o mecanismo de entrada principal não é muito preciso. Um dedo na tela touchscreen é um ponteiro aproximado.

Se um navegador informa um valor pointer de fine, isso significa que o mecanismo de entrada principal pode ter um controle refinado. Um mouse ou uma stylus é um ponteiro perfeito.

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

Neste exemplo, os botões são maiores para ponteiros aproximados:

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

Também é possível reduzir os elementos para ponteiros mais precisos, mas tenha cuidado ao fazer isso:

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

Mesmo que alguém tenha um mecanismo de entrada primário capaz de fazer um controle preciso, pense duas vezes antes de reduzir o tamanho dos elementos interativos. A Lei da Fitts ainda se aplica. Um alvo menor requer mais concentração, mesmo com um ponteiro adequado. Uma área de destino maior beneficia a todos, independentemente do dispositivo apontador.

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 sensível ao toque e um mouse ao mesmo tempo.

O any-pointer é diferente do recurso de mídia pointer porque informa se algum dispositivo apontador é aprovado 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 mecanismo de entrada principal.

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

Como a consulta de mídia any-pointer 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 suas consultas de mídia é importante. A última terá precedência.

Neste exemplo, se o dispositivo tiver um mecanismo de entrada fino e um pouco aproximado, os estilos aproximados 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 ponteiros detalhados e aproximados, 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 suplementar é disponibilizado ao passar o cursor, mas apenas 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 mouse sobre esse botão, o ícone aparecerá. Mas se você usar o teclado para chegar até o botão, o ícone permanecerá invisível. Ao usar o teclado, você foca em vez de passar o cursor. Um dispositivo desktop com um mouse conectado informa que o mecanismo de entrada principal é capaz de passar o cursor, o que é verdade. Mas qualquer pessoa que use um teclado com um mouse conectado não terá os benefícios dos estilos :hover. Por isso, é 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 os elementos, tenha cuidado para não ocultar informações por trás de uma interação de passar o cursor. As informações ficam menos detectáveis. Não use o recurso de passar o cursor para ocultar informações ou elementos importantes da interface.

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: tela touch, mouse, teclado e trackpad.

Assim como a any-pointer relata em 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ê decidiu inverter a lógica no exemplo anterior, poderia tornar padrão os estilos vistos ao passar o cursor 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 estará sempre visível.

Teclados virtuais

As pessoas usam cursores e dedos para explorar as interfaces, mas, para inserir informações, precisam de um teclado. Tudo bem se houver um teclado físico conectado ao dispositivo, mas se o usuário estiver usando um dispositivo com tela touchscreen, isso é 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 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

O atributo inputmode oferece controle detalhado sobre teclados virtuais. Por exemplo, embora haja uma type input 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 solicitando um número que inclui 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ários. O atributo autocomplete oferece várias opções para melhorar os formulários de contato, de login e de finalização da 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">

Os atributos HTML (type, inputmode e autocomplete) são pequenos acréscimos 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 dos usuários, você os capacita. Para informações mais detalhadas, há um curso dedicado a ajudar você a aprender sobre os formulários.

A seguir, neste curso, vamos examinar alguns padrões comuns de interface.

Teste seu conhecimento

Teste seus conhecimentos sobre interações