Creating rapid CLI prototypes with cli-output

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:

prototyping commandline interfaces with cli-output

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.

A Python community announcement about our pip work

Sumana Harihareswara the pip PM put together a video for the Python community to tell them about our UX work on pip, the package manager.

Initially I was thinking “I hate seeing my face on video, I hate hearing my voice. This better not have ukelele music. I hate those kinds of videos.”

I liked the explanation she gave for wanting to do it – ‘so Python community, and users can see the human faces behind pip, that we’re real people’.
We often forget (me included) that, for the moment, it’s still humans that make most software.

I think the video turned out well, and people seem to like it.

In 2016, Belรฉn Barros Pena & I did a talk at the great Paris Web conference about our Do-It-Yourself Mobile Usability Testing project. We’ve done it many times before.

Here’s the video.

The tech and the tools may be updated and it’s 3 years old but 80-90% of the reasoning, methods and approacehs are still as relevant.

Paris Web is a great conference. I was really impressed by the professionalism of the organisers, by how accessible the talks were – real-time French subtitling (which were helpful for me too!) of all talks and on-stage signing. Lots of talks were in English also.

It won my prize of “Best food at a UX conference. Ever.”.

If you are looking for an interesting conference (and you also speak French), I can highly recommend it.