{"id":65557,"date":"2022-07-06T09:01:07","date_gmt":"2022-07-06T09:01:07","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=65557"},"modified":"2022-07-06T09:01:07","modified_gmt":"2022-07-06T09:01:07","slug":"3-steps-to-create-an-awesome-ux-in-a-cli-application","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=65557","title":{"rendered":"3 steps to create an awesome UX in a CLI application"},"content":{"rendered":"

3 steps to create an awesome UX in a CLI application<\/span>
\nNoaa Barki<\/a><\/span>
\nWed, 07\/06\/2022 – 03:00<\/span><\/p>\n

\n
Register<\/a> or Login<\/a> to like<\/div>\n
Register<\/a> or Login<\/a> to like<\/div>\n<\/div>\n
\n

As I was sitting in a meeting room, speaking with one of my teammates, our manager walked in with the rest of the dev team. The door slammed shut and our manager revealed that he had a big announcement. What unfolded before our eyes was the next project we were going to develop\u2014an open source CLI (command line interface) application.<\/p>\n

In this article, I’d like to share what I learned during our development process, and specifically what I wish I had known before we began developing Datree’s CLI<\/a>. Perhaps the next person can use these tips to create a great CLI application faster.<\/p>\n

My name is Noaa Barki. I’ve been a full-stack developer for over six years, and I’ll let you in on a little secret\u2014I have a superpower: My interest and expertise are evenly split between back-end and front-end development. I simply cannot choose one without the other.<\/p>\n

So when my manager revealed the news about our future CLI, the back-end developer-me got very excited because I’d never created a CLI (or any open source project, for that matter). A few seconds later, the front-end developer-me started to wonder, How can I build an awesome user experience in a CLI application?<\/em><\/p>\n

Since Datree CLI helps engineers prevent Kubernetes misconfigurations<\/a>, my users are primarily DevOps and engineers, so I interviewed all my DevOps friends and searched online about the general DevOps persona.<\/p>\n<\/p>\n

\n
More great content<\/div>\n
\n
Free online course: RHEL technical overview<\/a><\/div>\n
Learn advanced Linux commands<\/a><\/div>\n
Download cheat sheets<\/a><\/div>\n
Find an open source alternative<\/a><\/div>\n
Explore open source resources<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

Here are the steps I came up with:<\/p>\n

    \n
  1. Design the commands<\/li>\n
  2. Design the UI<\/li>\n
  3. Provide backward compatibility<\/li>\n<\/ol>\n

    Step 1: Design the commands<\/h2>\n

    Once you have completed the strategic process, it’s time to design the commands. I think about CLI applications like magic boxes\u2014they hold great features that work in a magical way, but only if you know how to use them. That means a CLI application must be intuitive and easy to use.<\/p>\n

    My top six principles for CLI commands<\/h3>\n

    Here are my top six principles and best practices for designing and developing CLI commands:<\/p>\n

    1. Input flag vs. arguments<\/strong><\/p>\n

    Use arguments for required fields, and for everything else, use flags. Take, for example, the datree test<\/code> command, which prints the policy results, and say that you want to enable the user to print the output into a specific file. If you use datree test {pattern} {output-file}<\/code>, it is difficult to understand from reading the executed command which argument is the pattern and which argument is the file path.<\/p>\n

    For example, this occurs with the following command: datree test **\/* **.YAML<\/code>. However, if you use datree test {pattern} -output {output-path}<\/code>, it becomes much clearer.<\/p>\n

    Note:<\/strong> Reports show that most users find flags to be clearer.<\/p>\n

    2. Enum-style vs. Boolean flags<\/strong><\/p>\n

    It’s preferable to use an enum-style flag over a Boolean-style flag because then you (a developer and user) need to think about all combinations of the presence or absence of the flags in the command. An enum-style flag is a flag that assumes a value. Enum-style flags make it much easier to implement tab completion.<\/p>\n

    3. Use familiar language<\/strong><\/p>\n

    Remember that a CLI is built more for humans than machines. Pick real-world language for your commands and descriptions.<\/p>\n

    4. Naming conventions<\/strong><\/p>\n

    Use CLI commands that are named in a SINGLE form and VERB-NOUN format. This allows the command to be read like an imperative or request, for example: Computer, start app!<\/em><\/p>\n

    Minimize with the total number of commands you use, and don’t rush to introduce new verbs to new commands. This makes it easier for users to remember command names.<\/p>\n

    5. Prompts<\/strong><\/p>\n

    Provide a bypass to the prompt option. The user cannot script the command if prompting is required to complete it. To avoid frustrating users, a simple --output<\/code> flag can be a valuable solution to allow the user to parse the output and script the CLI.<\/p>\n

    6. Command descriptions<\/strong><\/p>\n

    The root command should list all the commands with their descriptions. Provide a command description to all commands (or do not offer descriptions at all), choose the screen width you want it to fit into (generally an 80-character width), and begin with a lowercase character. Also, don’t end with a period to avoid unclear line breaks or lost periods.<\/p>\n

    Step 2: Design the UI<\/h2>\n

    Now you have a solid definition for your users. You have also planned and designed your commands and outputs. Next it’s time to think about making the CLI application aesthetic, accessible, and easy to learn.<\/p>\n

    If you think about it, almost every app must deal with UX (user experience) challenges during the users’ onboarding and journey. The how<\/em> part of UX for web applications is much more obvious because you have many component libraries (such as material-UI and bootstrap) that make it easier to adopt standard style guides and functionality flows. But what about CLI applications? Are there any design conventions for CLI interfaces? How can you create an aesthetic design of the CLI functionality that is also accessible? Is there any way to make the CLI UI as friendly as a GUI?<\/p>\n

    Top three UI and UX best practices for CLI applications<\/h3>\n

    1. Use colors<\/strong><\/p>\n

    Colors are a great way to attract your user’s eyes and help them read commands and outputs much faster. The most recommended font colors are magenta, cyan, blue, green, and gray, but don’t forget that background colors can provide more variety. I encourage you to use yellow and red colors but remember that these are typically saved for errors and warnings.<\/p>\n

    2. Input-output consistency<\/strong><\/p>\n

    Be consistent with inputs and outputs across the application; this encourages usability and allows the user to learn how to interact with new commands quickly.<\/p>\n

    3. Ordering arguments<\/strong><\/p>\n

    Choose an argument’s position based on how it correlates with the command’s action. Consider NestJS’s generate command nest generate {schematic} {name}<\/code>, which needs schematic<\/em> and name<\/em> as arguments. Notice that the action generate<\/em> refers directly to the schematic<\/em>, not name<\/em>, so it makes more sense for schematic<\/em> to be the first arg.<\/p>\n

    Step 3: Provide backward compatibility<\/h2>\n

    Avoid modifying the output. Now that you know how to create a perfect CLI application, don’t forget to keep your users in the back of your mind, especially when enabling scripting the CLI. Remember that any change in the command’s outputs may break users’ current scripts; therefore, avoid modifying the output.<\/p>\n

    Wrap up<\/h2>\n

    Creating a new CLI is exciting and challenging, and doing so with a helpful and easy UX adds to the challenge. My experience shows that three key factors go into a successful UX for a CLI project:<\/p>\n

      \n
    1. Design the commands<\/li>\n
    2. Design the UI<\/li>\n
    3. Provide backward compatibility<\/li>\n<\/ol>\n

      Each of these phases has its own components that support the logic and make the lives of your users easier.<\/p>\n

      I hope these concepts are useful and that you have the opportunity to apply them in your next project.<\/p>\n<\/div>\n

      \n

      Here is what I’ve learned to be the key factors that go into a successful user experience for a CLI project.<\/p>\n<\/div>\n

      \n
      \n
      \"Business<\/div>\n
      Image by: <\/span><\/p>\n

      Image by Mapbox Uncharted ERG,\u00a0CC-BY 3.0 US<\/a><\/p>\n<\/div>\n<\/article>\n<\/div>\n

      \n
      Command line<\/a><\/div>\n
      DevOps<\/a><\/div>\n
      Art and design<\/a><\/div>\n<\/p><\/div>\n
      What to read next<\/div>\n

      \n \"Creative<\/a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.<\/div>\n
      \n
      \n
      Register<\/a> or Login<\/a> to post a comment.<\/div>\n<\/p><\/div>\n<\/section>\n

      Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

      3 steps to create an awesome UX in a CLI application Noaa Barki Wed, 07\/06\/2022 – 03:00 Register or Login to like Register or Login to like As I was sitting in a meeting room, speaking with one of my teammates, our manager walked in with the rest of the dev team. The door slammed […]<\/p>\n","protected":false},"author":1,"featured_media":65558,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-65557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"_links":{"self":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/65557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65557"}],"version-history":[{"count":0,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/65557\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/media\/65558"}],"wp:attachment":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}