Empty states y consejos de UX

1) Por qué se necesitan estados vacíos

• explica por qué está vacío,
• muestra lo que hay que hacer a continuación,
• ofrece un primer paso seguro,
• reduce la ansiedad y ahorra tiempo de soporte.

2) Tipología de estados empty

1. Primer lanzamiento (first-time): el usuario aún no ha hecho nada.
2. Sin datos (zero data): las entidades no se han creado o la lista está vacía.
3. Filtros/búsquedas (no resultados): las condiciones excluyeron todo.
4. Error/inaccesibilidad temporal: red/servidor, pero los datos están disponibles en principio.
5. No hay derechos/restricciones: el acceso está prohibido, se requiere CCA/función/límite.
6. Mantenimiento - trabajos programados, espera.

3) Estructura de la tarjeta empty

Icono/ilustración (no sobrecargar; contraste ≥ AA).
Título de una línea: «Aquí todavía está vacío».
Causa/contexto: «Aún no has añadido» .../« El filtro no ha encontrado coincidencias ».
1-2 acciones (CTA): primaria (escenario principal), secundaria (alternativa).
Link para ayuda (opcional).
Nivel de página: mantenga la navegación y los filtros habituales - no convierta la pantalla en un callejón sin salida.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Tono y texto (redacción en UX)

Claro y benévolo. Evite «Error 0x»....

Causa → acción. El "filtro "VIP" excluyó todos los registros. ¿Restablecer el filtro?"

Sin culpa. No culpen al usuario por el vacío.
Un pensamiento es una frase.
Localización: evite las metáforas culturales; escriba el + 20-30% de la longitud del texto.

5) Ilustraciones y visual

Neutrales, discretos; en un tema oscuro, mejore el brillo de las ilustraciones.
No utilice las ilustraciones como único medio de significado.
Escala fija; no rompa la malla y la línea base.

6) CTA y alternativas

El CTA primario es el siguiente paso principal (crear/depositar/suscribirse).
El secundario es «ver demo», «importar», «restablecer filtros».
Límite para elegir: hasta 2 CTA; El resto está en «Más».
En los riesgos/pagos - texto transparente sobre las consecuencias y la cancelación.

7) Estados vacíos por scripts

7. 1 Primer lanzamiento

Una lista de comprobación de 3-5 pasos: «Añadir método de pago», «Seleccionar proveedor».
Botón «Omitir» + enlace a hyde.

7. 2 No hay datos

Una breve explicación de «por qué está vacío» + CTA «Crear »/« Importar».
Sugerencia: «Puede cargar CSV» (enlace a la plantilla).

7. 3 Filtros/búsqueda

Muestre qué filtros están activos y el botón Restablecer.
Ofrezca coincidencias cercanas o consultas alternativas.

7. 4 Error/inaccesibilidad

"Nos enfrentamos a un problema. Intente más tarde" + "Repetir "/" Estado del sistema".