Tiroir d'applications
Présentation
Le tiroir d'applications (auparavant appelé « QuickView ») est un conteneur qui affiche des informations supplémentaires liées à la page principale. Il flotte sur la zone de contenu principale et permet aux utilisateurs d'accéder à du contenu et des actions supplémentaires sans accéder à une nouvelle page.
Quand l'utiliser
- Pour afficher des informations supplémentaires, le contexte ou des détails sur le contenu de la page principale.
- Pour les mini-flux liés au contenu de la page principale.
- Lorsque du contenu supplémentaire nécessite plus d'espace (par exemple, filtres, formulaires et détails de section).
- Pour les opérations Créer, Lire, Mettre à jour et Supprimer (CRUD).
- Pour prévisualiser le contenu sans accéder à une nouvelle page.
Quand ne pas l'utiliser
- Pour exécuter des flux qui ne sont pas liés au contenu de la page principale. Utilisez plutôt une nouvelle page.
- Si vous souhaitez forcer les utilisateurs à effectuer une action avant de continuer. Utilisez plutôt une fenêtre modale.
Structure
Le modèle de tiroir d'applications se compose des éléments suivants :
- En-tête (obligatoire) : contient un en-tête H2 et une icône de fermeture qui permet à l'utilisateur de quitter la vue.
- Corps (obligatoire) : le contenu principal est placé ici. Il peut être en lecture seule, modifiable, avec des onglets avec des sections, des liens, des filtres, des formulaires, etc. Le corps peut défiler.
- Pied de page (facultatif) : contient des boutons d'action qui déclenchent le contenu dans le tiroir d'applications. La position du pied de page est fixe.
Directives générales
- Utilisez une icône, un lien ou un bouton sur la page principale pour ouvrir le tiroir d'applications. N'utilisez pas une ligne entière de la table.
- Placez une superposition sur votre contenu principal s'il doit être inactif lorsque le panneau est ouvert.
- Le panneau peut être fermé de plusieurs façons :
- à partir du bouton fermer de l'en-tête
- à partir du bouton fermer dans le pied de page (dans certains cas)
- utilisation de la touche ECHAP
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.
Onglets
Si le contenu d'un tiroir d'applications est complexe, placez-le dans des onglets pour une meilleure structure. Nous vous recommandons d'utiliser un maximum de 4 onglets. Utilisez le mode d'exploration si vous avez plus de contenu à afficher.
Liens et mode d'exploration
Si votre cas d'utilisation nécessite plus de 4 onglets dans un tiroir d'applications, nous vous recommandons d'utiliser des liens. Après avoir cliqué sur un lien, une nouvelle sous-page apparaît (appelée mode d'exploration) où l'utilisateur peut voir des informations plus détaillées avec la possibilité de revenir en arrière (dans l'en-tête du tiroir d'applications). Si votre cas d'utilisation nécessite plus de 3 niveaux de sous-pages dans le tiroir d'applications, nous vous recommandons d'utiliser une page séparée. Insérez toujours un bouton de retour lorsque vous êtes en mode d'exploration.
| Liens | Mode d'exploration |
|---|---|
 |  |
Interactions
Redimensionnement
Le tiroir d'applications peut être redimensionné lorsqu'un utilisateur fait glisser son bord. Nous vous recommandons de définir une largeur maximale égale à 50 % de la largeur de l'écran et une largeur minimale égale à 30 % de la largeur de l'écran.
Réactivité
Pour les expériences mobiles, le tiroir d'applications occupera toujours toute la largeur de l'écran.
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érience utilisateur ont analysé les modèles de sept autres bibliothèques de conception. Ils ont recherché les forces et les faiblesses relatives, les tendances et les différences. Les concepteurs ont pris ces informations, trouvé des points communs et créé un modèle basé sur ces pratiques.
Composants associés
Ressources
Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.