TeSIS
La mayoría de los problemas de diseño no se deben a la falta de buen gusto.
Vienen de no tener un método compartido para traducir research en decisiones visuales.
En proyecto tras proyecto, aparecía el mismo patrón:
- Equipos diseñando de forma aislada.
- Decisiones guiadas por opinión
- Sistemas que colapsaban al escalar.
La causa no era falta de habilidad. Era la ausencia de una capa de traducción entre lo que revela el research y lo que la interfaz necesita hacer.
Este framework surgió para estructurar esa traducción.
POR QUÉ FALLA LA DEMOGRAFÍA
Lo más natural es empezar por quiénes son los usuarios. La edad, el género y las Personas sirven como base.
Pero no explican lo que realmente importa:
- Densidad del layout.
- Nivel de affordance.
- Complejidad de iconos.
- Patrones de interacción.
Una persona de 35 y una de 65 pueden usar el producto en el mismo contexto. Un “tech-savvy” puede mostrarse indeciso en un entorno que genere mucha ansiedad.
La demografía describe.
El contexto explica el comportamiento.
EL CAMBIO
Una vez que la pregunta pasó de "¿quiénes son los usuarios?" a "¿cómo utilizan este producto?", las decisiones de diseño se volvieron más claras, rápidas y fáciles de justificar.
Los patrones de comportamiento, el contexto de uso, la frecuencia, el nivel de ansiedad y el nivel de expertise predijeron las necesidades visuales con mucha mayor precisión que cualquier perfil demográfico.
ANTES
- Decisiones guiadas por opinión.
- Debates subjetivos.
- Sistemas que colapsaban al escalar.
DESPUÉS
- Inputs conductuales.
- Reglas de decisión explícitas.
- Sistemas visuales con lógica defendible.
Lo que funcionó en todos los casos que medí fue el contexto.
El contexto conductual se convirtió en la base para traducir el research en reglas de decisión visual explícitas.
descripción del Framework
Esto no surgió como un modelo.
Surgió como un patrón.
El framework está construido sobre cinco dimensiones interconectadas.
De forma individual, cada una informa decisiones de diseño.
En conjunto, eliminan el espacio donde normalmente vive la opinión.
1. DEFINICIÓN DE USUARIO
Cómo las personas usan realmente el producto, no quiénes son.
El cambio clave: comportamientos, no perfiles.
Mapea:
- Contexto de uso → densidad del layout.
- Objetivos del usuario → jerarquía y énfasis.
- Nivel de expertise → affordance.
- Frecuencia → familiaridad con los iconos.
Outputs:
- Estructura del layout.
- Patrones de interacción.
- Jerarquía de componentes.
- Estrategia de iconografía.
2. ESTRATEGIA DE MARCA
Cómo debe percibirse el producto.
La marca no es decoración. Es un input
Mapea:
- Posicionamiento → estrategia de color.
- Personalidad de marca → tono tipográfico.
- Diferenciación → lenguaje de formas.
Outputs:
- Paleta de color.
- Escala tipográfica.
- Formas de componentes.
- Tono visual.
3. CONTEXTO TÉCNICO
Qué puede construirse y mantenerse de forma realista. Algunos diseños fallan no porque estén mal, sino porque son imposibles.
Mapea:
- Plataformas y dispositivos → comportamiento responsive.
- Restricciones de performance → complejidad visual.
- Métodos de input → patrones de interacción.
Outputs:
- Sistema de grilla.
- Especificaciones de touch targets.
- Guías de performance.
4. ACCESIBILIDAD
Quién queda fuera si no tenemos cuidado.
Las correcciones más costosas que he visto surgieron de tratar la accesibilidad como una validación final.
Mapea:
- Requerimientos de contraste → decisiones de color.
- Necesidades de navegación → soporte para teclado y screen readers.
- Carga cognitiva → etiquetas y patrones.
Outputs:
- Tokens de accesibilidad.
- Guías ARIA.
- Reglas de navegación.
5. OUTPUTS DEL SISTEMA
Lo que todo esto produce en conjunto.
Aquí es donde ocurre la integración.
- Sistema de layout.
- Escala tipográfica.
- Sistema de color.
- Reglas de iconografía.
- Patrones de interacción.
- Comportamiento responsive.
FRAMEWORK EN PRÁCTICA
Los principios de este framework fueron validados a través de trabajo en sistemas reales de autoservicio.
El sistema original era funcional visualmente, pero no respondía al comportamiento real de los usuarios.
A pesar de estar técnicamente completo, requería asistencia frecuente del personal y generaba fricción, especialmente en adultos mayores y usuarios digitales poco frecuentes.
Patrones de falla observados:
- Usuarios dudando antes de interactuar.
- Dependencia del personal para iniciar tareas.
- Sobrecarga cognitiva por jerarquías y señales de interacción poco claras.
- Baja confianza durante procesos de autoservicio.
Las decisiones de diseño estaban guiadas por la interfaz,
no por el comportamiento.
DECISIONES VISUALES RESULTANTES
- Mayor espaciado y menor densidad visual en el layout.
- Patrones de interacción con alto nivel de affordance.
- Acciones claramente etiquetadas e iconografía simplificada.
- Touch targets grandes, mínimo 48×48px.
- Jerarquía visual clara, de alto contraste
El objetivo dejó de ser la optimización estética. Pasó a ser la confianza y autonomía durante la interacción.
APLICADO EN UN PRODUCTO REAL
Resultado conductual: mayor autonomía de uso
El framework define reglas de decisión construidas a partir de comportamiento observable en productos reales.
En este caso, el rediseño permitió pasar de una interacción asistida a un autoservicio más autónomo.
La alta adopción entre adultos mayores validó las decisiones impulsadas por accesibilidad. El rediseño cambió el comportamiento de interacción asistida a autoservicio autónomo.
INTERACCIÓN OBSERVADA DESPUÉS DEL REDISEÑO
Los usuarios completaban el flujo completo de autoservicio sin asistencia del personal, validando las reglas de decisión del framework a través de comportamiento observable.
IMPACTO
Para usuarios:
- Mayor confianza y menor ansiedad.
- Interacción accesible entre distintos grupos etarios.
- Finalización de tareas más rápida.
Para operaciones:
- Menor dependencia del personal.
- Menor fricción de onboarding.
- Adopción más escalable del autoservicio.
Kiosco bancario de autoservicio
Research, rediseño e impacto medible.
POR QUÉ FUNCIONA
Para equipos → Lenguaje compartido
- Decisiones más rápidas.
- Menos debates subjetivos.
- Un lenguaje común entre research, diseño e ingeniería
Para productos → Coherencia visual a escala
- Accesibilidad integrada desde el inicio.
- Expresión clara de marca.
- Sistemas que no colapsan con 100 pantallas.
Para organizaciones → Menos retrabajo
- Onboarding más simple.
- Sistemas que evolucionan sin reconstruir sus bases.
LO QUE APRENDÍ
El mayor riesgo en diseño no es el mal gusto, sino las suposiciones no validadas.
El contexto superó consistentemente a la demografía. La tendencia a depender de perfiles es entendible, pero la evidencia apuntaba hacia otro lado.
Los frameworks no reemplazan el criterio. Hacen explícitos los trade-offs y mejoran las conversaciones.
Un framework es un punto de partida compartido, no una garantía de buenas decisiones.
DÓNDE FUNCIONA Y DÓNDE NO
Este framework no es universal.
Funciona mejor para:
- Productos con contextos de uso claramente observables.
- Equipos construyendo o escalando sistemas de diseño.
Menos efectivo para:
- Trabajo altamente experimental.
- Sitios de marketing de corta duración.
- Exploración temprana de product-market fit.
Los contextos donde los patrones conductuales
aún no se estabilizan requieren métodos distintos.
INSIGHT FINAL
Sin una capa de traducción entre research y UI, las decisiones de diseño siguen siendo subjetivas.
Cuando el contexto conductual se convierte en reglas de decisión, las mejoras de usabilidad aparecen no como cambios estéticos, sino como resultados humanos medibles.
El impacto apareció en la calidad de las decisiones, no en los píxeles.
