Guide de style de l'interface utilisateur pour les modules complémentaires Google Workspace

Les modules complémentaires Google Workspace doivent être cohérents avec le style et la mise en page application hôte qu'elles s'étendent. Il doit étendre l'UI naturellement en utilisant des commandes et des comportements familiers. Les directives présentées décrivent ici des façons de gérer le texte, les images, les commandes et l'image de marque qui mettent en avant une expérience utilisateur de haute qualité.

Si votre module complémentaire ouvre des pages Web distinctes qui font partie intégrante du (par exemple, une page de paramètres du module complémentaire), assurez-vous que ces pages Web suivez également ces consignes de style.

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 son projet manifest et lorsque vous configurer votre module complémentaire pour la publication. Le nom apparaît à de nombreux endroits, par exemple sur Google Workspace Marketplace. dans une liste et dans les menus. Lorsque vous choisissez un nom:

  • Utilisez une majuscule au début de chaque mot.
  • Évitez la ponctuation, en particulier les parenthèses, sauf si elles font partie de votre marque.
  • Soyez concis. Nous vous recommandons de ne pas dépasser 15 caractères. Les noms longs peuvent être automatiquement tronquée dans la fiche Google Workspace Marketplace et ailleurs.
  • N'incluez pas les mots "Google", "Gmail" ni d'autres noms de produits Google. dans le nom du module complémentaire.
  • N'incluez pas le mot "module complémentaire". dans le nom du module complémentaire.
  • N'indiquez aucune information de version.

Style de rédaction

Vous ne devriez pas avoir besoin d'écrire beaucoup. La plupart des actions doivent être claires à travers l’iconographie, la mise en page et les étiquettes courtes. Si vous trouvez une partie du module complémentaire a besoin d'explications plus détaillées que ce que peuvent fournir les étiquettes courtes, de créer une page Web distincte décrivant votre module complémentaire et contenant un lien vers celle-ci.

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

  • Utilisez une majuscule en début de phrase (en particulier pour les boutons, les libellés et les actions de fiche).
  • Préférez un texte court et simple sans jargon ni acronyme.

Actions universelles et de fiches

Si vous utilisez des actions universelles ou des actions sur les fiches ils apparaissent sous forme d'éléments de menu dans les fiches que vous définissez. Vous pouvez choisir le texte utilisé dans ces menus pour ces actions. Lorsque vous choisissez le texte à utiliser:

  • Évitez que le texte du menu ne répète que le nom du module complémentaire.
  • Démarrez chaque élément de menu par un mot d'action tel que « Exécuter », « Configurer » ou « Créer ».
  • Décrivez la tâche, et non le composant d'interface utilisateur que l'action affiche.
  • Si votre action démarre un flux de travail et qu'il n'y a pas de verbe qui décrit pour savoir ce qu'il fait, appelez-le "Start" (Démarrer).
  • Limitez le nombre d'éléments de menu pour éviter de forcer l'utilisateur à faire défiler la page. à travers une longue liste. Si vous avez d'autres actions à implémenter, envisagez d'utiliser plusieurs cartes avec différentes actions sur chacune.

Messages d'erreur

En cas de problème, il est important d'utiliser un langage clair. Expliquez du point de vue de l'utilisateur et de suggérer comment le résoudre.

  • 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'UI.

Les contenus d'aide

Vous pouvez créer des cartes qui affichent des informations d'aide ou expliquent l'opération du module complémentaire à l'utilisateur. Si vous créez des contenus d'aide n'oubliez pas de:

  • Si possible, affichez les instructions sous forme de liste à puces ou de liste numérotée. Utilisateurs à pied jusqu'au résultat final, avec des références claires à des éléments d'interface utilisateur nommés.
  • Veillez à ce que vos instructions expliquent clairement toutes les exigences, comme la configuration une feuille de calcul d'une certaine manière.
  • N'hésitez pas à ajouter des liens vers des contenus d'aide externes, tels que des pages Web d'aide.

Images

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

Commandes

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

Boutons

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

  • La plupart des étiquettes des boutons de texte doivent commencer par un verbe.
  • Dans la plupart des cas, les lignes de boutons doivent être limitées à trois boutons ou moins.

DecoratedText

Widgets DecoratedText vous permettent de présenter du texte à l'aide d'icônes, de boutons ou de commutateurs.

  • Utilisez une majuscule en début de phrase pour le contenu du texte.
  • Le texte d'un widget DecoratedText est tronqué s'il ne peut pas tenir dans le l'espace disponible. C'est pourquoi vous devez toujours essayer de conserver aussi courte que possible.

Saisies pour la sélection

Vous pouvez utiliser différents widgets d'entrée pour la sélection dans votre module complémentaire: boîtes de sélection déroulantes, cases à cocher et cases d'option.

  • Utilisez des cases à cocher lorsque les utilisateurs peuvent sélectionner plusieurs options ou n'en sélectionner aucune. Utilisez des cases d'option (ou un menu de sélection) lorsqu'une seule option doit être sélectionnée. Utilisez les menus déroulants lorsque vous fournissez une courte liste d’alternatives lorsque vous essayez de 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 les changements de sélection pour déclencher des actions majeures et difficiles à inverser, car les utilisateurs font souvent des erreurs lorsqu'ils font des sélections. Envisagez plutôt en ajoutant un bouton qui lit les valeurs de la sélection actuelle, puis qui se déclenche l'action.
  • Pour les menus déroulants, triez les options par ordre alphabétique ou selon un schéma logique. facilement compréhensibles par tous les utilisateurs (par exemple, en présentant les jours de la semaine dans l'ordre, à partir du dimanche ou du lundi).
  • Limiter le nombre d'options dans une entrée de sélection donnée le widget à un nombre raisonnable. S'il y a trop d'options, les utilisateurs peuvent trouver il est difficile d'utiliser le widget. Dans ce cas, envisagez de supprimer 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 de texte pour faire en sorte que l'utilisateur fasse partie d'un ensemble spécifique de les entrées possibles. Utilisez plutôt un menu déroulant.
  • Utilisez des indices et des suggestions pour aider l'utilisateur à saisir le texte approprié le format et le contenu.
  • Utilisez des entrées de texte multilignes si le texte à saisir comporte plusieurs lignes mots.

Branding

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

Dans votre module complémentaire

Si vous souhaitez inclure le branding dans l'interface utilisateur de votre module complémentaire, soyez bref et léger. Cela permet aux utilisateurs de 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 le nom d'autres produits Google.
  • N'incluez pas les icônes des produits Google, même si elles ont été modifiées.
  • N'incluez pas le mot "module complémentaire". dans le texte de votre branding.
  • Le texte de la marque ne doit pas comporter plus de 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 Fiche Google Workspace Marketplace.

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