Estados de interacción en Material: capa, foco y toque

El estado muestra en qué situación está un componente ahora. Material Design define los estados como la situación de interacción de un componente o elemento de interfaz (en inglés) y mantiene dos indicadores visuales para que la señal sobreviva a un canal débil (en inglés). La guía es exacta sobre la superposición y los números que hay detrás. Fija una opacidad por estado y no nombra un contraste mínimo para esa superposición en cada combinación de color. También define el hover alrededor de un cursor y no dice nada sobre una pantalla sin puntero. Los dos casos son decisión del equipo de producto, no de la guía.

Qué comunica un estado

Un estado responde dos preguntas simples: ¿se puede usar esto? y ¿qué acaba de pasarle? Un componente activo parece listo para recibir entrada, y uno desactivado parece no disponible porque de hecho lo está. El NN/g abre su propio artículo en el mismo terreno, y señala que pistas visuales sutiles dicen si un botón es clicable, pulsado o solo bajo el cursor (en inglés). La señal importa más que el adorno. Quien no distingue un control desactivado de uno activo va a hacer clic, esperar y volver a hacer clic. La guía pide algo más: aplicar los estados de forma consistente entre componentes (en inglés), para que el mismo cambio visual signifique lo mismo en todas partes.

Los seis estados y dónde aparece cada uno

La guía nombra seis: activo, desactivado, hover, foco, pulsado y arrastrado. Cada uno tiene una definición atada a una entrada. Activo marca un componente interactivo (en inglés) y desactivado marca uno que no lo es (en inglés). El hover aparece cuando un cursor descansa sobre un elemento (en inglés), y el foco aparece cuando alguien resalta un elemento con teclado o voz (en inglés). La pulsación marca un toque (en inglés), y el arrastre marca una pulsación seguida de movimiento (en inglés). Los estados también se suman, como muestra la regla de que se pueden combinar, por ejemplo selección y hover (en inglés). El alcance de cada uno no es uniforme. Hover y foco los heredan los componentes de acción, selección y entrada, lo que incluye botones, tarjetas, chips, elementos de lista y campos de texto. Desactivado sigue a esos mismos grupos. El arrastre se queda estrecho y alcanza solo tarjetas, chips, elementos de lista y sliders. Los componentes de navegación y comunicación quedan fuera de casi todo, así que barras de app, diálogos, menús y pestañas no heredan hover. La guía también limita el conteo. En una pantalla hay un solo hover, un solo foco y una sola pulsación a la vez.

La capa de estado

Lo que hace que esto funcione es la capa de estado. La guía describe una cobertura semitransparente sobre un elemento que indica su estado (en inglés), montada con opacidad y no con un color nuevo. La capa usa el mismo color que el contenido sobre el que se apoya (en inglés). Un botón de texto se tiñe con el color de la etiqueta, y un botón relleno se tiñe con el color del texto sobre el contenedor. Cada color de contenedor tiene un color on correspondiente para el contenido, y la capa se apoya en él. Cuatro valores cubren los estados: hover con 8% de opacidad, foco con 10%, pulsación con 10% y arrastre con 16% (en inglés). Desactivado es un caso aparte, con 38%. Dos límites importan. Solo se aplica una capa a la vez, y es más pequeña que el área que toca el dedo: la capa de estado mide 40dp mientras el objetivo interactivo mide 48dp (en inglés). La diferencia entre los dos números es deliberada. La tinta crece cuando alguien interactúa, pero el objetivo sigue siendo lo bastante grande para atrapar un toque que cae unos píxeles fuera.

Por qué la elevación no es la señal general de la pulsación

En el estado pulsado, mucha gente recurre a la elevación, y la guía limita bastante ese recurso. Los estados pulsados deben tener énfasis alto y provocar un cambio de composición (en inglés), así que el ripple o el cambio de relleno carga la señal. La elevación es opcional y estrecha: solo algunos componentes, como botones y tarjetas, pueden heredar elevación para significar una pulsación (en inglés). La misma contención aparece en el arrastre, donde la guía pide estados arrastrados con énfasis bajo para no distraer de la tarea (en inglés). Levantar cada control al pulsar convierte un estado en animación. También compite con el anillo de foco y con la capa, que ya llevan el mensaje. El NN/g hace el punto vecino desde el otro lado. Cambiar un botón de plano a tridimensional aumentó los clics en un estudio antiguo (en inglés), algo que tiene que ver con parecer clicable y no con la respuesta a la pulsación. Una pista de pulsación que se dispara en cada toque merece el presupuesto menor.

Foco y teclado

El foco es el estado que tiene que funcionar incluso en las peores condiciones. La guía lo define como el resaltado en un elemento al que se llegó con teclado o voz (en inglés). Añade un anillo visible, el indicador de foco de teclado, para que la persona vea dónde está en la página. El orden importa tanto como la visibilidad. En las reglas de entrada, el foco debe seguir un orden lógico, de izquierda a derecha y de arriba abajo en la mayoría de las páginas (en inglés). La tecla Escape quita el foco y limpia la selección (en inglés). El NN/g añade la restricción que decide si el anillo funciona. Recomienda un contorno en lugar de un cambio de color aislado (en inglés), porque un cambio de color puede no ser percibido por algunas personas con discapacidad visual (en inglés). La guía también limita a un foco por vez, y un control desactivado no puede recibir foco, arrastre ni pulsación (en inglés). Quien tabula por un botón desactivado recibe silencio donde un motivo ayudaría.

Selección y entrada: elegir un ítem contra escribir un valor

La selección y la entrada se separan en una línea simple. La selección pide elegir de un conjunto que el sistema ya conoce, y la entrada pide aportar un valor. La guía muestra la selección con un check, un checkbox, un cambio de color de superficie o una combinación (en inglés). También da a las superficies de navegación, como pestañas y rail, un indicador activo (en inglés). La división también ocurre por dispositivo: mantener pulsado o usar dos dedos inicia la selección en táctil (en inglés), y pasar el cursor revela un checkbox en escritorio (en inglés). La regla antigua del NN/g ordena los dos controles con claridad. Los radio buttons sirven a una lista de opciones mutuamente excluyentes en la que vale exactamente una (en inglés). Los checkboxes sirven a una lista en la que se puede marcar cualquier número, incluido ninguno (en inglés). La misma página da un motivo para preferir opciones visibles a un menú desplegable, ya que una lista de radio tiene menor carga cognitiva porque todas las opciones quedan visibles (en inglés). Otra regla suya cae en el trabajo diario: una lista de radio debe traer siempre una selección por defecto (en inglés).

Qué medir

Tres comprobaciones resuelven casi todos los desvíos. El área táctil va primero, porque tiene un piso físico, algo que una preferencia de diseño no tiene. La guía nombra 48dp como objetivo interactivo mientras la capa de estado se queda en 40dp (en inglés). El NN/g llega a la misma escala en centímetros: un objetivo debe medir al menos 1cm por 1cm para que la persona lo seleccione rápido y con precisión (en inglés). La misma página nombra el modo de fallo, en el que objetivos pequeños y espaciado apretado aumentan la probabilidad de un desliz hacia el control equivocado (en inglés). La forma carga la segunda comprobación. El NN/g avisa contra darle a un ítem no clicable la apariencia de un botón (en inglés), lo que es el sistema de estados trabajando al revés. La tercera comprobación es el contraste del propio estado, y aquí la guía entrega una opacidad fija y nada más. Prueba cada estado sobre cada color de contenedor y lee el resultado, porque una capa del 10% sobre una superficie clara puede desaparecer en una captura de pantalla.

Las piezas de aquí quedan junto a el post sobre Material Design, el post sobre espaciado y retícula, el post sobre HTML accesible y el post sobre contraste en modo oscuro. Un sistema de estados vale la pena cuando la misma pista significa lo mismo en cada pantalla, y cuando alguien que nunca toca un puntero aún sabe dónde está. Nombra el piso de contraste de tu propia paleta en lugar de confiar en que la opacidad por defecto se sostiene.