Diseño de interfaz que aguanta: accesibilidad, contención, feedback y velocidad

El consejo de diseño llega en forma de lista de tendencias con un año pegado al título, y envejece exactamente a la velocidad que ese título anuncia. Parte de lo que hay en esas listas es genuinamente estructural y seguirá siendo cierto dentro de diez años. Parte es decoración que quedará anticuada antes de que el proyecto se publique.

Esto es un intento de separarlas, desde la posición de quien tiene que construir el resultado y después mantenerlo funcionando.

La accesibilidad es la restricción dentro de la que cabe todo lo demás

Empieza por aquí, porque es lo único de la lista de tendencias perpetua que no es una tendencia, y lo que más a menudo se trata como una lista de comprobación de última hora.

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar de referencia, y importan por razones que van más allá del principio: la accesibilidad aparece en los cuestionarios de compras de las grandes organizaciones y del sector público, y es un área de litigio activa en varios mercados para los sitios de cara al consumidor. Si vendes a organizaciones grandes, tarde o temprano alguien te preguntará qué nivel de conformidad persigue tu producto. Tener una respuesta sale más barato que fabricarla contrarreloj.

Lo que pide en realidad es poco vistoso y se decide sobre todo en la fase de diseño, no en la de desarrollo:

• Contraste que sobreviva al mundo real. El texto contra su fondo y (esto es lo que más se olvida) también los elementos de interfaz y los indicadores de foco. El texto de marcador de posición en gris claro sobre blanco es el fallo más común y falla para todo el mundo al aire libre.
• Tipografía legible y redimensionable. Familias legibles, longitud y altura de línea sensatas, y una maquetación que no se derrumbe cuando alguien aumenta el tamaño de texto del navegador.
• Todo alcanzable con el teclado, en un orden sensato, y con un estado de foco visible. Si no puedes recorrer tu propio checkout con el tabulador, tampoco puede quien usa un lector de pantalla.
• Etiquetas en los campos de formulario y errores que digan qué hacer. «Entrada no válida» no es un mensaje de error. Y un marcador de posición no es una etiqueta: desaparece en el momento en que alguien empieza a escribir, que es justo cuando la necesita.
• Texto alternativo que transporte la información, no el nombre del archivo.
• Subtítulos y transcripciones en el vídeo, que además es como ve el vídeo la mayoría de la gente.
• Ningún significado transmitido solo por el color. Un borde rojo en un campo sin texto es invisible para muchísimas personas.

Dos cosas que conviene decir claramente. Primera: casi todos los puntos de esa lista mejoran además el producto para personas sin ninguna discapacidad (con mala conexión, con un dispositivo antiguo, a pleno sol, con una sola mano, distraídas). El trabajo de accesibilidad y el trabajo de robustez en móvil son en buena medida el mismo trabajo con dos justificaciones distintas.

Segunda: incorporarlo a posteriori es un proyecto en sí mismo y construirlo desde dentro sale casi gratis. Es la misma economía que el soporte de derecha a izquierda, sobre el que hemos escrito aparte: el coste es proporcional a cuántas decisiones tienes que volver atrás a deshacer.

El minimalismo funcional, y cómo se usa mal

La contención en una interfaz no es una preferencia estética. Es la ausencia de cosas que compiten con la acción que quieres que alguien haga. Una página con un siguiente paso evidente rinde más que una página preciosa con cuatro opciones del mismo peso, y eso no tiene nada que ver con el gusto.

El mal uso consiste en tratar el minimalismo como una licencia para quitar información. Navegación solo con iconos y sin etiquetas, elementos que no parecen pulsables, controles que solo aparecen al pasar el cursor, campos de formulario a los que se les ha quitado la etiqueta: todo eso queda «más limpio» y todo es peor, y varias de esas cosas rompen la accesibilidad directamente. El espacio en blanco no cuesta nada. La claridad que hay que ir a buscar, sí.

La prueba no es si la pantalla se ve tranquila. Es si alguien que llega por primera vez sabe decir para qué sirve esta página y qué se supone que tiene que hacer a continuación, sin que se lo cuenten.

Microinteracciones: feedback, no adorno

Las pequeñas respuestas a una acción del usuario (un cambio de estado en un botón, una confirmación discreta, un indicador de progreso) hacen un trabajo concreto: le dicen a la persona que el sistema ha recibido la entrada. Eso importa sobre todo cuando algo tarda un momento, porque en ausencia de feedback la gente da por hecho que ha fallado y vuelve a pulsar, y del segundo clic salen los pedidos duplicados.

La versión útil de esto es una regla sobre estados y no una regla sobre animación. Toda pantalla relevante tiene al menos cinco: por defecto, vacía, cargando, error y éxito. La mayoría de los entregables de diseño contienen el primero. Los otros cuatro se inventan durante el desarrollo, con prisa, por quien esté más cerca, y por eso el estado vacío de tu aplicación suele ser un rectángulo en blanco y el estado de error es el mensaje crudo de una API.

Diseña el estado vacío con especial cuidado. Es lo primero que ve todo usuario nuevo, y es la única pantalla en la que tienes toda su atención.

Sobre el movimiento: corto, con un propósito, y respetando la preferencia de movimiento reducido del sistema operativo. Una animación que no se puede desactivar hace que algunas personas se encuentren físicamente mal, y el detalle nunca compensa.

El modo oscuro es un segundo producto, no un interruptor

Ofrecer un tema oscuro es hoy casi lo esperado, y se subestima con frecuencia. No es una inversión de colores. Hay que volver a comprobar los ratios de contraste en el segundo tema, los fondos negro puro con texto blanco puro fatigan la vista en lugar de aliviarla, las sombras dejan de funcionar como señal de profundidad, los colores de marca que brillan sobre blanco a menudo se apagan o se vuelven fluorescentes, y cada imagen, ilustración, gráfico y exportación a PDF necesita una decisión.

La posición honesta: duplica la superficie de QA visual. Hazlo de forma deliberada, con tokens en lugar de valores de color sueltos, o no lo hagas. Un modo oscuro a medias con tres pantallas ilegibles es peor que un producto solo en claro.

La velocidad es una decisión de diseño

El rendimiento se archiva bajo «ingeniería», y en su mayor parte lo decide el diseño: cuántas imágenes, a qué resolución, cuántas tipografías y pesos, cuánto movimiento, cuántos widgets de terceros, si la cabecera lleva vídeo.

Esto importa comercialmente en dos direcciones: la gente se va de las páginas lentas, y el posicionamiento tiene en cuenta el comportamiento real de carga. Y donde más importa es en móvil, en un dispositivo de gama media, con una conexión que no es la tuya. Prueba ahí y no en la máquina en la que se hizo el diseño.

Un rediseño más lento que aquello que sustituye es un retroceso, por mucho mejor que se vea en la captura de un caso de éxito. Mide antes y después como parte del proyecto, no como un favor posterior.

Dónde se gana de verdad su sitio la identidad visual

Hay una versión del argumento del diseño que se pasa de frenada (que un diseño más atractivo aumenta las conversiones) y merece la pena corregirla, porque el mecanismo real es más útil que el exagerado.

El diseño visual hace tres cosas de forma fiable. Compra atención en un entorno donde nadie ha comprometido ninguna todavía. Transporta información más rápido que la prosa: un diagrama, un esquema o un vídeo explicativo corto transmiten una estructura que tres párrafos no transmiten. Y señala seriedad, que es el atajo que la gente usa, con razón o sin ella, para decidir si una empresa seguirá existiendo el año que viene y si se le puede confiar un pago.

Lo que no puede hacer es arreglar una oferta poco clara, un proceso roto o un producto que nadie quiere. Una interfaz pulida sobre una propuesta confusa hace la confusión más legible, no menos.

La forma práctica de esto es la coherencia, y la coherencia a escala significa un sistema de diseño y no una guía de estilo: tokens de color, tipografía y espaciado; una biblioteca de componentes compartida entre diseño y código; y los estados definidos una vez y no pantalla por pantalla. Un PDF que describe la marca es un documento. Una biblioteca de componentes es infraestructura, y es la única versión que sobrevive al segundo equipo que toca el producto.

Donde el diseño se encuentra con el desarrollo

El hueco entre un archivo de diseño y una interfaz publicada es donde se pierde la mayor parte de la calidad, y casi siempre por el mismo puñado de motivos.

Diseña con contenido real. Nombres de producto reales, el más largo que tengas, precios reales, un cliente con apellido compuesto, una categoría con dos artículos y una categoría con cuatrocientos. El texto de relleno esconde todos los problemas de maquetación que estás a punto de tener.

Diseña para los idiomas en los que vas a publicar. Las cadenas traducidas suelen ser bastante más largas que las originales, y un botón dimensionado a la medida de su etiqueta se rompe en el primer idioma nuevo. Si en la hoja de ruta hay algún mercado de derecha a izquierda, la decisión que hay que tomar hoy es sencillamente dejar de usar valores direccionales físicos; el argumento completo está en nuestro artículo sobre interfaces de derecha a izquierda.

Decide qué es componente y qué es una pieza única, de forma explícita y antes de construir. Cada pieza única no declarada se convierte en una obligación de mantenimiento que nadie había planificado.

Entrega comportamiento, no solo aspecto. Qué pasa al mantener pulsado, qué pasa sin conexión, cuáles son las reglas de validación, cuál es la longitud máxima. Todo lo que no se especifique lo especificará un desarrollador a toda prisa.

La IA en la cadena de herramientas de diseño

Las herramientas generativas ya producen maquetaciones, imágenes y variantes de texto competentes, y han comprimido de verdad la fase de exploración: más direcciones, más rápido, en el momento en que todavía estás decidiendo qué es esto.

Son más flojas exactamente en todo lo anterior. No conocen tu contenido real, tus casos límite, tu nivel de accesibilidad objetivo, tus cinco estados, ni que el tercer elemento del menú está ahí por una obligación legal. Usadas para explorar, aceleran de verdad. Usadas para producir la interfaz definitiva sin revisión, generan pantallas seguras de sí mismas, genéricas y con frecuencia inaccesibles: el mismo modo de fallo que en todo lo demás en este oficio, que es una salida verosímil que nadie ha comprobado.

Qué preguntar antes de aprobar un diseño

• ¿Qué nivel de conformidad perseguimos, y quién lo comprueba? Antes de construir, no después.
• Enséñame los estados vacío, de carga y de error. De cada pantalla que los tenga.
• Enséñamelo en un móvil de gama media con mala conexión. No en una maqueta de escritorio.
• ¿Esto es un componente o una pieza única? De cada elemento que aparezca más de una vez.
• ¿Qué aspecto tiene esto con nuestro peor contenido real? El nombre más largo, el mayor número de opciones, sin imagen.

Con esas cinco respondidas, las preguntas sobre tendencias se contestan prácticamente solas, porque casi todo lo que hay en la lista o las sobrevive o resulta que era decoración.

Diseñamos y construimos la interfaz y el sistema que hay detrás en el mismo equipo, lo que en la práctica significa que los estados, el contenido real y las preguntas de accesibilidad salen mientras todavía son baratas de responder. Eso ha incluido productos publicados en las tiendas con texto a voz y gamificación (Walnutflow), experiencias de realidad aumentada (Droyz Toys), una plataforma de reservas donde la disponibilidad es el producto (MyGlampings) y migraciones de sitio en las que las llamadas a la acción y la medición existentes se conservaron deliberadamente en lugar de rehacerse de memoria (Deren). Si tienes un diseño que se ve bien y se comporta mal, mándanos las pantallas con las que estás menos contento.