Saltar al contenido
SkillsBundleby SANTACONCHA
ES EN

Leyes de UX para Interfaces de IA: Diseño Centrado en el Usuario

Domina las 26 leyes de psicología del diseño de Jon Yablonski y aplícalas a productos de IA. Desde la Ley de Fitts hasta la Regla del Pico-Final, esta guía te da las herramientas para crear interfaces que tus usuarios amen.

¿Qué son las Leyes de UX?

Las Laws of UX son una colección de principios de psicología aplicados al diseño de interfaces, recopilados por Jon Yablonski. No son reglas absolutas, sino mejores prácticas basadas en décadas de investigación sobre cómo los humanos perciben, procesan e interactúan con las interfaces digitales.

Para productos de IA —donde la carga cognitiva ya es alta por la novedad tecnológica— aplicar estas leyes es aún más crítico. Una interfaz que exige aprender modelos mentales nuevos, procesar demasiadas opciones o recordar información entre pasos, frustrará al usuario aunque el modelo de IA sea excelente.

Principio clave: El mejor modelo de IA del mundo no sirve si tu interfaz no deja que el usuario llegue a él. Las Leyes de UX son el puente entre el poder tecnológico y la experiencia humana.

Las 3 Leyes Fundamentales de Interacción

Fundacional

1. Ley de Fitts — Tamaño y Distancia

El tiempo para adquirir un objetivo depende de la distancia al objetivo y su tamaño.

En IA: El botón de "Ejecutar prompt" debe ser grande y estar cerca del área de escritura. Los botones pequeños alejados del flujo natural generan fricción.

  • Objetivos táctiles mínimos: 44×44px en móvil, 48×48px recomendado
  • Elementos críticos en zona de fácil acceso (esquinas, bordes)
  • El botón de acción principal debe ser el más grande visible
  • Espacio entre elementos relacionados para evitar clics accidentales
Fundacional

2. Ley de Hick — Menos Opciones, Mejores Decisiones

El tiempo de decisión aumenta con el número y complejidad de opciones.

En IA: Un selector de modelos con 20 opciones sin orden ni descripción abruma. La Ley de Hick dice: limita a 5-7 opciones visibles y usa categorización jerárquica.

  • Máximo 5-7 opciones por pantalla o sección
  • Dividir procesos complejos (como configurar un agente) en pasos
  • Destacar la opción recomendada con etiqueta visual
  • Onboarding progresivo: no mostrar todo de golpe
Fundacional

3. Ley de Jakob — Consistencia con lo Familiar

Los usuarios prefieren que tu sitio funcione como los sitios que ya conocen.

En IA: Los patrones de chat tipo ChatGPT se han vuelto el estándar. Si tu interfaz de IA se comporta diferente sin razón, generarás confusión. Aprovecha los modelos mentales existentes.

  • Barra de entrada abajo, historial a la izquierda (patrón familiar)
  • Iconos y nomenclatura consistentes con plataformas conocidas
  • No reinventar la rueda: las metáforas familiares reducen la curva de aprendizaje
  • Si cambias algo, permite usar la versión anterior por un tiempo

Leyes de Carga Cognitiva y Memoria

Cognitiva

4. Ley de Miller — 7±2 Elementos

La persona promedio solo puede mantener 7 (±2) elementos en su memoria de trabajo.

En IA: No muestres 20 resultados a la vez. Fragmenta (chunking): agrupa en bloques de 5-9. Ej: menús, listas de skills o configuraciones.

Cognitiva

5. Carga Cognitiva — Recursos Mentales

La cantidad de recursos mentales necesarios para entender e interactuar con una interfaz.

En IA: Cada decisión extra (qué modelo usar, qué parámetros ajustar) consume recursos. Minimiza la carga con defaults inteligentes, tooltips y ayudas contextuales.

  • Reconocimiento > recuerdo: muestra opciones, no obligues a recordar comandos
  • Instrucciones visibles y contextuales, no manuales externos
  • Defaults que funcionen para el 80% de los casos
Cognitiva

6. Fragmentación (Chunking)

Agrupar información en unidades significativas facilita su procesamiento.

En IA: Una lista plana de 30 skills es difícil de asimilar. Agrúpalas por categorías (Desarrollo, Marketing, Diseño...) como hace SKILLSBUNDLE. El chunking es la razón por la que los números de teléfono se agrupan en 3-3-3.

Cognitiva

7. Memoria de Trabajo

Sistema cognitivo que retiene y manipula información temporalmente.

En IA: No obligues al usuario a recordar configuraciones entre pasos. Persiste la información donde se necesita: auto-completado, historial, guardado automático.

Leyes de Percepción (Gestalt)

Gestalt

8. Ley de Proximidad

Objetos cercanos se perciben como grupo. Usa un sistema de grid consistente (8px). Lo relacionado va cerca, lo separado es distinto. El margen interno debe ser mayor que el externo para crear cards bien definidas.

Gestalt

9. Ley de Semejanza

Elementos similares se perciben como mismo grupo. Mismo color + misma forma = misma función. Si un botón es azul y otro también, el usuario asume que hacen lo mismo. Cambios de estilo = cambio de significado.

Gestalt

10. Ley de Prägnanz

Interpretamos imágenes complejas como la forma más simple posible. Diseños limpios, iconos reconocibles universalmente, sin ambigüedad. El ojo humano busca la simplicidad por defecto.

Gestalt

11. Ley de Conectividad Uniforme

Elementos conectados visualmente se perciben como más relacionados. Líneas, flechas, cards conectadas: las rutas visuales guían la navegación. La conexión visual pesa más que la cercanía física.

Gestalt

12. Ley de Región Común

Elementos en un área delimitada se perciben como grupo. Cards, acordeones, secciones con bordes o fondos. Cada sección de tu interfaz debe tener un límite visual claro.

Efectos Psicológicos Clave

Psicología

13. Efecto Estética-Usabilidad

Los usuarios perciben un diseño bonito como más útil. Invertir en calidad visual no es "decoración": es funcional. Un diseño cuidado genera confianza y tolerancia a pequeños errores. La primera impresión visual determina la percepción de toda la experiencia.

Psicología

14. Efecto de Posición en Serie

Recordamos mejor el primer y último elemento de una serie. Pon la información más crítica al principio y al final. En menús, las primeras y últimas opciones son las que más se recuerdan. El medio se pierde.

Psicología

15. Efecto Von Restorff (Aislamiento)

Lo que difiere del resto se recuerda mejor. El CTA principal debe destacar visualmente. Pero cuidado: si todo destaca, nada destaca. Úsalo con moderación para acciones críticas.

Psicología

16. Efecto Zeigarnik

Recordamos mejor las tareas incompletas que las completadas. Las barras de progreso motivan a completar. Útil en onboarding multi-paso, gamificación y configuraciones pendientes.

Psicología

17. Efecto Tendencia a la Meta

Más motivados cuando estamos cerca del objetivo. Las barras de progreso se aceleran al final. "Te falta 1 paso", "¡Ya casi!" — el micro-copy cerca de la meta impulsa la finalización.

Psicología

18. Atención Selectiva

Foco solo en lo relevante para nuestros objetivos. Los usuarios no leen, escanean. Diseña para escaneo rápido con jerarquía visual clara: titulares grandes, bullet points, espacios en blanco.

Psicología

19. Regla del Pico-Final

Juzgamos una experiencia por su punto más intenso (pico) y su final. Cierra cada flujo con una nota positiva. Un onboarding que termina con "¡Listo! Tu agente está configurado" + animación de éxito deja mejor impresión que uno que simplemente desaparece.

Leyes de Productividad y Fricción

Productividad

20. Ley de Parkinson

Las tareas se expanden hasta llenar el tiempo disponible. Estima tiempos realistas. El autocompletado ahorra tiempo real. Si un proceso tarda menos de lo esperado, la experiencia mejora. Las barras de progreso que se aceleran al final son ejemplo de esta ley bien aplicada.

Productividad

21. Ley de Postel

Sé liberal al aceptar, conservador al enviar. Tolerancia en inputs (formatos de fecha, espacios, mayúsculas). Validación indulgente: corrige automáticamente vs rechazar. El output debe ser predecible y bien formado.

Productividad

22. Ley de Parkinson

Las tareas se expanden hasta llenar el tiempo disponible. Estima tiempos realistas. El autocompletado ahorra tiempo real. Si un proceso tarda menos de lo esperado, la experiencia mejora.

Productividad

23. Navaja de Occam

Entre hipótesis que predicen igual, elige la que menos suposiciones haga. No asumas conocimiento previo del usuario. La solución más simple suele ser la mejor. Reduce fricción innecesaria.

Productividad

24. Paradoja del Usuario Activo

Los usuarios nunca leen manuales, pero empiezan a usar el software de inmediato. Diseño intuitivo > instrucciones. Tooltips contextuales > documentación externa. Muestra ejemplos en lugar de explicaciones.

Productividad

25. Sobrecarga de Opciones

Demasiadas opciones abruman y paralizan. Defaults inteligentes, comparación lado a lado, recomendaciones curadas. Un catálogo de 1136 skills sin filtros es abrumador — por eso SKILLSBUNDLE organiza por verticales y tipos de uso.

Productividad

26. Modelo Mental

Cómo creemos que funciona un sistema basado en experiencias previas. Alinea tu diseño con las expectativas del usuario. Metáforas familiares (carrito de compra, carpeta de archivos). Consistencia con la realidad del usuario.

Cómo aplicarlo en SKILLSBUNDLE: Nuestras 1136 skills están organizadas por verticales (41 categorías) y tipos de uso, aplicando fragmentación (chunking), ley de proximidad y ley de Hick. Cada skill tiene un formato SKILL.md consistente que respeta la ley de semejanza. Y nuestras guías de instalación siguen la paradoja del usuario activo: ejemplos visuales > manuales.

Checklist de Auditoría UX (26 puntos)

Usa esta checklist para auditar cualquier interfaz:

Botones ≥ 44px y con espacio (Fitts)
≤ 7 opciones visibles por pantalla (Hick)
Patrones familiares del sector (Jakob)
Contenido en ≤ 9 bloques (Miller)
Tiempos acotados (Parkinson)
Inputs toleran variaciones (Postel)
Elementos relacionados cerca (Proximidad)
Mismos estilos = mismas funciones (Semejanza)
Diseño minimalista y claro (Prägnanz)
Conexiones visuales guían (Conectividad)
Cards/secciones delimitan grupos (Región Común)
Diseño visual atractivo (Estética-Usabilidad)
Info clave al inicio y final (Serie)
CTA principal destaca (Von Restorff)
Indicadores de progreso (Zeigarnik, Meta)
Jerarquía visual clara (Atención Selectiva)
Carga cognitiva minimizada
Feedback inmediato (Fluir)
Info agrupada en chunks (Fragmentación)
Sin suposiciones sobre usuario (Occam)
Intuitivo sin instrucciones (Usuario Activo)
Opciones filtradas (Sobrecarga)
Alineado con expectativas (Modelo Mental)
Cierre positivo de flujos (Pico-Final)
Info persistente donde se necesita (Memoria Trabajo)
Diseño estéticamente cuidado (Estética-Usabilidad)

Recursos y Referencias

Conclusión

Las Leyes de UX no son teoría abstracta: son herramientas prácticas. Cada decisión de diseño —desde el tamaño de un botón hasta la organización de un menú— tiene un fundamento psicológico que puedes aprovechar. En SKILLSBUNDLE aplicamos estos principios para que nuestras 1136 skills no solo sean potentes, sino realmente usables.

¿Quieres diseñar mejores interfaces de IA? Empieza con estas 26 leyes. Son el mismo framework que usan los equipos de producto de Apple, Google y las startups más innovadoras.