Sistema de Carga y Gestión de Archivos

¿Qué hace Sistema de Carga y Gestión de Archivos?

Propósito

El Sistema de Carga y Gestión de Archivos proporciona una metodología para diseñar la experiencia completa de transferencia de archivos desde el dispositivo de un usuario hasta un servidor. Asegura que el proceso sea transparente, recuperable y accesible. Este sistema define los estados de interacción del desencadenante de carga (zonas de colocación), el ritmo espacial de la cola de carga y los bucles de retroalimentación (progreso, éxito y error) necesarios para mantener la confianza del usuario durante operaciones de alta latencia.

Casos de Uso

• Sistemas de Gestión de Contenidos (CMS): Diseño de bibliotecas multimedia y cargadores de activos.
• Aplicaciones SaaS: Implementación de gestión de documentos, importaciones CSV o archivos adjuntos de perfil de usuario.
• Herramientas de Gestión de Proyectos: Estructuración de archivos adjuntos dentro de tareas o comentarios.
• Herramientas Creativas: Diseño de cargadores de gran volumen para fotos, videos o archivos de diseño.
• Interfaces de Almacenamiento en la Nube: Gestión de operaciones complejas de carga de carpetas y archivos.

Cuándo NO Usar

• Archivos de Texto Pequeños: Si el "archivo" es solo un fragmento pequeño de texto, usa un área de texto estándar o la implementación-copiar-al-portapapeles.
• Transferencias Automatizadas por el Sistema: Donde el usuario no desencadena ni monitorea la carga (por ejemplo, telemetría en segundo plano).
• Fotos de Perfil de Entrada Única: Aunque este sistema aplica, un desencadenante "Avatar" simple (del sistema-de-avatar-de-usuario) podría ser más apropiado para actualizaciones de una sola imagen de baja complejidad.
• Activos Estáticos: Para activos que son parte del código del sitio (por ejemplo, iconos, imágenes de tema), que se gestionan a través de flujos de trabajo de desarrollador.

Entradas

1. Restricciones de Tipo y Tamaño de Archivo: ¿Qué está permitido (PDF, JPG, PNG) y cuáles son los tamaños máximos?
2. Expectativa de Volumen: ¿El usuario está cargando un archivo a la vez o 50+ archivos en lote?
3. Contexto de la Carga: ¿Esta es una tarea independiente (por ejemplo, "Importar Datos") o una acción de apoyo (por ejemplo, "Adjuntar al Mensaje")?
4. Requisitos de Metadatos: ¿El archivo necesita un título, descripción o etiquetas durante el proceso de carga?
5. Tokens del Sistema: Escalas de espaciado, color y tipografía del sistema de diseño principal.

Salidas

1. Especificación de Anatomía de la Zona de Colocación: Definiciones visuales para el desencadenante de carga (estados Inactivo, Hover, Activo y Deshabilitado).
2. Plano de Gestión de Cola: La organización espacial de los elementos de la lista "Pendiente", "Cargando" y "Completado".
3. Matriz de Progreso y Retroalimentación: Tratamientos visuales para barras de progreso, indicadores de porcentaje y estados de éxito/error.
4. Jerarquía de Acciones: Reglas para acciones "Cancelar", "Reintentar", "Eliminar" y "Editar" dentro de la lista de archivos.

Flujo de Trabajo

1. Diseñar el Desencadenante de Carga (La Zona de Colocación)

Establece una invitación clara para la interacción:

• Estado Inactivo: Usa un borde discontinuo o sólido con un icono (generalmente una nube hacia arriba o un clip) y una instrucción clara (por ejemplo, "Arrastra y Suelta o Haz Clic para Cargar").
• Estado de Arrastre Superpuesto: Cambia el color de fondo o el estilo del borde para proporcionar retroalimentación inmediata de que el área está lista para recibir el archivo.
• Respaldo Móvil: Asegúrate de que la zona de colocación siga siendo un botón grande y táctil (mín. 24x24px según WCAG 2.2 SC 2.5.8, se recomienda 44x44px) que abra el selector de archivos nativo del sistema.

2. Establecer la Cola de Carga

Gestiona múltiples archivos sin saturar la interfaz:

• Retroalimentación Inmediata: Tan pronto como se seleccione un archivo, agrégalo a una lista debajo o dentro del desencadenante.
• Anatomía del Archivo: Cada elemento de la lista debe incluir:
  • Miniatura/Icono: Para ayudar al usuario a identificar el tipo de archivo o contenido.
  • Nombre y Tamaño del Archivo: Para confirmar que se eligió el archivo correcto.
  • Indicador de Progreso: Una barra o círculo que muestre el estado de la carga.
  • Acciones: Una forma de cancelar una carga en curso o eliminar una completada.

3. Proporcionar Retroalimentación de Estado Detallada

Usa el sistema-de-progreso-por-pasos y el sistema-de-estados-interactivos para los estados del archivo:

• Cargando: Muestra una barra de progreso y, para cargas largas, el porcentaje o "X de Y MB" cargados.
• Éxito: Usa un color semántico de "Éxito" (verde) y un icono de marca de verificación. Proporciona una acción "Ver" o "Enlace".
• Error: Usa un color semántico de "Error" (rojo). Proporciona una razón clara (por ejemplo, "Archivo demasiado grande") y un botón "Reintentar".

4. Diseñar para la Gestión de Archivos (Post-Carga)

Define cómo los usuarios interactúan con sus activos cargados:

• Edición de Metadatos: Si se necesitan títulos o descripciones, proporciona edición en línea o un modal de "Configuración".
• Eliminación: Usa un icono de "Papelera" con un paso de confirmación para acciones destructivas.
• Vista de Cuadrícula vs. Lista: Para cargas con muchos archivos multimedia, proporciona una vista de cuadrícula de miniaturas; para cargas con muchos documentos, usa una vista de lista para la densidad de metadatos.

5. Planificar para el Apilamiento Responsivo

• La Cola Compacta: En dispositivos móviles, colapsa los metadatos (como el tamaño del archivo) y prioriza el nombre del archivo y la barra de progreso.
• Enfoque en Pantalla Completa: Para cargadores complejos (como un importador CSV con mapeo), usa una superposición de pantalla completa para eliminar distracciones.

Reglas de Decisión

• La "Regla de Entrada Instantánea": Los archivos deben aparecer en la interfaz de usuario en el momento en que se sueltan/seleccionan, incluso si la solicitud real al servidor aún no ha comenzado.
• Visibilidad del Progreso: Usa una barra de progreso para cualquier archivo que tarde >1 segundo en cargarse. Para cargas muy rápidas, transiciona directamente al estado "Éxito".
• Acciones por Lote: Si el usuario puede cargar 5+ archivos, proporciona una acción "Limpiar Todo" o "Cargar Todo" para gestionar la cola colectivamente.
• Gestión de Conflictos: Define qué sucede si existe un archivo con el mismo nombre (por ejemplo, "Mantener Ambos", "Reemplazar", "Omitir").
• Estado Vacío: Si la biblioteca multimedia está vacía, usa el sistema-de-estado-vacío para proporcionar un botón "Cargar" como CTA principal.

Restricciones

• Accesibilidad:
  • La zona de colocación debe ser enfocable y operativa mediante las teclas Espacio o Intro.
  • Usa aria-live="polite" para anunciar el progreso de la carga y la finalización a los lectores de pantalla (evita inundar con cada tic de porcentaje).
  • Las entradas de archivo deben tener una <label> oculta pero accesible.
  • Asegúrate de que el foco nunca quede atrapado detrás de la zona de colocación o la lista de progreso (WCAG 2.4.11 Foco No Obscurecido): los encabezados fijos o los avisos emergentes no deben cubrir el elemento enfocado.
  • Los objetivos táctiles para las acciones Cancelar/Reintentar/Eliminar deben cumplir al menos 24x24px (WCAG 2.2 SC 2.5.8); se prefiere 44x44px para acciones principales.
• Capacidad de Respuesta: Las zonas de colocación deben ser fluidas y nunca causar desbordamiento horizontal.
• Contraste: Las barras de progreso y los mensajes de error deben cumplir con las relaciones de contraste WCAG AA (4.5:1).

Patrones de Falla Comunes

• El "Fallo Silencioso": Una carga falla, pero la interfaz de usuario no proporciona retroalimentación, dejando al usuario esperando indefinidamente.
• Progreso Desvaneciente: La barra de progreso desaparece antes de que la carga se haya finalizado realmente, causando "Ansiedad de Última Etapa".
• Zonas de Colocación Pequeñas: Crear un objetivo pequeño que es difícil de alcanzar con un ratón o el pulgar.
• Falta de "Cancelar": No permitir que un usuario detenga una carga grande y accidental.
• Errores Obscuros: Mostrar "Error 500" en lugar de "El servidor está ocupado actualmente, por favor inténtalo de nuevo en un momento".

Criterios de Validación

• La zona de colocación tiene estados distintos: Inactivo, Hover y Arrastre superpuesto.
• Cada archivo en la cola muestra nombre, tamaño y progreso.
• Los estados de Éxito y Error se indican tanto con color como con iconos.
• Los usuarios pueden cancelar o eliminar archivos de la cola.
• Se utilizan regiones vivas ARIA para las actualizaciones de estado.
• El diseño es responsivo y maneja nombres de archivo largos de manera adecuada.
• Todos los elementos interactivos cumplen con el mínimo de objetivo táctil de 24x24px de WCAG 2.2 (se prefiere 44x44px).