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
Qual recurso você deve usar em vez de tentar inferir o tipo de entrada de um usuário com base no 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 apropriado para os usuários?
type="url"
type="email"
type="tel"
type="number"