coastdigitalgroup/coastai-skills

Sistema de Estado Vacío

Propósito

El Sistema de Estado Vacío proporciona un marco para diseñar pantallas o componentes que aparecen cuando no hay datos que mostrar. En lugar de mostrar una pantalla en blanco o un mensaje genérico de "No se encontraron resultados", este sistema trata los estados vacíos como oportunidades para la incorporación, la educación y el descubrimiento proactivo. Transforma posibles puntos muertos en momentos productivos que mantienen el impulso del usuario y aclaran la utilidad del sistema.

Casos de Uso

• Experiencias de Primera Ejecución: Cuando un usuario inicia sesión por primera vez y aún no ha creado ningún contenido (por ejemplo, un panel o lista de proyectos vacíos).
• Resultados de Búsqueda: Cuando la consulta de búsqueda de un usuario devuelve cero coincidencias.
• Filtrado: Cuando una combinación de filtros activos da como resultado una cuadrícula vacía.
• Contenedores Vacíos: Elementos de UI específicos como un carrito de compras vacío, un centro de notificaciones vacío o una lista de favoritos recién creada.
• Estados de Error: Cuando el contenido no se carga debido a problemas de permisos o conexión (caso de uso secundario).

Cuándo NO Usarlo

• Estados de Carga: Utilice una pantalla esqueleto o un spinner cuando se espera que el contenido aparezca en breve.
• Páginas "Muertas" Permanentes: Utilice una página 404 para enlaces rotos o recursos eliminados.
• Contenido Parcial: Si hay algunos datos disponibles pero limitados, use patrones de diseño estándar en lugar de un estado vacío.
• Fondos Pasivos: No lo use para secciones que están destinadas a estar en blanco por diseño (por ejemplo, márgenes o espacios en blanco decorativos).

Entradas

1. Tipo de Escenario Vacío: ¿Es un estado despejado por el usuario (éxito), un estado de primera ejecución (incorporación) o un fallo de búsqueda (descubrimiento)?
2. Intención del Usuario: ¿Qué intentaba lograr o encontrar el usuario?
3. Propuesta de Valor Principal: ¿Cuál es el beneficio principal del contenido que falta actualmente?
4. Acciones Disponibles: ¿Cuál es el "mejor siguiente paso único" para el usuario?

Salidas

1. Plano del Estado Vacío: Una definición estructural que incluye ilustración, título, texto del cuerpo y llamada a la acción principal.
2. Lógica Contextual: Reglas sobre cuándo y dónde se debe activar el estado vacío.
3. Estrategia de Descubrimiento: Recomendaciones de contenido sugerido o consejos educativos para llenar el vacío.

Flujo de Trabajo

1. Identificar el Disparador Vacío

Determine por qué el estado está vacío. Clasifíquelo para elegir el tono correcto:

• Primera ejecución (Educativo): Fomente la primera acción de "crear".
• Despejado por el usuario (Positivo): Reconozca la finalización (por ejemplo, "¡Todo al día!").
• Búsqueda/Filtro (Ayudante): Proporcione formas de ampliar o cambiar la búsqueda.

2. Establecer Jerarquía Visual

Estructurar el estado vacío usando la "Regla de los Tres Puntos" (modificada para estados vacíos):

• El Ancla (Visual): Un icono o ilustración que no distraiga y que marque el tono.
• El Contexto (Mensaje): Un título claro que explique por qué está vacío y un texto del cuerpo que explique cómo cambiarlo.
• El Objetivo (CTA): Un botón principal que active la creación de contenido o restablezca los filtros.

3. Redactar Texto Orientado a la Acción

• Título: Sea específico. En lugar de "Sin elementos", use "Aún no has creado ningún proyecto".
• Cuerpo: Ofrezca valor. "Los proyectos te ayudan a organizar tus tareas. Crea tu primero para empezar."
• CTA: Use verbos basados en beneficios. "Crear Proyecto" o "Iniciar Prueba Gratuita".

4. Proporcionar Caminos de Descubrimiento (Acciones Secundarias)

Si no hay una acción directa de "crear" (como en la búsqueda), ofrezca alternativas:

• Restablecer: Un enlace para borrar todos los filtros.
• Sugerencias: Categorías populares o sugerencias de "¿Quiso decir?".
• Educación: Enlace a documentación o un video tutorial.

5. Definir Restricciones Técnicas

• Capacidad de Respuesta: Asegúrese de que el estado vacío permanezca centrado y legible en pantallas pequeñas.
• Accesibilidad: Use roles ARIA apropiados (por ejemplo, role="status") para asegurar que el estado se anuncie cuando aparezca dinámicamente.

Reglas de Decisión

• La Regla de una Acción: Concéntrese en EXACTAMENTE UNA acción principal para evitar abrumar al usuario en un momento de posible confusión.
• Empatía sobre Humor: Si bien un poco de personalidad está bien, priorice la claridad y la utilidad. Evite textos "ingeniosos" que oculten la solución.
• Directo vs. Indirecto:
  • Si el usuario puede solucionarlo (por ejemplo, primera ejecución), use una CTA principal.
  • Si el usuario no puede solucionarlo (por ejemplo, fallo de búsqueda), use sugerencias o enlaces de restablecimiento.
• Relevancia de la Imagen: Use ilustraciones que refuercen el contexto específico (por ejemplo, una lupa para búsqueda, una carpeta para archivos).

Restricciones

• Accesibilidad: Las ilustraciones de estado vacío deben tener aria-hidden="true" o ser puramente decorativas. El texto debe cumplir con las relaciones de contraste WCAG AA. La CTA principal y cualquier enlace/botón secundario deben cumplir con WCAG 2.2 SC 2.5.8 (tamaño mínimo objetivo de 24x24 píxeles).
• Escala: Los estados vacíos no deben exceder el ancho del contenedor del contenido real que reemplazan.
• Consistencia: Use el mismo estilo visual y diseño para todos los estados vacíos en todo el sitio para construir reconocimiento de patrones.

Patrones de Falla Comunes

• El "Punto Muerto": Decirle al usuario que algo está vacío sin decirle cómo solucionarlo.
• Sobre Diseño: Usar ilustraciones complejas y pesadas que distraen de la CTA principal.
• Tono Negativo: Usar lenguaje que suena como un error o un fracaso (por ejemplo, "¡Búsqueda Fallida!").
• Texto Genérico: Usar "Sin resultados" para todo, desde la búsqueda hasta la incorporación por primera vez.
• Desbordamiento Móvil: Diseños que se ven geniales en escritorio pero requieren desplazamiento vertical en móvil solo para ver la CTA.

Criterios de Validación

• El estado vacío explica claramente por qué está apareciendo.
• Hay una CTA principal clara y procesable o una ruta de "restablecimiento".
• La jerarquía visual dirige la mirada desde el elemento visual hasta la CTA.
• El tono coincide con el contexto (incorporación vs. fallo de búsqueda).
• El estado es accesible (contraste, navegación por teclado, anuncios de lectores de pantalla mediante role="status" o región viva equivalente).
• La CTA principal cumple con WCAG 2.2 SC 2.5.8 (tamaño mínimo objetivo de 24x24 píxeles).
• El diseño es responsivo y está centrado dentro de su contenedor principal.