10.5.1. Copie de la carte
Vous pouvez personnaliser le titre et la description d'une carte de démarrage rapide, mais vous ne pouvez pas personnaliser le statut.
- La description doit se limiter à une ou deux phrases.
Commencez par un verbe et communiquez l'objectif de l'utilisateur. Exemple correct :
Create a serverless application.
10.5.2. Introduction
Après avoir cliqué sur une carte de démarrage rapide, un panneau latéral s'affiche pour présenter le démarrage rapide et énumérer les tâches qu'il contient.
- Le contenu de votre introduction doit être clair, concis, informatif et convivial.
- Indiquer le résultat de la procédure de démarrage rapide. L'utilisateur doit comprendre l'objectif du démarrage rapide avant de commencer.
Donner une action à l'utilisateur, et non un démarrage rapide.
Correct example:
In this quick start, you will deploy a sample application to {product-title}.Incorrect example:
This quick start shows you how to deploy a sample application to {product-title}.
- L'introduction ne doit pas dépasser quatre ou cinq phrases, en fonction de la complexité de la fonctionnalité. Une longue introduction peut submerger l'utilisateur.
Dressez la liste des tâches de démarrage rapide après le contenu de l'introduction et commencez chaque tâche par un verbe. Ne précisez pas le nombre de tâches, car la copie devrait être mise à jour chaque fois qu'une tâche est ajoutée ou supprimée.
Correct example:
Tasks to complete: Create a serverless application; Connect an event source; Force a new revision
Incorrect example:
You will complete these 3 tasks: Creating a serverless application; Connecting an event source; Forcing a new revision
10.5.3. Étapes de la tâche
Une fois que l'utilisateur a cliqué sur Start, une série d'étapes s'affiche, qu'il doit exécuter pour terminer le démarrage rapide.
Suivez ces lignes directrices générales lorsque vous rédigez les étapes de la tâche :
- Utilisez "Click" pour les boutons et les étiquettes. Utilisez "Select" pour les cases à cocher, les boutons radio et les menus déroulants.
Utilisez "Cliquez" au lieu de "Cliquez"
Correct example:
Click OK.
Incorrect example:
Click on the OK button.
Expliquez aux utilisateurs comment naviguer entre les perspectives Administrator et Developer. Même si vous pensez qu'un utilisateur se trouve déjà dans la perspective appropriée, donnez-lui des instructions sur la manière de s'y rendre afin qu'il soit bien là où il doit être.
Exemples :
Enter the Developer perspective: In the main navigation, click the dropdown menu and select Developer. Enter the Administrator perspective: In the main navigation, click the dropdown menu and select Admin.
Utilisez la structure "Lieu, action". Indiquez à l'utilisateur où aller avant de lui dire quoi faire.
Correct example:
In the node.js deployment, hover over the icon.
Incorrect example:
Hover over the icon in the node.js deployment.
- Veillez à ce que la terminologie de vos produits soit toujours en majuscules.
- Si vous devez spécifier un type de menu ou une liste sous forme de liste déroulante, écrivez "liste déroulante" en un seul mot sans trait d'union.
Établir une distinction claire entre une action de l'utilisateur et des informations supplémentaires sur les fonctionnalités du produit.
User action:
Change the time range of the dashboard by clicking the dropdown menu and selecting time range.
Additional information:
To look at data in a specific time frame, you can change the time range of the dashboard.
Évitez le langage directionnel, comme "Dans le coin supérieur droit, cliquez sur l'icône". Le langage directionnel devient obsolète chaque fois que la présentation de l'interface utilisateur change. En outre, une indication destinée aux utilisateurs d'ordinateurs de bureau peut ne pas être exacte pour les utilisateurs dont la taille d'écran est différente. Identifiez plutôt un élément par son nom.
Correct example:
In the navigation menu, click Settings.
Incorrect example:
In the left-hand menu, click Settings.
N'identifiez pas les éléments uniquement par leur couleur, comme "Cliquez sur le cercle gris". Les identificateurs de couleur ne sont pas utiles pour les utilisateurs malvoyants, en particulier les daltoniens. Identifiez plutôt un élément à l'aide de son nom ou de sa copie, comme la copie d'un bouton.
Correct example:
The success message indicates a connection.
Incorrect example:
The message with a green icon indicates a connection.
Utilisez systématiquement le point de vue de la deuxième personne, vous :
Correct example:
Set up your environment.
Incorrect example:
Let's set up our environment.
10.5.4. Vérifiez votre module de travail
Une fois qu'un utilisateur a terminé une étape, un module Check your work apparaît. Ce module invite l'utilisateur à répondre par oui ou par non à une question sur les résultats de l'étape, ce qui lui donne la possibilité de revoir son travail. Pour ce module, il suffit de rédiger une seule question de type oui ou non.
- Si l'utilisateur répond Yes, une coche apparaît.
- Si l'utilisateur répond No, un message d'erreur apparaît avec un lien vers la documentation pertinente, si nécessaire. L'utilisateur a alors la possibilité de revenir en arrière et de réessayer.
10.5.5. Formatage des éléments de l'interface utilisateur
Formatez les éléments de l'interface utilisateur en suivant ces lignes directrices :
- Copie des boutons, des menus déroulants, des onglets, des champs et des autres contrôles de l'interface utilisateur : Rédigez le texte tel qu'il apparaît dans l'interface utilisateur et mettez-le en gras.
- Tous les autres éléments de l'interface utilisateur, y compris les noms de page, de fenêtre et de panneau : Rédigez le texte tel qu'il apparaît dans l'interface utilisateur et mettez-le en gras.
- Code ou texte saisi par l'utilisateur : Utiliser une police monospaciale.
- Indices : Si un indice vers un élément de navigation ou de tête de page est inclus, stylisez le texte comme vous le feriez pour un lien.
- Commandes CLI : Utilisez une police monospaciale.
- Dans le texte courant, utilisez une police de caractères gras et monospaciale pour une commande.
- Si un paramètre ou une option est une valeur variable, utilisez une police de caractères italique et monospaciale.
- Utilisez une police de caractères gras et monospaciale pour le paramètre et une police de caractères monospaciale pour l'option.
