3 étapes pour créer une UX géniale dans une application CLI

Alors que j’étais assis dans une salle de réunion, parlant avec l’un de mes coéquipiers, notre responsable est entré avec le reste de l’équipe de développement. La porte a claqué et notre manager a révélé qu’il avait une grande annonce. Ce qui s’est déroulé sous nos yeux était le prochain projet que nous allions développer – une application CLI (interface de ligne de commande) open source.

Dans cet article, j’aimerais partager ce que j’ai appris au cours de notre processus de développement, et plus précisément ce que j’aurais aimé savoir avant de commencer à développer CLI de Datree. Peut-être que la prochaine personne pourra utiliser ces conseils pour créer plus rapidement une excellente application CLI.

Je m’appelle Noaa Barki. Je suis développeur full-stack depuis plus de six ans, et je vais vous confier un petit secret : j’ai un super pouvoir : mes intérêts et mon expertise sont équitablement répartis entre le développement back-end et front-end. Je ne peux tout simplement pas choisir l’un sans l’autre.

Ainsi, lorsque mon responsable a révélé la nouvelle de notre future CLI, le développeur back-end était très excité car je n’avais jamais créé de CLI (ou de projet open source, d’ailleurs). Quelques secondes plus tard, le développeur front-end-moi a commencé à se demander, Comment puis-je créer une expérience utilisateur impressionnante dans une application CLI ?

Étant donné que Datree CLI aide les ingénieurs à prévenir les erreurs de configuration de Kubernetes, mes utilisateurs sont principalement des DevOps et des ingénieurs. J’ai donc interrogé tous mes amis DevOps et effectué des recherches en ligne sur le personnage général de DevOps.

Voici les étapes que j’ai trouvées :

1. Concevoir les commandes
2. Concevoir l’interface utilisateur
3. Fournir une rétrocompatibilité

Étape 1 : Concevoir les commandes

Une fois que vous avez terminé le processus stratégique, il est temps de concevoir les commandes. Je pense aux applications CLI comme les boîtes magiques – elles contiennent d’excellentes fonctionnalités qui fonctionnent de manière magique, mais uniquement si vous savez comment les utiliser. Cela signifie qu’une application CLI doit être intuitive et facile à utiliser.

Mes six principaux principes pour les commandes CLI

Voici mes six principaux principes et meilleures pratiques pour concevoir et développer des commandes CLI :

1. Drapeau d’entrée vs arguments

Utilisez des arguments pour les champs obligatoires, et pour tout le reste, utilisez des drapeaux. Prenons, par exemple, le datree test commande, qui imprime les résultats de la stratégie, et indiquez que vous souhaitez permettre à l’utilisateur d’imprimer la sortie dans un fichier spécifique. Si tu utilises datree test {pattern} {output-file}il est difficile de comprendre à la lecture de la commande exécutée quel argument est le modèle et quel argument est le chemin du fichier.

Par exemple, cela se produit avec la commande suivante : datree test **/* **.YAML. Cependant, si vous utilisez datree test {pattern} -output {output-path}ça devient beaucoup plus clair.

Noter: Les rapports montrent que la plupart des utilisateurs trouvent les drapeaux plus clairs.

2. Drapeaux de style Enum contre booléens

Il est préférable d’utiliser un indicateur de style enum plutôt qu’un indicateur de style booléen, car vous (développeur et utilisateur) devez alors réfléchir à toutes les combinaisons de présence ou d’absence des indicateurs dans la commande. Un indicateur de style énumération est un indicateur qui suppose une valeur. Les drapeaux de style Enum facilitent grandement la mise en œuvre de la complétion par tabulation.

3. Utilisez un langage familier

N’oubliez pas qu’une CLI est davantage conçue pour les humains que pour les machines. Choisissez la langue du monde réel pour vos commandes et descriptions.

4. Conventions de nommage

Utilisez les commandes CLI qui sont nommées sous une forme SINGLE et au format VERB-NOUN. Cela permet à la commande d’être lue comme un impératif ou une requête, par exemple : Ordinateur, démarrez l’application !

Minimisez le nombre total de commandes que vous utilisez et ne vous précipitez pas pour introduire de nouveaux verbes dans de nouvelles commandes. Cela permet aux utilisateurs de se souvenir plus facilement des noms de commande.

5. Invites

Fournir un contournement à l’option d’invite. L’utilisateur ne peut pas scripter la commande si une invite est requise pour l’exécuter. Pour éviter de frustrer les utilisateurs, un simple --output flag peut être une solution intéressante pour permettre à l’utilisateur d’analyser la sortie et de créer un script pour la CLI.

6. Description des commandes

La commande racine doit lister toutes les commandes avec leurs descriptions. Fournissez une description de commande à toutes les commandes (ou n’offrez aucune description), choisissez la largeur d’écran dans laquelle vous souhaitez qu’elle s’adapte (généralement une largeur de 80 caractères) et commencez par une lettre minuscule. De plus, ne terminez pas par un point pour éviter les sauts de ligne peu clairs ou les périodes perdues.

Étape 2 : Concevoir l’interface utilisateur

Vous avez maintenant une définition solide pour vos utilisateurs. Vous avez également planifié et conçu vos commandes et sorties. Ensuite, il est temps de penser à rendre l’application CLI esthétique, accessible et facile à apprendre.

Si vous y réfléchissez, presque toutes les applications doivent faire face à des défis UX (expérience utilisateur) lors de l’intégration et du parcours des utilisateurs. La comment partie de l’UX pour les applications Web est beaucoup plus évidente car vous disposez de nombreuses bibliothèques de composants (telles que material-UI et bootstrap) qui facilitent l’adoption de guides de style et de flux de fonctionnalités standard. Mais qu’en est-il des applications CLI ? Existe-t-il des conventions de conception pour les interfaces CLI ? Comment pouvez-vous créer une conception esthétique de la fonctionnalité CLI qui soit également accessible ? Existe-t-il un moyen de rendre l’interface utilisateur CLI aussi conviviale qu’une interface graphique ?

Les trois meilleures pratiques d’interface utilisateur et d’expérience utilisateur pour les applications CLI

1. Utilisez des couleurs

Les couleurs sont un excellent moyen d’attirer les yeux de vos utilisateurs et de les aider à lire les commandes et les sorties beaucoup plus rapidement. Les couleurs de police les plus recommandées sont le magenta, le cyan, le bleu, le vert et le gris, mais n’oubliez pas que les couleurs d’arrière-plan peuvent offrir plus de variété. Je vous encourage à utiliser les couleurs jaune et rouge, mais n’oubliez pas qu’elles sont généralement enregistrées pour les erreurs et les avertissements.

2. Cohérence entrées-sorties

Soyez cohérent avec les entrées et les sorties de l’application ; cela encourage la convivialité et permet à l’utilisateur d’apprendre à interagir rapidement avec de nouvelles commandes.

3. Ordonner les arguments

Choisissez la position d’un argument en fonction de sa corrélation avec l’action de la commande. Considérez la commande generate de NestJS nest generate {schematic} {name}qui a besoin schématique et Nom comme arguments. Notez que l’action produire renvoie directement à la schématiquene pas Nomil est donc plus logique pour schématique être le premier argument.

Étape 3 : Fournir une rétrocompatibilité

Évitez de modifier la sortie. Maintenant que vous savez comment créer une application CLI parfaite, n’oubliez pas de garder vos utilisateurs à l’esprit, en particulier lors de l’activation des scripts de la CLI. N’oubliez pas que tout changement dans les sorties de la commande peut casser les scripts actuels des utilisateurs ; par conséquent, évitez de modifier la sortie.

Emballer

La création d’une nouvelle CLI est passionnante et stimulante, et le faire avec une UX utile et simple ajoute au défi. Mon expérience montre que trois facteurs clés entrent dans une UX réussie pour un projet CLI :

1. Concevoir les commandes
2. Concevoir l’interface utilisateur
3. Fournir une rétrocompatibilité

Chacune de ces phases a ses propres composants qui soutiennent la logique et facilitent la vie de vos utilisateurs.

J’espère que ces concepts vous seront utiles et que vous aurez l’opportunité de les appliquer dans votre prochain projet.