Descubre los fundamentos y tendencias clave en diseño UX/UI. Desde arquitectura de información hasta prototipado, en esta categoría exploramos cómo mejorar la experiencia de usuario (UX) y crear interfaces intuitivas y atractivas (UI). Aprende buenas prácticas, herramientas, patrones y principios que conectan el diseño visual con la funcionalidad real, para que cada interacción cuente.
Aplicar las ocho reglas de oro del diseño de interfaces es crucial para el éxito de un producto digital. Su uso adecuado asegura interfaces intuitivas y eficaces, mejorando significativamente la experiencia del usuario. Ignorar estas reglas, por otro lado, puede llevar a una interfaz confusa y frustrante, dañando la percepción y el éxito del producto. En un mercado donde la usabilidad es clave, no seguir estas reglas puede tener consecuencias negativas en la satisfacción del cliente y la rentabilidad del producto.
Las ocho reglas de oro del diseño de interfaces fueron creadas por Ben Shneiderman, un reconocido científico informático y profesor en el Laboratorio de Interacción Humano-Computadora de la Universidad de Maryland. Shneiderman detalló estas reglas en su influyente libro «Designing the User Interface: Strategies for Effective Human-Computer Interaction».
Consigue Coherencia: Facilita que el usuario reconozca fácilmente los elementos del producto digital, logrando que se familiarice rápidamente. Utiliza procesos, elementos visuales y símbolos consistentes para minimizar la necesidad de aprender nuevos conceptos para acciones similares. Al lograr coherencia, permites que los usuarios apliquen lo aprendido en tu producto a cualquier objetivo que se planteen.
Facilita Atajos: A medida que el usuario se vuelve más dependiente de tu producto digital, necesitará caminos directos que le ahorren tiempo. Por ejemplo, los atajos de teclado en sistemas operativos, como copiar y pegar, permiten una operación más eficiente y con menos esfuerzo.
Informa a Tus Usuarios: Debes proporcionar mensajes informativos claros y comprensibles, sin ambigüedades, acerca de la acción que están realizando y de su ubicación en la interfaz. Evita mensajes técnicos o códigos de error que no aporten información útil.
Comunica el Cierre de una Acción: Es vital informar a los usuarios cuando hayan alcanzado su objetivo. No deben quedar dudas o cabos sueltos tras completar una acción en tu interfaz.
Diagnostica los Errores: Notifica a los usuarios sobre los errores cometidos y proporciona la información necesaria para que puedan corregirlos de forma autónoma. Una buena gestión de errores reduce la frustración y mejora la experiencia de usuario.
Permite Revertir Acciones: Ofrece formas rápidas e intuitivas de deshacer acciones, reduciendo el estrés del usuario al saber que puede corregir errores fácilmente.
Apoya el Locus de Control Interno: Los usuarios deben sentir que tienen el control de la interfaz. Al permitirles iniciar acciones cuando lo consideren necesario, aumentas su confianza en el producto.
Poca Carga de Memoria a Corto Plazo: Diseña interfaces que requieran un esfuerzo mínimo de recordación. Los usuarios retienen mejor la información cuando se les facilita el reconocimiento en lugar de la memorización.
Formulario de Práctica para Aplicar las Ocho Reglas de Oro del Diseño de Interfaces
Como diseñador de interfaces y experiencia de usuario, tu misión es crear productos digitales intuitivos y libres de complicaciones. Aplicar estas ocho reglas te ayudará a lograrlo. A continuación, te propongo un formulario de trabajo personalizado para que puedas practicar y perfeccionar la aplicación de estas reglas en tus proyectos de diseño.
Diferencias entre Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario, dos términos frecuentemente utilizados en el diseño de productos digitales, son conceptos distintos pero estrechamente relacionados. Aunque ambos apuntan a mejorar la interacción del usuario con el producto, sus enfoques y alcances son diferentes.
¿Qué es la Usabilidad?
Usabilidad: Se enfoca en la efectividad, eficiencia y satisfacción que permite a los usuarios completar tareas de la manera más fácil posible. La usabilidad es un indicador de calidad que mide qué tan efectivo, fácil de usar y aprender, eficiente y libre de errores es un producto. Se centra principalmente en los aspectos funcionales del producto, como:
Funcionalidad: ¿Funciona el producto correctamente?
Capacidad de Aprendizaje: ¿Puede utilizarse sin aprendizaje adicional?
Flexibilidad: ¿Puede el producto realizar tareas adicionales?
Diseño: ¿Es estéticamente agradable?
Eficiencia: ¿Qué tan bien y rápido se pueden completar las tareas?
Satisfacción del Usuario: ¿Se sienten cómodos y satisfechos los usuarios?
Facilidad de Uso: ¿Es intuitivo y accesible el diseño?
¿Qué es la Experiencia de Usuario?
Experiencia de Usuario: Va más allá, abarcando los sentimientos y actitudes subjetivas de una persona al interactuar con el producto. Incluye aspectos de la interfaz de usuario, interacciones, marca del producto, expectativas psicológicas y emociones. Los elementos clave son:
Usabilidad: ¿Es fácil completar las tareas?
Adaptabilidad: ¿La gente empezará a usar el producto?
Deseabilidad: ¿Es divertida y atractiva la experiencia?
Valor: ¿Aporta valor a los usuarios?
Interacción: ¿Cómo interactúan los usuarios con el producto?
Emoción: ¿Qué estímulos emocionales y resonancia genera el producto?
Desde hace años, el término experiencia de usuario —o UX, por sus siglas en inglés— se ha convertido en una pieza clave dentro del diseño digital, el desarrollo de productos y la estrategia de negocio. Pero ¿qué significa realmente? ¿De dónde viene este concepto y cómo ha evolucionado hasta ocupar el lugar central que tiene hoy? Comprender el significado de la UX implica mucho más que hablar de pantallas e interfaces: es sumergirse en una historia que arranca mucho antes de que existiera internet. En este artículo exploramos los orígenes de la UX, repasamos sus hitos fundamentales y descubrimos cómo surgió una disciplina que hoy define la forma en que interactuamos con el mundo digital —y físico— que nos rodea.
Significado holístico de la UX
Cuando hablamos de experiencia de usuario UX, a menudo se piensa solo en la interacción de una persona con una interfaz digital, como una página web o una aplicación. Sin embargo, el concepto de UX es mucho más amplio y abarca toda la experiencia de una persona con un producto o sistema, lo que incluye el entorno físico en el que se usa el producto, los procesos que lleva a cabo el usuario para alcanzar su objetivo, las emociones y percepciones antes, durante y después de la interacción, el contexto cultural y social en el que se usa el producto. La UX en su sentido más holístico se refiere a toda la experiencia humana con un sistema o producto.
Más allá de las interfaces: UX en contextos reales
Esto implica que la interacción con una interfaz no lo es todo. También influye cómo la persona percibe el entorno completo donde se produce esa interacción. Por ejemplo, en un hospital, la UX abarca tanto el uso del software por parte del médico como la manera en que ese software encaja en el flujo de trabajo, en el espacio físico y en la cultura organizacional. La asociación casi inmediata del término UX/UI con el diseño de interfaces responde a varias razones.
Comprender la experiencia de usuario en su sentido más amplio nos obliga a mirar más allá de lo digital. La UX no nació con internet ni con las pantallas táctiles: es el resultado de décadas —incluso siglos— de evolución en la forma en que diseñamos pensando en las personas. Para entender realmente de dónde viene el diseño centrado en la persona, tenemos que retroceder en el tiempo, hasta el momento en que surgieron las primeras preguntas sobre cómo adaptar la tecnología a las capacidades humanas.
Esta visión integral del UX se refleja también en estándares internacionales que establecen principios concretos para el diseño centrado en el ser humano. Un ejemplo destacado es la norma ISO 9241-210:2019 sobre diseño centrado en el usuario, que define cómo debe abordarse la UX en todo el ciclo de vida del desarrollo de productos interactivos.
De la ergonomía a los factores humanos
Imagina un tiempo en el que «experiencia de usuario« ni siquiera era un término. Para descubrir sus orígenes tenemos que viajar a la Revolución Industrial: en las fábricas, ingenieros y científicos comenzaron a preguntarse cómo conseguir que máquinas y herramientas resultaran más cómodas y fáciles de usar.
Aquel primer intento de adaptar la tecnología a las personas dio lugar a lo que hoy llamamos ergonomía. Cuando entramos en el siglo XX —un periodo marcado por avances tecnológicos y enormes cambios sociales— los conflictos bélicos impulsaron el estudio de la interacción entre soldados y sus equipos. Así nació la ciencia de los factores humanos, dedicada a optimizar la relación entre personas y sistemas complejos.
Precursores y pioneros de la UX
Aquí es donde la historia se vuelve más interesante. Porque aunque el nombre de Donald Norman se asocia inevitablemente al nacimiento de la experiencia de usuario tal y como la entendemos hoy, la verdad es que su papel no fue el de un descubridor solitario que llegara a un terreno virgen. Al contrario, llegó a un campo donde otros ya llevaban tiempo sembrando, aunque aún nadie le hubiera puesto un nombre que lograra quedarse.
La intuición pionera de Lillian Gilbreth
Una de ellas fue Lillian Gilbreth, pionera en el estudio de la eficiencia doméstica durante la primera mitad del siglo XX. Gilbreth no se limitó a ordenar cocinas: rediseñó estos espacios para facilitar el día a día de las mujeres, en un momento en el que casi nadie pensaba en adaptar los entornos a quienes los habitaban. Ella ya aplicaba, de forma intuitiva, los principios que hoy reconocemos como parte esencial de la experiencia de usuario.
Del ordenador a la interacción humano-computadora
En las décadas de 1940 y 1950, los primeros ordenadores, enormes y difíciles de manejar, plantearon nuevos retos. Ingenieros y científicos empezaron a preguntarse cómo hacer que esas máquinas funcionaran de manera más comprensible, útil y segura. Así nació el enfoque de la interacción humano-computadora, una disciplina que buscaba mejorar la comunicación entre personas y sistemas complejos.
A medida que más personas investigaban cómo facilitar esa relación, la idea de poner al usuario en el centro ganó fuerza. Lo que empezó como una búsqueda de eficiencia evolucionó hacia una nueva forma de pensar el diseño: una que estudia cómo siente, piensa y actúa cada persona cuando utiliza un producto. En ese terreno, ya fértil, llegarían más adelante figuras decisivas que convertirían todas estas ideas en una disciplina formal.
Los primeros visionarios diseñadoras de experiencia de usuario
Brenda Laurel y la narrativa interactiva
Allí ya existía un germen claro de lo que hoy llamamos experiencia de usuario. En los años 80, Brenda Laurel, diseñadora e investigadora en Atari y Activision, propuso ideas adelantadas a su tiempo. En su tesis doctoral de 1986, Toward the Design of a Computer-Based Interactive Fantasy System, ya hablaba de la interacción entre personas y ordenadores como una forma de experiencia narrativa.
No se centraba solo en la funcionalidad: defendía que los sistemas interactivos debían provocar sensaciones coherentes y significativas. Más adelante, en 1989, publicó artículos en Human-Computer Interaction donde desarrollaba esta visión, mucho antes de que el término UX entrara en el vocabulario común.
Susan Kare: la interfaz como lenguaje visual
Mientras Apple desarrollaba el primer Macintosh, dos figuras clave daban forma a una nueva forma de entender la interacción con la tecnología. Por un lado, Susan Kare, diseñadora gráfica dentro del equipo original, creó los iconos que definirían la estética y funcionalidad del sistema.
Sus diseños no eran simples ilustraciones decorativas: actuaban como un lenguaje visual pensado para conectar con la intuición del usuario. Gracias a su trabajo, cualquier persona —incluso sin conocimientos técnicos— podía entender una interfaz al instante.
Jeff Raskin y los principios del diseño centrado en personas
Por otro lado, Jeff Raskin, impulsor del proyecto Macintosh, defendía que el diseño debía adaptarse al pensamiento humano y no obligar al usuario a aprender estructuras artificiales.
Apostó por la accesibilidad, la eficiencia y la simplicidad como pilares del diseño centrado en las personas. Aunque cada uno trabajaba desde su especialidad y con un enfoque distinto, ambos compartían una visión que anticipaba los principios esenciales de la experiencia de usuario.
Sus ideas prepararon el terreno para lo que vendría después. Por eso, cuando Donald Norman acuñó el término User Experience a principios de los años 90, no partía de un terreno virgen: simplemente supo reconocer, ordenar y dar forma a lo que otros ya habían empezado a construir.
La influencia de Donald Norman en la experiencia de usuario
A finales de los años 80 y principios de los 90, la tecnología se integraba con rapidez en la vida diaria, y Estados Unidos lideraba ese cambio. Las interfaces gráficas se convertían en nuevas formas de comunicación, y compañías como Apple comenzaron a entender que el diseño debía conectar emocionalmente con las personas.
A medida que el diseño centrado en el usuario tomaba fuerza entre diseñadoras, ingenieros e investigadoras que sentaron sus bases, una figura apareció para ordenar ese conocimiento disperso y darle una identidad concreta: Donald Norman. Su papel fue determinante para transformar lo que hasta entonces eran prácticas intuitivas en una disciplina estructurada.
De la psicología cognitiva al diseño centrado en el usuario
Norman, nacido en 1935, había iniciado su trayectoria en el campo de la psicología cognitiva, explorando cómo percibimos, interpretamos y actuamos frente a los estímulos del entorno. Con el tiempo, empezó a interesarse por la relación entre las personas y los objetos tecnológicos. Como profesor en la Universidad de California en San Diego, fundó el Instituto de Ciencias Cognitivas, donde integró psicología, diseño e ingeniería en una visión unificada. Su enfoque defendía que cualquier sistema debía diseñarse desde la experiencia de quien lo usa.
Una nueva forma de pensar el diseño
En 1988, Donald Norman publicó La psicología de los objetos cotidianos(The Design of Everyday Things), una obra que se convirtió rápidamente en referencia para diseñadores, ingenieros y cualquier persona interesada en entender por qué tantos objetos cotidianos resultan difíciles de usar.
Norman no escribía desde la teoría abstracta. Observaba objetos reales, situaciones comunes y errores que cometemos sin darnos cuenta. Explicaba cómo fallan los productos cuando no comunican bien su propósito, y sostenía una idea clara: si alguien no sabe cómo usar algo, el fallo está en el diseño, no en quien lo utiliza.
Cuando el diseño falla, la culpa no es del usuario
Su mensaje desmontaba la vieja idea de culpar al usuario. En lugar de asumir que las personas deben adaptarse a los sistemas, Norman proponía lo contrario: los sistemas deben entender a las personas. Ese enfoque, directo y accesible, convirtió el libro en una herramienta de análisis para miles de profesionales que empezaron a mirar su entorno de otra manera.
El impacto fue tal que muchas universidades incorporaron el texto a sus programas de diseño, psicología cognitiva e interacción persona-computadora. A través de ejemplos cotidianos —puertas mal etiquetadas, hornos confusos, interfaces ilógicas— Norman cambió la forma en que interpretamos los errores de uso. El diseño, decía, debía explicar por sí mismo cómo funciona algo, sin necesidad de instrucciones.
El libro que lo cambió todo
El impacto de La psicología de los objetos cotidianos no se limitó al entorno académico. Desde su publicación en 1988, el libro empezó a circular entre diseñadores, ingenieros y responsables de producto en grandes compañías tecnológicas. Su enfoque práctico, directo y humano captó la atención de quienes buscaban algo más que funcionalidad en sus productos.
Diseños que fallan, errores que todos conocemos
Norman no hablaba de ideas abstractas. Señalaba errores reales. Criticaba sistemas mal diseñados con ejemplos que cualquier persona podía entender. Puertas sin pistas visuales, hornos imposibles de configurar, dispositivos que confundían en lugar de guiar. Su mensaje resultaba tan evidente que muchas personas se preguntaban por qué nadie lo había formulado así antes.
Ese libro, tan claro como disruptivo, cambió su carrera para siempre. Empresas líderes vieron en Norman algo más que un autor brillante: vieron a alguien capaz de transformar su manera de diseñar. Fue entonces cuando Apple se fijó en él, con la idea de llevar ese enfoque a sus propios productos.
De autor disruptivo a referente para la industria
La psicología de los objetos cotidianos no solo se convirtió en lectura obligatoria en escuelas de diseño. Se convirtió también en una puerta de entrada a la industria para su autor. Con ese libro, Norman no buscaba un cargo en una gran empresa. Pero lo consiguió, porque hizo visible algo que toda una industria necesitaba ver.
El nacimiento del rol User Experience Architect
En 1993, tres años después de que su libro comenzara a circular entre diseñadores y tecnólogos, Donald Norman se unió a Apple con una propuesta clara: aplicar el diseño centrado en el ser humano en un entorno real, tecnológico y de gran impacto. La empresa le ofreció un cargo inédito hasta entonces, que él mismo propuso: User Experience Architect. A través de ese rol, introdujo un enfoque transversal que integraba el diseño industrial, la interfaz gráfica, la interacción física, la documentación y la experiencia de uso en su conjunto.
Diseñar desde la experiencia real del usuario
Norman no acudió como figura decorativa. Se integró en los equipos, analizó procesos, cuestionó decisiones y reorganizó flujos de interacción. Quería que los productos respondieran a una pregunta esencial: ¿cómo se siente una persona cuando interactúa con esto?. Bajo esa premisa, empezó a transformar desde la raíz la forma en que Apple concebía sus dispositivos.
En ese entorno fértil para la experimentación, Norman comenzó a usar de forma habitual el término User Experience. Lo entendía como algo mucho más amplio que una interfaz atractiva o intuitiva. Para él, la UX abarcaba todo lo que ocurre entre una persona y un producto: desde la intención hasta la emoción. Su trabajo en Apple marcó un punto de inflexión, porque introdujo una manera distinta de entender el diseño, centrada en la empatía, la claridad y la funcionalidad humana.
Nielsen Norman Group y expansión de la UX
Después de su etapa en Apple, Donald Norman ya no era solo un teórico ni un consultor interno. Su visión del diseño centrado en las personas había empezado a influir en cómo las empresas tecnológicas concebían sus productos. El término User Experience se había afianzado y empezaba a aparecer en conversaciones estratégicas, equipos de producto y programas formativos.
Del pensamiento académico a la transformación práctica
Norman entendió que el momento había llegado para dar un paso más. No quería quedarse como una figura académica ni convertirse en una voz aislada. Quería ver sus ideas implementadas a gran escala. Por eso, en 1998, unió fuerzas con Jakob Nielsen para crear el Nielsen Norman Group, una consultora enfocada en aplicar los principios de la UX en proyectos reales.
Una comunidad profesional con propósito
Desde sus inicios, el grupo trabajó con empresas, gobiernos e instituciones educativas. Su enfoque práctico impulsó el diseño centrado en el ser humano y lo convirtió en una herramienta de trabajo para quienes buscaban productos con propósito. En lugar de limitarse a evaluar interfaces, analizaban la experiencia completa: necesidades, comportamientos, contexto y emoción. Norman había creado algo más que una consultora: había formado una comunidad profesional que definía el estándar de lo que hoy entendemos como buen diseño centrado en el usuario.
UX como palanca estratégica en la empresa digital
Las empresas cambiaron su forma de pensar. Ya no basta con lanzar productos técnicamente impecables; deben generar experiencias que aporten valor tangible a quienes los usan. El éxito de un producto se mide por la sensación que provoca al utilizarlo, junto con las prestaciones que ofrece.
Ese cambio de mentalidad transformó el trabajo de los diseñadores y alcanzó a ingenieros, ejecutivos y responsables de producto. Todos empezaron a tomar decisiones basadas en la experiencia de las personas. El diseño centrado en las personas abandonó el papel y se aplicó en entornos reales —empresas, servicios, sistemas digitales y físicos— justo cuando los contextos comerciales y tecnológicos se volvían más complejos.
La revolución móvil consolida el papel del diseño UX/UI
Durante las dos últimas décadas, la tecnología digital remodeló nuestra forma de vivir y trabajar. La expansión de los smartphones y la presencia constante de aplicaciones y sitios web convirtieron las interfaces intuitivas en una prioridad. Las compañías que crecían con rapidez entendieron que la experiencia de usuario marcaba la diferencia entre retener o perder clientes.
Interfaces intuitivas como prioridad estratégica
Los productos digitales debían captar la atención al instante. Esa urgencia impulsó una gran demanda de diseñadores UX/UI capaces de crear experiencias ágiles y comprensibles. Cursos, bootcamps y programas especializados formaron perfiles centrados en el usuario, y el diseño de interfaces ocupó un lugar preferente frente a otras áreas más tradicionales. La velocidad del desarrollo de software y de las aplicaciones móviles impuso un entorno en el que cada decisión debía considerar cómo se siente la persona que interactúa.
El UX/UI se convierte en el rostro del diseño centrado en las personas
El diseño industrial, la manufactura y la logística evolucionan con más lentitud; en cambio, un pequeño cambio en una interfaz digital puede alterar la experiencia de millones de usuarios en cuestión de horas. Por esa capacidad de impacto inmediato, el UX/UI se convirtió en el rostro más visible del diseño centrado en las personas.
UX/UI como recurso clave en la era digital
Hoy, la experiencia de usuario se sitúa en el centro de cualquier decisión tecnológica. El avance digital y la necesidad de mejorar la vida cotidiana han colocado al UX en el núcleo de las estrategias empresariales. Un ajuste mínimo en una aplicación puede influir en millones de personas, lo que convierte el trabajo de los diseñadores UX/UI en un recurso clave para las compañías. Las organizaciones ya no improvisan: buscan especialistas en UX/UI, y la claridad del término facilita su adopción en todo el mercado.
Si quieres entender mejor cómo se diferencia de otros conceptos clave del diseño digital, como la usabilidad, te recomendamos leer este artículo: Diferencias entre usabilidad y experiencia de usuario. Allí exploramos cómo cada uno influye en el desarrollo de productos centrados en las personas.
Presente y futuro de la experiencia de usuario
Después de décadas de evolución, la UX ya no se limita a la interfaz. Lo que empezó como una reflexión sobre la usabilidad hoy define cómo sentimos, comprendemos y habitamos los entornos digitales. Ese cambio no fue casual. A través de dos palabras simples y potentes, se logró condensar ideas que ya flotaban entre diseñadores, ingenieros y pensadores. Al capturar esa visión compartida, el concepto de UX encontró una identidad clara y se convirtió en un eje esencial de la vida digital.
Nuevas tecnologías que redefinen la interacción
Hoy vivimos un punto de inflexión. La inteligencia artificial, la realidad aumentada y las interfaces naturales están reformulando nuestra relación con la tecnología. Ya no se trata de pulsar botones ni de navegar pantallas, sino de interactuar con sistemas que entienden emociones, anticipan necesidades y se adaptan al cuerpo, al entorno y al momento.
Diseñar experiencias para el mañana
Este nuevo paradigma exige algo más que orden visual. Cada decisión de diseño parte de una comprensión profunda del contexto humano. El objetivo no es hacer que el usuario aprenda a usar la tecnología, sino conseguir que esta se sienta como una prolongación natural de su forma de estar en el mundo. Así, la experiencia de usuario ya no se limita a resolver problemas de hoy: ayuda a imaginar el mundo que queremos habitar mañana.
Los enlaces de afiliado que encontrarás en esta página nos permiten obtener una comisión si realizas una compra, sin que esto afecte al precio para ti. Gracias a ello, seguimos mejorando Eniun y publicando contenidos que aporten valor a nuestra comunidad.
Orígenes y significado de experiencia de usuario
¿Qué es la experiencia de usuario (UX)?
Es la percepción global que una persona tiene al interactuar con un producto o servicio, abarcando utilidad, facilidad de uso, emoción y satisfacción.
¿Cómo se originó el concepto de UX?
Sus raíces están en la ergonomía y la psicología industrial del siglo XX, y se formalizó con la informática personal en los años 80 y 90.
¿Quién popularizó el término “experiencia de usuario”?
Donald A. Norman lo popularizó a comienzos de los 90 mientras trabajaba en Apple como arquitecto de experiencia de usuario.
¿En qué se diferencia la usabilidad de la experiencia de usuario?
La usabilidad mide la facilidad con que se completan tareas concretas; la UX engloba esa facilidad junto con factores emocionales, contextuales y de valor percibido.
¿Por qué es importante invertir en UX?
Una UX sólida eleva la satisfacción, reduce el soporte, mejora la retención y aumenta las conversiones, generando ventaja competitiva.
¿Cuáles son los componentes clave de la UX?
Utilidad, usabilidad, accesibilidad, deseabilidad, credibilidad y valor.
¿Qué rol juega la emoción en la experiencia de usuario?
Las emociones positivas durante la interacción refuerzan la memoria y la preferencia de marca, influyendo en la fidelidad y la recomendación.
¿Qué disciplinas se combinan en el trabajo de UX?
Interacción persona-computadora, diseño gráfico, psicología cognitiva, investigación de usuarios, arquitectura de la información y programación front-end.
¿Cómo se mide la experiencia de usuario?
Se utilizan métricas como Net Promoter Score (NPS), System Usability Scale (SUS), tiempo de tarea, tasa de error y entrevistas cualitativas.
¿Qué es un “pain point” dentro de la UX?
Es cualquier punto de fricción o dificultad que el usuario encuentra y que afecta negativamente su experiencia.
¿Qué metodología se sigue para diseñar una buena UX?
Un ciclo iterativo de investigación, ideación, prototipado, pruebas con usuarios y ajustes continuos.
¿Cómo influye la accesibilidad en la UX?
Garantiza que personas con diversas capacidades puedan usar el producto, ampliando la audiencia y cumpliendo normativas.
¿Qué significa “diseño centrado en el usuario”?
Implica colocar las necesidades, expectativas y limitaciones de los usuarios en el centro de todas las decisiones de diseño.
¿Cuál es la tendencia futura más relevante en UX?
La personalización basada en datos y la integración de IA para adaptar interfaces dinámicamente a cada usuario.
¿Cómo puedo empezar a mejorar la UX de mi sitio web?
Realiza pruebas de usabilidad rápidas, analiza métricas de comportamiento, entrevista a usuarios y prioriza los cambios que reduzcan fricciones críticas.
Un wireflow es un tipo de diagrama usado en UX que combina wireframes y flujos de usuario para mostrar cómo navega una persona por una app o web. Sirve para representar pantallas conectadas entre sí de forma clara y visual.
Los wireflows son una herramienta esencial en el prototipado, ya que combinan la estructura visual de los wireframes con la lógica de los diagramas de flujo. Esta unión permite representar pantallas e interacciones de forma clara, ofreciendo una visión global del sistema que mejora la comprensión de los flujos de navegación y facilita decisiones tempranas en el diseño. Así, contribuyen a validar una experiencia de usuario más coherente desde el inicio del proyecto.
Si quieres saber cómo empecé a trabajar con wireflows y por qué cambiaron por completo mi forma de diseñar, puedes bajar hasta ver mi experiencia laboral.
Definición de wireflow
Los wireflows son una herramienta visual pensada para la fase de prototipado. Su función principal es servir como documentación interna, de modo que todo el equipo comparta un mapa global de la aplicación: qué pantallas existen, cómo se conectan entre sí y qué anotaciones específicas debe tener en cuenta cada nivel.
Un wireflow combina dos elementos clave:
Wireframes, que muestran la estructura básica de cada pantalla.
Los diagramas de flujo, que explican cómo se conecta cada paso o acción.
Al juntarlos, los wireflows permiten documentar con claridad la navegación y lo que ocurre cuando el usuario interactúa con botones, formularios u otros elementos, así como notas y especificaciones para el equipo técnico.
⚠️ Es importante señalar que los wireflows no están pensados para reflejar el diseño final, ni transmitir el estilo visual o las animaciones del producto. Para esa fase, conocida como Look & Feel, son más apropiados los mockups de alta fidelidad, que permiten mostrar cómo se verá y se sentirá realmente la interfaz.
¿Por qué los wireflow son la clave en el diseño de experiencia de usuario?
Para diseñar una buena experiencia de usuario, no basta con que una interfaz se vea bien. Es fundamental entender cómo interactúan los usuarios con cada elemento y cómo fluye la navegación entre pantallas. Para lograrlo, es clave que exista una comunicación clara entre diseño y desarrollo, y que toda esa información pueda compartirse fácilmente con el equipo.
Aquí es donde entran los wireflows, ya que permiten documentar la navegación global de la aplicación en un solo documento o dividirla por funcionalidades y flujos específicos, según convenga al proyecto.
⚠️ Los wireflows no se limitan solo a móviles. También son muy útiles para documentar la navegación en sitios web, aplicaciones de escritorio o cualquier otra herramienta digital que implique interacción con el usuario. Gracias a su claridad, permiten tener una visión global del funcionamiento del producto, sin necesidad de entrar en detalles gráficos o técnicos.
Limitaciones de los wireframes y diagramas de flujo en la documentación de la experiencia de usuario
Aunque los wireframes son útiles para visualizar la estructura de cada pantalla y los diagramas de flujo ayudan a entender los procesos y decisiones dentro de una aplicación, ambos tienen limitaciones cuando se trata de representar la experiencia completa del usuario.Los wireframes no muestran cómo se interconectan las pantallas ni las interacciones dinámicas, mientras que los diagramas de flujo carecen de contexto visual y detalles específicos de la interfaz.
¿Puedo prescindir del wireflow?
En este punto, los wireflows ofrecen una solución más completa al combinar la estructura visual de los wireframes con la lógica secuencial de los diagramas de flujo, permitiendo una representación más clara y contextualizada de la navegación y las interacciones del usuario.
¿Por qué los wireframes no son suficiente?
Los wireframes son una excelente manera de mostrar los distintos elementos que componen una pantalla, pero no describen bien la interacción. Son especialmente deficientes para explicar el funcionamiento cuando hay mucho contenido dinámico, como ocurre en las aplicaciones móviles.
✅ Ventajas de los wireframes:
Son rápidos de crear.
Ayudan a visualizar la jerarquía de contenido.
Sirven como punto de partida para diseñadores y desarrolladores.
❌ Pero tienen limitaciones importantes:
No muestran interacciones. No explican qué ocurre cuando el usuario toca, desliza o navega.
No representan flujos dinámicos. Si hay pantallas que cambian según el comportamiento del usuario, el wireframe no lo refleja.
No ayudan a validar la experiencia completa. Un wireframe puede parecer correcto visualmente, pero no garantiza que la navegación sea fluida o comprensible.
¿Por qué los diagramas de flujo no son suficiente?
Los diagramas de flujo, por otro lado, son una herramienta para documentar exhaustivamente flujos de navegación complejos y de múltiples pasos o rutas. El problema es que, por norma general general, dejan fuera el contexto de la interacción y su impacto sobre los usuarios.
✅ Puntos fuertes de los diagramas de flujo:
Visualizan rutas complejas y ramificadas.
Muestran lógica condicional y comportamiento del sistema.
Son útiles para planificar la arquitectura de navegación.
❌ Sin embargo, fallan en aspectos clave:
No incluyen pantallas ni elementos visuales. Solo se enfocan en la lógica, no en el diseño.
No reflejan contexto visual. El usuario no puede ver qué se encontrará en cada paso.
Dificultan la validación UX. Al no mostrar el entorno visual, es difícil anticipar si el flujo será claro o confuso para el usuario.
¿Por qué los wireflows son una combinación perfecta entre estructura y navegación?
En cambio, los wireflows permiten describir la interacción de usuario tanto como sea necesario, así como el flujo de navegación y el comportamiento que existe entre cambios de pantallas o información dinámica. Los wireflows combinan lo mejor de los wireframes y los diagramas de flujo. Representan cada pantalla (como en un wireframe), pero también muestran las conexiones entre ellas mediante flechas e indicadores de interacción (como en un diagrama de flujo).
✅ Ventajas clave de los wireflows:
Permiten visualizar cómo se navega y qué se ve en cada paso.
Hacen evidente el comportamiento de la interfaz en flujos dinámicos.
Son fáciles de entender incluso para quienes no son diseñadores.
Facilitan la validación temprana de experiencias de usuario completas.
Por norma general, a la gente no le gusta introducir nuevos formatos de trabajo: lo antiguo suele resultar familiar. Sin embargo, los wireflows son entregables fáciles de interpretar, incluso sin no has visto nunca antes un wireframe o un diagrama de flujo.
Wireflow como eje de colaboración ágil
En un entorno de trabajo iterativo, el wireflow se convierte en un “panel de control” vivo donde diseñadores, desarrolladores y negocio dejan comentarios, inspeccionan decisiones y validan rápidamente los cambios de rumbo. Esa vista compartida evita malentendidos porque todos consultan la misma fuente de verdad, en lugar de enviar capturas o documentos desactualizados por correo.
Al poder navegar paso a paso por la experiencia, cada especialidad detecta lagunas de contenido, reglas de negocio sin cubrir o dependencias técnicas antes de que pasen a la fase de desarrollo. Este contraste temprano reduce retrabajos y ayuda a priorizar las tareas en el sprint planning.
Para que ese beneficio colaborativo no derive en un archivo inmanejable, conviene anotar únicamente la información que afecta a la interacción (p. ej. estados, microcopys o condiciones de visibilidad) y relegar detalles visuales o debates extensos a issues vinculados. Así el wireflow mantiene su ligereza y sigue cumpliendo su función principal: ser la guía interactiva que orienta al equipo durante todo el ciclo de producto.
Para crear un wireflow de éxito tienes que:
Definir con precisión el objetivo del flujo: Ej.: “comprar un ordenador portátil” o “buscar una receta”. Tu misión es bosquejar todas las pantallas e interacciones (en baja fidelidad) que permitan alcanzar ese fin.
Establecer la página de entrada: Decide dónde empieza el viaje del usuario (home, landing, pop-up onboarding, etc.) y qué contexto recibe antes de la primera acción.
Cartografiar cada pantalla y sus conexiones: Dibuja el camino principal —paso a paso— hasta la meta, indicando transiciones (clic, swipe, scroll) y cambios de estado.
Trazar caminos alternativos y atajos: Identifica rutas secundarias que lleven al mismo destino (búsqueda interna, deep-link desde un email, accesos rápidos, etc.).
Anticipar casuísticas y errores: Cobertura de escenarios como desconexión a Internet, campos vacíos, contraseñas incorrectas o tiempo de espera excesivo.
Establecer reglas y condiciones de visibilidad: Señala cuándo aparece un modal, qué requisito habilita un botón o qué contenido se oculta según el rol del usuario.
Añadir micro-copys y mensajes de sistema: Incluye textos clave (labels, tooltips, avisos de error / éxito) directamente en cada pantalla para que el equipo de redacción y desarrollo los vea en contexto.
Usar convenciones gráficas coherentes: Mantén una leyenda clara (colores, iconos, flechas, anotaciones) para que cualquier stakeholder interprete el wireflow sin ambigüedades.
Versionar y documentar los cambios: Cada iteración debe quedar registrada (fecha, autor, motivo) para que el equipo sepa qué ha variado y por qué.
Validar tempranamente con las partes implicadas: Revisa el wireflow con diseñadores, desarrolladores y negocio antes de pasar a mayor fidelidad; así detectas huecos funcionales y evitas retrabajos costosos.
Con estos diez pasos tu wireflow será una guía completa, comprensible y fácil de mantener durante todo el ciclo de desarrollo.
Herramientas para crear wireflows
Diseñar un wireflow no depende solo de saber qué pasos seguir, sino también de contar con la herramienta adecuada. Algunas están pensadas para bocetar rápido en baja fidelidad, otras permiten construir flujos interactivos de forma colaborativa, y otras se centran en la precisión de los diagramas. A continuación te presento una selección de las mejores herramientas para crear wireflows, indicando su dificultad, lo especializadas que están en este tipo de trabajo y si puedes usarlas gratis desde el principio.
Figma (Windows, macOS y versión web).
Figma destaca por su enfoque colaborativo en tiempo real: varios miembros del equipo pueden editar el mismo wireflow simultáneamente y dejar comentarios “in situ”. Resulta ideal cuando necesitas prototipos de media-alta fidelidad y un hand-off fluido hacia desarrollo. Tiene un plan Starter gratuito que permite trabajar con hasta tres archivos activos, además de un espacio ilimitado de borradores, así que puedes crear wireflows sin pagar mientras tu proyecto sea pequeño.
Facilidad
40%
Especialización en wireflows
70%
Balsamiq Wireframes (Windows, macOS y versión web).
Si tu prioridad es bocetar rápido en baja fidelidad, Balsamiqes la opción más ágil: su interfaz imita un dibujo a mano, lo que evita distracciones de detalle visual. Aprenderlo lleva minutos. Ofrece 30 días de prueba gratis; después la licencia pasa a ser de pago, así que vale para validar una idea sin desembolsar de inmediato.
Facilidad
75%
Especialización en wireflows
50%
Sketch (solo macOS).
Sketches el estándar de diseño de interfaces en Mac gracias a sus librerías de símbolos, plugins y control preciso de tipografía. Perfecto para wireflows de alta fidelidad integrados con tu sistema de diseño. Incluye 30 días de prueba gratuita, pero no posee un plan gratuito permanente.
Facilidad
50%
Especialización en wireflows
70%
OmniGraffle (solo macOS / iPadOS).
Pensado para diagramas complejos y mapas de flujo detallados, OmniGraffleda un control exhaustivo sobre alineaciones, rejillas y estilos. Es menos “visual UI” y más “diagramming pro”. Dispone de 14 días de demo; después eliges entre comprar licencia clásica o suscribirte.
Facilidad
80%
Especialización en wireflows
100%
Miro (Windows, macOS, web y apps móviles).
Miroes una pizarra infinita donde puedes mezclar wireframes, notas de investigación y flujos de usuario en un mismo lienzo. Perfecta para workshops remotos y design sprints. Su plan Free te da tres tableros editables con usuarios ilimitados; suficiente para crear varios wireflows colaborativos sin coste.
Facilidad
80%
Especialización en wireflows
100%
Mi experiencia haciendo wireflows
En 2008 cuando diseñaba aplicaciones móviles dentro de una consultora, el proceso que seguíamos era bastante rudimentario: antes de cerrar cualquier contrato preparábamos una presentación de preventa con apenas tres o cuatro pantallas de alta resolución que mostraban, de manera muy idealizada, cómo podría verse el servicio del cliente en un móvil. Si el cliente aprobaba el presupuesto, el jefe de proyecto enviaba un documento extenso y completamente textual donde se describían las funcionalidades. El diseño real —y todo lo que habría de condicionar tiempos y costes— descansaba únicamente en aquellas pocas imágenes preliminares.
Conforme avanzaba el proyecto, descubríamos que esa estrategia era una invitación al desastre. Durante la implementación aparecían requisitos que el equipo comercial ni siquiera había imaginado al calcular cifras y plazos. Aquello se traducía en retrasos que minaban la confianza del cliente, sobrecostes que nadie quería asumir y un desarrollo que se alargaba indefinidamente mientras intentábamos recomponer el plan.
El choque con la realidad del desarrollo
Conforme avanzaba el proyecto, descubríamos que esa estrategia era una invitación al desastre. Durante la implementación aparecían requisitos que el equipo comercial ni siquiera había imaginado al calcular cifras y plazos. Aquello se traducía en retrasos que minaban la confianza del cliente, sobrecostes que nadie quería asumir y un desarrollo que se alargaba indefinidamente mientras intentábamos recomponer el plan.
Mi descubrimiento del wireflow como antídoto
Cansado de tropezar siempre con la misma piedra, propuse un cambio: antes de firmar nada, me senté a dibujar lo que entonces bautizamos como árbol de navegación, un wireflow que condensaba en un solo documento todo el alcance de la aplicación. Más de cien pantallas quedaban conectadas entre sí mediante flechas que explicaban cada transición, y fui anotando detalles hasta donde llegaba mi conocimiento. Después, puse ese mapa bajo la lupa del equipo de desarrollo y del propio cliente. Durante aproximadamente quince días lo revisamos línea a línea, pantalla a pantalla, hasta que todos dimos el visto bueno.
El antes y el después
La diferencia fue abismal. Una vez aprobado el wireflow, no había cabida para sorpresas: lo que se desarrollaba coincidía punto por punto con lo que estaba dibujado y firmado. Los presupuestos dejaron de volatilizarse, los plazos se convirtieron en algo predecible y, sobre todo, el ambiente de trabajo ganó en calma y transparencia. Desde entonces defiendo —con la firmeza que otorga la experiencia— que la mejor manera de acotar un desarrollo de forma realmente integral es diseñar un flowchart de la aplicación, revisarlo con todos los implicados y conseguir la rúbrica del cliente sobre ese documento. Es la única forma que conozco de garantizar que haremos exactamente aquello que hemos prometido, ni más ni menos, y dentro del marco de tiempo y presupuesto acordado.
Jorge Oliva
UX/UI Product Designer
Preguntas frecuentes (FAQ)
¿Qué es exactamente un wireflow?
Un wireflow es un diagrama que combina la estructura visual de un wireframe con el flujo de usuario, mostrando pantallas conectadas y sus interacciones paso a paso.
¿Para qué se utilizan los wireflows en UX?
Sirven para documentar y comunicar cómo navega la persona usuaria por una app o web, ayudando a diseñadores y desarrolladores a alinear lógica, contenido e interfaz.
¿En qué se diferencian de un simple wireframe?
El wireframe muestra una única pantalla estática; el wireflow muestra varias pantallas enlazadas, describiendo decisiones y transiciones entre ellas.
¿Cuándo es mejor crear un wireflow dentro del proceso de diseño?
Justo después de definir los requisitos funcionales y antes de prototipar en alta fidelidad, para validar la lógica de navegación con el equipo y con las partes interesadas.
¿Qué herramientas se recomiendan para diseñar wireflows?
Figma, Sketch, Adobe XD, Whimsical y Miro son opciones populares porque permiten conectar pantallas mediante flechas y notas de manera rápida.
¿Qué elementos debe incluir un wireflow bien elaborado?
Pantallas simplificadas (wireframes), flechas direccionales, notas breves sobre las acciones del usuario, estados alternativos (éxito / error) y, si es necesario, condiciones lógicas.
¿Los wireflows sustituyen a los prototipos interactivos?
No; son un paso previo que aclara la arquitectura de navegación. Después se suele crear un prototipo interactivo para testear la experiencia con mayor realismo.
¿Cómo validar la corrección de un wireflow?
Recorre cada camino posible con el equipo, comprueba que no existan bucles sin salida y verifica que todas las metas del usuario se puedan cumplir sin pasos redundantes.
¿Se pueden usar wireflows en proyectos ágiles?
Sí. Son especialmente útiles en sprints iniciales para alinear al equipo y como documentación viva fácil de actualizar cuando cambian requisitos.
¿Cuál es el mayor error al crear wireflows?
Detallarlos en exceso con contenido visual innecesario. Deben ser esquemáticos: foco en la lógica de navegación, no en el aspecto final de la interfaz.
Los prototipos se confunden a menudo con los wireframes y los mockups, pero tienen una diferencia básica: la interacción. Los prototipos son representaciones de alta, media o baja fidelidad que se utilizan principalmente para simular parte de la interacción del usuario con la interfaz para validar la experiencia de usuario.
El prototipo te permite acercarte lo más posible al producto real, pero a un coste más bajo que un desarrollo mediante programación. Si los wireframes tienen que ver con la estructura y los mockups con los elementos visuales, los prototipos tienen que ver con la experiencia de usuario. Por norma general, un prototipo debe ser realizado en las últimas etapas del diseño del producto para poder examinar la experiencia de usuario, aunque también se puede hacer un prototipo de baja fidelidad durante las primeras etapas del diseño. Independientemente de la fidelidad del prototipo, este debe contener interacción y/o contenido dinámico.
Una herramienta para probar la experiencia de usuario
Los prototipos entregan su mayor potencial cuando son puestos a prueba con usuarios mediante simulaciones de uso controladas. La iteración realizada por los usuarios durante los procesos de prueba genera una gran cantidad de material e información sobre la usabilidad y la experiencia de uso antes de que comience el desarrollo.
Con las validaciones con usuarios consigues reducir significativamente el desarrollo, ya que el producto está más pulido y, posiblemente, hayas resuelto muchas de las preguntas tempranas. Un prototipo debería permitir al usuario:
Experimentar contenido e interacciones con la interfaz.
Probar las interacciones principales de una manera similar al producto final.
Los prototipos como entregables
Los prototipos pueden fomentar un nivel más profundo de colaboración entre los diferentes stakeholders del producto, y sacar a la luz lo que realmente es necesario.
Una representación temprana del producto mediante un prototipo ofrece a las áreas de desarrollo, marketing, ventas y negocio una visión práctica y una comprensión útil del producto. Les estás entregando una pieza del producto con «vida» que proporciona mucha información útil con la que pueden hacer estimaciones precisas de costos de ingeniería o presentaciones comerciales.
Tiempos para validar un prototipo
Los prototipos deben construirse y ser validados pieza por pieza. Recomiendo comenzar a prototipar y probar las acciones más básicas del producto, e ir profundizando en el resto de funcionalidades progresivamente.
Por ejemplo, la primera iteración de un prototipo de un sitio web mostraría el diseño de las pantallas de acceso, mientras que otras iteraciones podrían desglosar secciones más específicas como los pasos necesarios para completar el perfil de un usuario.
Los prototipos como elementos de documentación
Los prototipos no suelen ser la mejor documentación que puedas imaginar, ya que obligan al “lector” a esforzarse un poco para comprender la interfaz. Por otro lado, un prototipo es la forma más atractiva de documentar el diseño. Antes de empezar con la documentación hay que preguntarse qué tipo de documentación necesita el proyecto.
Si estás trabajando para una gigantesca consultora tecnológica, dentro de un proyecto de dimensiones exorbitantes es posible que necesites una documentación en la que se especifique por escrito hasta el más mínimo detalle.
Por otra parte, si tu proyecto es una start-up, tienes que tomar decisiones y comprobar evolutivos dentro de un entorno real lo antes posible, probablemente necesites procesos ágiles de documentación tales como el prototipado.
Ten en cuenta que si un entregable es innecesario para el éxito, no deberías perder el tiempo realizándolo. Debes mantener el trabajo innecesario al mínimo. Recuerda siempre que tu trabajo es diseñar un producto, no documentarlo. Haz solo lo que ayude a crear una experiencia de usuario sorprendente.
La esencia de la composición del universo indica que los átomos se combinan para formar moléculas, que se mezclan aún más para formar organismos. Esta teoría atómica significa que toda la materia del universo conocido se puede descomponer en un conjunto finito de elementos atómicos. La teoría de Atomic Design nos enseña que nuestras interfaces se pueden dividir en un conjunto finito de elementos, igual que la materia del universo. Pero, ¿en qué nos beneficia esta filosofía y cómo se lleva a la práctica?
La creación de componentes simples ayuda a los diseñadores y desarrolladores de UI a adherirse al principio de responsabilidad única, un antiguo precepto de las ciencias de la computación que fomenta una mentalidad de “haz una cosa y hazla bien”. Cargar un solo patrón con demasiada complejidad hace que el software sea difícil de manejar. Por lo tanto, la creación de moléculas de IU simples facilita las pruebas, fomenta la reutilización y promueve la coherencia en toda la interfaz.
Las distintas etapas del diseño atómico
El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaces de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:
El atomic design no es un proceso lineal, sino más bien un modelo mental que nos ayude a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo. Cada una de las cinco etapas juega un papel clave en la jerarquía de nuestros sistemas de diseño de interfaces. Vamos a sumergirnos en cada etapa con un poco más de detalle.
1. El átomo en el diseño atómico
Si los átomos son los componentes básicos de la materia, los átomos de nuestras interfaces sirven como los bloques de construcción fundamentales que componen todas nuestras interfaces de usuario. Estos átomos incluyen elementos HTML básicos como labels, inputs, botones y otros elementos imposibles de “atomizar» más sin dejar de ser funcionales.
Cada átomo del mundo natural tiene sus propiedades únicas. Un átomo de hidrógeno contiene un electrón, mientras que un átomo de helio contiene dos.
De esta manera, cada átomo de la interfaz tiene sus propiedades únicas, como las dimensiones de una hero image o el tamaño de fuente de un encabezado principal. Estas propiedades innatas influyen en cómo se debe aplicar cada átomo al sistema de interfaz de usuario más amplio.
En el contexto de una biblioteca de estilos, los átomos demuestran todos sus estilos básicos de un vistazo, lo que puede ser una referencia útil a la que recurrir a medida que desarrollas y mantienes tu sistema de diseño. Pero al igual que los átomos en el mundo natural, los átomos de interfaz no existen en el vacío y solo cobran vida dentro de una aplicación.
2. La molécula en el diseño atómico
En química, las moléculas son grupos de átomos unidos entre sí que adquieren distintas propiedades nuevas. Por ejemplo, las moléculas de agua y las moléculas de peróxido de hidrógeno tienen sus propiedades únicas y se comportan de manera bastante diferente, a pesar de que están formadas por los mismos elementos atómicos (hidrógeno y oxígeno).
En el diseño de interfaces, las moléculas son grupos relativamente simples de elementos de UI que funcionan juntos como una unidad. Por ejemplo, un label form, un search input y un botón pueden unirse para crear una molécula de formulario de búsqueda.
Cuando se combinan, estos átomos abstractos de repente tienen un propósito. Al hacer clic en el átomo botón ahora se envía el formulario. El resultado es un componente simple, portátil y reutilizable que se puede colocar en cualquier lugar donde se necesite.
3. Un organismo en el diseño atómico
Los organismos son componentes de UI relativamente complejos, compuestos por grupos de moléculas, átomos y otros organismos. Estos organismos forman distintas secciones de una interfaz. Por ejemplo, el típico formulario de búsqueda que a menudo encontramos en la barra superior de una web, en realidad es un molécula dentro del organismo cabecera.
La cabecera forma una sección independiente de una interfaz, aunque contiene varias piezas de interfaz más pequeñas con sus propiedades y funciones únicas. Los organismos pueden constar de tipos de moléculas similares o diferentes. Un organismo de cabecera puede tener elementos diferentes, como una imagen de logotipo, una lista de navegación principal y un formulario de búsqueda.
Ahora que tenemos organismos definidos en nuestro sistema de diseño, podemos romper nuestra analogía química y aplicar todos estos componentes a algo que se parezca a una página web.
4. La plantilla en el diseño atómico
En el diseño atómico, la plantilla es el contexto en el que se colocarán las moléculas y los organismos. Pero antes de ubicarlos en su interior, es necesario delimitar las zonas en las que se localiza cada elemento y como funcionan entre ellos, juntos en un mismo contexto. Hay que hacer constancia de que todas las partes se suman a un todo que funciona bien.
En esta fase, las plantillas son representaciones alambicas a muy bajo nivel, cuyo objetivo es meramente esquemático y organizativo, compuesto por contenedores vacíos que solamente pretenden mostrar el contexto en el que se encuentran. Una referencia de una plantilla de atomic design puede ser un wireframe.
5. La página en el diseño atómico
Las páginas son instancias específicas de plantillas que muestran cómo se ve una interfaz de usuario con contenido representativo real en su lugar. Sobre la base de nuestro ejemplo anterior, podemos tomar la plantilla de la página de inicio y agregar texto, imágenes y medios representativos en la plantilla para mostrar contenido real en acción. Una página sería un mockup de medio/alto detalle.
La etapa de la página es el proceso más concreto del diseño atómico y es importante por algunas razones bastante obvias. Después de todo, esto es lo que los usuarios verán e interactuarán al visitar nuestra experiencia. Y aquí es donde se ven todos esos componentes que se unen para formar una interfaz de usuario hermosa y funcional .
Ventajas del diseño atómico
Entonces, ¿para qué sirve el diseño atómico? Es una pregunta razonable considerando que hemos estado construyendo interfaces de usuario durante mucho tiempo sin necesidad de tener una metodología explícita de cinco etapas. Pero el diseño atómico nos proporciona algunas ideas clave que nos pueden ayudar a crear sistemas de diseño de UI más efectivos y deliberado.
«El pintor, cuando se encuentra alejado del caballete, puede valorar y analizar el conjunto de la obra desde esta perspectiva. Él escudriña y escucha, elige el siguiente trazo por hacer, luego se acerca al lienzo para hacerlo. Luego, retrocede nuevamente para ver lo que ha hecho en relación con el todo. Es una danza de contextos cambiantes, un ritmo de golpeteo a través del suelo del estudio que produce un circuito de retroalimentación estrecho entre marcar y evaluar. «
– Frank Chimero
La parte y el todo del diseño atómico
Una de las mayores ventajas que ofrece el diseño atómico es la capacidad de cambiar rápidamente entre lo abstracto y lo concreto. Podemos ver simultáneamente nuestras interfaces divididas en sus elementos atómicos y también ver cómo esos elementos se combinan para formar nuestras experiencias finales.
El diseño atómico nos permite bailar entre contextos como el pintor Frank describe tan elocuentemente. Los átomos, moléculas y organismos que componen nuestras interfaces no viven en el vacío. Y las plantillas y páginas de nuestra interfaz están compuestas por partes más pequeñas. Las partes de nuestros diseños influyen en el todo y el todo influye en las partes. Los dos están entrelazados y el diseño atómico acepta este hecho.
Saber más sobre Atomic Design
Si quieres saber más sobre esta metodología, te invito a que te leas el libro de su creador y diseñador web, Brad Frost.
El neumorfismo nació del skeuomorfismo y del flat design, y pasó a crear una experiencia de usuario completamente nueva. Diseñadores de todo el mundo han conseguido que los diseños «neumórficos» sean una tendencia por derecho propio, pero ¿es realmente usable como para implementarlo en la vida real?
El neumorfismo crea una interfaz suave en la que los elementos de usuario no se colocan en un nivel convencional, sino detrás. En este sentido, el diseño da la sensación de que los componentes, como botones o cards, están en realidad dentro del fondo y solo son visibles porque sobresalen desde dentro. El estilo general tiene que ver con colores sólidos, bajo contraste y el juego correcto de sombreado.
Esta tendencia se centra en deshacerse de todos los aspectos llamativos de la interfaz, creando una imagen suave que se mantiene constante en todo el producto. No se centra en recrear la realidad en el mundo digital, como el skeuomorphism, nos brinda una experiencia completamente distinta.
Origen del neumorfismo
El neumorfismo ha cogido mucha fuerza gracias a las publicaciones realizadas en la comunidad de diseñadores Dribbble, pero es difícil asignarle su creación a alguien en particular. Es, más bien, una tendencia a la que muchos diseñadores se han sumado por su novedosa frescura y dulce atractivo visual.
Una de las cosas más interesantes que sí podemos afirmar sobre el neumorfismo es que se basa tanto en el skeuomorphism como en otros estilos masivamente populares, como el flat design. Sí, ambos son opuestos entre sí, y el neumorfismo se encuentra en algún punto intermedio.
Los altibajos del neumorfismo en el diseño de experiencia de usuario
Es cierto que, como todos los estilos de diseño de moda, el neumorfismo tiene aspectos positivos y negativos. En el lado bueno, tenemos toda la emoción y la frescura de algo nuevo y único. Es atractivo como estilo visual, eso se puede decir objetivamente. Pero si el neumorfismo es genial en todos los sentidos, ¿cómo es que no lo vemos en productos reales?
Bonita visual, mala usabilidad
A pesar de todas las excelentes imágenes que llenan internet, el neumorfismo tiene un gran punto débil: la usabilidad.
El problema es que hay un margen muy pequeño de colores y contraste en el que funciona el neumorfismo. La más mínima desviación en la saturación puede hacer que todo el efecto elevado, sobre el que se construye el neumorfismo, simplemente no funciones. Como un efecto dominó, esto tiene muchas consecuencias negativas para el neumorfismo.
Los botones, las llamadas a la acción y la accesibilidad
Los botones son un componente clave en cualquier interfaz de usuario. Deben ser muy reconocibles y deben cambiar su estado a medida que los usuarios interactúan con ellos. Los usuarios deben poder, no solo notar los botones en menos de una fracción de segundo, sino que también deben cambiar los colores; de alguna manera, se comunican con los usuarios. Esta simple característica de los botones en el neumorfismo se vuelve problemática.
El neumorfismo está destinado a ser suave a la vista. Requiere un contraste de color mínimo y muy pocos toques de color. Este estilo requiere colores que se combinen entre sí, yendo en contra de todo lo que sabemos sobre los CTA (llamadas a la acción): deben ser llamativos. Lo último que desea después de invertir tanto tiempo y esfuerzo en un producto es ver que funciona mal por algo absurdo, como que los usuarios no logran encontrar el CTA.
Y a otro problema potencialmente enorme para los diseños neumorfismo. Este estilo se ve muy bien, pero ¿cómo les parecería a los usuarios con discapacidad visual? Lo más probable es que sea un problema real, con cosas cruciales desapareciendo en el fondo, volviéndose inutilizables.
El futuro incierto del neumorfismo
Ciertamente, estos son tiempos interesantes y el neumorfismo refleja ese hecho a la perfección. Nació del skeuomorphism y el minimalismo, pero tiene como objetivo ofrecer una experiencia que los usuarios con identidad propia.
¿Veremos más de este estilo en próximos productos? ¿Es este el nuevo Material Design? Lo cierto es que el neumorfismo viene con un conjunto de fallas que representan un problema real. Tal como está ahora, los problemas de usabilidad que provoca son demasiado grandes para que cualquier producto se arriesgue. Ya veremos adónde conduce el camino del neumorfismo y qué cambios se realizan en este estilo en particular a lo largo del camino.
El principio de diseño KISS quiere decir literalmente «Keep it Simple, Stupid», en español «Hazlo Sencillo, Estúpido». Esta frase hace referencia a la necesidad de diseñar productos sencillos de, explicar, comprender y de usar.
Al usuario final no le importa lo inteligente que sea el diseñador de algo, lo que le interesa es conseguir sus objetivos de una manera fácil, rápida y sin interrupciones. Y es que la curva de aprendizaje puede ser un hueso duro de roer cuando se diseñan productos con una lógica de negocio algo profunda. En estos casos es importante recordar que cuanto más simple sea la explicación del producto, más útil será para los demás.
«Si no puedes explicárselo a un niño de seis años, no lo entiendes lo suficientemente bien».
— Albert Einstein
Origen de la frase KISS
Se cree que la frase “Hazlo simple, estúpido” fue acuñado por Kelly Johnson, ingeniero principal en Lockheed Skunk Works (un lugar responsable del avión espía S-71 Blackbird entre muchos otros logros notables). Vale la pena señalar que la versión de Kelly de la frase no tenía coma y estaba escrita “keep it simple stupid”.
Realmente no hay mucho más que decir aquí, ¿verdad? Keep it simple stupid.
El primer principio de diseño
Kelly explicó la idea a los demás con una historia sencilla. Les dijo a los diseñadores de Lockheed que cualquier cosa que hicieran tenía que ser algo que pudiera ser reparado por un hombre en un campo con una formación mecánica básica y herramientas simples. El teatro de la guerra (para el que se diseñaron los productos de Lockheed) no permitiría más que eso. Si sus productos no fueran simples y fáciles de entender, rápidamente se volverían obsoletos en condiciones de combate y, por lo tanto, no valdrían nada.
Hoy en día, el principio de diseño KISS se celebra en muchas profesiones de ingeniería (incluida la ingeniería de software) y, a menudo, lo aplican los gerentes de muchas profesiones, así como los educadores.
Los mockups muestran una versión bastante detallada del diseño final de un producto digital. Es como si fuera la piel de una interfaz gráfica. En este artículo explico qué es, cómo y cuándo debemos hacer un mockup.
Los mockups son una representación de fidelidad media/alta de la apariencia del producto final y completan los detalles visuales (como colores, tipografía, etc.) de los wireframes. Un mockup podría considerarse un borrador de diseño visual de alto detalle y su principal razón de ser es básicamente estética. Al mirar un mockup, debes tener una buena idea de cómo se verá el producto final y una idea aproximada de cómo podría funcionar (aunque no sea interactiva). Estos son los objetivos principales
Proporcionar una representación del producto de media a alta fidelidad.
Presentar las funcionalidades básicas del producto.
Mostrar los detalles visuales del producto como tipografía, colores, fotos, iconos, etc.
De wireframe a mockup
Los mockups tienen que ver con el aspecto y la sensación definida en la fase de wireframe. Una vez diseñado y aprobado el wireframe de un producto, el siguiente paso es determinar la apariencia a través del color y los gráficos. El mockup se pueden construir sobre el propio wireframe y ajustar el diseño ligeramente, pero hay que permanecer siempre dentro de la guía general del wireframe.
Ten en cuenta que los wireframes sientan las bases y los mockups agregan riqueza visual. El mockup materializa el propósito visual de los wireframe, y por ello los mockups tiene una ventaja adicional: con sus imágenes de alto nivel, los mockups sos más impresionante para las partes interesadas e inversores y, por lo tanto, mejor para generar interés.
La piel de nuestro producto
Cuando presenta un diseño a un cliente, debes tener siempre un mockup lo más parecido al producto final. Esto requiere colocar contenido e imágenes casi reales en tu diseño. Este es un paso que puede llevar tiempo, pero te ayudará a visualizar el diseño como si ya estuviera desarrollado, y te servirá para solucionar cualquier problema que pueda surgir de los elementos de diseño.
Un contexto más amplio de un mockup
En términos generales, un mockup es un modelo a escala de un producto utilizado principalmente para demostrar y probar un diseño. Para el diseño de interfaz, el objetivo final es el mismo, pero la maqueta no está «escalada», ya que debe verse lo más exacto posible.
Un mockup no es un prototipo
Es importante distinguir un mockup de un prototipo. Un prototipo está destinado a funcionar, a tener interacción, aunque sea parcialmente. Los mockups, por otro lado, no funcionan. Consisten en representaciones de pantallas estáticas, que solo «se parecen» a la interfaz de usuario real.
Si bien el wireframe está visualmente limitado, el mockup tiene una apariencia cercana a la versión final, aunque carece de la funcionalidad para avanzar en la fase de creación de prototipos. De esta manera, el mockup es, en esencia, el puente entre el wireframe y el prototipo.
