UX, Usabilidad y Accesibilidad: cómo diseñar sin desesperar al usuario, ni a ti mismo

UX, Usabilidad y Accesibilidad: cómo diseñar sin desesperar al usuario (ni a ti mismo)

Hay dos tipos de productos digitales: los que funcionan, y los que hacen que quieras lanzar el dispositivo en que lo usas por la ventana. La diferencia rara vez está en el código. Está en la experiencia, en la usabilidad y la accesibilidad, características que suponen la diferencia entre una puerta que se empuja y una de la que se tira (y el coraje que da cuando te equivocas porque el diseño te ha engañado). Se basan en principios lógicos que nuestro cerebro ya conoce. En este post vamos a desmenuzar los fundamentos del UX, la usabilidad y la accesibilidad porque la mayoría de productos digitales que fallan, no lo hacen por tecnología. Fallan porque frustran.

Lo primero, ¿cómo están los máquinas?:
Un producto digital de éxito es, irónicamente, aquel que pasa desapercibido

No lo dudes ni por un momento, si el usuario completa su tarea y ni siquiera se da cuenta de que estaba interactuando con una interfaz compleja, lo has clavado. El código sostiene la estructura y permite que el motor arranque, sí, pero es la experiencia la que retiene al cliente. Cuando esa experiencia es tosca, confusa o simplemente no fluye, aparece la fricción. Y en el mundo digital, la fricción es la antesala del abandono, y créeme, si hay fricción, hay fracaso.

Tabla de contenidos

01. Usabilidad y UX: no va de que sea bonito, va de que funcione

Siento empezar así, pero es necesario que nos quitemos la venda: la usabilidad no va de elegir una paleta de colores, poner bordes redondeados o sombras elegantes. Va de hacer cosas que la gente entienda y use pero, sobre todo, que no odie; y esto no es una opinión personal, es un hecho, y me fundamento en que la gran mayoría de productos digitales no están pensados para el  ocio y el entretenimiento – ojo, que muchos sí -, pero hay un gran número de ellos en los que el usuario no lo está usando por gusto, sino por la necesidad de cubrir o realizar una función práctica. Hay que entender que el diseño puede ser una puta maravilla visual, pero si no es funcional, es solo un estorbo y tu usuario acabará odiándolo como el Capitán Garfio odia a Peter Pan.

Una buena experiencia de usuario es esa maquinaria invisible donde todo ocurre sin fricción. Es un pacto de confianza entre el creador y el usuario que se sostiene sobre cinco pilares innegociables. Primero, la funcionalidad: el sistema simplemente hace lo que promete, sin excusas. Segundo, es comprensible: se explica solo, sin necesidad de un manual de instrucciones que nadie va a leer. Pero la magia real aparece con la consistencia: tu interfaz no puede cambiar de comportamiento como un villano de telenovela; si un botón hace algo en la home, debe hacer lo mismo en el carrito. Esto nos lleva a que sea predecible, que no dé sustos ni saltos inesperados que desorienten al que navega. Y finalmente, debe ser memorable: que si el usuario vuelve después de un mes, sepa usarlo sin tener que pensar, porque el diseño ha respetado su lógica mental.

Si fallas en uno de estos puntos, el usuario se va. Si fallas en varios, ten por seguro que no vuelve. Porque en el mundo digital, la paciencia es un lujo que nadie está dispuesto a regalarte.

02. La pirámide UX: deja de diseñar humo

Antes de que te dejes llevar por la creatividad y los degradados de moda, asegúrate de no estar intentando construir una casa empezando por el tejado. En el diseño de producto, el entusiasmo suele ser el peor enemigo de la lógica, y es ahí donde muchos proyectos sentencian su propio final. La realidad es que existe una jerarquía invisible, una pirámide de necesidades que no puedes saltarte si no quieres que todo se desmorone al primer click. La jerarquía real es esta:

  1. Funciona
  2. Es fiable
  3. Es fácil de usar
  4. Está bien construido (equipo competente)
  5. Ahora sí, sé creativo

El primer escalón es el más básico y, a la vez, el más sagrado: el producto funciona. Punto pelota. Si el botón no envía el formulario o el carrito no suma, da igual lo bonito que sea el icono. El segundo es la fiabilidad: el sistema no se cae, no da errores aleatorios y el usuario siente que pisa terreno firme. Solo cuando el producto es sólido, podemos aspirar a que sea fácil de usar, reduciendo la carga mental de quien está al otro lado de la pantalla.

Pero para que todo esto se sostenga, necesitamos que el producto esté bien construido. Aquí entra en juego un equipo competente que entienda que el diseño y el desarrollo son las dos caras de una misma moneda; y solo entonces, cuando la base es de hormigón armado, o del acero del que fabrican los barcos, es cuando ya tenemos permiso: ahora sí, podemos ser creativos, coño.

El drama es que la mayoría de los proyectos cometen el error fatal de empezar por el tejado, por ese punto cinco lleno de fuegos artificiales. Intentan vender una estética increíble sobre una estructura que hace aguas. Por eso tantos proyectos acaban mal: porque el usuario puede perdonar una interfaz sobria que resuelve su problema, pero jamás perdonará una interfaz preciosa que le hace perder el tiempo. No diseñes humo; construye realidades.

03. Las leyes de UX: psicología aplicada

Entramos en terreno serio. Si pensabas que el UX era solo cuestión de buen gusto, prepárate para el golpe de realidad: el UX es psicología aplicada con esteroides. Nandrolona, como decían Marcos y Raúl en Subflash (¿… 2012..?).  No diseñamos para pantallas, diseñamos para cerebros humanos, y esos cerebros vienen con un «software» instalado de serie que no puedes ignorar. Si intentas ir contra la naturaleza de la mente humana, ten por seguro que vas a perder siempre. Hay bastantes leyes o directrices en UX al respecto, pero para no liarla o extendernos más de lo que ya va a ser este post, hay cuatro leyes que son sagradas , y que separan a los profesionales de los que solo «hacen dibujos». Te las cuento:

La primera es la Ley de Jakob, y es una cura de humildad: tus usuarios pasan la mayor parte del tiempo en otras webs o aplicaciones, no en la tuya. Eso significa que ya tienen unos hábitos creados. Si todo el mundo pone el carrito arriba a la derecha, ponlo ahí. No intentes ser especial ni reinventar la rueda; el usuario no quiere aprender a usar tu interfaz, quiere reconocerla y avanzar.

Seguimos con la Ley de Hick, que es pura economía de la atención: cuantas más opciones le des a alguien, más tardará en decidirse (o peor, se agobiará y se irá). Menos botones suelen traducirse en más conversiones. Sí, esto parece obvio… pero se incumple todos los días. Es así de simple: limpia el ruido. 

Y cuando ya sepas qué botón es el importante, aplica la Ley de Fitts: hazlo fácil de pulsar. Un botón minúsculo es una invitación directa a la frustración; un botón grande, visible y bien ubicado es, sencillamente, amor por el usuario.

Por último, nunca olvides la Ley de Miller. Tienes que aceptar que el cerebro humano no es un archivo Excel de capacidad infinita; solo puede retener entre cinco y nueve elementos a la vez antes de empezar a cortocircuitar. Si saturas la pantalla con veinte opciones, el usuario se pierde. La solución no es quitar información, sino saber gestionarla: agrupa, simplifica y ordena. Porque al final, diseñar es el arte de hacer que el cerebro del otro trabaje lo menos posible.

04. Trucos mentales: el diseño que no se ve, pero se siente

Más allá de estas leyes rígidas, existen esos atajos cognitivos que todos usamos, aunque no sepamos ponerles nombre. Es la parte más invisible y poderosa del diseño: hackear la atención del usuario antes de que él mismo sepa qué está buscando. También es la parte donde tenemos que poner en el asador la verdadera creatividad, porque, si somos pragmáticos, diseñar es también saber guiar la mirada y la intención sin que se note el truco.

El primero de estos atajos es el Efecto Zeigarnik, que es esa pequeña obsesión que nos genera lo que nos dejamos a medias. Al cerebro humano le horrorizan los cabos sueltos; por eso, una simple barra de progreso es oro puro. Ver un «75% completado» genera una tensión que solo se alivia terminando la tarea. Úsalo a tu favor: si quieres que alguien rellene un formulario tedioso, enséñale lo poco que le falta para terminar y cruzar la meta, es un ejemplo muy burdo, pero también muy acertado.

Pero no todo el recorrido tiene el mismo peso, en la memoria del usuario, el principio y el final importan mucho más que todo lo que pasa en medio. Es el Efecto de Posición Serial: coloca ahí lo que realmente quieres que recuerden. Si el inicio es confuso o el cierre es frío, da igual lo excelente que haya sido el proceso intermedio; la sensación residual será de fracaso.

Y para que ese proceso no se ensucie, aplica la Navaja de Occam: la solución más sencilla suele ser la correcta. Si puedes quitar un campo, una imagen o un adorno sin que la función se rompa, quítalo. El minimalismo no es una estética, es una herramienta de eficiencia. Porque, además, te enfrentas a la atención selectiva: el usuario entra con una misión y su cerebro filtra todo lo que no le ayuda a cumplirla. Sí, ese banner increíble que tanto te costó diseñar probablemente no lo esté mirando nadie; es ruido blanco. Si quieres que algo se vea, no lo hagas «bonito», hazlo relevante.

05. Las 10 reglas de oro de Nielsen: el kit anti-caos

jakob_nielsen

Si trabajas en producto digital y tienes que tatuarte algo a fuego, que sean estas reglas. Jakob Nielsen no las escribió para adornar manuales, sino para salvar proyectos del desastre absoluto. Es el kit de primeros auxilios que todo producto debería llevar de serie para no desquiciar al personal. Y os juro que este tío me caía fatal cuando me empecé a interesar de verdad en el diseño de interfaces de software, allá por 2006. Cuando diseñábamos con Photoshop e implementábamos con Dreamweaver o aquellas primeras versiones de Visual Studio (por favor no me echeis a la hoguera). De verdad, odiaba a este tío. Pero ya sin rencores.

Las diez reglas de oro de Nielsen son estas:

  1. Da feedback (que el sistema “hable”)
  2. Usa lenguaje humano
  3. Deja salir al usuario cuando quiera
  4. No reinventes lo que ya funciona
  5. Evita errores antes de que ocurran
  6. Haz visible lo importante
  7. Da poder a usuarios avanzados
  8. Menos ruido, más claridad
  9. Explica los errores
  10. Ofrece ayuda

La primera regla es de pura cortesía: el sistema tiene que «hablar». Da feedback constante; que el usuario sepa si su mensaje se ha enviado o si el botón que acaba de pulsar ha servido de algo. Y cuando hables, hazlo en lenguaje humano, no con códigos de error que parecen una invocación satánica. Deja que el usuario mantenga el control: si entra en un sitio por error, dale una salida clara (el botón «Atrás» o «Cancelar» es su paracaídas).

No intentes ser el más original del cementerio; no reinventes lo que ya funciona. Si el mundo asocia un icono de lupa con «buscar», no uses una linterna o unos putos prismáticos. Pero, sobre todo, sé proactivo: evita errores antes de que ocurran validando los datos en tiempo real. Y si aun así algo falla, no te limites a decir «Error 503»; explica qué ha pasado y ofrece ayuda real, no un PDF perdido en un submenú que nadie va a encontrar.

Un buen diseño hace visible lo importante y elimina el ruido: menos distracciones es igual a más claridad. Sin embargo, no trates a todos por igual; da poder a los usuarios avanzados con atajos o funciones rápidas, permitiendo que los novatos aprendan y los expertos vuelen. En definitiva, las reglas de Nielsen son el sentido común aplicado al píxel: si las sigues, tu producto no solo funcionará, sino que será un lugar donde la gente querrá quedarse.

06. El gran problema: tú piensas una cosa y el usuario piensa otra

Aquí es donde la teoría se da de bruces con la puta realidad. En el diseño de producto existen tres universos paralelos que rara vez se tocan si no haces bien tu trabajo a lo Doctor Strange. Primero, está lo que tú crees que has diseñado: ese sistema perfecto, lógico y elegante que vive en tu cabeza y en tu Figma. Segundo, está lo que el usuario cree que es: un conjunto de expectativas, miedos y prisas que trae de casa. Y finalmente, está la cruda realidad: lo que el usuario realmente ve (aquí os pondría el meme de cuando te llega de Aliexpress, pero no quiero ofenderos).

Ese puente frágil que intenta unir esos mundos es la interfaz. Si la interfaz falla, el puente se rompe y el usuario se queda solo ante el peligro, que es lo que le pasa a muchas de las aplicaciones de la Administración. Y aquí viene el desastre: cuando un ser humano, descendiente de los simios, no entiende cómo funciona algo, no se queda de brazos cruzados; se monta su propia película; empieza a suponer y a pegarle palos a las cosas, a clickar donde no debe y a frustrarse porque el sistema no responde a su lógica interna. El problema no es que el usuario sea «torpe», es que tu diseño no ha sabido hablar su idioma.

Esa desconexión es la que genera el caos. Si el usuario tiene que adivinar qué hace un botón, ya has perdido el control de la experiencia. Normalmente, esa película que se monta el usuario acaba mal: con un carrito abandonado, una suscripción cancelada o, en el mejor de los casos, con alguien jurando que no volverá a usar tu plataforma. Tu misión, si quieres llamarte diseñador de produto digital, y si decides aceptarla, no es solo diseñar pantallas, es alinear las tres realidades lo mejor que puedas para que lo que tú ofreces sea exactamente lo que el usuario recibe, sin sorpresas desagradables.

04. Modelos mentales

07. La Gestalt: el arte de engañar, bien, al cerebro

Hablemos claro: el cerebro humano es vago por naturaleza. Un perraco, que dirían en mi pueblo. No analiza cada píxel de forma aislada; lo que hace es simplificarlo todo para ahorrar energía. Y ahí es donde entra la magia de la Gestalt. Diseñar no es colocar elementos al azar, es aprender a piratear esa pereza mental para que el usuario entienda tu interfaz antes de haber leído una sola palabra.

Para «engañar» bien al cerebro, tienes que usar sus propios atajos. El primero es la semejanza: si pones varios elementos con el mismo color o forma, el cerebro asumirá automáticamente que son un grupo con la misma función. Lo mismo ocurre con la proximidad: si dos botones están pegados, el usuario dará por hecho que tienen algo que ver entre sí. No obligues a la gente a deducir conexiones; créalas tú visualmente.

05. Gestalt (proximidad y agrupación)

Pero la Gestalt va más allá. Gracias a la clausura, el cerebro es capaz de rellenar formas incompletas; no hace falta que lo dibujes todo, a veces menos es más. Y si quieres que alguien mire donde tú quieres, usa la continuidad: el ojo siempre va a seguir líneas suaves y flujos naturales. Úsalo para guiar la mirada hacia ese botón de compra o ese formulario de registro.

Finalmente, domina la relación entre figura y fondo. Si no controlas qué destaca y qué se queda atrás, tu diseño será un ruido visual insoportable. Diseñar es, en gran parte, dirigir la mirada sin que el usuario se dé cuenta. Es convertirte en el director de un coro invisible donde cada elemento sabe cuándo debe cantar y cuándo debe guardar silencio para que la melodía —la experiencia— sea perfecta.

Espera, un inciso con la Gestalt y su lado oscuro

No todo es altruismo en el diseño. La polémica surge cuando usamos la Gestalt para crear Dark Patterns: trucos visuales que abusan de la lógica cerebral para que compres lo que no quieres o no encuentres el botón de «baja». Es el diseño puesto al servicio del engaño, camuflando opciones o forzando una digitalización que a veces excluye a quien no tiene el último móvil o batería suficiente.

Si necesitas piratear el cerebro del usuario para cumplir tus objetivos de negocio, no estás diseñando; estás manipulando. El buen diseño guía; el mal diseño tiende trampas. Pero de esto, ya hablaremos largo y tendido en otro post.

08. Arquitectura de la Información: ordenar el caos

Grábatelo a fuego, chaval: si el usuario no encuentra algo en tu interfaz, no es culpa suya; es tuya. Puedes tener el código más limpio del mundo o los iconos más bonitos de Flaticon, pero si tu estructura mental no coincide con la de quien te usa, tienes un laberinto, no un producto. La Arquitectura de la Información (AI) es el arte de poner las estanterías en el sitio correcto para que nadie tenga que preguntar dónde está el pan. Y he vivido infinidad de veces que los desarrolladores estructuran el producto a su conveniencia, y no se paran a estudiar como piensa su usuario. Yo te paso un proceso, y ya si eso, le pones tú los colores.

Para no perdernos, tenemos dos formas maestras de organizar el mundo. Primero, la organización exacta, ideal para cuando el usuario sabe perfectamente qué busca. Aquí no hay espacio para la interpretación: usas el orden alfabético, fechas o lugares. Es el buscador que no falla o el archivo histórico donde cada cosa tiene su casilla inamovible.

Pero, ¿qué pasa cuando el usuario entra a «ver qué hay»? Ahí entra la organización ambigua, que es mucho más estratégica. Aquí agrupas por temas, por tareas o por perfiles de usuario. Es ese menú que te pregunta «¿Qué quieres hacer hoy?» en lugar de darte un listado infinito de funciones. Una buena AI es la que convierte un bosque denso en un camino claro con señales que se leen a mil por hora. Si el usuario tiene que pararse a pensar dónde has escondido el contacto, tu arquitectura se acaba de derrumbar.

  • Exacta (cuando sabe lo que busca)
    → orden alfabético, fechas, lugares…
  • Ambigua (cuando explora)
    → temas, tareas, perfiles…
06. Arquitectura de la Información

09. Aunque te moleste, el diseño visual no es decoración, es comunicación

Venga, puestos a cerrar, cerremos otro mito peligroso: el diseño visual no es el «postre» del proyecto, es el lenguaje en el que hablas. Todo comunica, y si no lo controlas tú, lo hará el azar, y mierda, el azar suele ser un pésimo diseñador. No se trata de poner capas de maquillaje, sino de usar la estética como una herramienta de precisión para que el usuario no se pierda en el ruido.

Todo comunica:

  • La maquetación dirige la lectura
  • El color transmite significado
  • El contraste separa o confunde

La maquetación es la que lleva de la mano al ojo del lector, decidiendo qué va primero y qué es lo  secundario. El color tampoco es un capricho; es significado puro: una alerta roja no necesita traducción, y un botón gris «apagado» te está diciendo a gritos que no puedes pulsarlo. Y a la postre, si juegas mal con el contraste, puedes separar elementos con elegancia o bien crear una mancha visual que confunda hasta al más experto.

Pero donde realmente te la juegas es en la tipografía. No es una cuestión estética, es un sistema funcional que opera en tres niveles jerárquicos que no puedes permitirte ignorar. El primero de ellos es la visibilidad: la capacidad del texto para ser percibido en pantalla. Aquí entran en juego el contraste, el tamaño, el peso tipográfico y las condiciones de visualización. Si el texto no destaca del fondo o no tiene suficiente presencia, simplemente no existe para el usuario.

Superado ese umbral, entramos en la legibilidad: la facilidad con la que se reconocen los caracteres individuales. Esto depende del diseño de la tipografía (apertura de formas, serifa, palo, diferenciación entre caracteres, altura de x, espaciado…). Si el usuario tiene que “descifrar” los caracteres, ya has introducido fricción. Hay todo un mundo en la elección de las tipografías para una interfaz, no es casual que muchas de las interfaces modernas trabajen con las mismas fuentes o tipos de letra.

Y solo cuando esos dos niveles comentados, están resueltos, llegamos a la lecturabilidad: la comodidad en la lectura de bloques de texto. Aquí influyen factores como la longitud de línea, el interlineado, el ritmo visual, la jerarquía tipográfica y la organización del contenido. Es lo que permite que el usuario lea sin esfuerzo y sin fatiga cognitiva. En resumen, estos son los tres niveles:

  • Se percibe (visibilidad)
  • Se reconoce (legibilidad)
  • Se procesa sin esfuerzo (lecturabilidad)

Si fallas en el primero, el resto deja de importar, porque en la interfaz, lo que no se ve, no se usa.

07. Contraste y jerarquía visual

10. La Accesibilidad no es opcional, es diseño bien hecho

Hay que quitarse una idea mentirosa que fluye en el mundo digital desde hace tiempo: diseñar de forma accesible no es un acto de caridad ni es «hacerlo para unos pocos». Es, sencillamente, hacerlo bien para todos. La accesibilidad es el examen final de cualquier producto digital; si tu interfaz solo la entiende alguien con 20/20 de visión, fibra óptica o el último modelo de iPhone, no tienes un producto, tienes un prototipo excluyente.

A menudo caemos en el error de desarrollar para la tecnología que nos rodea y no para la que realmente predomina en el mercado. Es un patrón común: desarrolladores con el último MacBook Pro y la versión más reciente de iOS que pierden de vista la realidad del usuario medio. A día de hoy, Windows 10 sigue sosteniendo entre el 40% y el 49% de la cuota global de escritorio, resistiendo incluso los intentos de Microsoft por imponer Windows 11. Escucha, hablamos de casi 1.000 millones de equipos y más de la mitad de los usuarios en Europa.

En términos de accesibilidad, ignorar este ecosistema es una temeridad: el 86% de las personas que usan lectores de pantalla lo hacen sobre Windows, frente a un escaso 10% en Mac. Priorizar solo el ecosistema de Apple no es solo un sesgo técnico, es una barrera de exclusión para la gran mayoría de las personas con una limitación visual o distintas capacidades sensoriales.

Por si esto fuera poco, la European Accessibility Act (EAA), en vigor desde junio de 2025, obliga a cualquier empresa cuyos servicios sean accesibles por ciudadanos de la UE a cumplir con WCAG 2.1 AA. Las multas por incumplimiento pueden llegar a 100.000€ o el 4% de la facturación anual según el estado miembro.

Pero si el argumento ético, o el de la legalidad, no convencen, podemos hablar de negocio, porque aquí no hay réplica: diseñar y desarrollar poniendo atención a la accesibilidad mejora el SEO (a Google le encantan los sitios bien estructurados), dispara la conversión (porque si más gente puede usarlo, más gente puede comprarlo) y pule la experiencia general de cualquier usuario, tenga o no una limitación.

Piénsalo un momento, un buen contraste ayuda al que está a pleno sol, y unos subtítulos ayudan al que se ha dejado los cascos en casa. Vamos, que no trabajar la accesibilidad es, literalmente, pegarte un tiro en el pie… pero eso sí, con un diseño muy bonito. Si tu producto deja fuera a alguien por una barrera que tú mismo has construido, has fallado como diseñador. Pero una cosa tienes que tener en cuenta, si lo haces hazlo bien. Te pongo un ejemplo, unos subtítulos integrados en tu vídeo de presentación se verán muy cool, pero no seran legibles para un lector de pantalla con salida en braille.

Lúmina · Verificador de Accesibilidad Web (2025-2026)

En este punto, querría hacer un inciso para hablarte de Lúmina, un proyecto personal en el que llevo un tiempo trabajando. Un micro-SaaS diseñado para realizar auditorías rápidas de accesibilidad web. Está pensado especialmente para ayuntamientos, ONGs, pymes y pequeñas agencias que quieren mejorar la inclusión digital sin complicaciones.

Con Lúmina, puedes auditar cualquier URL y obtén un informe detallado con incidencias, y obtener un checklist WCAG completo, sugerencias CSS y guía de pruebas manuales. Y lo mejor de todo, es una herramienta gratuita, y te ayudará a mejorar la accesibilidad de tus proyectos web.

11. Medir o morir: UX sin datos es solo tu opinión

Puedes haber seguido las leyes de Jakob, aplicado la Gestalt a la perfección y tener una accesibilidad de medalla de oro, pero si no mides lo que pasa en tu producto, estás navegando a ciegas. En este juego, la intuición es un buen punto de partida, pero los datos son el único destino seguro. UX sin datos no es diseño, es una opinión, y las opiniones no suelen sostener modelos de negocio. Esto, lamentablemente lo he tenido que aprender a base de desengaños, y alguna que otra hostia de realidad, si me disculpáis la expresión.

¿Como actuar? Para que tu estrategia no se evapore, tienes que grabar a fuego la regla de las 3 Rs. Primero, que el objetivo sea Real: deja de perseguir métricas vanidosas que no sirven para nada. Segundo, que sea Realizable: no intentes medirlo todo si no tienes capacidad para procesarlo. Y tercero, lo más importante: que sea Rastreable. Si no puedes trazar el camino que ha seguido el usuario desde que entró hasta que se fue (frustrado o feliz), no tienes ni idea de si tu producto funciona.

Así que, tus amigos los mapas de calor, tus primas, las tasas de rebote y tus bros, los tests A/B, son los que te dicen la verdad, por mucho que nos duela. Medir es la única forma de pasar de «creo que esto gusta» a «sé que esto funciona». Porque en el mundo digital, lo que no se mide no se puede mejorar, y lo que no se mejora, acaba muriendo por puro desinterés. Seguir una estrategia Data-Driven  en tus diseños y desarrollos es apostar por el éxito.

Ver para creer: el papel de Microsoft Clarity

Además, a fecha de hoy hay herramientas cojonudas y gratuitas para hacer mediciones muy decentes, como el tradicional Google Analytics, pero desde hace un tiempo, la caña es Microsoft Clarity: Si los datos te dicen qué pasa, herramientas como Microsoft Clarity te enseñan el por qué. Es el detector de mentiras, o el agente revelador definitivo: a través de mapas de calor y grabaciones de sesiones, puedes ver dónde el usuario hace click por error o dónde se queda atascado.

Lo mejor es que te chiva los «clics de rabia» (esos toques desesperados cuando algo no carga), avisándote justo antes de que el usuario lance el móvil o el ratón por la ventana. Es una forma gratuita y sin código de dejar de suponer y empezar a ver cómo sobrevive tu diseño al contacto con la realidad. Úsalo para pulir, no para coleccionar gráficas bonitas. 

clarity

12. Eye Tracking: dónde mira el usuario, y dónde no

Para cerrar este alucinante viaje por la mente del usuario, hablemos de la última frontera:  el espacio digo, la mirada. Tenemos que aceptar una realidad dolorosa para cualquier copy, redactor o diseñador: la gente no «lee». Tampoco tu web o tu app. Como mucho, la escanea. El ojo humano en una pantalla se comporta más como un radar en busca de objetivos que como un lector de novelas.

El Eye Tracking nos ha enseñado que la visión funciona mediante dos movimientos constantes. Primero están las fijaciones, esos breves milisegundos donde el ojo se detiene y el cerebro realmente procesa la información. Y entre fijación y fijación, están las sacadas: saltos rápidos donde el ojo se desplaza pero no «ve» nada. Tu trabajo es asegurarte de que las fijaciones caigan donde a ti te interesa.

Lo más doloroso de aceptar es que nunca miran donde tú crees. El usuario ignora sistemáticamente los bloques de texto densos y los banners que parecen publicidad (ceguera de banner). En su lugar, busca patrones en «F» o en «Z», saltando de titular en titular y buscando puntos de anclaje visual. Si no pones negritas, listas o imágenes que rompan la monotonía, el ojo del usuario pasará de largo sin procesar ni un solo gramo de tu mensaje. Diseñar es, en última instancia, colocar las «migas de pan» visuales necesarias para que el radar del usuario encuentre el tesoro sin esfuerzo.

08. Eye tracking (patrón F)

13. El proceso real: de idea a producto usable

Olvídate de la inspiración divina o de las musas bajando a tu escritorio. El diseño de producto no es arte; es ingeniería de soluciones. Los productos que no acaban volando por la ventana son el resultado de un método riguroso, no de un golpe de suerte. Es un camino sucio, de ensayo, error e iteración, que separa a los que «dibujan pantallas» de los que resuelven problemas.

El proceso real siempre sigue una hoja de ruta innegociable; todo empieza por entender el problema (y la solución no siempre es una app). Después pasamos a bocetar, a ensuciarnos las manos con wireframes que definan la estructura antes que el color. Solo entonces creamos un prototipo que parezca real, pero con un único objetivo: testear con usuarios de carne y hueso. Porque si no lo pones a prueba, solo tienes una hipótesis bonita.

En cada fase de este proceso, tu brújula deben ser tres preguntas cortas y directas: ¿Qué pasa? (datos), ¿Por qué pasa? (psicología) y ¿Cómo lo solucionamos? (diseño). Si no puedes responder a las tres, colega, no sigas avanzando. El diseño usable no nace de un «me gusta»; nace de observar el desastre en un test de usuario y tener la humildad de corregirlo antes de que llegue a producción. Además, nunca preguntes «¿te gusta?«, Ana te lo explica muy bien aquí.

14. Conclusiones

Después de desmenuzar leyes, procesos y trucos mentales, la verdad desnuda es esta: la UX no es estética. No es seguir la tendencia de moda en redes sociales ni diseñar interfaces pensadas solo para lucir bien en Dribbble. El diseño de experiencia de usuario no es un concurso de belleza; es una disciplina de ingeniería invisible. UX es, por encima de todo, eliminar fricción.

Es el arte de lograr que alguien consiga lo que busca sin tener que pararse a pensar demasiado y, sobre todo, sin cabrearse por el camino. Es construir ese puente invisible entre la necesidad de una persona y la solución que ofrece nuestro código. Si lo haces bien, nadie lo nota; el usuario fluye, completa su tarea y se va con una sensación de eficacia silenciosa. Pero si lo haces mal, si descuidas la usabilidad o ignoras la accesibilidad, todo el mundo lo sufre. Y ahí es cuando aparecen las ganas de lanzar el móvil por la ventana.

Al final, un producto digital de éxito no es el que más brilla, sino el que mejor sirve. El código sostiene la estructura, pero la experiencia es la que retiene al cliente. Si el usuario tiene que pensar demasiado, ya has perdido.

This is the way

Y después de toda esta losa, un consejo de diseñador viejales con demasiadas batallitas de abuelo cebolleta: de verdad, no diseñes para impresionar a otros diseñadores; si puedes, diseña para que el mundo sea un lugar un poco menos frustrante. This is the way.

15. Resumen en video de este post, realizado por Notebooklm de Google

Compartir esta entrada

Facebook
Twitter
LinkedIn
Email

ACERCA DE...

Fco. Moreno - Diseñador de producto digital UI/UX

Soy Paco Moreno, Diseñador de Producto Digital (UI/UX) y diseñador gráfico, residente a caballo entre Albacete y Begur (Girona). Colegiado Nº 606 del Col·legi Oficial de Disseny Gràfic de Catalunya. Friki, geek y un metalero en decadencia. Actualmente desarrollo mi labor profesional en BUDA Business Data Software, en Sant Cugat del Vallés, Barcelona. También colaboro con Marpadal Interactive Media y con iPow e-commerce. Miembro de la comunidad Subflash, colaboro en la organización de sus Talleres de Verano.

Comentarios en la Entrada

NOTA INFORMATIVA: Las opiniones vertidas en este blog son solo mías. No pretendo convencer a nadie ni representar a nadie más que a mí mismo. Sólo pretendo expresar en este blog la forma en que veo la vida, el diseño y la cultura. Cualquier opinión es bienvenida siempre y cuando se haga con respeto y cortesía. Esta es mi casa digital, y me reservo el derecho de eliminar de esta web cualquier comentario ofensivo, que falte al respeto, o que sea intolerante o dañino. 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Otras entradas que te pueden interesar

LMN Site Monitor Desktop: monitoriza tus webs desde el escritorio, sin complicarte la vida
Misceláneas

LMN Site Monitor Desktop: monitoriza tus webs desde el escritorio de Windows, sin complicarte la vida

Durante años he ido tirando de pequeñas herramientas para vigilar el estado de mis webs, certificados SSL y dominios. Cosas sueltas, servicios externos, algún plugin… lo típico, pero siempre con la sensación de estar parcheando. Hace unos meses, para cambiar esto, decidí crear mi propia herramienta para monitoreo de sitios. Si ya conoces LMN Site Monitor, mi plugin de monitorización para WordPress, ahora quiero presentarte LMN Site Monitor Desktop, una aplicación de escritorio ligera que te permite monitorizar el estado de tus sitios web, sus certificados SSL y otros parámetros básicos directamente desde tu ordenador.

Leer más »
Una reflexión sobre cómo, en diseño de producto, la velocidad empieza a pesar más que el criterio… y la experiencia, sin hacer ruido, empieza a incomodar.
reflexión personal

Confundir experiencia con lastre

El diseño de producto es una disciplina que se apoya en la experiencia, pero cada vez parece tener menos paciencia con ella. En un contexto donde se prioriza la velocidad, las herramientas y la capacidad de producir rápido, el criterio y la toma de decisiones, que suelen venir con el bagaje, quedan en segundo plano. Este artículo plantea esa contradicción, cuestiona algunas simplificaciones habituales y pone sobre la mesa la necesidad de equipos más equilibrados, donde distintas formas de entender el trabajo convivan para construir productos más sólidos.

Leer más »
Episodio 346: 30 años haciendo webs, con Francisco Moreno
Misceláneas

Episodio 346 de #UBAC: 30 años haciendo webs, con Francisco Moreno

Echar la vista atrás y ver lo que ha cambiado el panorama del diseño y desarrollo web desde los 90 hasta ahora puede dar un poco de vértigo. Desde la usenet, los foros, el HTML con Dreamweaver a la creación de webapps con IA, el viaje ha sido brutal. El pasado lunes, tuve el honor de subirme al tren más cañero del desarrollo web del universo podcaster para hablar de estas cosas. «Un billete a Chattanooga», el reality-pódcast de diseño, marketing y negocios online con WordPress, de los inigualables Ana Cirujano y Pablo Moratinos.

Leer más »
LMN Site Monitor 0.8.0 ya está disponible en WordPress.org
Diseño Gráfico

La actualización de LMN Site Monitor 0.8.1 ya está disponible en WordPress.org

Hace unos meses publiqué LMN Site Monitor, disponible en el repositorio oficial de WordPress,  con una idea muy clara: crear una herramienta sencilla que permita vigilar la salud de una web sin complicaciones. Desde entonces el plugin ha ido evolucionando poco a poco, versión a versión, incorporando mejoras reales que nacen del uso diario y de las necesidades que van surgiendo al trabajar con webs en producción. Hoy me alegra anunciar que ya está disponible la versión 0.8.0, una actualización que introduce varias mejoras importantes.

Leer más »
LMN Site Monitor ya está oficialmente operativo en el repositorio de WordPress.
Tools

LMN Site Monitor ya está oficialmente operativo en el repositorio de WordPress

LMN Site Monitor ya está oficialmente operativo en el repositorio de WordPress. Después de meses de evolución, ajustes, revisiones de código y cumplimiento estricto de los estándares de WordPress, el plugin está publicado y disponible para cualquier usuario que quiera monitorizar la disponibilidad y el estado SSL de sus sitios de forma sencilla y fiable. Y no solo eso. Coincidiendo con la publicación, he lanzado la versión 0.7.0, una actualización importante que consolida el proyecto como una herramienta sólida, o al menos lo pretende.

Leer más »
parcisa 20 años despues
Branding

Cuando una marca sigue rodando veinte años después

Hay proyectos que se quedan en el portfolio. Y hay proyectos que se quedan contigo. Hace casi veinte años tuve la responsabilidad de desarrollar la renovación de la identidad de Parcisa durante mi etapa en Im3diA Comunicación. No era solo un rediseño estético. El reto era más complejo: actualizar una marca consolidada sin que perdiera su esencia original. Modernizar sin romper, evolucionar sin traicionar. 

Leer más »