El empty state de un chat con IA: qué mostrar antes del primer mensaje

¿Por qué un chat vacío necesita diseño?

Una pantalla en blanco no es neutra. Quien llega puede pensar que la app no cargó, que el asistente no funciona o que no sabe qué hacer. Un empty state bien diseñado reemplaza esa duda por una idea de uso. La guía de empty states de SetProduct lo resume así: un estado vacío no es un error, es una oportunidad de orientar, y tiene que decir por qué la pantalla está vacía y qué acción la llena.

En un chat el problema pesa más que en otras interfaces. El campo de entrada se parece a una caja de búsqueda y no dice qué se le puede pedir. Quien llega por primera vez tiene que inventar la primera pregunta sin conocer los límites del asistente.

Para esto hay una pauta concreta en las 18 guías de interacción humano-IA de Microsoft (HAX, presentadas en CHI 2019). La primera, G1, dice: “Make clear what the system can do”, es decir, deja claro qué puede hacer el sistema. La segunda, G2, pide dejar claro qué tan bien lo hace. El empty state es el primer lugar donde se cumplen o se incumplen.

¿Qué debe tener?

El saludo “¿En qué te ayudo?” parece amable, pero no dice nada del alcance. Invita a pedir cualquier cosa, incluidas cosas que el asistente no resuelve. El patrón de prompt starters de AI UX Playground también desaconseja opciones vagas como “Pregúntame lo que quieras”.

Los elementos mínimos son cuatro:

1. Una frase de propósito. Qué hace el asistente y para quién, en una línea.
2. Una acción principal. Un primer paso concreto, como “Resumir un documento” o “Redactar un correo”. SetProduct recomienda un solo camino claro antes que tres opciones vagas.
3. Sugerencias opcionales. Tres o cuatro tareas cortas que funcionan como menú de capacidades. Al tocar una, el texto debe pasar al campo de entrada para poder editarlo, y las sugerencias desaparecen cuando empieza la conversación. Cómo escribirlas está en sugerencias de prompt.
4. El campo de entrada, visible y usable. Quien quiere escribir libremente no debe tener que buscarlo.

¿Qué no debe hacer?

• Parecer un error. Un chat vacío no es un fallo. Si el sistema está caído, es otro estado: un error con su recuperación, como se ve en errores de IA y cómo recuperarse.
• Culpar a la persona. Frases como “No hay datos” o “No encontramos nada” en un chat nuevo suenan a reproche o a falla. Describe qué se puede hacer, no lo que falta.
• Usar ilustraciones que estorben. La ilustración es opcional y no debe reemplazar al texto. Evita las genéricas y el humor en contextos serios como banca o salud.
• Tapar el campo de entrada. Si el empty state ocupa la pantalla y empuja el campo fuera de vista, la persona tiene que desplazarse antes de poder empezar.
• Prometer de más. Si una sugerencia anuncia algo que el asistente hace mal, el primer uso ya rompe la confianza.

¿Cómo cambia con el historial y en otros contextos?

Cuando la persona tiene conversaciones anteriores, el empty state cambia de función. Ya no es una introducción, sino un punto de partida: se ven las conversaciones recientes y el campo nuevo. Si el historial de conversaciones está bien resuelto, el chat vacío puede ser más corto.

También conviene distinguir tres pantallas que se parecen y no son lo mismo:

SetProduct pide que los estados sin resultados se vean distintos de los de primer uso, y la misma lógica vale para los errores.

Un empty state elaborado no siempre hace falta. Si la persona abre la herramienta todos los días con conversaciones persistentes, un bloque grande de bienvenida estorba. Y si la IA vive dentro de otra pantalla, como un comentario en un documento, la IA en contexto suele necesitar un estado mucho más pequeño.

¿Cómo hacerlo accesible?

Lo usan también personas con lector de pantalla o solo con teclado. Revisa cuatro cosas:

• El orden de foco. Al abrir el chat, el foco debe llegar al campo de entrada sin recorrer antes todas las sugerencias.
• Las sugerencias como botones de verdad. Si se pueden tocar, deben ser botones con un nombre claro y alcanzables con el teclado.
• El contraste del texto de propósito. Las frases de bienvenida suelen ir en gris claro, y es justo el texto que más importa.
• Los mensajes de estado. Si la conversación se vacía tras una acción, el criterio 4.1.3 de WCAG 2.2 (nivel AA) pide que el mensaje se identifique por código, por ejemplo con role="status", para que el lector de pantalla lo anuncie sin mover el foco.

Si hay animación, el criterio 2.2.2 de WCAG (nivel A) exige poder pausarla, detenerla u ocultarla cuando dura más de cinco segundos y empieza sola.

¿Cómo saber si funciona?

Mide cuánta gente envía un primer mensaje y cuánto tarda en hacerlo. SetProduct sugiere seguir el tiempo hasta el primer valor y el uso del botón principal. Si la mayoría toca una sugerencia, el empty state funciona como menú; si casi nadie escribe nada, la pantalla no explica bien para qué sirve. Los números dicen que algo pasa, pero no por qué. Para eso, pídele a alguien que nunca usó la herramienta que la abra y piense en voz alta.

Ejemplo

Ejemplo ilustrativo: un asistente de un estudio de diseño muestra un chat vacío que dice solo “¿En qué te ayudo?”. Alguien nuevo lo abre, escribe “Hola”, recibe una respuesta genérica y cierra la pestaña.

El equipo cambia el estado. Ahora hay una frase, “Asistente para investigación y revisión de diseño”, una acción principal, “Resumir notas de una entrevista”, y tres sugerencias cortas. Debajo queda el campo de entrada visible. Cada sugerencia, al tocarla, llena el campo con un texto editable. El primer mensaje deja de ser “Hola” y pasa a ser una tarea concreta.

Errores comunes

• Dejar solo el campo vacío, sin propósito ni ejemplo.
• Escribir un saludo genérico como única guía.
• Usar el mismo estado para un chat nuevo y para una búsqueda sin resultados.
• Enviar la sugerencia automáticamente al tocarla, sin dejar editarla.
• Mostrar ilustraciones animadas sin opción de pausa.
• Poner la acción principal fuera de la primera pantalla visible.

Fuentes

• HAX Design Library: guías y patrones (Microsoft)
• Guidelines for Human-AI Interaction: Eighteen best practices for human-centered AI design (Microsoft Research)
• Prompt Starters (AI UX Playground)
• Empty state UI design: turn blank screens into next steps (SetProduct)
• Understanding SC 4.1.3: Status Messages (W3C)
• Understanding SC 2.2.2: Pause, Stop, Hide (W3C)