Chatbots y asistentes con IA en tu web: guía de diseño conversacional

Hace unos meses, un hotel de Marbella con el que trabajamos nos pidió «un chatbot como el de las grandes cadenas». Antes de hablar de herramientas, les propusimos algo menos vistoso: pasar una semana anotando todas las preguntas que llegaban por correo, teléfono y WhatsApp. Al final de la semana había más de doscientas. Casi la mitad eran variaciones de las mismas diez: si hay parking, a qué hora es el desayuno, si admiten perros, cómo llegar desde el aeropuerto, si la piscina está climatizada en noviembre. El resto eran peticiones especiales, reservas de grupo y alguna queja.

Ese ejercicio decidió el proyecto. El asistente tenía sentido para esas diez preguntas, contestadas bien, a cualquier hora y en varios idiomas. Para todo lo demás, su mejor trabajo era pasar la conversación a recepción con el contexto ya recogido. No hacía falta un asistente que lo supiera todo; hacía falta uno que supiera bien lo suyo y conociera sus límites.

Esta guía va de eso: cuándo un chatbot con IA aporta en una web, cómo se diseña su conversación, qué detalles de interfaz y accesibilidad marcan la diferencia, qué dice la normativa y cómo saber si está ayudando.

01Cuándo tiene sentido un asistente con IA en tu web

Un chatbot es una interfaz más, y como cualquier interfaz tiene que resolver un problema real. Estos son los criterios que usamos para decidir.

Antes de decidir, haz el ejercicio del hotel: registra durante una o dos semanas todas las preguntas que recibes. Te dirá si hay volumen repetido, cuáles son las preguntas reales y en qué idiomas llegan. Y a veces te dirá que lo que necesitas es mejorar la web para que esas respuestas sean fáciles de encontrar sin preguntar.

02Cómo funciona un chatbot con IA por dentro

Conviene entender lo básico para tomar buenas decisiones de diseño.

Chatbot de reglas. Funciona con árboles de decisión: botones, opciones y respuestas escritas de antemano. Es predecible y fácil de controlar, pero se atasca en cuanto alguien pregunta algo no previsto.

Asistente con IA generativa. Usa un modelo de lenguaje para entender la pregunta, formulada como sea, y redactar la respuesta. Para que conteste sobre tu negocio y no sobre lo que el modelo cree saber, se conecta a una base de conocimiento propia mediante una técnica llamada RAG (generación aumentada por recuperación): ante cada pregunta, el sistema busca los fragmentos relevantes de tus documentos y el modelo responde a partir de ellos.

Híbrido. Lo más habitual en proyectos bien hechos: IA para entender y conversar, flujos guiados con botones para tareas concretas (reservar, pedir presupuesto) y reglas firmes para lo que no admite improvisación (precios, condiciones legales).

La calidad de un asistente con RAG depende sobre todo de su base de conocimiento: documentos claros, actualizados, sin contradicciones y escritos para responder preguntas. Es un trabajo de contenido más que de tecnología, y es el que más se subestima.

Preparar una base de conocimiento que responda bien

Lo que mejor nos funciona es escribir la base de conocimiento como si fuera para una persona nueva en recepción:

• →Un tema por documento o por apartado. Parking, desayunos, mascotas, cancelaciones. Fragmentos cortos y bien titulados se recuperan mejor que un PDF de cuarenta páginas.
• →Respuestas directas al principio. «Sí, hay parking privado con 20 plazas, 15 € por noche». Los matices, después.
• →Una sola fuente de verdad. Si los horarios aparecen en tres documentos distintos, tarde o temprano uno estará desactualizado y el asistente lo citará.
• →Fecha y responsable. Cada documento indica cuándo se revisó y quién lo mantiene.
• →Lo que no se responde. Una lista explícita de temas que siempre pasan a una persona: reclamaciones, grupos, precios especiales.

Con una base así, el asistente responde mejor y además el equipo gana un manual interno ordenado, que es un beneficio que muchos clientes no esperaban.

03Diseñar la conversación paso a paso

El diseño conversacional es la disciplina que define qué dice un asistente, cómo lo dice y cómo se comporta en cada situación. Este es el proceso que seguimos:

1. 01Propósito en una frase. «Resolver las dudas prácticas de los huéspedes antes y durante su estancia y pasar a recepción lo demás». Todo lo que no encaje en esa frase queda fuera del alcance.
2. 02Inventario de intenciones. Las preguntas reales agrupadas por lo que la persona quiere conseguir. Para cada una: respuesta, fuente y si requiere paso a una persona.
3. 03Personalidad y tono. El asistente habla con la voz de la marca, no con la del proveedor de la herramienta. Si tienes una guía de voz, cárgala; si no, te ayudará nuestra guía sobre IA para copywriting con voz propia.
4. 04Mensaje de bienvenida. Quién es, qué puede hacer y cómo hablar con una persona. Con dos o tres sugerencias de preguntas frecuentes como botones.
5. 05Límites y respuestas de borde. Qué hace cuando no sabe, cuando le preguntan fuera de su alcance, cuando alguien está molesto o cuando detecta una urgencia.
6. 06Paso a una persona. Cuándo se activa, cómo se anuncia, qué datos recoge y qué ocurre fuera de horario.
7. 07Pruebas con personas reales. Antes de publicar, varias personas ajenas al proyecto intentan resolver tareas y también intentan sacarlo de sus casillas.
8. 08Revisión periódica. Lectura semanal de conversaciones el primer mes y mensual después, para corregir respuestas y ampliar la base de conocimiento.

Mensajes que funcionan

Un ejemplo de bienvenida para el hotel, ilustrativo:

Y uno para cuando el asistente no tiene la respuesta, que es tan importante como el resto: «No tengo esa información confirmada y prefiero no darte un dato incorrecto. ¿Quieres que se lo pase a recepción? Te contestan en menos de una hora en horario de 8:00 a 23:00». Reconoce el límite, ofrece una salida y concreta un plazo.

Para escribir estos mensajes con claridad, los principios de nuestra guía de UX writing se aplican de lleno: frases cortas, verbos concretos y la siguiente acción siempre visible.

Clave: un buen asistente se mide por lo bien que resuelve lo suyo y por lo bien que reconoce lo que no es suyo.

04La interfaz del chat: ubicación, móvil y accesibilidad

El asistente vive dentro de tu web y tiene que convivir con ella sin estorbar.

Ubicación y aparición. El lanzador suele ir en la esquina inferior derecha, donde los usuarios lo esperan. Abrir el chat automáticamente al llegar, o con mensajes emergentes insistentes, interrumpe la lectura; lo que funciona es dejar que la persona lo abra cuando lo necesite, y como mucho mostrar una sugerencia discreta en páginas donde suelen surgir dudas.

Móvil. En pantallas pequeñas el chat ocupa la pantalla completa, con el campo de texto por encima del teclado y un botón de cierre claro. El lanzador no debe tapar botones importantes como el de reservar.

Rendimiento. Muchos widgets de chat cargan mucho JavaScript. Cargarlo de forma diferida, cuando el usuario interactúa o cuando la página ya está lista, protege métricas como el LCP (≤ 2,5 s) y el INP (≤ 200 ms).

Accesibilidad. El chat tiene que poder usarse con teclado y con lector de pantalla, según WCAG 2.2. Lo básico: el lanzador es un botón con nombre accesible, el foco se mueve al campo de texto al abrir y vuelve al lanzador al cerrar, y los mensajes nuevos se anuncian a los lectores de pantalla. Una estructura mínima:

<button type="button" aria-expanded="false" aria-controls="chat-panel">
  Abrir asistente
</button>
<section id="chat-panel" aria-label="Asistente del hotel" hidden>
  <div role="log" aria-live="polite" aria-relevant="additions">
    <p><strong>Asistente:</strong> Hola, ¿en qué te ayudo?</p>
  </div>
  <form>
    <label for="chat-input">Escribe tu pregunta</label>
    <input id="chat-input" type="text" autocomplete="off">
    <button type="submit">Enviar</button>
  </form>
</section>

El rol log con aria-live="polite" hace que el lector de pantalla lea cada mensaje nuevo sin interrumpir lo que el usuario está haciendo. La documentación de MDN sobre ARIA explica estos atributos con detalle.

05Normativa: transparencia, datos y responsabilidad

Transparencia. El Reglamento Europeo de IA (Reglamento (UE) 2024/1689) obliga, a partir del 2 de agosto de 2026, a informar a las personas de que están interactuando con un sistema de IA, salvo que sea evidente. Decirlo en la bienvenida resuelve la obligación y ajusta expectativas.

Protección de datos. Las conversaciones contienen datos personales, a veces sensibles. El RGPD exige informar del tratamiento (un enlace a la política de privacidad en el propio chat), elegir proveedores con contrato de encargado del tratamiento, fijar plazos de conservación y no pedir más datos de los necesarios. Si el asistente recoge nombre y teléfono para el paso a una persona, explica para qué.

Responsabilidad. Lo que dice el asistente lo dice tu empresa. En el caso Moffatt v. Air Canada (2024), un tribunal canadiense obligó a la aerolínea a respetar una política de descuento que su chatbot había explicado mal. La lección práctica: precios, condiciones y políticas, siempre desde fuentes verificadas y con reglas firmes, y revisión periódica de conversaciones.

06Cómo medir si el asistente ayuda

Un asistente se publica y empieza a aprender. Estas métricas te dicen si va por buen camino:

• →Tasa de resolución. Conversaciones en las que el usuario obtuvo lo que buscaba sin pasar a una persona. Lo ideal es medirla preguntando al final («¿Te he ayudado?»), no solo suponiendo que si no pidió ayuda, quedó resuelta.
• →Tasa de paso a persona. Ni muy alta (el asistente no sabe) ni sospechosamente baja (puede que esté reteniendo a gente que necesitaba ayuda).
• →Preguntas sin respuesta. La lista de lo que no supo contestar es la hoja de ruta para mejorar la base de conocimiento.
• →Satisfacción. Una valoración simple al cerrar la conversación.
• →Impacto en negocio. Reservas, solicitudes de presupuesto o ventas iniciadas desde el chat, y descenso de consultas repetidas en otros canales.

En el hotel del principio, tras los primeros meses, recepción notó que las llamadas sobre parking y horarios casi desaparecieron, y que las conversaciones que le llegaban desde el chat venían con el contexto ya recogido. Ese tiempo se dedicó a lo que ningún asistente hace igual: atender bien a quien está delante.

Si estás pensando en un asistente para tu web, empieza por las preguntas reales de tus clientes y por una página de contacto que ya invite a escribir. En SIMA diseñamos e integramos asistentes con IA dentro de nuestros proyectos de desarrollo web y apps con IA, con la conversación pensada como parte de la experiencia de marca. Si quieres valorar si tiene sentido en tu caso, escríbenos y lo vemos con tus datos delante.