Interacción

Los dispositivos con pantalla pequeña, 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 las táctiles y las pantallas grandes con punteros.

Pero la realidad tiene más matices. Algunas laptops tienen capacidades de pantalla táctil. Los usuarios pueden interactuar con una pantalla táctil, un panel táctil o ambas. Del mismo modo, es posible usar un teclado o un mouse externos 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 las funciones multimedia de CSS.

Puntero

Puedes probar tres valores posibles con la función 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 pointer de coarse, significa que el mecanismo de entrada principal no es muy preciso. Un dedo en una pantalla táctil es un puntero aproximado.

Si un navegador informa un valor pointer de fine, significa que el mecanismo de entrada principal es capaz de realizar un control detallado. Un mouse o una pluma stylus es un puntero fino.

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

En este ejemplo, los botones se agrandan para los punteros generales:

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

También es posible reducir los elementos para punteros finos, pero ten cuidado de hacerlo:

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

Incluso si alguien tiene un mecanismo de entrada principal capaz de realizar un control detallado, piénsalo 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 segmentación más amplia beneficia a todos, independientemente del dispositivo de orientación.

Cualquier puntero

La función 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 usando una pantalla táctil y un mouse al mismo tiempo.

any-pointer es diferente de la función multimedia pointer, ya que informa si algún dispositivo apuntador pasa la prueba.

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

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

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

Como 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 un resultado para any-pointer: coarse. En ese caso, el orden de tus consultas de medios es importante. La última tendrá prioridad.

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

@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 controlado por un mouse o un panel táctil.

A diferencia de la función multimedia pointer, que diferencia entre punteros finos y generales, la función multimedia 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 algún ícono complementario disponible cuando se coloca el cursor sobre un elemento, pero solo si el dispositivo de entrada principal puede desplazarse sobre un elemento.

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

Si pasas el mouse por encima de ese botón, aparecerá el ícono. Sin embargo, si usas el teclado para presionar la tecla Tab para ir al botón, el ícono permanecerá invisible. Cuando usas el teclado, enfocas en lugar de colocar el cursor sobre ellos. Un dispositivo de escritorio con un mouse conectado informará que el mecanismo de entrada principal puede desplazarse, lo cual es cierto. Sin embargo, cualquier persona que use un teclado mientras tiene un mouse conectado no obtendrá el beneficio de los estilos de :hover. Por lo tanto, conviene 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 ocultar la información detrás de una interacción de desplazamiento. La información se vuelve menos detectable. No coloques el cursor sobre el elemento para ocultar información o un elemento importante de la interfaz.

Cualquier desplazamiento

La consulta 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.

Así como any-pointer informa sobre cualquiera de los mecanismos de entrada, any-hover se considerará verdadero si alguno de los mecanismos de entrada disponibles puede desplazarse sobre los elementos.

Si decidiste revertir la lógica en el ejemplo anterior, puedes hacer que los estilos de desplazamiento sean 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 utilizan cursores y dedos para explorar interfaces, pero cuando llega el momento de ingresar información, necesitan un teclado. Está bien si tienen un teclado físico conectado a su dispositivo, pero si usan 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 y url, entre otros.

  <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, aunque hay un type input con un valor de number, puedes usar el atributo inputmode para diferenciar entre números enteros y decimales.

Si quieres solicitar un número entero, como la edad de una persona, usa inputmode="numeric".

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

Si quieres pedir 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 que completen automáticamente los campos del formulario. El atributo autocomplete te ofrece una serie 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 en los campos del formulario, pero pueden marcar una gran diferencia en la experiencia del usuario. Cuando anticipas las capacidades de los dispositivos de tus usuarios y respondes a ellas, les estás dando poder. Si deseas obtener información más detallada, hay un curso dedicado a ayudarte a aprender los formularios.

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

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre interacciones