Define la acción principal
Una interfaz organiza decisiones. Antes de elegir colores, escribe qué necesita hacer la persona en esa página. En una lista de pedidos, puede ser encontrar el artículo pendiente y entender el siguiente paso. La acción principal debe destacar más que las acciones ocasionales.
Una página con cinco botones visualmente idénticos obliga a que el usuario decida dónde mirar. Distingue acción principal, alternativa e información. Esto no significa ocultar opciones: significa hacer que el orden de lectura sea compatible con la tarea.
Por qué aprender
La claridad de la acción permite evaluar el diseño por su uso. Puedes preguntar si la persona encontró y completó la tarea, en lugar de debatir solo gustos personales.
✓ Hacer
Usa texto junto con el color para indicar pendiente.
✗ Evitar
Aprobar solo la pantalla con datos perfectos.
Conceptos clave
Observa antes de rediseñar
Registra la página actual e identifica problemas concretos: texto cortado, etiqueta ambigua, bajo contraste o dificultad para localizar una información. Las herramientas de auditoría y skills de diseño, como Impeccable, pueden ayudar a investigar, pero la decisión debe señalar un efecto en el uso.
Elige tres problemas para el primer ciclo. Preservar el comportamiento que ya funciona reduce el riesgo de convertir una mejora visual en una regresión funcional. Si el problema es la etiqueta de un botón, no es necesario reconstruir toda la navegación.
Por qué aprender
Una observación específica produce una intervención menor y más fácil de comprobar. El registro anterior permite comparar el resultado sin depender de la memoria.
Un camino para aplicar
- Registra la tarea y la página actual.
- Aplica tres cambios con criterios.
- Revisa estados, teclado y pantalla pequeña.
Conceptos clave
Pide variaciones con criterios
Al solicitar opciones de layout, mantén contenido y objetivo constantes. Varía un aspecto a la vez, como la posición de la acción o el agrupamiento de los campos. Así puedes atribuir la diferencia de resultado a la decisión visual.
Un pedido útil informa público, tarea, restricciones y qué necesita mejorar. “Que se vea más bonito” no define cómo comparar propuestas. Pide, por ejemplo, dos formas de resaltar pedidos sin plazo, manteniendo los demás elementos y sin depender solo del color.
Por qué aprender
Comparar propuestas con los mismos datos evita que una opción parezca mejor solo por usar menos contenido o esconder un estado difícil.
Tarea: encontrar pedidos que necesitan información.
Datos: cinco pedidos, uno sin plazo y otro con nombre largo.
Cambios: jerarquía, etiquetas y agrupamiento.
Preservar: campos, navegación y acciones existentes.
Revisar: teclado, pantalla estrecha y texto ampliado.
Conceptos clave
Dibuja estados, no solo pantallas
Una interfaz necesita manejar lista vacía, carga, error, éxito y datos largos. El estado vacío debe explicar el siguiente paso. El error tiene que decir qué pasó y cómo recuperarse. El éxito debe confirmar el resultado sin ocultar información importante.
Prueba también el uso con teclado. El orden del foco debe acompañar la lectura, y el elemento activo debe ser visible. Un botón que solo aparece al pasar el mouse puede dejar una acción inaccesible para otras formas de navegación.
Por qué aprender
Los estados difíciles forman parte del producto real. Tenerlos en cuenta evita que la página funcione solo con los datos cortos y completos usados en la demostración.
✓ Hacer
Comparar propuestas con los mismos datos.
✗ Evitar
Cambiar toda la interfaz para corregir una etiqueta.
Conceptos clave
Revisa el contraste y el tamaño
El texto pequeño y con poco contraste exige más esfuerzo para leer. Para contenido común, usa como referencia una relación de contraste de al menos 4,5:1 entre texto y fondo. No evalúes solo el color principal: subtítulos, campos y estados deshabilitados también merecen atención.
En pantallas estrechas, revisa si hay desplazamiento horizontal involuntario y si las acciones siguen siendo alcanzables. Aumenta el texto para simular una preferencia de lectura. El layout debe acomodar el contenido, no obligar al lector a reducir la fuente para que quepa.
Por qué aprender
La revisión hace que la mejora visual sea inclusiva y medible. Evitas aprobar un diseño bonito que dificulta la lectura o pierde funciones en el celular.
| Criterio | Evidencia esperada |
|---|---|
| Tarea | La pendiente se localiza sin adivinanzas. |
| Acceso | Todas las acciones funcionan por teclado. |
| Layout | El texto largo no invade otros campos. |
Conceptos clave
Práctica: mejora una lista de pedidos
Usa una tabla ficticia con cinco pedidos, incluyendo un nombre largo y un plazo ausente. Define la acción principal y propone tres mejoras. Registra una captura antes y otra después, con los mismos datos y el mismo ancho.
Escribe una justificación de uso para cada cambio. Luego recorre la página con Tab, aumenta el texto y reduce la ventana. Tu entrega es una página más clara y un registro de verificación, no solo una imagen bonita.
Por qué aprender
El ejercicio combina diagnóstico, intervención y prueba. El hábito de justificar cada cambio ayuda a mantener consistencia cuando otras personas participan en el proyecto.
Tu ejercicio
Un pedido sin plazo aparece solo con fondo rojo. El botón principal se llama “OK”. Propón cambios que dejen explícito el siguiente paso.
Descargar ficha de la prácticaRevisar respuesta comentada
Añade la etiqueta “Plazo pendiente”, mantén el color como apoyo y renombra la acción a “Informar plazo”. Agrupa la acción junto al pedido correspondiente. Verifica el foco, la lectura del nombre largo y que funcione sin depender del color.
Comprueba tu comprensión
¿Qué comparación entre dos propuestas es más útil?
Conceptos clave
Lo que queda de este módulo
Una comparación antes/después con tres mejoras verificadas.
- ✓ La pendiente se localiza sin adivinanzas.
- ✓ Todas las acciones funcionan por teclado.
- ✓ El texto largo no invade otros campos.
El progreso registra tu lectura. La práctica queda concluida cuando revisas la entrega.