Guide de style pour les modules complémentaires Google Workspace

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Google Workspace Les modules complémentaires doivent être cohérents avec le style et la mise en page de l'application hôte qu'ils étendent. Elles doivent étendre naturellement l'interface utilisateur à l'aide de commandes et de comportements familiers. Les consignes présentées ici décrivent les méthodes de traitement du texte, des images, des commandes et du branding qui favorisent une expérience utilisateur de haute qualité.

Si votre module complémentaire ouvre des pages Web distinctes faisant partie intégrante de son fonctionnement (par exemple, une page de paramètres pour le module complémentaire), assurez-vous que ces pages Web respectent également ces consignes de style.

Utiliser le Google Workspace kit de conception de modules complémentaires

Pour créer rapidement une expérience utilisateur fluide, les graphistes peuvent se servir du Google Workspace kit de conception d'UI pour les modules complémentaires disponible sur Figma. Vous pouvez créer un compte Figma offert ou demander une licence à l'administrateur de votre organisation.

Parcourez les composants de l'interface basée sur une carte, et utilisez des modèles intégrés pour créer et visualiser vos modules complémentaires.

Télécharger le kit de conception

Texte et images

Cette section vous explique comment utiliser correctement le texte et les images dans votre module complémentaire.

Nom du module complémentaire

Vous devez définir le nom de votre module complémentaire dans le fichier manifeste de son projet et lorsque vous configurez votre module complémentaire pour la publication. Ce nom apparaît à de nombreux endroits, par exemple dans la liste Google Workspace Marketplace, ainsi que dans les menus. Lorsque vous choisissez un nom:

  • Utilisez une majuscule au début de chaque mot.
  • Évitez les signes de ponctuation, en particulier les parenthèses, sauf s'ils font partie de votre marque.
  • Soyez concis : mieux vaut ne pas dépasser 15 caractères. Les noms longs peuvent être automatiquement tronqués dans la fiche Google WorkspaceMarketplace et ailleurs.
  • N'incluez pas les mots "Google", "Gmail" ni aucun autre nom de produit Google dans votre nom de module complémentaire.
  • N'incluez pas le terme "module complémentaire" dans le nom du module.
  • N'indiquez pas les informations de version.

Style de rédaction

Vous n'avez pas besoin d'écrire beaucoup. La plupart des actions doivent être claires à travers l'iconographie, la mise en page et les libellés courts. Si une partie de votre module complémentaire nécessite des explications plus détaillées que celles fournies par les libellés courts, il est recommandé de créer une page Web distincte décrivant votre module complémentaire et un lien vers celui-ci.

Lors de la rédaction d'un texte d'interface utilisateur:

  • Seule la première lettre doit être en majuscule (en particulier pour les boutons, les libellés et les actions sur la fiche).
  • Préférez un texte simple et court sans jargon ni acronyme.

Actions universelles et relatives aux fiches

Si vous utilisez des actions universelles ou des actions de fiches dans votre module complémentaire, elles apparaissent en tant qu'éléments de menu dans les fiches que vous définissez. Vous pouvez choisir le texte à utiliser dans ces menus. Lorsque vous choisissez le texte à utiliser:

  • Évitez les répétitions du nom de votre module.
  • Chaque élément du menu doit commencer par un mot tel que "Exécuter", "Configurer" ou "Créer".
  • Décrivez la tâche, et non le composant d'interface utilisateur affiché par l'action.
  • Si votre action démarre un workflow et qu'il n'existe pas de verbe décrivant ce qu'elle fait, appelez-la "Démarrer".
  • Limitez le nombre d'éléments de menu pour éviter que l'utilisateur ne fasse défiler une longue liste. Si vous avez d'autres actions à mettre en œuvre, envisagez d'utiliser plusieurs fiches avec chacune des actions différentes.

Messages d'erreur

En cas de problème, il est important d'utiliser un langage simple. Expliquer le problème du point de vue de l'utilisateur et suggérer une solution

  • Ne pas autoriser l'utilisateur à voir les exceptions générées par votre code. À la place, utilisez des instructions try...catch pour intercepter les exceptions, puis affichez un message d'erreur convivial.
  • Avant de publier, vérifiez que votre module complémentaire n'affiche pas d'informations de débogage dans l'interface utilisateur.

Les contenus d'aide

Vous pouvez concevoir des fiches qui affichent des informations d'aide ou expliquent le fonctionnement du module complémentaire à l'utilisateur. Si vous créez du contenu d'aide pour votre module complémentaire, n'oubliez pas les points suivants:

  • Si possible, affichez les instructions sous forme de liste à puces ou numérotée. Guidez les utilisateurs jusqu'au résultat final, avec des références claires aux éléments d'interface utilisateur nommés.
  • Assurez-vous que vos instructions expliquent clairement les exigences, par exemple pour configurer une feuille de calcul d'une certaine manière.
  • N'hésitez pas à ajouter des liens vers des pages d'aide externes, comme les pages Web correspondantes.

Images

Les images utilisées dans votre module complémentaire sont l'un des types d'icônes intégrées ou une image hébergée publiquement qui est spécifiée par une URL. Lorsque vous utilisez des images hébergées, assurez-vous qu'elles sont accessibles à tous les utilisateurs de votre module complémentaire.

Contrôles

Cette section fournit des consignes relatives à l'expérience utilisateur pour les widgets interactifs.

Boutons

Utilisez les boutons pour contrôler les actions principales de votre interface utilisateur plutôt que d'autres widgets.

  • La plupart des libellés de bouton de texte doivent commencer par un verbe.
  • Dans la plupart des cas, les lignes de boutons ne doivent pas comporter plus de trois boutons.

Texte_décoré

Les widgets DecoratedText vous permettent de présenter du contenu textuel à l'aide d'icônes, de boutons ou de boutons.

  • Seule la première lettre du titre doit être en majuscule.
  • Le texte d'un widget DécoréTexte est tronqué s'il ne peut pas être inséré dans l'espace disponible. Par conséquent, essayez de créer un contenu aussi court que possible.

Entrées de sélection

Vous pouvez utiliser divers widgets de saisie de sélection dans votre module complémentaire: cases à cocher, cases à cocher et cases d'option pour sélectionner des listes déroulantes.

  • Utilisez les cases à cocher lorsque les utilisateurs peuvent sélectionner plusieurs options ou n'en sélectionner aucune. Utilisez les cases d'option (ou un menu sélectionné) lorsqu'une seule option doit être sélectionnée. Utilisez les menus déroulants lorsque vous fournissez une courte liste d'alternatives tout en essayant d'économiser de l'espace dans l'interface utilisateur.
  • Utilisez une majuscule en début de phrase pour le texte attribué à chaque option.
  • Évitez d'utiliser des modifications de sélection pour déclencher des actions majeures difficiles à annuler, car les utilisateurs font souvent des erreurs lorsqu'ils font des sélections. Envisagez plutôt d'ajouter un bouton qui lit les valeurs de sélection actuelles, puis déclenche l'action.
  • Pour les listes déroulantes, triez les options par ordre alphabétique ou selon un schéma logique que tous les utilisateurs peuvent comprendre (par exemple, en présentant les jours de la semaine dans l'ordre, à partir du dimanche ou du lundi).
  • Limitez le nombre d'options d'un widget de saisie de sélection donné à un nombre raisonnable. S'il existe trop d'options, les utilisateurs peuvent avoir du mal à utiliser le widget. Dans ce cas, pensez à diviser l'option en différentes catégories et plusieurs widgets.

Saisies de texte

Les entrées de texte permettent aux utilisateurs de saisir des données de chaîne.

  • N'utilisez pas de saisie textuelle pour que le type d'utilisateur fasse partie d'un ensemble spécifique d'entrées possibles. Utilisez plutôt un menu déroulant.
  • Utilisez des conseils et des suggestions pour aider l'utilisateur à saisir du texte avec le bon format et le bon contenu.
  • Utilisez des entrées de texte multiligne si le texte à saisir comporte plusieurs mots.

Branding

Cette section fournit des consignes relatives à l'expérience utilisateur pour ajouter des éléments distinctifs à votre interface complémentaire.

Dans votre module complémentaire

Si vous souhaitez inclure votre branding dans l'interface de votre module complémentaire, soyez concis. Les utilisateurs pourront ainsi se concentrer sur les fonctionnalités de votre module complémentaire.

  • Tous les aspects de votre module complémentaire doivent respecter les consignes relatives à la marque.
  • N'incluez pas le mot "Google", "Gmail" ni d'autres noms de produits Google.
  • N'incluez pas les icônes des produits Google, même si elles ont été modifiées.
  • N'incluez pas le terme "module complémentaire" dans le texte de votre marque.
  • Le texte de branding ne doit pas dépasser quelques mots.

Dans Google Workspace Marketplace

Lorsque vous configurez votre module complémentaire pour la publication, vous fournissez un certain nombre d'éléments graphiques et textuels pour créer laGoogle Workspace fiche Marketplace.

Tous les aspects de votre fiche Play Store et de ces éléments doivent respecter les consignes relatives à la marque.