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

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

Les modules complémentaires des éditeurs créent des interfaces utilisateur (menus, barres latérales et boîtes de dialogue) à l'aide du service HTML d'Apps Script. Les interfaces étant développées en HTML et en CSS, elles sont hautement personnalisables. Toutefois, lorsque vous créez votre interface complémentaire, vous devez la concevoir pour offrir une expérience utilisateur optimale.

Les meilleurs modules complémentaires étendent naturellement chaque éditeur à l'aide de commandes et de comportements familiers. Lorsque vous créez un module complémentaire:

Texte

Nom du module complémentaire

Vous devez définir le nom de votre module complémentaire lorsque vous le publiez. Ce nom apparaît à de nombreux endroits, par exemple dans la boutique de modules complémentaires et dans les menus.

  • 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 30 caractères. Les noms longs peuvent être tronqués automatiquement.
  • N'incluez pas le nom du produit Google auquel le module complémentaire est destiné (ou utilisez le mot Google).
  • N'indiquez pas les informations de version.
  • Assurez-vous que le nom publié du module complémentaire est identique au nom de fichier du projet de script. Le nom du projet s'affiche dans la boîte de dialogue d'autorisation.
À ne pas faire À faire
Noms de modules complémentaires incorrects Noms de modules complémentaires appropriés

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:

  • Utilisez des majuscules (en particulier pour les boutons, les libellés et les éléments de menu).
  • Préférez un texte simple et court sans jargon ni acronyme.
À ne pas faire À faire

Conseil post-installation

Votre conseil post-installation s'affiche juste après que quelqu'un a installé votre module complémentaire, et s'affiche également dans l'aide. Voici quelques phrases pour aider les utilisateurs à se lancer rapidement.

  • Commencez par un mot d'action.
  • Décrivez la première étape d'utilisation de votre module complémentaire.
  • Si vous disposez d'une interface utilisateur principale telle qu'une barre latérale, expliquez comment l'ouvrir.
  • Ne faites pas la promotion de votre module complémentaire, car il est déjà installé.
À ne pas faire À faire
Conseil après installation Bon conseil après l'installation

Contrairement aux projets Apps Script standards, les modules complémentaires ne s'affichent pas dans l'éditeur ni dans le gestionnaire de scripts. Les utilisateurs ne peuvent pas exécuter directement de scripts de modules complémentaires. Au lieu de cela, chaque module complémentaire s'affiche dans le menu Modules complémentaires. Le menu (et éventuellement une boîte de dialogue ou une barre latérale) permet aux utilisateurs d'interagir avec le module complémentaire.

  • Le menu est un élément clé de la manière dont les utilisateurs contrôlent votre module complémentaire. Par conséquent, concevez soigneusement la structure et les termes utilisés.
  • Évitez les éléments de menu qui se contentent de répéter le nom de votre module complémentaire. Commencez par un mot d'action.
  • Si l'élément de menu principal démarre un workflow et qu'il n'existe pas de verbe décrivant ce qu'il fait, appelez-le "Démarrer". Ce format est utilisé dans le guide de démarrage rapide du module complémentaire Docs.
  • À moins que votre menu ne comporte plus de six éléments, essayez de ne pas utiliser de sous-menus. Ils peuvent être difficiles à choisir.
  • Décrivez la tâche, et non le composant de l'interface utilisateur qui s'affiche dans l'élément de menu.
À ne pas faire À faire
Libellés d'éléments de menu incorrects Étiquettes d'éléments de menu de qualité

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 frustré avec un texte intégré stylisé dans la classe error du package CSS des modules complémentaires ou d'une boîte de dialogue d'alerte.
  • Avant de publier, vérifiez que votre module complémentaire n'enregistre pas d'informations de débogage dans la console JavaScript. Utilisez Stackdriver Logging à la place.
À ne pas faire À faire
Message d'erreur incorrect Message d'erreur correct

Les contenus d'aide

Le menu de chaque module complémentaire inclut une boîte de dialogue d'aide automatique. Si vous fournissez une URL d'aide lors de la publication, le bouton "En savoir plus" renvoie vers cette page. À moins que votre module complémentaire ne soit explicite, veuillez fournir une page expliquant son utilisation.

  • 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 à inclure un lien vers le contenu d'aide dans votre interface utilisateur principale. Si votre module complémentaire crée un nouveau document, vous pouvez également afficher des instructions dans le corps du document.

Interfaces utilisateur personnalisées

Certains modules complémentaires d'éditeur peuvent être contrôlés entièrement par leur menu, mais la plupart affichent une barre latérale ou une boîte de dialogue avec du contenu personnalisé.

  • Les barres latérales conviennent mieux aux outils persistants que les utilisateurs sont susceptibles d'utiliser de façon répétée lorsqu'ils se réfèrent au contenu de leur document ou feuille de calcul.
  • Elles sont idéales pour les outils à usage unique, les pages de paramètres et les messages importants.

Texte de l'interface utilisateur

Dans n'importe quelle boîte de dialogue ou barre latérale, supposons que les utilisateurs lisent uniquement le titre et les libellés des boutons. Peuvent-ils déterminer le fonctionnement de votre interface et faire un choix judicieux ?

  • Utilisez un titre et des libellés de bouton qui se nomment d'eux-mêmes.
  • Évitez les longs blocs de texte descriptif.

Boîtes de dialogue

Les boîtes de dialogue s'avèrent idéales pour les outils que les collaborateurs utilisent une fois avant de passer à autre chose. Par exemple, si votre module complémentaire permet aux utilisateurs d'insérer un graphique, vous pouvez afficher une boîte de dialogue proposant des options à insérer, puis la fermer une fois le graphique inséré. Les boîtes de dialogue sont également utiles pour afficher les paramètres de votre module complémentaire ou pour communiquer un message important.

  • N'ouvrez pas une boîte de dialogue (y compris une alerte ou invite) à partir d'une autre boîte de dialogue et n'affichez qu'une seule boîte à la fois.
  • Dans le titre de la boîte de dialogue, utilisez un mot ou une expression courte, en commençant par le mot le plus important.
  • Les libellés des boutons doivent correspondre au titre de la boîte de dialogue.
  • Privilégiez deux boutons, généralement une action principale et le bouton "Annuler". Pour les cas particuliers nécessitant un troisième bouton, pensez à l'angle inférieur droit.
  • Placez les boutons en bas à gauche de la boîte de dialogue. Le bouton principal bleu doit se trouver sur la gauche et les boutons secondaires gris vers la droite.
À ne pas faire À faire
Titre de la boîte de dialogue incorrect Titre de la boîte de dialogue de bonne qualité

Les barres latérales permettent aux utilisateurs de se référer à leur document, feuille de calcul, présentation ou formulaire tout en faisant des choix. Ils permettent également aux utilisateurs d'utiliser votre module complémentaire à plusieurs reprises. Chaque fois qu'une nouvelle barre latérale est ouverte, toutes les précédentes s'ouvrent automatiquement. Ils conviennent mieux aux modes temporaires que l'utilisateur quitte lorsqu'il a terminé.

  • Les utilisateurs peuvent disposer d'autres modules complémentaires avec leurs propres barres latérales. Si deux modules complémentaires tentent d'ouvrir des barres latérales simultanément, un seul s'affiche.
  • N'affiche pas de barre latérale ni de boîte de dialogue lorsqu'un document s'ouvre pour la première fois.
  • Seuls les modules complémentaires opérant dans AuthMode.FULL peuvent ouvrir des barres latérales ou des boîtes de dialogue. Vous pouvez utiliser un élément de menu pour ouvrir une barre latérale, car cela invite l'utilisateur à fournir une autorisation complète.

Contrôles

Les meilleures interfaces utilisateur pour les modules complémentaires laissent de la place à leurs commandes. Les marges et les marges adéquates peuvent s'avérer extrêmement utiles, tandis que les commandes denses peuvent sembler surchargées. En cas de doute, empruntez une mise en page à partir de l'éditeur lui-même. Par exemple, lorsque vous créez vos propres boîtes de dialogue, consultez, par exemple, Fichier > Configuration de la page.

La documentation du package CSS des modules complémentaires fournit des exemples de balises pour chacun des types de commandes ci-dessous.

Boutons

Contrôlez les actions principales de votre interface utilisateur au lieu de simples liens ou d'autres éléments à l'aide de boutons.

  • Évitez d'afficher plusieurs boutons bleus, rouges ou verts à la fois. Les boutons gris peuvent apparaître à plusieurs reprises.
  • La plupart des libellés des boutons doivent être en début de phrase et commencer par un verbe. Les boutons rouges, généralement pour les actions de création, doivent être en majuscules.
À ne pas faire À faire

Cases à cocher et cases d'option

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.

  • Ne modifiez pas les cases pour imiter les cases d'option.
  • Ne faites rien immédiatement lorsqu'ils sont vérifiés. Les gens font des erreurs. Attendez que vos utilisateurs cliquent sur un bouton pour confirmer leurs choix.

Sélectionner des menus

Les sélections sont un excellent moyen de proposer quelques alternatives.

  • Triez les options par ordre alphabétique ou selon un schéma logique que tous les utilisateurs peuvent comprendre (par exemple, les jours de la semaine à partir du dimanche).
  • Si la liste s'allonge trop, envisagez d'utiliser une autre commande. Par exemple, vous pouvez afficher une liste déroulante pour agrandir l'espace du menu et faciliter la navigation.

Les zones de texte

Si les utilisateurs doivent saisir plusieurs mots, utilisez une zone de texte.

  • Créez des zones de texte d'au moins deux lignes afin qu'elles soient plus faciles à utiliser et ne ressemblent pas à des champs de texte.
  • Placez les libellés sur le dessus.

Champs de texte

Utilisez des champs de texte s'il vous suffit de saisir un mot ou deux.

  • La largeur d'un champ de texte doit indiquer ce que les utilisateurs doivent saisir.
  • Évitez d'utiliser un espace réservé comme libellé, car il disparaît au premier plan. Le texte d'espace réservé est utile pour donner des exemples ou donner plus de détails.
  • Placez les libellés sur le dessus, mais n'hésitez pas à disposer les champs de texte courts côte à côte.

Branding

Dans votre module complémentaire

Si vous souhaitez inclure votre branding, soyez concis. Cela permet aux utilisateurs de se concentrer sur votre interface utilisateur et donne l'impression que votre module complémentaire fait partie de l'éditeur.

  • Tous les aspects de votre module complémentaire doivent respecter les consignes relatives à la marque.
  • N'incluez pas le mot "Google" ni d'icônes de produits Google.
  • Le texte ne doit pas dépasser quelques mots et doit être stylisé dans la classe gray à partir du package CSS des modules complémentaires.
  • Les images doivent être sur un fond blanc et ne doivent pas dépasser 200 x 60 px.
  • Pour les boîtes de dialogue, le branding doit apparaître en bas à droite.
  • Pour les barres latérales, le branding peut apparaître en haut ou en bas.

En magasin

Pour publier un module complémentaire d'éditeur, vous avez besoin d'un nombre d'éléments image. Ces éléments permettent de créer la fiche Play Store du module complémentaire.

Accessibilité

Tout le monde devrait pouvoir profiter de votre module complémentaire, que les couleurs soient différentes, qu'il utilise un lecteur d'écran ou qu'il ait d'autres besoins. L'accessibilité est un thème large qui n'est pas entièrement abordé dans ce guide de style. Le site Google Accessibilité est une ressource utile. Voici quelques conseils pour commencer:

  • Assurez-vous que vous pouvez accéder à toutes les commandes de l'interface utilisateur à l'aide du clavier. Ajoutez tabindex=0 aux commandes personnalisées (comme celles créées avec <div>) afin que les utilisateurs puissent les consulter. Déterminez si d'autres clés doivent également être acceptées, comme les flèches pour une liste.
  • Certaines personnes peuvent utiliser un lecteur d'écran avec votre module complémentaire. Ainsi, les images doivent comporter un attribut alt, et les commandes personnalisées doivent comporter des attributs ARIA pour décrire leur utilisation.
  • Ne vous fiez pas seulement à la couleur pour communiquer l'état. Utilisez également des icônes et du texte.

Si vous utilisez des commandes Web standards, telles que celles décrites précédemment dans ce guide, il est plus facile de rendre votre module complémentaire accessible.