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

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 l'interface de votre module complémentaire, vous devez la concevoir pour offrir une expérience utilisateur de qualité.

Les meilleurs modules complémentaires étendent naturellement chaque éditeur en utilisant des commandes et des comportements familiers. Lorsque vous créez un module complémentaire:

Utilisez le package CSS des modules complémentaires sur les pages de votre service HTML.
En cas de doute concernant la conception, recherchez une boîte de dialogue ou une barre latérale similaire dans l'éditeur et faites-en correspondre une, ou consultez un tutoriel de démarrage rapide pour les modules complémentaires.
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. Le nom apparaît à de nombreux endroits, comme dans la boutique d'extensions et dans les menus.

Utilisez la casse de titre.
Évitez les signes de ponctuation, en particulier les parenthèses, sauf s'ils font partie de votre marque.
Faites court : 30 caractères maximum. Les noms longs peuvent être tronqués automatiquement.
N'incluez pas le nom du produit Google auquel le module complémentaire est destiné (ni le mot "Google").
Ne pas inclure d'informations sur la 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.

À éviter	À faire

Style de rédaction

Vous n'aurez pas besoin d'écrire beaucoup. La plupart des actions doivent être claires grâce à l'iconographie, à la mise en page et aux libellés courts. Si vous constatez qu'une partie de votre module complémentaire nécessite des explications plus détaillées que celles que peuvent fournir de courtes libellés, nous vous recommandons de créer une page Web distincte décrivant votre module complémentaire et d'y ajouter un lien.

Lorsque vous rédigez du texte pour l'interface utilisateur:

Utilisez la casse de phrase (en particulier pour les boutons, les libellés et les éléments de menu).
Privilégiez un texte court et simple, sans jargon ni acronymes.

À éviter	À faire

Conseil post-installation

Votre conseil post-installation s'affiche immédiatement après l'installation de votre module complémentaire et apparaît également dans l'aide. Vous disposez de quelques phrases pour aider les utilisateurs à se lancer rapidement.

Commencez par un verbe d'action.
Décrivez la première étape à suivre pour utiliser votre module complémentaire.
Si vous avez une UI principale, comme une barre latérale, expliquez comment l'ouvrir.
Ne faites 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 script ni dans le gestionnaire de scripts. Les utilisateurs ne peuvent pas exécuter directement les scripts de module complémentaire. À la place, chaque module complémentaire est affiché 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 est un élément clé de la façon dont les utilisateurs contrôlent votre module complémentaire. Concevez donc sa structure et son libellé avec soin.
Évitez les éléments de menu qui ne font que répéter 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'aucun verbe ne décrit ce qu'il fait, appelez-le "Démarrer". Ce modèle est utilisé dans le guide de démarrage rapide du module complémentaire Docs.
Sauf si votre menu comporte plus de six éléments, essayez de ne pas utiliser de sous-menus. Ils peuvent être difficiles à sélectionner.
Décrivez la tâche, et non le composant d'UI affiché par l'élément de menu.

À éviter	À faire

Messages d'erreur

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

N'autorisez pas l'utilisateur à voir les exceptions générées par votre code. Utilisez plutôt des instructions try...catch pour intercepter les exceptions, puis affichez un message d'erreur convivial avec du texte intégré stylisé dans la classe error du package CSS des modules complémentaires ou une boîte de dialogue Alerte.
Avant de publier votre module complémentaire, vérifiez qu'il ne consigne pas d'informations de débogage dans la console JavaScript. Utilisez plutôt la journalisation Stackdriver.

À é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. Sauf si votre module complémentaire est explicite, veuillez fournir une page expliquant comment l'utiliser.

Dans la mesure du possible, présentez les instructions sous forme de liste à puces ou numérotée. Guidez les utilisateurs jusqu'au résultat final, en faisant référence claire aux éléments d'interface utilisateur nommés.
Assurez-vous que vos instructions expliquent clairement les exigences, comme la configuration d'une feuille de calcul d'une certaine manière.
N'hésitez pas à ajouter un lien vers votre contenu d'aide depuis 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 simples de l'Éditeur peuvent être entièrement contrôlés 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 sont idéales pour les outils persistants que les utilisateurs sont susceptibles d'utiliser à plusieurs reprises lorsqu'ils se réfèrent au contenu de leur document ou de leur feuille de calcul.
Les boîtes de dialogue sont particulièrement adaptées aux outils à usage unique, aux pages de paramètres et aux messages importants.

Texte de l'UI

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 toujours comprendre ce que fait votre interface et faire un bon choix ?

Utilisez un titre et des libellés de boutons qui se démarquent.
Évitez les longs blocs de texte descriptif.

Boîtes de dialogue

Les boîtes de dialogue sont idéales pour les outils que les utilisateurs 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 avec des options d'insertion, 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 de boîte de dialogue (y compris une alerte ou une requête) à partir d'une autre boîte de dialogue. N'en affichez qu'une à la fois.
Pour le titre de la boîte de dialogue, utilisez un mot ou une courte expression, en commençant par le mot le plus important.
Les libellés des boutons doivent être en rapport avec le titre de la boîte de dialogue.
Préférez deux boutons, généralement une action principale et "Annuler". Pour les cas particuliers nécessitant un troisième bouton, placez-le en bas à droite.
Placez les boutons en bas à gauche de la boîte de dialogue. Le bouton principal bleu doit être à gauche, et les boutons secondaires gris à droite.

À éviter	À faire

Barres latérales

Les barres latérales permettent aux utilisateurs de se reporter à leur document, feuille de calcul, présentation ou formulaire lorsqu'ils font des choix. Elles permettent également aux utilisateurs d'utiliser votre module complémentaire à plusieurs reprises. Chaque fois qu'une nouvelle barre latérale s'ouvre, la barre latérale précédente se ferme automatiquement. Ils sont particulièrement adaptés aux modes temporaires que l'utilisateur quitte une fois terminé.

Les utilisateurs peuvent avoir 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, seul l'un d'eux s'affiche.
N'affichez pas de barre latérale ni de boîte de dialogue lorsque vous ouvrez un document 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

Les interfaces utilisateur de modules complémentaires de qualité laissent suffisamment d'espace pour les commandes. Les marges et les marges intérieures adéquates sont très utiles, tandis que les 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, comme Fichier > Mise en page, lorsque vous créez la vôtre.

La documentation du package CSS des 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 des liens simples ou d'autres éléments.

Évitez d'afficher plusieurs boutons bleus, rouges ou verts à la fois. Des boutons gris peuvent s'afficher à plusieurs reprises.
La plupart des libellés de boutons doivent être écrits en style de phrase et commencer par un verbe. Les boutons rouges, généralement utilisés 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 aucune. Utilisez des boutons radio (ou un menu de sélection) lorsqu'une seule option doit être sélectionnée.

Ne modifiez pas le comportement des cases à cocher pour qu'elles imitent les boutons d'option.
Ne faites rien immédiatement lorsqu'elles sont cochées. 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 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, en commençant par dimanche).
Si la liste devient trop longue, envisagez d'utiliser un autre contrôle. Par exemple, vous pouvez afficher une liste déroulante pour donner plus d'espace au menu et faciliter la navigation.

Les zones de texte

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

Faites en sorte que les zones de texte mesurent au moins deux lignes de haut pour qu'elles soient plus faciles à utiliser et ne ressemblent pas à des champs de texte.
Placez les libellés en haut.

Champs de texte

Utilisez des champs de texte si les utilisateurs ne doivent saisir qu'un ou deux mots.

La largeur d'un champ de texte doit suggérer ce que les utilisateurs doivent y saisir.
Évitez d'utiliser un texte d'espace réservé comme libellé, car il disparaît lorsque le focus est activé. Le texte d'espace réservé est utile pour fournir des exemples ou des informations supplémentaires.
Placez les libellés en haut, 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 un branding, faites-le de manière concise et légère. Cela permet aux utilisateurs de se concentrer sur votre interface utilisateur et de donner 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 au branding.
N'incluez pas le mot "Google" ni n'utilisez les icônes des produits Google.
Le texte ne doit pas comporter plus de quelques mots et être stylisé avec la classe gray du package CSS des modules complémentaires.
Les éléments graphiques doivent être sur un arrière-plan blanc et ne pas dépasser 200 x 60 pixels.
Pour les boîtes de dialogue, le branding doit être placé en bas à droite.
Pour les barres latérales, le branding peut être en haut ou en bas.

En magasin

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

Tous les aspects de votre fiche Play Store doivent respecter les consignes relatives au branding.
Pour en savoir plus sur les images que vous devez fournir, consultez les consignes concernant les images.

Accessibilité

Tout le monde doit pouvoir profiter de votre module complémentaire, qu'il perçoive les couleurs différemment, utilise un lecteur d'écran ou ait d'autres besoins. L'accessibilité est un sujet vaste qui ne peut pas être traité dans son intégralité dans ce guide de style. Le site Google Accessibilité est une ressource utile. Voici quelques conseils pour vous lancer:

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 y accéder par tabulation. Demandez-vous si d'autres touches doivent également être prises en charge, comme les flèches pour une liste.
Certaines personnes peuvent utiliser un lecteur d'écran avec votre module complémentaire. Par conséquent, 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 uniquement à la couleur pour communiquer l'état. Utilisez également des icônes et du texte.

Si vous utilisez des commandes Web standards, comme celles décrites plus haut dans ce guide, il est plus facile de rendre votre module complémentaire accessible.