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?
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.
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.
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).
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:
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
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!
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!