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 de l'application hôte qu'ils étendent. Elles doivent étendre l'UI de manière naturelle à l'aide de commandes et de comportements familiers. Ces consignes 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 qui font partie intégrante de son opération (comme une page de paramètres), assurez-vous que ces pages Web respectent é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 le fichier manifeste de son projet et lorsque vous configurez votre module complémentaire pour sa publication. Le nom apparaît à de nombreux endroits, par exemple sur la fiche Google Workspace Marketplace 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, à moins qu'il ne s'agisse de votre marque.
  • Soyez concis : nous vous recommandons de ne pas dépasser 5 caractères. Les noms longs peuvent être automatiquement tronqués 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.
  • Le nom du module complémentaire ne doit pas contenir le mot "module complémentaire".
  • N'indiquez aucune information sur la version.

Style de rédaction

Vous ne devriez pas avoir besoin d'écrire grand-chose. La plupart des actions doivent être claires par l’iconographie, la mise en page et les libellés courts. Si vous estimez qu'une partie de votre module complémentaire nécessite plus d'explications que les libellés courts, nous vous recommandons de créer une page Web distincte décrivant votre module complémentaire et d'y indiquer un lien.

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 sur les fiches).
  • Privilégiez les textes courts et simples, sans jargon ni acronymes.

Actions universelles et sur les fiches

Si vous utilisez des actions universelles ou des actions de fiches dans votre module complémentaire, elles apparaissent sous la 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 les textes de menu qui répètent simplement le nom de votre module complémentaire.
  • Démarrez chaque élément de menu avec 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 lance un workflow et qu'il n'y a pas de verbe unique décrivant sa fonction, appelez-la "Start" (Démarrer).
  • Limitez le nombre d'éléments de menu pour éviter de forcer l'utilisateur à faire défiler une longue liste. Si vous avez d'autres actions à implémenter, envisagez d'utiliser plusieurs fiches avec des actions différentes sur chacune d'elles.

Messages d'erreur

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

  • Ne permettez pas à l'utilisateur de voir les exceptions que votre code génère. Utilisez plutôt des instructions try...catch pour intercepter les exceptions, puis affichez un message d'erreur convivial.
  • Avant de le 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:

  • Dans la mesure du possible, présentez les instructions sous forme de liste à puces ou de liste numérotée. Guidez les utilisateurs jusqu'au résultat final, en incluant des références claires aux éléments d'interface utilisateur nommés.
  • Assurez-vous que vos instructions expliquent clairement toutes les exigences, comme la configuration d'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 soit l'un des types d'icônes intégrés, soit une image hébergée publiquement 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.

Commandes

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

Boutons

Contrôlez les actions principales de votre interface utilisateur à l'aide de boutons plutôt que d'autres widgets.

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

Texte décoré

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

  • Utilisez une majuscule en début de phrase.
  • Le texte d'un widget DecoratedText est tronqué s'il ne peut pas tenir dans l'espace disponible. Pour cette raison, essayez toujours de rendre le contenu textuel aussi court que possible.

Entrées de sélection

Votre module complémentaire propose différents widgets d'entrée de sélection: cases 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 les cases d'option (ou un menu de sélection) lorsqu'une seule option doit être sélectionnée. Utilisez des listes déroulantes lorsque vous fournissez une courte liste d'alternatives tout en essayant de gagner 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 à inverser, car les utilisateurs font souvent des erreurs lors de leurs 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, présenter les jours de la semaine dans l'ordre, à partir du dimanche ou du lundi).
  • Limitez le nombre d'options dans un widget d'entrée de sélection donné à un nombre raisonnable. Si le nombre d'options est trop important, les utilisateurs peuvent avoir du mal à utiliser le widget. Dans ce cas, envisagez de 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 d'entrée de texte pour que le type d'utilisateur fasse partie d'un ensemble spécifique d'entrées possibles. Utilisez plutôt une sélection dans le menu déroulant.
  • Utilisez des conseils et des suggestions pour aider l'utilisateur à saisir du texte avec le format et le contenu appropriés.
  • Utilisez des entrées de texte multiligne si le texte à saisir comporte plus de quelques mots.

Branding

Cette section fournit des consignes sur l'expérience utilisateur pour ajouter des éléments de branding à l'interface de votre module complémentaire.

Dans votre module complémentaire

Si vous souhaitez inclure des éléments de branding dans l'interface utilisateur de vos modules complémentaires, soyez bref et concis. 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 d'autres noms de produits Google.
  • N'incluez pas d'icônes de 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 branding ne doit pas comporter plus de quelques mots.

Dans Google Workspace Marketplace

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

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