JJ Garrett y los Elementos de la Experiencia de Usuario
Un viaje desde lo abstracto hasta lo concreto: el marco conceptual que cambió cómo entendemos el diseño digital.
¿Trabajando en una marca o producto?
Conversemos sobre tu siguiente paso.
Jesse James Garrett es uno de los pioneros del diseño de experiencia de usuario. Cofundador de Adaptive Path —una de las primeras consultoras dedicadas exclusivamente al UX—, Garrett publicó en 2002 su libro The Elements of User Experience, editado por New Riders. Ese libro hizo algo que nadie había logrado antes: poner nombre, estructura y lenguaje compartido a una disciplina que existía pero que no sabía cómo llamarse a sí misma.
El impacto fue inmediato. De repente, diseñadores, desarrolladores, product managers y stakeholders tenían un vocabulario común para hablar sobre cómo se construye la experiencia de un producto digital. Su diagrama de cinco planos se convirtió en una de las imágenes más reproducidas en la historia del diseño web.
Créditos
Este artículo está inspirado en el trabajo de Jesse James Garrett. El diagrama y el marco conceptual pertenecen a su libro The Elements of User Experience (2002, New Riders). Créditos completos al autor.
El libro que definió una disciplina
Antes de Garrett, el diseño web era tratado principalmente como un problema visual o técnico. Su contribución fue demostrar que la experiencia de usuario no es una capa que se agrega al final —es el resultado de decisiones tomadas en múltiples niveles desde el principio del proceso de diseño.
El libro propone que cualquier producto digital puede analizarse y construirse a través de cinco planos que van desde lo más abstracto hasta lo más concreto. Cada plano depende del anterior: no puedes resolver bien el diseño visual si la arquitectura de la información es confusa; no puedes tener buena arquitectura si el alcance del producto no está bien definido.
El diagrama de Garrett — de lo abstracto a lo concreto
Estrategia — Lo más abstracto
Combina los Objetivos del Sitio y las Necesidades del Usuario. Responde la pregunta fundamental: ¿Para qué existe este producto? Un producto sin estrategia clara construye funcionalidades para nadie.
Alcance — ¿Qué hace el producto?
Define las Especificaciones Funcionales y los Requisitos de Contenido. Traduce la estrategia en decisiones concretas: qué features existirán, qué contenido se publicará, y qué queda fuera del scope.
Estructura — ¿Cómo está organizado?
Abarca el Diseño de Interacción y la Arquitectura de la Información. Determina cómo el usuario navega entre las partes del sistema y cómo se organiza la información para que sea encontrable y comprensible.
Esqueleto — ¿Dónde está cada cosa?
Incluye el Diseño de Interfaz, el Diseño de Navegación y el Diseño de la Información. Aquí viven los wireframes: la disposición concreta de elementos, botones y bloques de contenido en la pantalla.
Superficie — Lo más concreto
Es el Diseño Visual: lo que el usuario ve y siente. Los colores, tipografías, imágenes, espaciado y micro-animaciones. Es la capa más visible y, paradójicamente, la que más depende de las decisiones tomadas en los planos anteriores.
Diagrama original de Jesse James Garrett · The Elements of User Experience, 2002
"Los problemas de diseño siempre tienen raíces en capas anteriores. Si la interfaz se ve fea, revisa la estructura. Si la estructura es confusa, revisa el alcance. Si el alcance está inflado, revisa la estrategia."
— Heison Espinoza
¿Por qué importa este marco hoy?
Más de veinte años después, el diagrama de Garrett sigue siendo completamente relevante. La llegada del diseño con IA, las herramientas no-code y los design systems automatizados no eliminan ninguna de las cinco capas —las hacen más importantes.
Cuando una herramienta de IA puede generar una interfaz en segundos, la pregunta ya no es "¿cómo la construyo?" sino "¿por qué la construyo?" y "¿para quién?" Esas preguntas viven en la capa de estrategia. El marco de Garrett te recuerda que la tecnología puede acelerar la ejecución, pero no puede reemplazar el pensamiento.
Cómo usarlo en la práctica
- 1Antes de empezar cualquier proyecto, documenta los cinco planos en orden. Empieza por estrategia aunque solo sean dos párrafos. La claridad en ese nivel evita semanas de retrabajo después.
- 2Cuando surja un conflicto de diseño —'¿este botón debería estar aquí?'— sube un plano. La respuesta casi siempre está en la capa de estructura o alcance, no en la superficie.
- 3Úsalo como checklist de revisión. Antes de entregar un proyecto, verifica que cada plano esté alineado con el siguiente. Una desconexión entre estrategia y alcance siempre terminará visible en la superficie.
En resumen
- El marco de Garrett define cinco planos que van de lo abstracto (estrategia) a lo concreto (superficie visual).
- Cada plano depende del anterior: los problemas en la superficie casi siempre tienen raíz en capas más profundas.
- Publicado en 2002, sigue siendo el lenguaje compartido más útil entre diseñadores, developers y stakeholders.
- Las herramientas de IA y no-code no eliminan los planos: los hacen más urgentes de entender.
Heison Espinoza
Consultor de Marca · Fundador de Ciclos Studio · Lima, Perú