Interacción

Los dispositivos con pantallas pequeñas, como los teléfonos celulares, suelen tener pantallas táctiles. Los dispositivos con pantalla grande, como las laptops y las computadoras de escritorio, suelen incluir hardware como un mouse o un panel táctil. Es tentador equiparar las pantallas pequeñas con la función táctil y las pantallas grandes con los punteros.

Pero la realidad es más matizada. Algunas laptops tienen pantallas táctiles. Los usuarios pueden interactuar con una pantalla táctil, un panel táctil o ambos. Del mismo modo, es posible usar un teclado o mouse externo con un dispositivo con pantalla táctil, como una tablet.

En lugar de intentar inferir el mecanismo de entrada a partir del tamaño de la pantalla, usa funciones de medios en CSS.

Puntero

Puedes probar tres valores posibles con la función de contenido multimedia pointer: none, coarse y fine.

Si un navegador informa un valor pointer de none, es posible que el usuario esté usando un teclado para interactuar con tu sitio web.

Si un navegador informa un valor de pointer de coarse, significa que el mecanismo de entrada principal no es muy preciso. Un dedo en una pantalla táctil es un puntero grueso.

Si un navegador informa un valor pointer de fine, significa que el mecanismo de entrada principal es capaz de controlar con precisión. Un mouse o una pluma stylus son punteros precisos.

Puedes ajustar el tamaño de los elementos de la interfaz para que se adapten al valor de pointer. Intenta visitar este sitio web en diferentes tipos de dispositivos para ver cómo se adapta la interfaz.

En este ejemplo, los botones son más grandes para los punteros gruesos:

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

También es posible hacer que los elementos sean más pequeños para los punteros finos, pero ten cuidado con lo siguiente:

Qué no debes hacer

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

Incluso si alguien tiene un mecanismo de entrada principal capaz de controlar detalles, piensa dos veces antes de reducir el tamaño de los elementos interactivos. Aún se aplica la Ley de Fitts. Un objetivo más pequeño requiere más concentración, incluso con un puntero fino. Un área de destino más grande beneficia a todos, independientemente del dispositivo de puntero.

Cualquier puntero

El atributo de contenido multimedia pointer informa la precisión del mecanismo de entrada principal. Sin embargo, muchos dispositivos tienen más de un mecanismo de entrada. Es posible que alguien esté interactuando con tu sitio web con una pantalla táctil y un mouse al mismo tiempo.

any-pointer difiere de la función de medios pointer en que informa si algún dispositivo de puntero pasa la prueba.

Un valor any-pointer de none significa que no hay ningún dispositivo de puntero disponible.

Un valor de any-pointer de coarse significa que al menos un dispositivo de puntero no es muy preciso. Pero ese podría no ser el mecanismo de entrada principal.

Un valor any-pointer de fine significa que al menos un dispositivo de puntero es capaz de controlar con precisión. Pero, una vez más, es posible que este no sea el mecanismo de entrada principal.

Debido a que la consulta de medios any-pointer informará un resultado positivo si alguno de los mecanismos de entrada pasa la prueba, es posible que un navegador informe un resultado para any-pointer: fine y también para any-pointer: coarse. En ese caso, el orden de las consultas de medios es importante. El último tendrá prioridad.

En este ejemplo, si el dispositivo tiene un mecanismo de entrada fino y uno grueso, se aplican los estilos gruesos.

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

Colocar el cursor sobre un elemento

La función multimedia hover informa si el mecanismo de entrada principal puede colocar el cursor sobre los elementos. Por lo general, esto significa que hay algún tipo de cursor en la pantalla que se controla con un mouse o un panel táctil.

A diferencia de la función de contenido multimedia pointer, que diferencia entre punteros finos y gruesos, la función de contenido multimedia hover es binaria. Si el dispositivo de entrada principal puede colocar el cursor sobre los elementos, informará un valor de hover. De lo contrario, el valor es none.

En este ejemplo, hay un ícono complementario disponible cuando se coloca el cursor sobre él, pero solo si el dispositivo de entrada principal puede colocar el cursor sobre un elemento.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Si colocas el mouse sobre ese botón, aparecerá el ícono. Sin embargo, si usas el teclado para desplazarte hasta el botón, el ícono permanecerá invisible. Cuando usas el teclado, te enfocas en lugar de colocar el cursor sobre el elemento. Un dispositivo de escritorio con un mouse conectado informará que el mecanismo de entrada principal puede colocarse sobre un elemento, lo cual es cierto. Sin embargo, cualquier persona que use un teclado mientras hay un mouse conectado no obtendrá los beneficios de los estilos :hover. Por lo tanto, es una buena idea combinar los estilos :hover y :focus para abarcar ambas interacciones.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Incluso si el dispositivo de entrada principal es capaz de colocar el cursor sobre los elementos, ten cuidado con ocultar información detrás de una interacción de desplazamiento del cursor. La información se vuelve menos detectable. No uses el desplazamiento del mouse para ocultar información importante o un elemento de interfaz importante.

Cualquier desplazamiento del cursor

La consulta de contenido multimedia hover solo informa sobre el mecanismo de entrada principal. Algunos dispositivos tienen varios mecanismos de entrada: pantalla táctil, mouse, teclado y panel táctil.

Al igual que any-pointer informa sobre cualquiera de los mecanismos de entrada, any-hover será verdadero si alguno de los mecanismos de entrada disponibles puede colocar el cursor sobre los elementos.

Si decidiste invertir la lógica del ejemplo anterior, podrías hacer que los estilos de desplazamiento del mouse sean los predeterminados y, luego, quitarlos si any-hover tiene un valor de none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

En un dispositivo que no tiene un mecanismo de entrada capaz de colocar el cursor sobre un elemento, el ícono adicional siempre está visible.

Teclados virtuales

Las personas usan cursores y dedos para explorar interfaces, pero cuando llega el momento de ingresar información, necesitan un teclado. Esto está bien si el dispositivo tiene un teclado físico conectado, pero si usa un dispositivo con pantalla táctil, es un poco más complicado. Estos dispositivos proporcionan teclados virtuales en pantalla.

Tipos de entrada

A diferencia de un teclado físico, los teclados virtuales se pueden adaptar para que coincidan con la entrada esperada. Si proporcionas información sobre la entrada esperada, los dispositivos pueden mostrar el teclado virtual más adecuado.

Los tipos de entrada HTML5 son una excelente manera de describir tus elementos input. El atributo type acepta valores como email, number, tel, url y muchos más.

  <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

Browser Support

• 66
• 79
• 95
• 12.1

Source

El atributo inputmode te brinda un control detallado sobre los teclados virtuales. Por ejemplo, mientras que hay un input type con un valor de number, puedes usar el atributo inputmode para diferenciar entre números enteros y decimales.

Si solicitas un número entero, como la edad de alguien, usa inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Si solicitas un número que incluya decimales, como un precio, usa inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Autocompletar

A nadie le gusta completar formularios. Como diseñador, puedes mejorar la experiencia de tus usuarios permitiéndoles completar automáticamente los campos de formulario. El atributo autocomplete te proporciona una gran cantidad de opciones para mejorar los formularios de contacto, de acceso y de confirmación de la 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">

Estos atributos HTML (type, inputmode y autocomplete) son pequeñas incorporaciones a los campos de tu formulario, pero pueden marcar una gran diferencia en la experiencia del usuario. Cuando anticipas y respondes a las capacidades del dispositivo de los usuarios, les brindas más poder. Si quieres obtener más información, hay un curso diseñado para ayudarte a aprender a usar formularios.

A continuación, en este curso, es hora de examinar algunos patrones de interfaz comunes.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las interacciones

¿Qué función deberías usar en lugar de intentar inferir el tipo de entrada de un usuario a partir del tamaño de la pantalla?

Funciones de medios de CSS

Como @media (pointer: coarse) o @media (-any-pointer: coarse)

Pregúntale al usuario con prompt() de JavaScript

No es ideal preguntar directamente.

Tipo de medio de CSS handheld

Esta función dejó de estar disponible en Media Queries 4.

¿Cuál es la diferencia entre @media (pointer) y @media (any-pointer)?

Cualquier puntero incluye elementos como tu dedo como puntero.

El puntero ya incluye el toque como un tipo de entrada.

Los punteros no incluyen elementos como un mouse.

Los punteros incluyen un mouse como dispositivo de entrada.

Cualquier puntero informará que es verdadero cuando las entradas adicionales que no son principales, como una pluma stylus, aprueben la prueba.

any-pointer consulta todos los tipos de entrada del dispositivo para encontrar coincidencias.

¿Qué tipos de entrada muestran un teclado virtual más apropiado para los usuarios?

type="url"

El teclado ofrecerá botones para escribir URLs.

type="tel"

El teclado ofrecerá botones para escribir números de teléfono.

type="number"

El teclado ofrecerá botones para escribir solo números.

type="email"

El teclado ofrecerá botones para escribir direcciones de correo electrónico.