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 equilibrar telas pequenas ao toque e telas grandes a ponteiros.
Mas a realidade é mais sutil. Alguns laptops têm recursos de 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 do tamanho da tela, use os 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, talvez o usuário esteja usando um teclado para interagir com o site.
Se um navegador informar um valor pointer de coarse, isso significa que o mecanismo de entrada principal não é muito preciso. Um dedo na tela touchscreen é um ponteiro grosso.
Se um navegador informa um valor pointer de fine, isso significa que o mecanismo de entrada principal é capaz de ter um controle refinado. Um mouse ou uma stylus são ótimos ponteiros.
Você pode 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 ficam maiores para ponteiros aproximados:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
Também é possível reduzir 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 minuciosamente, pense bem 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-alvo maior beneficia a todos, independentemente do dispositivo apontador.
Qualquer ponteiro
O recurso de mídia pointer informa a nitidez 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.
A any-pointer é diferente do recurso de mídia pointer, porque informa se algum dispositivo apontador foi 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. 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 um dos mecanismos de entrada for aprovado no teste, é possível que um navegador informe um resultado para any-pointer: fine e também um resultado para any-pointer: coarse. Nesse caso, a ordem das consultas de mídia é importante. A última será priorizada.
Nesse exemplo, se o dispositivo tiver um mecanismo de entrada refinado e um 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 finos e aproximados, o recurso de mídia hover é binário. Se o dispositivo de entrada principal conseguir passar o cursor sobre os elementos, ele vai informar o valor hover. Caso contrário, o valor será none.
Nesse exemplo, alguns ícones complementares ficam disponíveis 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 mouse sobre esse botão, o ícone será exibido. Porém, se você usar o teclado para avançar até o botão, o ícone permanecerá invisível. Ao usar o teclado, você foca em vez de passar o cursor. Um computador com um mouse conectado informa que o mecanismo de entrada principal é capaz de passar o cursor, o que é verdade. No entanto, nenhum usuário que usar o teclado com o mouse conectado vai aproveitar os benefícios dos estilos :hover. Por isso, é uma boa ideia combinar os estilos de :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 ao ocultar informações atrás de uma interação de passar o cursor. As informações se tornam menos detectáveis. Não use o recurso de passar o cursor para ocultar informações ou elementos importantes da interface.
Qualquer pessoa ao passar o cursor
A consulta de mídia hover gera relatórios apenas sobre o mecanismo de entrada principal. Alguns dispositivos têm vários mecanismos de entrada: touchscreen, mouse, teclado e trackpad.
Assim como any-pointer gera relatórios 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ê tiver decidido inverter a lógica no exemplo anterior, poderá definir os estilos de passagem de cursor como padrão e removê-los se o valor de any-hover for 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 está sempre visível.
Teclados virtuais
As pessoas usam cursores e dedos para explorar interfaces, mas, na hora de inserir informações, elas precisam de um teclado. Tudo bem se houver um teclado físico conectado ao dispositivo, mas se eles estiverem usando um dispositivo touchscreen, o processo 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 exibir 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 detalhado sobre teclados virtuais. Por exemplo, embora exista um type input com um valor de number, é possível usar o atributo inputmode para diferenciar números inteiros e decimais.
Para pedir 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 aos recursos do dispositivo dos usuários, você os capacita. Para informações mais detalhadas, há um curso dedicado a ajudar você a aprender a usar 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 pelo tamanho da tela?
@media (pointer: coarse) ou @media (-any-pointer: coarse)prompt() do JavaScripthandheldQual é a diferença entre @media (pointer) e @media (any-pointer)?
any-pointer consulta todos os tipos de entrada do dispositivo para encontrar qualquer correspondência.Quais tipos de entrada mostram um teclado virtual mais adequado para os usuários?
type="url"type="tel"type="number"type="email"