En este tutorial te muestro cómo llevar una idea desde un wireframe en baja fidelidad hasta un prototipo interactivo en Figma listo para validar con clientes y pasar a desarrollo, con tips prácticos de un flujo real.
Planifica antes de abrir Figma
Define el objetivo del prototipo (flujo, look & feel, microinteracciones), las pantallas clave y el contenido mínimo. Ten a mano referencias y patrones UI.
Tip pro: acordad con el equipo qué se valida en esta ronda (navegación, copy, jerarquía visual) para evitar rehacer trabajo.
Crea el wireframe en baja fidelidad
Crea un Frame con dimensiones del dispositivo (1440 desktop / 768 tablet / 375 móvil).
Usa formas básicas y texto para estructura; sin color para centrarte en funcionalidad.
Construye con Auto Layout para tener bloques fluidos y escalables.
Anota comportamientos y estados (hover, error, vacío) con etiquetas.
Resultado: mapa claro de contenidos y prioridades, listo para revisión rápida.
Pasa a media y alta fidelidad
Tras validar el esqueleto, sube fidelidad:
Tipografía y jerarquía: define estilos (H1, H2, body).
Paleta y temas: crea variables de color (light/dark) y espaciado.
Componentes: botones, tarjetas, inputs con variants y propiedades.
Estados: default, hover, focus, disabled y error.
Tip pro: usa Variables para colores/espaciados y conecta con Design Tokens en tu repo. Un cambio global = diseño actualizado.
Añade interacciones para el prototipo
Activa la pestaña Prototype y conecta los flujos con hotspots.
Configura eventos: On click → Navigate to, Open overlay, Swap variant.
Usa Smart Animate para transiciones suaves entre estados.
Simula microinteracciones (menús, acordeones, modales) sin caer en fuegos artificiales.
Testea, comparte y itera
Present Mode: prueba en escala 100% para detectar fricciones.
Compartir: enlace con permisos de vista/comentario para stakeholders.
Hand-off a devs: añade una página de especificaciones con medidas, estilos y assets marcados para exportar.
Checklist rápida
Wireframe validado
Estilos tipográficos y de color centralizados
Componentes con variants y estados
Interacciones principales definidas
Feedback aplicado y prototipo estable
Preguntas frecuentes
¿Necesito experiencia en diseño para usar Figma?
No. Puedes empezar con plantillas y componentes; lo clave es entender el flujo que quieres validar.
¿Diferencia entre wireframe y prototipo?
El wireframe es estructura y contenido; el prototipo añade interactividad y simula el flujo real.
¿La versión gratuita sirve para prototipos?
Sí. Para proyectos pequeños y validaciones internas suele ser suficiente.
Como desarrolladora web, me he enfrentado en múltiples ocasiones al dilema de cómo organizar la información de forma efectiva para que el usuario no se sienta abrumado. A lo largo del tiempo, una de las ideas que más me ha ayudado a tomar decisiones de diseño más acertadas ha sido la Ley de Miller, también conocida como el “número mágico 7 ± 2”. Esta ley, aunque proviene de la psicología cognitiva, tiene una aplicación sorprendentemente útil en el mundo del diseño de interfaces.
En este artículo quiero compartirte, desde mi experiencia práctica, cómo aplicar esta ley a nuestras interfaces y por qué menos es, en realidad, mucho más. Vamos a desmenuzar el concepto, ver ejemplos concretos y descubrir cómo esta teoría puede ayudarte a diseñar experiencias más limpias, intuitivas y eficaces para quienes usan tus productos digitales.
¿Qué es la Ley de Miller?
Origen y base científica
La Ley de Miller fue propuesta por el psicólogo cognitivo George A. Miller en 1956. En su artículo “The Magical Number Seven, Plus or Minus Two”, Miller argumentaba que la memoria a corto plazo humana es capaz de retener entre 5 y 9 elementos de información simultáneamente, con una media de 7.
Este concepto se convirtió rápidamente en una referencia fundamental en el campo de la psicología cognitiva, pero también empezó a encontrar aplicaciones fuera de ese ámbito: desde la educación hasta, por supuesto, el diseño de interfaces.
Cómo impacta en la experiencia del usuario
Cuando una persona navega por una web o app, está tomando decisiones constantemente: qué menú elegir, dónde hacer clic, cómo interpretar un botón o una notificación. Si el número de opciones o elementos visibles supera ese rango de 5 a 9 ítems, el usuario comienza a sentirse saturado, desorientado o incluso frustrado. En ese contexto, la simplicidad no es una estética, es una necesidad cognitiva.
Aplicando la Ley de Miller al diseño de interfaces
Menos elementos, más comprensión
Cuando estamos diseñando una interfaz, ya sea un menú de navegación, un formulario, una tarjeta de producto o incluso un mensaje emergente, debemos preguntarnos: ¿Cuánta información estoy exigiendo procesar al usuario de golpe?
Aquí es donde la Ley de Miller entra en juego como una guía para limitar la cantidad de estímulos al mínimo necesario.
Menús de navegación
Uno de los lugares más evidentes donde aplicar esta ley es en los menús principales de navegación. Si alguna vez has llegado a un sitio con 12 ítems en el menú superior, sabes de lo que hablo: demasiadas opciones generan dudas.
Mi recomendación profesional: mantener el menú principal entre 5 y 7 elementos. Si hay más secciones, considera agruparlas en un desplegable bajo un ítem general como “Más” o “Otros”.
Formularios y tareas
Muchas veces se presentan al usuario listas interminables de campos para completar. Esto no solo agota, sino que ralentiza la conversión.
Una buena estrategia es dividir el formulario en pasos o bloques. Si un formulario tiene 15 campos, distribúyelos en 3 grupos de 5. Visualmente, la carga cognitiva se reduce, y el usuario siente que el proceso es más ágil.
Listas, botones y opciones de filtro
Mostrar más de 7 u 8 opciones sin jerarquía visual puede llevar al usuario a ignorarlas por completo. El resultado: no actúan.
¿La solución? Agrupar, destacar las opciones más relevantes y ofrecer filtros contextuales solo cuando realmente se necesiten.
Estrategias prácticas para aplicar la Ley de Miller
Divide, agrupa y oculta hasta que sea necesario
La mejor forma de ayudar al usuario no es dándole todo lo que necesita al mismo tiempo, sino guiándolo paso a paso. Estas son algunas técnicas efectivas:
1. Agrupación lógica de contenido
Usar espaciado, colores y tipografía para indicar qué elementos pertenecen al mismo grupo. Así, el cerebro puede procesar varios elementos como si fueran uno solo.
2. Prioriza y oculta lo secundario
Muestra solo las opciones clave y deja las demás en segundo plano. Por ejemplo, en un menú de filtros, los más usados deben estar visibles, y los demás pueden plegarse bajo un botón como “Mostrar más”.
3. Usa patrones reconocibles
Reducir el esfuerzo cognitivo no solo tiene que ver con la cantidad, sino también con la familiaridad. Cuando usamos patrones visuales comunes, como íconos estandarizados o layouts conocidos, el usuario los interpreta automáticamente.
¿Cuándo no aplicar la Ley de Miller al pie de la letra?
Casos donde el contexto manda
Aunque la Ley de Miller es muy útil, no es una regla absoluta. Hay situaciones donde mostrar más elementos puede estar justificado, siempre que haya soporte visual, contexto y jerarquía clara.
Interfaces expertas o técnicas
En dashboards dirigidos a perfiles técnicos, el número de elementos puede superar ese límite. La clave está en no tratar a todos los usuarios por igual: conoce tu público.
Visualizaciones complejas
En gráficas o reportes, el objetivo es analizar. Aquí, la clave es dar herramientas para filtrar o navegar, pero no esconder lo relevante.
Preguntas frecuentes (FAQs)
¿La Ley de Miller aplica también al diseño mobile?
Sí, y de hecho es aún más relevante en dispositivos móviles, donde el espacio visual es limitado. Cuanto más pequeña la pantalla, mayor la importancia de priorizar y agrupar.
¿Puedo mostrar más de 9 elementos si los agrupo visualmente?
Sí, eso se llama “chunking”. Puedes presentar 15 elementos, pero si están organizados en 3 bloques bien definidos, parecerán solo 3 a nivel cognitivo.
¿Qué herramientas de diseño me ayudan a aplicar esta ley?
Herramientas como Figma y Adobe XD permiten crear prototipos y jerarquías visuales claras. Y con Hotjar o Google Analytics puedes validar si el diseño está funcionando.
Diseñar pensando en el usuario es un acto de empatía
Como desarrolladora web, me he dado cuenta de que muchas veces queremos demostrar todo lo que sabemos o todo lo que ofrece nuestro producto… pero ese impulso puede ir en contra del usuario. El diseño no se trata de presumir, se trata de acompañar, de guiar, de hacer fácil lo complejo.
Aplicar la Ley de Miller no es recortar contenido sin criterio; es priorizar y estructurar pensando en cómo piensa la persona al otro lado de la pantalla.
En un mundo donde cada segundo cuenta, donde la atención es escasa y los estímulos son infinitos, el diseño inteligente es el que sabe cuándo callar para que el usuario escuche lo importante.
El síndrome Baby Duck en UX es un sesgo cognitivo que influye significativamente en cómo los usuarios perciben y adoptan nuevos productos digitales. Por ello, en este artículo exploraremos qué es, de qué manera impacta el diseño de interfaces y, además, qué estrategias puedes aplicar para minimizar sus efectos en la experiencia del usuario.
¿Qué es el síndrome Baby Duck?
El síndrome Baby Duck en UX describe la tendencia de los usuarios a preferir las interfaces y experiencias digitales con las que ya están familiarizados. Cuando un diseño cambia drásticamente, los usuarios pueden rechazarlo, incluso si la nueva versión es más eficiente o atractiva.
Origen del término
El nombre proviene del fenómeno de impronta observado en los patos bebés. Al nacer, un pato sigue al primer objeto en movimiento que ve, generalmente a su madre. De forma similar, en el ámbito digital, los usuarios desarrollan una impronta digital con sus primeras experiencias de uso, lo que condiciona sus expectativas futuras.
Ejemplos del síndrome Baby Duck
Usuarios que prefieren versiones antiguas de aplicaciones, a pesar de las mejoras en el diseño UX.
Rechazo al rediseño en interfaces de redes sociales populares.
Dificultades de adaptación a nuevos sistemas operativos o dispositivos digitales.
¿Cómo afecta el síndrome Baby Duck a la experiencia de usuario?
El síndrome Baby Duck puede generar resistencia al cambio y afectar la percepción de un producto digital. Como consecuencia, esto impacta directamente en la usabilidad y en la forma en que los usuarios interactúan con una interfaz digital.
Impacto en la usabilidad
Mayor curva de aprendizaje: los usuarios pueden sentirse perdidos si una interfaz cambia demasiado, lo que dificulta su adaptación.
Frustración y abandono: un cambio radical puede generar rechazo y hacer que los usuarios prefieran buscar alternativas.
Falta de adopción de nuevas funciones: en caso de que los cambios no estén bien explicados, los usuarios pueden ignorarlos o no aprovechar su potencial.
Relación con otros sesgos cognitivos
El síndrome Baby Duck está relacionado con otros sesgos mentales que influyen en nuestras decisiones:
Efecto de mera exposición: tendemos a preferir lo que ya nos resulta familiar, incluso si existen mejores opciones.
Sesgo de status quo: nos resistimos a los cambios, aunque estos sean beneficiosos.
Efecto Ikea: valoramos más aquello que hemos personalizado o aprendido a usar, lo cual refuerza el apego a interfaces anteriores.
Estrategias para minimizar el síndrome Baby Duck en UX
Si estás diseñando una nueva interfaz o renovando una existente, considera estas estrategias de diseño UX para reducir la resistencia al cambio y mejorar la experiencia de usuario.
Diseño progresivo y sensación de familiaridad
Mantén elementos reconocibles
Siempre que sea posible, evita cambiar radicalmente la interfaz de usuario. En su lugar, modifica de forma progresiva aspectos como:
Colores y tipografía
Posición de botones clave
Flujo de navegación
Usa patrones de diseño conocidos
Además, aprovecha convenciones establecidas en diseño UX, como:
Menús en la parte superior o lateral
Iconos universales (por ejemplo, la lupa para buscar)
Botones con etiquetas claras y comprensibles
Comunicación y educación del usuario
Explica los cambios de manera clara
Para facilitar la adaptación, incluye guías interactivas, mensajes emergentes o pequeños tutoriales que expliquen las novedades paso a paso.
Permite la transición gradual
Cuando sea viable, ofrece la opción de volver temporalmente a la versión anterior. Esto ayuda a reducir la ansiedad y permite una adaptación más suave.
Pruebas de usabilidad y recopilación de feedback
Realiza tests con usuarios
Antes de lanzar un rediseño, prueba la nueva interfaz con usuarios reales para detectar posibles problemas de adaptación o usabilidad.
Recoge y analiza feedback
Escucha las quejas y sugerencias de los usuarios y ajusta la interfaz según sus necesidades y expectativas.
🐥 En resumen: lo que aprendimos del síndrome Baby Duck
🔍 Qué es: Un sesgo cognitivo que nos lleva a aferrarnos a lo primero que aprendimos… incluso cuando ya no es lo mejor.
📉 Impacto en el diseño UX:
Frena la innovación
Provoca rechazo a cambios visuales o funcionales
Genera resistencia al aprendizaje de nuevas herramientas
💡 ¿Te has encontrado alguna vez rechazando un rediseño solo porque el anterior te parecía más cómodo?
A veces, lo familiar pesa más de lo que debería.
Para profundizar en el impacto cognitivo del síndrome Baby Duck en el diseño de interfaces, un estudio realizado por psicólogos de la HSE University ofrece una perspectiva académica valiosa. Este análisis no solo explica cómo se manifiesta este sesgo en el entorno digital, sino que también lo compara con otros sesgos cognitivos que influyen en la experiencia del usuario, como el sesgo de confirmación o la aversión a la pérdida.
