Tech Lab

Interfaces líquidas: una web que se recoloca para quien la está leyendo

La misma página, ordenada de forma distinta según quién entre y qué esté buscando. No es personalización por reglas: la decide un modelo, y se puede ver decidir.

Pruébalo antes de que te lo contemos

Tenemos una página que se recoloca mientras la lees y que enseña por qué lo hace.

En nuestro laboratorio hay una página real que mira cómo te mueves por ella, se lo cuenta a un modelo y reordena lo que te enseña según lo que ese modelo contesta. Al lado hay un panel de cristal con todo: lo que se manda, lo que se contesta, con qué probabilidad y qué ha cambiado por cada respuesta.

Ese panel es lo que separa una demostración de un truco de magia. Sin él tendrías que fiarte.

Abrir el laboratorio

Dos cosas distintas que se están llamando igual

Interfaz líquida: la que se recoloca
Tienes tus secciones, tus componentes y tus textos, hechos y revisados. Lo que decide el modelo es cuál va primero, cuál se amplía y cuál se esconde, según lo que esa persona concreta parece estar buscando. Es reversible, es auditable y no puede enseñar nada que no hayas escrito tú.

Los bloques existen. Lo que cambia es el orden y el peso.

Interfaz generativa: la que se compone
Aquí no hay bloques premontados para cada caso: el modelo compone una interfaz nueva con los componentes y los tokens de tu sistema de diseño. Da respuestas a preguntas que nadie había previsto, y a cambio tienes que aceptar que no sabes de antemano qué va a salir.
Y la diferencia importa para el presupuesto
La primera se monta sobre lo que ya tienes y se mide en semanas. La segunda exige un sistema de diseño completo antes de empezar. Confundirlas es la forma más rápida de presupuestar mal un proyecto de estos.

Para qué sirve esto en una tienda

No es un efecto visual. Resuelve un problema concreto y viejo.

El buscador de una tienda es una caja de texto que devuelve una parrilla de productos. Lleva siendo lo mismo veinte años. Y es donde se pierde la venta: quien no sabe exactamente cómo se llama lo que quiere, se va.

  1. Descubrimiento por intención, no por palabra clave
    «Quiero vestir un salón nórdico con menos de 800 euros» no es una búsqueda de catálogo: es un encargo. La respuesta útil no es una lista de resultados, es una propuesta montada, comparable y con el precio sumado.
  2. La ficha que se ordena según quién mira
    Un comprador técnico quiere las medidas y la compatibilidad arriba. Uno que compara quiere el precio y la devolución. Es la misma ficha, con otro orden.
  3. El catálogo grande, que es donde duele
    Con cuarenta referencias esto no hace falta. Con cuatro mil, la diferencia entre encontrar y rendirse es el orden en que se enseñan.
  4. Y el B2B, que es donde más rápido se nota
    Un cliente que repone material todos los meses y uno que está pidiendo presupuesto por primera vez necesitan pantallas distintas. Hoy ven la misma.

Lo que casi nadie te va a contar

Una web que se genera para cada visita no se puede posicionar
Google indexa direcciones, no intenciones. Y los modelos que hoy recomiendan productos citan páginas concretas. Si cada visita produce una composición distinta y efímera, no hay página que indexar, no hay página que enlazar y no hay página que citar. Es el agujero del que no se habla en ninguna demostración.

Sin direcciones estables no hay nada que indexar ni que citar.

Cómo lo resolvemos
Capa estable debajo y capa líquida encima. Las direcciones canónicas existen, son fijas y tienen su contenido completo para quien rastrea; lo que se recoloca es lo que ve la persona. Son dos capas, y hay que diseñarlas a la vez.
Y el coste por visita
Cada decisión del modelo cuesta dinero y tarda. Por eso en el laboratorio usamos un modelo que no escribe texto, solo decide: es más barato, más rápido y no se puede inventar nada, porque su respuesta encaja en un tipo declarado por construcción.
Lo que hace falta tener antes
Un sistema de diseño de verdad: componentes, tokens y reglas. Sin eso, lo que se genera no es tu marca, es lo que al modelo le parece tu marca. Si no lo tienes, ese es el proyecto y no este.

Cómo lo hacemos

  1. Una categoría, no la web entera
    Se elige una categoría o un flujo donde hoy se pierda gente, y se monta ahí. El resto del sitio no se toca.
  2. Se decide qué puede decidir el modelo
    Y, sobre todo, qué no. El orden y el peso, sí. El precio, el stock y lo que es legalmente obligatorio, nunca.
  3. Se mide contra lo que ya tenías
    Pasos hasta el producto, tasa de abandono del buscador, conversión de la categoría y coste por consulta. Si no gana, no se queda.
  4. Y se entrega con el panel puesto
    Igual que en el laboratorio: tú puedes ver qué se mandó, qué se contestó y por qué cambió. Una interfaz que decide y no se deja auditar es un problema esperando.

¿Lo montamos en una categoría de tu tienda?

Déjanos la dirección y te decimos en qué parte de tu catálogo tendría sentido, qué haría falta tener antes y qué costaría medirlo. Sin compromiso.

Te contestamos en menos de 24 horas laborables.

Preguntas


¿Esto no es personalización de toda la vida?
La personalización clásica son reglas que escribe una persona: si viene de esta campaña, enséñale esto. Funciona y sigue siendo útil. La diferencia es el número de casos: las reglas hay que preverlas una a una, y aquí la decisión se toma con el estado completo de la visita, incluidas combinaciones que nadie escribió.

¿Puede enseñar algo que yo no he escrito?
En una interfaz líquida, no: los bloques son tuyos y el modelo solo decide el orden. En una interfaz generativa sí compone cosas nuevas, y por eso hay que acotar qué componentes puede usar y con qué datos. Es la decisión más importante del proyecto.

¿Qué pasa si el modelo falla o se cae?
Se sirve el orden por defecto, que es el que tendrías hoy. Un proyecto de estos se diseña para que la capa líquida sea una mejora sobre algo que ya funciona, nunca un requisito para que la página se vea.

¿Afecta al rendimiento?
Si se hace mal, mucho. La decisión no puede bloquear el pintado de la página: la página sale, y la recolocación llega después. En el laboratorio se ve ese orden.

¿Y la privacidad?
Se decide con señales de comportamiento de esa visita, no con datos personales. Lo que se manda al modelo está a la vista en el panel, y eso es precisamente lo que permite enseñárselo a quien lo pregunte.

¿Cuánto cuesta probarlo en una categoría?
Depende de si ya tienes sistema de diseño y de cuántos componentes entren en juego. Lo decimos con un alcance cerrado antes de empezar, como el resto de lo que hacemos.

Proyecto “Planificador Quirúrgico” subvencionado con el expediente 03-SSD1-00035.4/2025 del Programa de subvenciones para el desarrollo e implantación de soluciones digitales en pymes, dentro del programa RETECH – redes de emprendimiento de la Comunidad de Madrid, en el marco del Plan de Recuperación, Transformación y Resiliencia, financiado por la Unión Europea – Next Generation EU.

Financiado por la Unión Europea — NextGenerationEU Gobierno de España — Ministerio para la Transformación Digital y de la Función Pública Plan de Recuperación, Transformación y Resiliencia Comunidad de Madrid

ISO/IEC 27001 · EUROCERT · certificado n.º 00.15.0793

Sortlist Trusted PartnerShopify Select PartnerChooseMyCompany, resultados certificados de Pango StudioEl 100 % de la plantilla recomienda trabajar aquíEmpresa certificada por ChooseMyCompanyFinanciada por ENISA — Ministerio de Industria y Turismo

Proyecto “Planificador Quirúrgico” subvencionado con el expediente 03-SSD1-00035.4/2025 del Programa de subvenciones para el desarrollo e implantación de soluciones digitales en pymes, dentro del programa RETECH – redes de emprendimiento de la Comunidad de Madrid, en el marco del Plan de Recuperación, Transformación y Resiliencia, financiado por la Unión Europea – Next Generation EU.

Financiado por la Unión Europea — NextGenerationEU Gobierno de España — Ministerio para la Transformación Digital y de la Función Pública Plan de Recuperación, Transformación y Resiliencia Comunidad de Madrid
Contacto

Cuéntanos tu proyecto

Un meet de 30 minutos para entender tu proyecto y decirte, sin rodeos, si somos el equipo adecuado.

✓ Respondemos en menos de 24 h laborables
✓ Escríbenos a hola@pangostudio.com