A medida que la IA ha ido evolucionando, también lo han hecho los patrones de UX conversacional, que han ido cambiando a la par que los avances tecnológicos. Esta evolución puede agruparse en distintas fases, cada una de las cuales representa un salto en los patrones de diseño más que en las capacidades del sistema.
En este post, desglosaré las mejores prácticas que dominaron el diseño de productos, UX y UI durante el boom de los chatbots de 2014 a 2018 (aunque omitiremos los primeros experimentos como Eliza de 1966). Estas prácticas sentaron las bases para los sofisticados estándares de diseño y usabilidad que vemos hoy en día.
Tabla de contenidos
Fase 1: Chatbots (1966-2018)
Los primeros chatbots se basaban en guiones sencillos y preestablecidos para simular una conversación. Piense en ellos como sistemas automatizados que siguen una ruta fija, respondiendo a entradas específicas del usuario con respuestas preprogramadas.
Fase 2: GPT (2018-2021)
El siguiente gran salto llegó con los modelos GPT, que podían responder a las solicitudes recurriendo a una amplia base de conocimientos, ofreciendo respuestas e instrucciones directas.
Fase 3: Agentes (2021-2024)
En esta fase surgieron sistemas de IA capaces de ejecutar tareas de forma autónoma, aprendiendo y ajustando sus métodos en función de los comentarios de los usuarios.
Fase 4: Enjambres – Hiperagentes (futuro próximo)
Bienvenido al mundo de los «enjambres» o, como yo prefiero llamarlos, «hiperagentes», que es un poco más positivo, ¿no le parece? Estos sistemas avanzados de IA pueden realizar operaciones complejas en varios pasos de forma autónoma, yendo más allá del mero seguimiento de instrucciones.
Mejores prácticas de la era chatbot
Echemos un vistazo más de cerca a las mejores prácticas que definen el diseño de chatbot, sentando las bases para futuros avances.
Burbujas de mensajes
✅ Hacer: Utiliza colores y alineaciones distintos para los mensajes del chatbot y del usuario para garantizar la claridad.
🙅 No lo hagas: Abarrotar la interfaz con demasiados elementos visuales en cada burbuja de mensaje.
Ejemplo: Un chatbot bancario utiliza burbujas azules para sus propios mensajes y burbujas blancas para las respuestas de los usuarios, lo que facilita el seguimiento de la conversación.
Indicadores de escritura
✅ Hacer: Proporcionar un indicador visual (por ejemplo, puntos que rebotan) cuando el bot está procesando una solicitud.
🙅 No lo hagas: Utilizar animaciones largas o demasiado complicadas que puedan frustrar a los usuarios si la respuesta se retrasa.
Ejemplo: Una sutil elipsis muestra al usuario que el chatbot está trabajando en una respuesta a una consulta sobre el extracto de su tarjeta de crédito.
Campo de entrada único
✅ Hacer: Mantén el campo de entrada limpio con un texto de marcador de posición claro y un botón ‘Enviar’ fácil de encontrar.
🙅 No lo hagas: Sobrecargar el campo de entrada con botones o texto innecesarios.
Ejemplo: Un chatbot de atención al cliente con un texto de marcador de posición «Escriba su mensaje aquí…» y un simple botón ‘Enviar’ garantiza la facilidad de uso.
Alternancia de entrada de voz
✅ Hacer: Ofrecer a los usuarios la opción de alternar entre texto y entrada de voz, haciendo que las interacciones sean más accesibles.
🙅 No lo hagas: Forzar a los usuarios a utilizar la entrada de voz sin una opción fácil para volver al texto.
Ejemplo: Un chatbot de asistencia sanitaria permite a los usuarios dictar síntomas a través de un icono de micrófono, lo que mejora la accesibilidad.
Árboles de diálogo
✅ Hacer: Guiar a los usuarios a través de opciones predefinidas para evitar confusiones.
🙅 No lo hagas: Abrumar a los usuarios con demasiadas opciones a la vez.
Ejemplo: Un chatbot asistente de compras ofrece «Examinar categorías» o «Comprobar estado del pedido», guiando a los usuarios en función de sus entradas.
Respuestas de opción múltiple
✅ Hacer: Proporcionar botones de respuesta rápida para acciones comunes para agilizar la interacción.
🙅 No lo hagas: Confía únicamente en las respuestas de opción múltiple; permita siempre la entrada de texto libre como alternativa.
Ejemplo: Un chatbot ofrece botones como «Enlace de restablecimiento de correo electrónico» o «Responder pregunta de seguridad» para ayudar en la recuperación de contraseñas.
Seguimientos de código duro
✅ Hacer: Introducir sin problemas preguntas de seguimiento basadas en interacciones anteriores para continuar el flujo de la conversación.
🙅 No lo hagas: Forzar seguimientos irrelevantes que rompan el flujo de la conversación.
Ejemplo: Después de reservar un hotel, el chatbot pregunta: «¿Le gustaría reservar el transporte al hotel?» como una extensión natural.
Historial de la conversación
✅ Hacer: Permitir a los usuarios desplazarse por mensajes anteriores para revisar la conversación.
🙅 No lo hagas: Obliga a los usuarios a repetir información que ya han proporcionado.
Ejemplo: Un chatbot de asistencia técnica muestra todo el historial de la conversación, lo que permite a los usuarios volver a los pasos anteriores de solución de problemas.
Divulgación progresiva
✅ Hacer: Revelar gradualmente información más detallada según sea necesario para evitar abrumar a los usuarios.
🙅 No lo hagas: Presentar toda la información por adelantado, lo que puede confundir o abrumar a los usuarios.
Ejemplo: Un chatbot de consejos de salud empieza con una comprobación básica de síntomas y ofrece progresivamente detalles más profundos en función del interés del usuario.
Fallbacks con gracia
✅ Hacer: Ofrecer indicaciones aclaratorias cuando el bot no entienda una consulta para mantener la conversación productiva.
🙅 No lo hagas: Dar mensajes de error genéricos que frustren al usuario.
Ejemplo: Cuando un usuario hace una pregunta poco clara, el chatbot responde con: «¿Se refería a su saldo o al historial de transacciones?» para aclarar la petición.
Plantillas de respuestas estructuradas
✅ Hacer: Utilizar un formato coherente para los diferentes tipos de respuestas (por ejemplo, informativas, procesables) para facilitar la legibilidad y el escaneo.
🙅 No lo hagas: Proporcionar respuestas de forma caótica o desestructurada, dificultando que los usuarios sigan el flujo.
Ejemplo: Un bot de atención al cliente utiliza plantillas estructuradas para las preguntas frecuentes, comenzando cada respuesta con un resumen en negrita, seguido de detalles clave y botones de acción para los siguientes pasos (por ejemplo, «Problema resuelto» o «¿Necesita más ayuda?»).
Mantenimiento del contexto
✅ Hacer: Mantener la conciencia de los intercambios anteriores en conversaciones de varios turnos para proporcionar respuestas pertinentes y coherentes.
🙅 No lo hagas: Obligar a los usuarios a repetir información o reintroducir el contexto que ya han proporcionado, lo que frustra la experiencia.
Ejemplo: Un usuario pide recetas veganas y, más adelante en la conversación, cuando pregunta por la planificación de comidas, el chatbot incorpora automáticamente la preferencia vegana anterior sin necesidad de recordárselo.
Protocolos para la toma de turnos
✅ Hacer: Proporcionar señales claras de cuándo el sistema está esperando la entrada del usuario y cuándo está procesando o respondiendo, manteniendo un flujo conversacional fluido.
🙅 No lo hagas: Confundir a los usuarios no indicándoles cuándo es su turno para hablar o interrumpiendo su entrada a mitad de camino.
Ejemplo: Un chatbot utiliza un sutil indicador de «escribiendo» al procesar y, una vez completado, avisa al usuario con un claro mensaje de «Tu turno» o una señal visual para continuar la conversación.
Atribución de conocimientos
✅ Hacer: Incluir citas o puntuaciones de confianza de la información proporcionada para aumentar la transparencia y generar confianza.
🙅 No lo hagas: Dar respuestas complejas o basadas en hechos sin atribuir la fuente o dar una sensación de fiabilidad, lo que puede reducir la confianza.
Ejemplo: Cuando un bot ofrece consejos médicos, hace referencia a fuentes acreditadas como «Mayo Clinic» e incluye una puntuación de confianza (por ejemplo, «90% de confianza basado en sus síntomas»).
Límites de la sesión
✅ Hacer: Ofrecer formas claras para que los usuarios inicien una nueva sesión o terminen la conversación actual sin confusión, asegurando que los usuarios sepan cuándo están en una nueva sesión.
🙅 No lo hagas: Desdibujar los límites entre sesiones, haciendo difícil discernir cuándo ha terminado una conversación anterior y ha comenzado una nueva.
Ejemplo: Al final de una sesión de resolución de problemas, un bot pregunta: «¿Desea iniciar una nueva conversación o finalizar esta sesión?», ofreciendo opciones claras para reiniciar o concluir.
Respuestas de medios mixtos
✅ Hacer: Utilizar diversos formatos de medios -como texto, botones, imágenes y vídeos- para transmitir información de forma más rica e interactiva.
🙅 No lo hagas: Sobrecargar a los usuarios con texto cuando más elementos visuales o interactivos harían el mensaje más claro y atractivo.
Ejemplo: Un bot de reserva de viajes combina un resumen del itinerario basado en texto con botones para cambiar fechas o añadir extras, e incluye una imagen de mapa que muestra el destino para un mejor contexto visual.
Soluciones de chatbot destacadas
IBM Watson, DeepBlue, Eugene, Kismet, Alexa, Tay, Siri, AlphaGo.
Mi viaje en el diseño de IA conversacional
Mi primer intento de construir una herramienta generativa con elementos de IA fue en 2016, cuando trabajé con IBM Watson para desarrollar una herramienta generativa de interfaz de usuario. La idea era ambiciosa -muy parecida a la actual V0 de Vercel- ayudar a cualquiera a crear software de alta calidad y listo para producción empezando por la UI. Pero resultó que la visión iba por delante de la tecnología del momento. ¿El resultado? Un chatbot demasiado simplista y algo molesto. Aun así, me enganché.
Hoy soy diseñador jefe de productos en Qodo (antes CodiumAI), una de las principales plataformas de generación de código de IA. Mi trabajo diario consiste en investigar nuevos productos y ampliar los límites de las capacidades de la IA. En Qodo, hemos desarrollado modelos como AlphaCodium, hemos introducido la ingeniería de flujos como patrón de diseño líder y hemos combinado modelos como AlphaCodium y o1 de OpenAI para crear agentes colaborativos de alto rendimiento.
En Qodo, vivimos y respiramos la calidad del código, las pruebas y el ideal de cero errores. Personalmente, estoy obsesionado con mejorar la experiencia del desarrollador (devX) y dar forma al futuro de la creación de software. Los patrones y principios que desarrollamos no se limitan a la codificación, sino que tienen el potencial de influir en todos los sectores.
¿Lo próximo en mi viaje de investigación? Me sumergiré en las mejores prácticas de la era GPT. Permanece atento para conocer más detalles.
In Plain English 🚀
¡Gracias por formar parte de la comunidad In Plain English! Antes de que te vayas:
- Asegúrate de aplaudir y seguir al escritor ️👏️️
- Síguenos en X | LinkedIn | YouTube | Discord | Newsletter | Podcast
- Crea un blog gratuito con IA en Differ.
- Más contenido en PlainEnglish.io