Cette page a été traduite par l'API Cloud Translation.

Guide de style pour les modules complémentaires Editor

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

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:

Utilisez le package CSS de modules complémentaires dans vos pages de service HTML.
En cas de doute sur la conception, recherchez une boîte de dialogue ou une barre latérale similaires dans l'éditeur et associez-les à celles-ci, ou consultez le guide de démarrage rapide du module complémentaire.
Suivez ce guide de style pour créer une expérience fluide.

Texte

Nom du module complémentaire

Vous devez définir le nom de votre module complémentaire lorsque vous le publiez. Ce nom s'affiche à de nombreux endroits, par exemple sur la plate-forme de téléchargement dédiée et dans les menus.

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 30 caractères. Les noms longs peuvent être automatiquement tronqués.
N'incluez pas le nom du produit Google auquel le module complémentaire est destiné (ou utilisez le mot "Google").
N'indiquez aucune information sur la version.
Assurez-vous que le nom publié du module complémentaire est identique à celui du projet de script. Le nom du projet apparaît dans la boîte de dialogue d'autorisation.

À éviter	À faire

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 étiquettes et les éléments de menu).
Privilégiez les textes courts et simples, sans jargon ni acronymes.

À éviter	À faire

Conseil post-installation

Votre conseil post-installation apparaît juste après qu'un utilisateur a installé votre module complémentaire. Il s'affiche également dans l'aide. Vous avez quelques phrases pour aider les utilisateurs à démarrer rapidement.

Commencez par un mot d'action.
Décrivez la première étape pour utiliser votre module complémentaire.
Si vous disposez d'une interface utilisateur principale, telle qu'une barre latérale, expliquez comment l'ouvrir.
N'effectuez pas la promotion de votre module complémentaire ici, car il est déjà installé.

À éviter	À faire

Éléments de menu

Contrairement aux projets Apps Script standards, les modules complémentaires n'apparaissent pas dans l'éditeur de scripts ni dans le gestionnaire de scripts. Les utilisateurs ne peuvent donc pas exécuter directement ces scripts. Chaque module complémentaire a sa place dans le menu des 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 joue un rôle essentiel dans la façon dont les utilisateurs contrôlent votre module complémentaire. Vous devez donc concevoir sa structure et sa formulation avec soin.
Évitez les éléments de menu qui répètent simplement le nom de votre module complémentaire. Commencez plutôt par un mot d'action.
Si votre élément de menu principal lance un workflow et qu'il n'y a pas de verbe qui décrit sa fonction, appelez-le "Start" (Démarrer). Ce modèle est utilisé dans le guide de démarrage rapide du module complémentaire Docs.
Essayez de ne pas utiliser de sous-menus, sauf si votre menu comporte plus de six éléments. Ils peuvent être pointus et difficiles à sélectionner.
Décrivez la tâche, et non le composant d'interface utilisateur que l'élément de menu affiche.

À éviter	À faire

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 les instructions try...catch pour intercepter les exceptions, puis affichez un message d'erreur friand avec du texte intégré stylisé dans la classe error à partir du package CSS des modules complémentaires ou une alerte.
Avant de le publier, vérifiez que votre module complémentaire n'enregistre pas d'informations de débogage dans la console JavaScript. Utilisez plutôt Stackdriver Logging.

À éviter	À faire

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" redirige vers cette page. À moins que le module complémentaire ne soit explicite, veuillez fournir une page expliquant comment l'utiliser.

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 non plus à ajouter un lien vers votre contenu d'aide à partir de 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 de l'éditeur peuvent être contrôlés entièrement via leur menu, mais la plupart affichent une barre latérale ou une boîte de dialogue avec du contenu personnalisé.

Les barres latérales sont idéales pour les outils persistants que les utilisateurs sont susceptibles d'utiliser plusieurs fois lorsqu'ils se réfèrent au contenu de leur document ou feuille de calcul.
Les boîtes de dialogue sont idéales pour les outils à usage unique, les pages de paramètres et les messages importants.

Texte de l'interface utilisateur

Dans les boîtes de dialogue ou les barres latérales, partez du principe que les utilisateurs ne lisent que le titre et les libellés des boutons. Peuvent-ils toujours comprendre ce que fait votre interface et faire un bon choix ?

Utilisez un titre et des libellés de bouton distincts.
Évitez les longs blocs de texte descriptif.

Boîtes de dialogue

Les boîtes de dialogue sont idéales pour les outils que les gens utilisent une fois, puis passent à 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 différents éléments à insérer, puis fermer la boîte de dialogue une fois l'image insérée. 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 de boîte de dialogue (y compris une alerte ou une invite) provenant d'une autre boîte de dialogue. Affichez-la uniquement une à la fois.
Pour le titre de la boîte de dialogue, utilisez un mot ou une phrase courte, en commençant par le mot le plus important.
Les libellés des boutons doivent être liés au titre des boîtes de dialogue.
Il est préférable d'utiliser 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 à gauche et les boutons secondaires gris doivent être à droite.

À éviter	À faire

Barres latérales

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. Elles permettent également aux internautes d'utiliser votre module complémentaire plusieurs fois. Chaque fois qu'une nouvelle barre latérale est ouverte, la barre latérale précédente se ferme automatiquement. Elles sont idéales pour les modes temporaires que l'utilisateur quitte une fois qu'il a terminé.

Les utilisateurs peuvent disposer d'autres modules complémentaires dotés de leurs propres barres latérales. Si deux modules complémentaires tentent d'ouvrir les barres latérales simultanément, un seul est affiché.
N'affichez 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 fonctionnant 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.

Commandes

Des modules complémentaires de qualité laissent de la place à leurs commandes. Des marges et un remplissage adéquats sont très utiles, alors que des commandes denses peuvent sembler écrasantes. En cas de doute, empruntez une mise en page à l'éditeur lui-même. Par exemple, examinez les boîtes de dialogue existantes dans Google Docs, telles que Fichier > Configuration de la page, lorsque vous créez les vôtres.

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

Boutons

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

Évitez d'afficher plus d'un bouton bleu, rouge ou vert à la fois. Les boutons gris peuvent apparaître à plusieurs reprises.
La plupart des libellés des boutons doivent être en majuscule et commencer par un verbe. Les boutons rouges, généralement pour les actions de création, doivent être en majuscules.

À éviter	À faire

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.

Ne modifiez pas le comportement des cases à cocher pour imiter les cases d'option.
Ne faites rien immédiatement lorsqu'elles sont vérifiées. Les gens font des erreurs. Attendez que les utilisateurs cliquent sur un bouton pour confirmer leurs choix.

Sélectionner des menus

Les sélections sont un excellent moyen de proposer une courte liste d’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, envisagez d'utiliser une autre commande. Par exemple, vous pouvez afficher une liste déroulante pour laisser plus d'espace au menu et faciliter la navigation.

Les zones de texte

Si les utilisateurs ont besoin de plus de quelques mots, utilisez une zone de texte.

Les zones de texte doivent avoir une hauteur d'au moins deux lignes afin qu'elles soient plus faciles à utiliser et qu'elles ne ressemblent pas à des champs de texte.
Placez les étiquettes sur le dessus.

Champs de texte

Utilisez des champs de texte si les utilisateurs n'ont qu'un mot ou deux à saisir.

La largeur d'un champ de texte doit suggérer ce que vous attendez des utilisateurs.
Évitez d'utiliser un texte d'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 des détails supplémentaires.
Placez les étiquettes sur le dessus, mais n'hésitez pas à disposer les petits champs de texte côte à côte.

Branding

Dans votre module complémentaire

Si vous souhaitez inclure des éléments de branding, soyez bref et léger. 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" et n'utilisez pas d'icônes de produits Google.
Le texte ne doit pas comporter plus de quelques mots et doit avoir un style dans la classe gray du package CSS de modules complémentaires.
Les images doivent être sur un fond blanc et ne pas dépasser 200 x 60 pixels.
Pour les boîtes de dialogue, le branding doit se trouver en bas à droite.
Pour les barres latérales, le branding peut s'afficher en haut ou en bas.

En magasin

Pour publier un module complémentaire de l'éditeur, vous avez besoin d'un nombre d'éléments Image. Ces éléments sont utilisés pour créer la fiche Play Store du module complémentaire.

Tous les aspects de votre fiche Play Store doivent respecter les consignes relatives à la marque.
Pour en savoir plus sur les images que vous devez fournir, consultez les consignes relatives aux images.

Accessibilité

Tout le monde devrait pouvoir profiter de votre module complémentaire, qu'ils voient les couleurs différemment, qu'ils utilisent un lecteur d'écran ou qu'ils aient d'autres besoins. L'accessibilité est un sujet vaste qui ne peut pas être entièrement traité dans ce guide de style. Le site Google Accessibilité est une ressource utile. Voici toutefois quelques conseils pour commencer:

Vérifiez que vous pouvez accéder à toutes les commandes de l'interface utilisateur à l'aide du clavier. Ajout de tabindex=0 aux commandes personnalisées (comme celles créées avec <div>) afin que les utilisateurs puissent y accéder via la touche de tabulation. Déterminez si d'autres touches doivent également être acceptées, telles que les flèches pour afficher une liste.
Certaines personnes peuvent utiliser un lecteur d'écran avec votre module complémentaire. Ainsi, les images doivent disposer d'un attribut alt et les commandes personnalisées doivent comporter des attributs ARIA pour décrire leur utilisation.
Ne vous fiez pas uniquement à la couleur pour communiquer un état. Utilisez aussi 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.