Terminal Widgets

Case Study

A User Experience for a Command-Line Interface

A complementary CLI asset

By FRANCIS CACCAVALE

A fresh, feature-rich terminal while balancing what is quintessentially minimalistic at a CLI's root historically. A user experience pointing at user sets utilising a terminal often, as to programming, informatics or system administration.

Empathize

A questionnaire was made via Google Forms and embedded within an array of relevant 'subreddits' as to the 'Reddit' platform. Said subreddit array did include 'r/bash', 'r/python', 'r/sysadmin' et cetera. Some example questions:

As to programming or scripting, what do you dislike about an integrated development environment (IDE)?
What are some ordinary tasks you initialise in a terminal window?
What resources do you sometimes seek outside of a terminal window while debugging or administrating? Does any said auxiliary search disrupt workflow?

After synthesizing results, common insights were:

A terminal has to retain essence (i.e. minimalism) while resolving some edge cases.
Resolving edge cases has to flow in a way to not disrupt workflow.

A persona was able to emerge from this Google Forms questionnaire. See Persona A below

Persona A

Persona B

Persona A

"I appreciate a terminal's minimalistic essence which ceases distractions."

User

Define

A terminal window has to retain a root essence of minimalism while creating functionality to complete edge case tasks without workflow compromise.

Ideate

"How might we create a set of widgets? — How might we let these widgets have a diminuitive UI which hides well?"

Crazy 8s, a UX design method, is a fast sketching idea generator which challenges people to sketch eight distinct ideas in eight minutes. This Crazy 8s exercise, was to generate eight sketches of unique widget ideas for a terminal window.

Clockwise: Clipboard, Pinned history of terminal commands, Calculator, Software release notes, Notepad, Email, AI - Chatbot, To do list

As to a diminuitive user interface, widgets will shape as a tab at the edge of the terminal window and a user may click each tab extending a widget into place.

Widget icons

Prototype

A high-fidelity prototype was made with Figma. Below

Every color for each widget are known hex codes for a terminal window.

Because some widgets may utilise APIs (i.e. Wolfram Alpha, or a known AI chatbot), the terminal window is a connected design. Other Internet utilisations may mean email or a path to locate software release notes.

Prototype

Smaller widgets can fit in pairs along the vertical sides of the terminal while larger widgets (i.e. clipboard, email, notepad, software release notes) require to fit along the horizontal sides. Users are free to delete underutilized widgets while later adding widgets in a need basis.

Test

While testing, a primary takeaway was an evident edge case of users opting a terminal window occupying the screen edge to edge. As a resolve, a drawer of widgets may initiliase and after each widget initialisation, a horizontal stack of widgets appear at the bottom edge pinned. See below

Prototype [full-screen]

Because of the likely wide real estate from an edge-to-edge window, pinned widgets sitting within a terminal window are utilities without interference.

Last updated: May, 2023