Designing CLI Tools

Emily Goldfein
Aug 30, 2018 · 5 min read

Today I attended a wonderful talk by James Bowes at GopherCon 2018 titled CL-EYE Catching UIs, and was inspired to turn one of my lightning talks on a similar topic into a blog post. I highly recommend you take a look at James’ presentation for lots of excellent CLI UI ideas based in Go.


Have you ever wondered what sets apart the great CLI tools from the not so great? What makes a person keep returning to certain CLI tools, but abandon others? Obviously functionality plays the biggest factor, but I would argue that the design of the tool is the next biggest determinant.

Now, you might be asking: um, Emily…have you even seen a terminal?

🎵I’ve got a blank space, baby…and it’s got some well-designed CLI tools 🎵

And yes, I get it — it’s a no-frills interface.

So, then, why does CLI design matter?

Because the command line is text-based, the design matters even more than web design because we can’t rely on typefaces, images, fancy formatting through HTML elements, etc. Yet, a tool is potentially conveying a lot of information and one of the main goals of any tool should be to make that information digestible for the end user.

Let’s go through the main aspects of what makes a great CLI tool.

Formatting

Web readers have typical patterns for how they glean information from a website. The same applies to gleaning information from a command line. Based on eye-tracking research of website users, it’s been determined that there are standard patterns for how people read web content. These included the F-shape, layer cake, and spotted patterns.

Heatmaps showing the F-shaped reading pattern of web content (Image courtesy of www.nngroup.com)

You can delve more into the research at your leisure, but the main takeaways are that people tend to scan instead of read (looking at you, current readers 😉) and they skip large chunks of information. In order to enable users to maximize the amount of content they’re able to absorb within your CLI tools, I recommend grouping like information (which means your users won’t have to scan as much to find relevant information) and giving your user’s eyes room to rest (which allows your users to take a moment to absorb what they just read).

One great way to put this into practice is by leveraging packages that allow you to create tables. For example, in Node you could use CLI Table and in Go you could use Tablewriter .

Color

The use of text color is perhaps both the easiest and the most influential addition you could make to your CLI tool. Color can provide both context and contrast. Take road signs, for example:

(Image courtesy of https://driversprep.com/basic-colors-u-s-road-signs/)

Certain colors, like yellow, orange, and red, are meant to draw your eye. These signs are the ones of great importance — DO NOT ENTER! CAUTION! STOP! These colors grab your attention. They also provide context. Red signs mean stop, yellow signs are meant to caution you (perhaps warning you of a windy road, or a steep grade) — but you don’t even need to read the words to process their meaning.

That being said, it’s important to use color sparingly. If you have color everywhere, it creates noise and a user won’t know where to look. If you’re driving along and every couple of feet there’s a new sign in a flashy color, you’re not going to be able to register it among the sea of other signs. It would be entirely overwhelming.

Some basic color contexts are as follows:

  • Red = warning, danger
  • Green = success
  • Yellow = proceed with caution
  • Blue = stability, calm — usually used to gently provide information
The Go Color Package from https://github.com/fatih/color

For Go, you can use the Color package. For Node, you can use Chalk.

Visuals

Emojis in the terminal? Um, yes please

Similarly to color, visuals provide clarity and can help direct a user’s eyes to the important information. Some information is better displayed visually, such as conveying progress of a task. Visuals can also add some personality to your tool!

Node has packages such as Log-Symbols, which allows you to add iconography to your text, and it’s even already in color — score!

The Go Spinner Package from https://github.com/briandowns/spinner

There are also progress bar and spinner packages for Node, such as NodeProgress and CLI Spinner.

Similarly in Go, there are progress bar and spinner packages.

Copy

Finally a word on copy (pun intended), or the actual wording you choose to use to express information. The actual words within the text of your tool is just as important to the design as color, formatting, and visuals. For your copy, try to stick to the following:

  • Intuitive commands
  • Consistent naming and command structures (for example, stick to [verb] [noun] commands throughout)
  • Always include help commands and documentation
  • Always create command aliases (-v for version, for example) to enable the user to get the information they want faster

If you keep these design elements in mind when developing your CLI tool, you’ll create a wonderful user experience that will keep your users coming back to your tool again and again. Happy coding!


More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

Emily Goldfein

Written by

Software Engineer | Lover of All Things Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade