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:
@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
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?
handheld
prompt()
do JavaScriptQual é a diferença entre @media (pointer)
e @media (any-pointer)
?
Quais tipos de entrada mostram um teclado virtual mais adequado para os usuários?
type="url"
type="number"
type="tel"
type="email"