Saltar al contenido principal

Carga de archivo

Descripción general​

Cargar un archivo es una tarea esencial en varios flujos de usuario. El patrón de carga de archivo ofrece orientación y un inicio rápido para implementar esta funcionalidad en cualquier producto con más flexibilidad de la que puede permitir un componente.

Cuándo se debe utilizar​

Cuando los usuarios deben cargar y enviar documentos, archivos de datos o archivos de imagen.

Cuándo no se debe utilizar​

Para la entrada de texto. Utilice un control de entrada, como entrada de texto o área de texto.

Anatomía​

El patrón de carga de archivo incluye un rótulo de identificación, texto explicativo, un botón y un área de destino opcional para arrastrar y soltar que se recomienda siempre que sea posible.

Anatomía del patrón de carga de archivo

  1. Rótulo: Informa a los usuarios sobre el propósito de la sección de carga.
  2. Texto explicativo: Indica a los usuarios qué cargar y cómo hacerlo.
  3. Botón: Abre una ventana del sistema para localizar y seleccionar archivos.
  4. Destino de arrastrar y soltar: Delimita el área donde el usuario puede arrastrar y soltar archivos.
  5. Contenedor de estado del archivo: Muestra los elementos de estado de carga del archivo.
  6. Encabezado del contenedor de estado del archivo: Muestra el estado de carga y el desencadenador de expansión.
  7. Elemento de estado del archivo: Muestra el nombre del archivo cargado, junto con su tamaño y la barra de progreso.

Pautas generales​

  • Incluya el objetivo de arrastrar y soltar siempre que sea posible.
  • Informe al usuario sobre el estado y los resultados de cada carga y de la sesión de carga en general.
  • Utilice mecanismos de validación apropiados en la interfaz de usuario, y devuelva mensajes de validación que informen al usuario y lo ayuden a saber qué acción correctiva llevar a cabo.

Permiten a los usuarios:

  • Utilizar el mecanismo de selección de archivos de su sistema operativo nativo.
  • Cancelar una carga en curso.

Interacciones​

  • El usuario hace clic en el botón Cargar archivo, lo que abre la ventana de selección de archivos de su sistema operativo nativo. Desde aquí, pueden navegar hasta los archivos deseados y seleccionarlos para iniciar el proceso de carga.
  • Otra alternativa es que el usuario puede arrastrar los archivos seleccionados sobre el área de destino para iniciar el proceso de carga.
  • Se informa al usuario sobre el estado de la carga de cada archivo.
  • En caso de error, el usuario puede adoptar medidas correctivas en función del mensaje de validación y repetir el proceso con los archivos afectados.

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Rótulo​

El rótulo comunica al usuario el propósito de la sección de carga de archivos. Use un encabezado claro y conciso. Limítese a una sola línea de texto.

Por ejemplo: Documentos de un siniestro.

Texto explicativo​

El texto explicativo comunica instrucciones junto con detalles importantes, como los tipos y tamaños de archivo permitidos.

Por ejemplo: El tamaño máximo del archivo es 500 MB. Los tipos de archivo admitidos son .jpg, .png y .pdf.

Botón​

El botón abre una ventana del sistema para localizar y seleccionar archivos. Use un rótulo que refleje el objetivo de la selección. El texto predeterminado que aparece es Cargar archivo.

Siga las pautas de redacción para botones.

Capacidad de ser responsive​

El patrón de carga de archivo incluye un botón con un rótulo de texto que responde igual que otros botones y rótulos del sistema de diseño. Cuando se utiliza el área de destino para arrastrar y soltar, esta área se expande para llenar su contenedor y el botón y el rótulo permanecen centrados horizontal y verticalmente. El rótulo se ajusta según sea necesario de forma predeterminada para que sea completamente visible para el usuario.

Tematización​

El patrón de carga de archivo utiliza un botón secundario de forma predeterminada y un rótulo de texto, mientras que el destino de arrastrar y soltar utiliza colores neutros para el fondo y un borde discontinuo de forma predeterminada. Todos estos elementos reflejarán cualquier cambio temático que afecte a sus estilos.

Para obtener información sobre cómo tematizar las experiencias de producto con tokens de diseño, consulte la descripción general de los tokens de diseño.

Investigación que lo avala​

La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron cómo otras empresas y sistemas de diseño manejan la carga de archivos y revisaron los patrones que utilizan en su flujo. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Esto llevó a la decisión de mantener el flujo de carga de archivos lo más simple posible y utilizar el proceso de selección de archivos del sistema operativo nativo. Esto permite al usuario aprovechar su experiencia previa, y se reduce así la carga cognitiva.

Componentes​

Patrones​

Arrastrar y soltar

Recursos​

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)