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

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

Modules complémentaires de l'éditeur créer des interfaces utilisateur (menus, barres latérales et boîtes de dialogue) à l'aide des scripts Service HTML : Comme les interfaces développés en HTML et CSS, et hautement personnalisables. Toutefois, lorsque lorsque vous créez l'interface de votre module complémentaire, vous devez la concevoir pour offrir expérience.

Les meilleurs modules complémentaires étendent naturellement les possibilités de chaque éditeur à l'aide de commandes familières comportements. Lorsque vous créez un module complémentaire:

Utilisez le package CSS de modules complémentaires dans votre Pages des services HTML.
En cas de doute sur la conception, accédez à une boîte de dialogue ou à une barre latérale similaire dans l'éditeur. ou faire référence à 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 publiez votre module complémentaire. Le nom apparaît à de nombreux endroits, tels que la boutique de modules complémentaires et dans les menus.

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. Il est préférable de ne pas dépasser 30 caractères. Les noms longs peuvent être automatiquement tronquées.
N'incluez pas le nom du produit Google auquel le module complémentaire est destiné (ni n'utilisez mot "Google").
N'indiquez aucune information de version.
Assurez-vous que le nom publié du module complémentaire est identique à celui du 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 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 éléments de menu).
Préférez un texte court et simple sans jargon ni acronyme.

À éviter	À faire

Conseil après installation

Le conseil après l'installation s'affiche dès qu'un utilisateur installe le module complémentaire. s'affiche dans l'aide. Vous avez quelques phrases pour aider les utilisateurs à commencer 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 ici : il est déjà installé.

À éviter	À faire

Éléments de menu

Contrairement aux projets Apps Script standards, les modules complémentaires ne s'affichent pas dans l'éditeur de script ou gestionnaire de scripts ; les utilisateurs ne peuvent pas exécuter directement des scripts de modules complémentaires. Au lieu de cela, tous les devient disponible dans le menu des modules complémentaires. Le menu (et éventuellement une boîte de dialogue ou une barre latérale) permet les utilisateurs interagissent avec le module complémentaire.

Le menu est un élément clé de la façon dont les utilisateurs contrôlent votre module complémentaire, alors concevez son une structure et une 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 mot d'action.
Si votre élément de menu principal lance un workflow et qu'il n'y a pas de verbe unique décrit ce qu'il fait, appelez-le « Start ». Ce modèle est utilisé dans 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 délicats 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 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. Utilisez plutôt try...catch pour intercepter les exceptions, puis afficher un message d'erreur convivial avec du texte intégré stylisé dans la error à partir du CSS des modules complémentaires un package ou une boîte de dialogue d'alerte.
Avant de publier, vérifiez que le module complémentaire n'enregistre pas les informations de débogage dans la console JavaScript, utiliser Stackdriver Logging à la place.

À é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 la page "En savoir plus" renvoie vers cette page. À moins que votre se passe d'explication, veuillez fournir une page expliquant comment l'utiliser.

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 également à ajouter un lien vers le contenu d'aide dans l'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 simples peuvent être contrôlés entièrement par le menu, mais la plupart afficher une barre latérale ou une boîte de dialogue avec des de votre contenu.

Les barres latérales sont idéales pour les outils persistants que les gens sont susceptibles d'utiliser de façon répétée tout en faisant référence au contenu de son document ou de sa 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 une boîte de dialogue ou une barre latérale, partez du principe que les utilisateurs ne lisent que le titre et les libellés des boutons. Peuvent-ils comprendre à quoi sert votre interface et faire un bon choix ?

Utilisez un titre et des libellés de boutons indépendants.
É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 passez à autre chose. Par exemple, si votre permet aux utilisateurs d'insérer un graphique, vous pouvez afficher une boîte de dialogue ce qu'il faut insérer, puis fermez la boîte de dialogue une fois l'image insérée. Les boîtes de dialogue sont Il est également utile pour afficher les paramètres de votre module complémentaire ou pour communiquer message important.

N'ouvrez pas de boîte de dialogue (y compris alerte ou invite) depuis une autre boîte de dialogue, mais uniquement afficher un par un.
Pour le titre de la boîte de dialogue, utilisez un mot ou une courte phrase, en commençant par la ligne la plus le mot important.
Les étiquettes des boutons doivent correspondre au titre de la boîte de dialogue.
Préférez deux boutons, généralement ceux d'action principale et "Annuler". Cas particuliers qui nécessitent un troisième bouton, pensez à l'angle inférieur droit.
Placez les boutons dans le coin inférieur gauche de la boîte de dialogue. Le bouton principal bleu doit se trouver à gauche, avec les boutons secondaires gris à 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 de formulaire tout en faisant des choix. Elles permettent également aux autres utilisateurs d'utiliser votre module complémentaire à plusieurs reprises. Lorsqu'une nouvelle barre latérale est ouverte, les précédentes se ferment automatiquement. Elles conviennent mieux aux modes temporaires que l'utilisateur quitte une fois l'opération terminée.

Les utilisateurs peuvent avoir d'autres modules complémentaires avec leurs propres barres latérales. Si deux modules complémentaires essaient deux barres latérales simultanément, une seule s'affiche.
N'affichez pas de barre latérale ni de boîte de dialogue lorsqu'un document s'ouvre pour la première fois.
Uniquement les modules complémentaires AuthMode.FULL pour 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

Les interfaces utilisateur de modules complémentaires offrent un peu d'espace aux commandes. Des marges et la marge intérieure est très utile, alors que les commandes denses peuvent sembler écrasantes. Dans vous avez un doute, empruntez une mise en page à l'éditeur lui-même. Par exemple, examinez dans Google Docs, par exemple Fichier > Configuration de la page, lorsque vous créez les vôtres.

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

Boutons

Utilisez des boutons pour contrôler les actions principales de votre interface utilisateur plutôt que de manière simple des liens ou d'autres éléments.

Évitez d'afficher plusieurs boutons bleus, rouges ou verts à la fois. Gris les boutons peuvent apparaître plusieurs fois.
La plupart des étiquettes des boutons doivent être en majuscule et commencer par un verbe. rouge , généralement pour créer des actions, doivent être tout 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 des cases d'option (ou un menu de sélection) lorsqu'une seule option doit être sélectionnée.

Ne pas modifier les cases à cocher pour simuler les cases d'option.
Ne faites rien immédiatement lorsqu'ils sont vérifiés. Les gens font des erreurs. Attendre jusqu'à ce que vos 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 connaître. comprendre (comme les jours de la semaine, à partir du dimanche).
Si la liste s'allonge trop, envisagez d'utiliser un autre sélecteur. Par exemple, vous pouvez afficher une liste déroulante pour donner plus d'espace au menu et le rendre plus facile à parcourir.

Les zones de texte

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

Élaborez des zones de texte d'au moins deux lignes pour qu'elles soient plus faciles à utiliser et ressemblent à des champs de texte.
Placez les libellés par-dessus.

Champs de texte

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

La largeur d'un champ de texte doit indiquer ce que vous attendez des utilisateurs.
Évitez d'utiliser du texte d'espace réservé comme libellé, car il disparaîtra de l'élément d'interface actif. Le texte d'espace réservé est utile pour donner des exemples ou des détails supplémentaires.
Placez les libellés par-dessus, mais n'hésitez pas à mettre en page les champs de texte courts 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 vous aide les utilisateurs se concentrent sur l'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 être stylisé dans la gray du CSS du module complémentaire d'un package.
Les images doivent être sur fond blanc et ne doivent pas dépasser 200 × 60 pixels.
Pour les boîtes de dialogue, le branding doit se trouver dans l'angle inférieur droit.
Pour les barres latérales, le branding peut s'afficher en haut ou en bas.

Dans la boutique

Pour publier un module complémentaire d'édition, vous avez besoin d'un nombre de composants 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 apprécier votre module complémentaire, qu'il voie des couleurs différemment, utiliser un lecteur d'écran ou avoir d'autres besoins. L'accessibilité est un sujet qui ne peut pas être entièrement traité dans ce guide de style. Une ressource utile est le site Google Accessibilité. Mais ici, voici quelques conseils pour commencer:

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

Si vous utilisez des commandes Web standards, comme celles décrites plus tôt dans ce guide, ce qui rend votre module complémentaire accessible plus facilement.