Interacción

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

Pero la realidad tiene más matices. Algunas laptops tienen capacidad de 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 externo o un mouse 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 multimedia en 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 son un puntero fino.

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 se hacen más grandes para los punteros gruesos:

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

También es posible reducir el tamaño de los elementos para obtener punteros detallados, 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. Aún se aplica la Ley de Fitts. Un objetivo más pequeño requiere más concentración, incluso con una puntuación precisa. Un área de orientación más amplia 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 esté interactuando con tu sitio web usando una pantalla táctil y un mouse al mismo tiempo.

any-pointer difiere de la función multimedia pointer en 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 podría no ser el mecanismo de entrada principal.

Un valor any-pointer de fine significa que al menos un dispositivo apuntador es capaz de realizar un control detallado. Sin embargo, 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 también 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 común, se aplican los estilos poco comunes.

@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 multimedia pointer, que diferencia entre punteros finos y aproximados, la función multimedia hover es binaria. Si el dispositivo de entrada principal puede desplazarse sobre los elementos, mostrará un valor de hover. De lo contrario, el valor es none.

En este ejemplo, algunos íconos complementarios están disponibles cuando se desplaza el cursor, 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 utilizas el mouse para colocar el cursor sobre ese botón, aparecerá el ícono. Sin embargo, si usas el teclado para ir al botón, el ícono permanece invisible. Cuando usas el teclado, te enfocas en lugar de colocar el cursor sobre un elemento. Un dispositivo de escritorio con un mouse conectado informará que el mecanismo de entrada principal es capaz de colocar el cursor sobre un elemento, lo cual es verdadero. Sin embargo, cualquier persona que use un teclado mientras se conecta un mouse no obtendrá el beneficio 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 de ocultar la información detrás de una interacción de desplazamiento. La información se vuelve menos detectable. No uses el desplazamiento para ocultar información importante 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.

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 es capaz de colocar el cursor sobre elementos.

Si decidiste revertir la lógica en el ejemplo anterior, puedes establecer los diseños de desplazamiento como 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 tenga un mecanismo de entrada capaz de colocar el cursor sobre él, el ícono adicional siempre estará visible.

Teclados virtuales

Las personas utilizan cursores y dedos para explorar las interfaces, pero cuando llega el momento de ingresar información, necesitan un teclado. Está bien si el dispositivo tiene un teclado físico, pero si utilizan un dispositivo con pantalla táctil, es un poco más complicado. Estos dispositivos disponen de 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 apropiado.

Los tipos de entrada HTML5 son una excelente manera de describir los 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 de texto

El atributo inputmode te brinda un control detallado sobre los teclados virtuales. Por ejemplo, mientras que hay un type input 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 una persona, 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 al permitirles 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 a los campos del formulario, pero pueden marcar una gran diferencia en la experiencia del usuario. Al anticipar y responder a las capacidades de los dispositivos de los usuarios, los empoderarás. Si necesitas información más detallada, hay un curso dedicado a ayudarte a aprender los formularios.

A continuación, en este curso, examinaremos algunos patrones de interfaz comunes.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las interacciones