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
- Responsive
Se adapta al tamaño: escritorio, tableta y celular con el mismo contenido.
- Accesible
Lo pueden usar todas las personas: contraste, texto alternativo, navegación por teclado.
- Usable (UX)
Se entiende sin esfuerzo: pocos pasos, botones claros, errores amables.
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
Convertir el "se ve bien" en lista verificable
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):
Marca la línea o las líneas con error y pulsa Comprobar.
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.
Si no puedes medir un criterio, reescríbelo hasta que sea un sí o un no claro.
Tu texto se guarda sólo en este dispositivo.
Comentarios
Inicia sesión para comentar.
Todavía no hay comentarios. Sé la primera persona en opinar.