Interacción

Los dispositivos con pantallas pequeñas, como los teléfonos celulares, suelen tener pantallas táctiles. Los dispositivos con pantallas grandes, 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 el tacto y las pantallas grandes con los punteros.

Sin embargo, la realidad es más compleja. Algunas laptops tienen pantalla táctil. 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 externos con un dispositivo de 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 medios pointer: none, coarse y fine.

Si un navegador informa un valor de 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 de pointer de fine, significa que el mecanismo de entrada principal es capaz de un control detallado. Un mouse o una pluma stylus son buenos punteros.

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

En este ejemplo, los botones se agrandan 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 al hacerlo:

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

Incluso si alguien tiene un mecanismo de entrada principal capaz de un control detallado, piénsalo dos veces antes de reducir el tamaño de los elementos interactivos. La ley de Fitts sigue vigente. 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 apuntador.

Cualquier puntero

La función de medios 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 interactúe con tu sitio web usando una pantalla táctil y un mouse al mismo tiempo.

La diferencia entre any-pointer y la función de medios pointer es que la primera informa si algún dispositivo de puntero pasa la prueba.

Un valor any-pointer de none significa que no hay un dispositivo apuntador disponible.

Un valor de any-pointer de coarse significa que, al menos, un dispositivo apuntador no es muy preciso. Sin embargo, es posible que no sea el mecanismo de entrada principal.

Un valor any-pointer de fine significa que al menos un dispositivo apuntador es capaz de realizar un control preciso. Pero, de nuevo, es posible que este no sea el mecanismo de entrada principal.

Dado que la consulta de medios any-pointer informará un resultado positivo si cualquiera 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 tus consultas de medios es importante. Se le dará prioridad a la última.

En este ejemplo, si el dispositivo tiene un mecanismo de entrada preciso y uno aproximado, se aplican los estilos aproximados.

@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 de medios 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 medios pointer, que diferencia entre punteros precisos y aproximados, la función de medios hover es binaria. Si el dispositivo de entrada principal puede desplazarse 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 el elemento, 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 usas el mouse para colocar el cursor sobre ese botón, aparecerá el ícono. Sin embargo, si usas el teclado para desplazarte con la tecla Tab hasta el botón, el ícono permanece invisible. Cuando usas el teclado, te enfocas en un elemento en lugar de desplazarte sobre él. Un dispositivo de escritorio con un mouse conectado informará que el mecanismo de entrada principal puede desplazarse sobre los elementos, lo cual es cierto. Sin embargo, cualquier persona que use un teclado mientras un mouse está conectado no obtendrá el beneficio de los estilos de :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 puede desplazarse sobre los elementos, ten cuidado de no ocultar información detrás de una interacción de desplazamiento. La información se vuelve menos fácil de descubrir. No uses la función de desplazamiento para ocultar información o elementos importantes de la interfaz.

Cualquier desplazamiento del cursor

La búsqueda de medios 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 desplazarse sobre los elementos.

Si decidiste invertir la lógica del ejemplo anterior, podrías hacer que los estilos de desplazamiento 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 desplazarse, el ícono adicional siempre está visible.

Teclados virtuales

Las personas usan el cursor y los dedos para explorar las interfaces, pero, cuando llega el momento de ingresar información, necesitan un teclado. Esto no es un problema si hay un teclado físico conectado al dispositivo, pero si se 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 los teclados físicos, 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

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 preguntas por 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 incluye 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, los formularios de acceso y los formularios de confirmación 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">

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las interacciones