Fiedback UX en estados vacíos

1) Qué son los estados vacíos y por qué son necesarios

Un estado en blanco es una pantalla/widget donde el contenido principal está temporalmente ausente: hasta la primera acción, después de la limpieza, con resultado cero, en caso de error de carga, en ausencia de derechos/acceso.

• explicar «por qué está vacío aquí»;
• mostrar el valor de la sección;
• proponer un paso siguiente claro (o más para elegir);
• reducir la ansiedad y prevenir los cuidados.

Buen estado vacío = contexto + uso + acción.

2) Tipología de estados vacíos

1. Cero primario (empty-time-first): el usuario aún no ha creado/configurado nada.
2. Cero búsqueda/filtro: la consulta no dio resultados.
3. Vacío temporal: los datos se envían o la cola se ejecuta.
4. Restricción/derecho: no hay acceso, no hay suficiente nivel de verificación.
5. Limpiado por el usuario: cesta/historial limpiado.
6. Error técnico: fallo de la red/servicio, retroceso.

3) Principios de diseño

Contextualidad: hablamos de una causa específica de vacío.
Valor → acción: primero por qué esta sección, luego qué hacer.
Un CTA maestro: si es necesario - secundario (aprender más/preguntas frecuentes).
Brevedad y especificidad: 1-2 frases + botón claro.
Soporte visual: el icono/ilustración mantiene el significado, no distrae.
Evitar callejones sin salida: siempre hay un camino a seguir.
Coherencia de tono: amistoso y tranquilo; sin bromas en pasos críticos (pagos, seguridad).
A11y y localización: legible por el screenrider, se inclina correctamente, tiene en cuenta la longitud de las líneas.

4) Marco de estado vacío (patrón)

Título (opcional, 1 línea): declaración de valor o causa.
Texto (1-2 frases) - «por qué está vacío» + «qué sigue».
La CTA primaria es la acción principal de destino.
CTA secundario/referencia - ayuda/normas/documentación.
Visual (opcional) - fácil ilustración 24-96 px, no sobrecargar.

5) Patrones por script

5. 1 Onboarding/primer cero

Objetivo: conducir a la primera acción exitosa.
Texto: «Para ver recomendaciones personales, rellena un perfil y elige intereses».
CTA: «Rellenar perfil »/« Seleccionar intereses».
Consejo: agregue un micro indicador de esfuerzo/tiempo: «Tomará ~ 1 minuto».

5. 2 Búsqueda/filtros = resultado cero

Objetivo: ayudar a ajustar la solicitud.

Texto: "No se encuentra nada por "live blackjack". Prueba el "blackjack" o quita el filtro "Proveedor: X ""

CTA: «Restablecer filtros» secundario: «Abrir directorio».

5. 3 Pagos/billetera vacía

Objetivo: estimular la adición de método/primera reposición.
Texto: «Guardar el método de pago - recarga y los retiros serán más rápidos».
CTA: «Añadir método de pago» secundario: «Reglas y comisiones».

5. 4 Verificación/acceso

Objetivo: explicar de forma transparente la limitación y la vía de retirada.

Texto: "Esta sección está disponible después de la confirmación de identidad. Normalmente tarda hasta 2 minutos"

CTA: «Pasar la verificación» secundaria: «¿Por qué es necesario?»

5. 5 Datos de viaje/vacío temporal

Objetivo: reducir la ansiedad de la expectativa.

Texto: "Recopilamos sus datos. Normalmente tarda hasta 30 segundos. Puede dejar la página - le notificaremos cuando todo esté listo"

CTA: «Claro» secundario: «¿Qué va a pasar después?»

5. 6 Después de la limpieza/eliminación

Objetivo: confirmar la acción y proponer el siguiente paso.

Texto: "Historia borrada. Las nuevas operaciones aparecerán después de la próxima reposición"

CTA: «Depositar fondos en la cuenta».

5. 7 Error/retroceso

Objetivo: un camino claro de recuperación.

Texto: "No se pueden cargar los datos. Compruebe la red o inténtelo de nuevo"

CTA: «Repetir» secundario: «Estado del sistema».

6) Microtextos: patrones terminados

• "Los juegos favoritos aparecerán aquí cuando agregues el primero. [Añadir a Favoritos"

• "Bajo petición "{query}" no se encontró nada. Refine la consulta o restablezca los filtros. [Restablecer filtros]"

• "Todavía no tienes los métodos guardados. Agregue una tarjeta o billetera para acelerar los pagos. [Agregar método]"

• "La función no está disponible sin confirmación de edad. Esto tomará ~ 2 minutos. [Confirmar la edad] [¿Por qué es necesario?]"

• "Contamos las estadísticas de las últimas 24 horas... Normalmente es hasta 30 segundos. Mostraremos una notificación cuando todo esté listo"

• "El servicio no está disponible. Ya lo estamos arreglando. Inténtelo más tarde o compruebe el estado. [Repetir] [Estado del sistema]"

7) Lenguaje visual e ilustraciones

Use ilustraciones monocromáticas/bicolores ligeras para no discutir con CTA.
Dimensiones y sangría - como la tarjeta de contenido (consistencia visual).
No retrate escenas humorísticas en escenarios estresantes (pago/seguridad).

8) Localización y disponibilidad

Coloque el margen en la longitud de las filas (DE/TR más largo).
Transfiera formatos numéricos, moneda, fechas localmente.
Para los captores de pantalla: role = «status», aria-live = «polite/assertive» para los altavoces.
No ponga el significado sólo en la imagen: duplique con el texto.
Compruebe la legibilidad en 320 px y el contraste en WCAG.

9) Métricas y experimentos

• CTR según el CTA principal del estado vacío;
• la conversión al «primer éxito» (evento de activación);
• tiempo hasta la primera acción;
• frecuencia de retorno a la pantalla sin progreso;
• Porcentaje de resultados de búsqueda nulos;
• Solicitudes de apoyo para situaciones hipotéticas.

• un título específico vs general;
• El verbo de acción CTA vs es neutral;
• agregar una estimación del tiempo;
• la presencia de un CTA secundario (FAQ) y el orden de los botones;
• ilustración vs icono vs sin visual.

10) Anti-patrones

«Aquí está vacío» sin explicación ni paso.
Bromas en pasos críticos (pago, seguridad).
Un CTA «Aprender más» sin referencia al contexto.
Fianza pasiva: «debe añadirse». Escribe activamente: «Añadir»....
Párrafos largos: 1-2 frases máximo.
Playsholder en lugar de la etiqueta en las formas - empeora la A11y y la comprensión.
Restricciones ocultas («instantáneamente», aunque es posible un retraso).

11) Lista de verificación antes del lanzamiento

• ¿Está claro por qué está vacío?
• ¿Hay valor de sección en una frase?
• ¿Hay un CTA principal y, si es necesario, un CTA secundario?
• El texto es breve (≤ 140 signos) y específico?
• ¿Se ha añadido una estimación del tiempo/esfuerzo, si procede?
• ¿El tono coincide con el escenario (calma/soporte)?
• ¿Se verificó la localización y la A11y (aria-atributos, contraste)?
• ¿La imagen no domina la CTA?

12) Ejemplos de «antes/después»

Catálogo de juegos (primer cero)

Antes: «No hay nada aquí todavía»

Después: "Recoge tu cinta. Elija 3 géneros favoritos - comencemos a recomendar. [Seleccionar géneros]"

Búsqueda nula

Antes: «No hay nada encontrado»

Después: "Por "ruleta de alto límite" no hay resultados. Retire el filtro «High-limit» o intente «roulette». [Restablecer filtros]"

Pagos

Antes: «No hay métodos de pago»

Después: "Guarda tu tarjeta o billetera - las reposiciones y los retiros serán más rápidos. [Añádase el método] [de la Comisión y los plazos]"

Verificación

Antes: «Sin acceso»

Después: "La sección está disponible después de la confirmación de identidad. Toma ~ 2 minutos. [Aprobar la verificación] [Por qué es importante]"

13) Incrustación en el sistema de diseño

• 'title' (cadena, opcional)
• 'cuerpo' (texto corto 1-2 de la frase)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration' (opcional)

Almacene los textos en archivos i18n cerca del componente, mantenga las claves y descripciones, conecte el mapa de tono (tono y vocabulario por situaciones).

14) Diseñador rápido (copiar y utilizar)

• Título: «Comience con el primer paso»
• Texto: «Habrá recomendaciones aquí tan pronto como elija los intereses».
• CTA: «Elegir intereses»
• Secundario: «¿Cómo funciona esto?»

• Texto: "Por "{query}" no se encontró nada. Restablezca los filtros o refine la solicitud"
• CTA: «Restablecer filtros»
• Secundario: «Directorio»

• Texto: "La función está disponible después de confirmar la edad. Normalmente es hasta 2 minutos "
• CTA: «Confirmar edad»
• Secundario: «¿Por qué necesitas esto?»

• Texto: "Recopilamos datos por día. Normalmente es hasta 30 segundos. Lo notificaremos cuando todo esté listo"
• CTA: «Bien»

Parche final

Contexto + valor + acción - en una «pila».
Un CTA principal sin competencia de peso visual.
Breve y específico: 1-2 frases.
Siempre saliendo del callejón sin salida: no hay pantallas sin salida.
La localización y la A11y se establecen a nivel de componente.