I’m working on the usability of pip (the official Python package manager) at the moment.

This short blogpost isn’t about how to design CLIs. It is about creating rapid prototypes with this tool – part “look at this useful tool, part “thank you Pradyun” part feature request list. 🙂

Update

After putting together the feature request list below, Pradyun’s already updated cli-output with request 1 and 2 below. Reusable blocks, or repeatable blocks are a bit more work.

Prototyping CLIs

Prototyping commandline interfaces, for the non-developer, is not easy. While we have countless interface prototyping tools for graphical UIs, unless you can write code (Python, HTML/JS, etc), when it comes to commandline user interfaces, there’s little available.

One thing I have struggled with so far is being able to prototype commandline interfaces that look “real enough”, without it taking “a lot” of time.

I’ve tried making stop-motion videos, describing it in long verbose explanations, doing paper prototypes, but none of the work. A CLI is essentially an interactive scrolling text-only interface. Without that “motion” it is very difficult to prototype, without coding skills.

Pradyun Gedam, one of the pip maintainers, put together a nice tool to prototype commandline interfaces. It is essentially simulating a CLI in HTML and JS. Easy when you know how.

It allows you to do nice things like this:

Feature list

1. Being able to include comments. Done!

As a CLI UX designer, I want to be able to write comments (which won’t show up in the cli output), so that I can include human-readable explanation or annotation in the output.

Things to think about: can I use common characters like `#`, `>` if they are going to be printed in a cli output? 🤔

2. Being able to easily repeat a large block

As a CLI UX designer, I want to be able to build output on previously drawn elements, so that it saves time.

I need to add a video here to show what I mean.

3. Being able to share the URL of a cli output prototype.

This would help so that I could share them in PRs, etc.

As a CLI UX designer, I want a weblink for each cli prototype I create, so that I can share them with people (in GH issues, users, etc).

Things to think about: I think using something like a pastbin unique URL (which allows editing) would be nice. I think something like how hastepin does URLs would be good.

4. Having the output scroll up like in a real terminal Done!

I need to add a video here to explain more.

5. Having reusable elements

As a CLI UX designer, I want to be have a number of elements I can use, so that I don’t need to build them from scratch each time.

Things to think about: It’d be nice to be able to reuse elements (for example a spinner) instead of having to redraw each `-`, `\`, `|`, `/` each time. For example, like you’ve created the spinner here. https://hackmd.io/@pradyunsg/HyyYzk5Lv

What elements? I think a spinner, and simple progress bar would be a great start.

Thanks!

Anyway, thank you Pradyun for what you’ve done so far. 🙏🏾

If you are a UX designer and you need to make quick CLI prototypes, I suggest you have a look.