Módulo 05
Diseñar para humanos
No hablamos de código. Hablamos de experiencia.
La diferencia entre una herramienta que se adopta y una que se abandona casi nunca es técnica. Es de experiencia. Estos diez conceptos son el vocabulario que necesitas para criticar lo que la IA te devuelve.
Jerarquía
Lo más importante debe verse primero, sin esfuerzo.Una pantalla sin jerarquía obliga al usuario a leer todo para entender algo. Define la métrica protagonista y subordina el resto.
Campañas en alerta
3
- Una idea principal por pantalla
- Máximo tres niveles de énfasis
- El dato clave con mayor tamaño y contraste
Tipografía
Una familia, pocos tamaños, escala consistente.La tipografía carga casi todo el peso del diseño de una herramienta. Con una escala coherente el producto se ve profesional sin decoración.
40 / -0.04em
24 / -0.03em
16 / normal
13 / secundario
- Una sola familia tipográfica
- Escala definida: 12 / 14 / 16 / 24 / 40
- Tracking negativo en títulos grandes
Espaciado
El espacio en blanco es información, no desperdicio.El espaciado agrupa y separa. Elementos relacionados se acercan; elementos distintos se alejan. Usa múltiplos de 4 u 8.
- Escala en múltiplos de 4
- Más espacio entre bloques que dentro de ellos
- Márgenes generosos en pantallas grandes
Grid
La alineación es la diferencia entre limpio y descuidado.Un grid consistente da estructura invisible. Todo lo que se alinea se percibe como intencional.
- Ancho máximo de lectura controlado
- Columnas consistentes en todas las vistas
- Nada flota fuera del grid
Consistencia
Mismos elementos, mismo comportamiento, siempre.La consistencia reduce la carga cognitiva. Si un botón primario significa 'avanzar', nunca debe significar otra cosa.
- Un sistema de componentes reutilizables
- Mismos radios, sombras y estados
- Vocabulario estable en la interfaz
Contraste
Contraste dirige la atención y garantiza legibilidad.El contraste no es solo color: es tamaño, peso y espacio. Úsalo con intención y no en todos lados a la vez.
Texto principal
Texto secundario subordinado
Metadato terciario
- Texto principal con contraste alto
- Texto secundario claramente subordinado
- Un solo elemento dominante por vista
Color
Neutros para la estructura, un acento para la acción.En herramientas, el color comunica estado y acción. Si todo tiene color, nada destaca.
- Paleta neutra como base
- Un color de acción
- Colores de estado solo para estados
Microinteracciones
Cada acción necesita una respuesta inmediata.Hover, foco, carga y confirmación. Las microinteracciones dicen que el sistema está vivo y entendió al usuario.
- Transiciones entre 150 y 300 ms
- Estados de carga visibles
- Confirmación después de cada acción destructiva
Responsive
La herramienta se usará en la pantalla que haya.Diseña el contenido esencial primero y deja que el layout se adapte. En proyección 16:9 el foco importa tanto como en móvil.
- Prioridad de contenido definida
- Objetivos táctiles de al menos 44 px
- Verificado en proyector y en teléfono
Accesibilidad
Si no es usable para todos, no está terminado.Contraste suficiente, navegación por teclado, etiquetas claras y no depender solo del color para comunicar.
El estado nunca se comunica solo con color: añade texto o ícono.
- Contraste mínimo 4.5:1 en texto
- Navegación completa por teclado
- Foco visible siempre
6 / 15