Funcionar no basta: hay que poder usarlo
La mayoría de tus usuarios estará en un teléfono. Una app que «funciona» pero se ve rota en pantalla pequeña, o que deja fuera a personas con baja visión, está mal construida. Tú no vas a escribir CSS: vas a fijar el criterio y convertirlo en condición de aceptación que le exiges a la IA.
Las tres dimensiones del «se ve bien»
[Responsive · Accesible · Usable]
Esta actividad interactiva ('Explicacion visual') requiere el motor completo de Lumbre. El contenido estatico se muestra arriba; para la experiencia interactiva, visita la version online de este objeto.
Criterios convertibles en condición de aceptación
| Dimensión | Criterio medible que puedes exigir |
|---|---|
| Responsive | en pantalla de 360 px nada se sale ni se encima; las tablas se vuelven tarjetas |
| Accesibilidad | todo campo tiene etiqueta; contraste texto/fondo legible; se llega a todo con Tab |
| UX | una tarea principal se completa en máximo 3 pasos; los botones tienen al menos 44 px de alto |
| Estados | toda lista prevé cargando, vacío y error; nada queda en blanco sin mensaje |
Prompt de criterios
Antes de dar por terminada esta pantalla, debe cumplir ESTOS criterios (revísalos uno a uno y dime si cumple):\n- responsive: en 360 px de ancho, los elementos no se enciman; la tabla de contactos se muestra como tarjetas apiladas.\n- accesibilidad: cada campo con su etiqueta, contraste legible, y se puede recorrer con Tab.\n- ux: el boton principal mide al menos 44 px de alto y muestra estado de carga al pulsarse.\n- estados: la lista muestra cargando, vacio con mensaje y error con reintento.Prueba
Abres tu app en un celular y el botón principal queda cortado fuera de la pantalla. ¿Qué criterio no fijaste (o la IA no cumplió)?
La accesibilidad es un detalle estético menor que puede posponerse siempre.
Detecta el criterio imposible de cumplir
Un alumno escribe criterios de UX para su pantalla. Señala el que NO es verificable (está mal formulado):
- El botón principal mide al menos 44 px de alto.
- La app debe verse moderna y bonita.
- Cada campo de formulario tiene su etiqueta visible.
- En 360 px de ancho ningún elemento se sale de la pantalla.
Identifica la linea con error.
Escribe 4 criterios (uno por dimensión: responsive, accesibilidad, UX, estados) para la pantalla principal de tu proyecto y ponlos como condición de aceptación en tu próximo prompt.