Chargement de fichier
Présentation
Le chargement d'un fichier est une tâche essentielle dans plusieurs flux utilisateur. Le modèle de chargement de fichier offre des conseils et un démarrage rapide pour l'implémentation de cette fonctionnalité dans tout produit avec plus de flexibilité qu'un composant ne peut en offrir.
Quand l'utiliser
Lorsque les utilisateurs doivent charger et soumettre des documents, des fichiers de données ou des fichiers image.
Quand ne pas l'utiliser
Pour la saisie de texte. Utilisez un contrôle de saisie tel qu'une entrée de texte ou une zone de texte.
Structure
Le modèle de chargement de fichier comprend une étiquette d'identification, un texte explicatif, un bouton et une zone cible de glisser-déposer facultative recommandée lorsque cela est possible.
- Étiquette : informe les utilisateurs de l'objectif de la section de chargement.
- Texte explicatif : indique aux utilisateurs ce qu'ils doivent charger et comment.
- Bouton : ouvre une fenêtre système pour localiser et sélectionner des fichiers.
- Cible glisser-déposer : définit la zone dans laquelle l'utilisateur peut glisser-déposer des fichiers.
- Conteneur de statut de fichier : affiche les éléments de statut de chargement de fichier.
- En-tête du conteneur de statut de fichier : affiche le statut de chargement et le déclencheur de développement.
- Élément de statut du fichier : affiche le nom du fichier téléchargé, ainsi que la taille du fichier et la barre de progression.
Directives générales
- Inclure la cible glisser-déposer dans la mesure du possible.
- Informer l'utilisateur du statut et des résultats de chaque chargement et de la session de chargement globale.
- Utiliser les mécanismes de validation appropriés sur l'interface utilisateur, renvoyant des messages de validation qui informent l'utilisateur et l'aident à savoir quelle action corrective prendre.
Autoriser les utilisateurs à :
- Utiliser le mécanisme de sélection de fichiers de leur système d'exploitation natif.
- Annuler un chargement en cours.
Interactions
- L'utilisateur clique sur le bouton Charger le fichier, qui ouvre la fenêtre de sélection de fichiers de son système d'exploitation natif. À partir de là, il peut accéder aux fichiers qu'il souhaite charger et les sélectionner, puis lancer le processus de chargement.
- L'utilisateur peut également faire glisser les fichiers sélectionnés sur la zone cible pour lancer le processus de chargement.
- L'utilisateur est informé du statut de chaque chargement de fichier.
- En cas d'erreur, l'utilisateur peut prendre des mesures correctives en fonction du message de validation et répéter le processus avec les fichiers concernés.
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
Étiquette
L'étiquette communique l'objectif de la section de chargement de fichier à l'utilisateur. Utilisez un titre clair et concis. Limitez votre saisie à une seule ligne de texte.
Par exemple : documents de sinistre
Texte explicatif
Le texte explicatif communique des instructions ainsi que des détails importants, tels que les types et les tailles de fichier autorisés.
Par exemple, la taille de fichier maximale est de 500 Mo. Les types de fichiers pris en charge sont .jpg, .png et .pdf.
Bouton
Le bouton ouvre une fenêtre système pour localiser et sélectionner des fichiers. Utilisez une étiquette qui reflète l'objectif de la sélection. Le texte par défaut qui s'affiche est Charger le fichier.
Suivez les instructions de rédaction du bouton.
Réactivité
Le modèle de chargement de fichier inclut un bouton avec une étiquette textuelle qui répond de la même manière que les autres boutons et étiquettes dans le système de conception. Lorsque la zone cible de l'action glisser-déposer est utilisée, elle se développe pour intégrer dans son conteneur le bouton et l'étiquette centrés horizontalement et verticalement. L'étiquette est incluse dans un wrapper par défaut selon les besoins afin d'être entièrement visible pour l'utilisateur.
Création de thèmes
Le modèle de chargement de fichier utilise un bouton secondaire par défaut et une étiquette textuelle, tandis que la zone cible de l'action glisser-déposer utilise des couleurs neutres pour l'arrière-plan et une bordure en pointillés par défaut. Tous ces éléments reflètent les modifications de thème affectant leurs styles.
Pour en savoir plus sur la façon de créer des thèmes pour les expériences produit avec les jetons de conception, reportez-vous à la présentation des jetons de conception.
Prise en charge de la recherche
La recherche de ce modèle a consisté en une analyse concurrentielle. L'analyse concurrentielle est une technique de recherche que vous pouvez utiliser pour comparer et comprendre ce sur quoi les autres travaillent dans le même domaine. Les concepteurs d'expériences utilisateur ont analysé la façon dont d'autres entreprises et systèmes de conception gèrent les chargements de fichiers et ont examiné les modèles qu'ils utilisent dans leur flux. Ils ont recherché les forces et les faiblesses relatives, les tendances et les différences. Cela a conduit à la décision de garder le flux de chargement de fichiers aussi simple que possible et d'utiliser le processus de sélection de fichiers du système d'exploitation natif. Cela permet à l'utilisateur de tirer parti de son expérience antérieure, réduisant ainsi la charge cognitive.
Composants et modèles connexes
Composants
Modèles
Ressources
Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.