I have to build a Console UI which will consist of a few main groups each consisting of nested labels and input fields. Are there any guidelines out there for making something like this easy to navigate and immediately digest for a user? Moreover, are there any good examples of some sort of modern looking console or navigation paradigm, or am I confined to simple DOS looking textual navigation menus?
3 Answers
Consider yourself lucky to get such a challenge! I had a stint of time when I was designing mainframe applications - it was quite a shock to have to go from graphics to text-based interfaces, but it forces you as a designer to really focus on the core aspects of design.
A few things I've found useful in CLIs:
- Easy way to access help for commands, parameters, etc...
- Use complete words for commands and options
- If an action does result an error, do your best to point them to contextual help info based on the command that was attempted
An old school paper from the early 1980s entitled Program design in the UNIX environment shows examples of what the authors believed to be good and bad design. They later went on to write The Unix Programming Environment which is one of the more influential texts written on the subject.
For something more modern check out Build Awesome Command-Line Applications in Ruby. Even if your app isn't in ruby, this book will help spotlight some qualities found in well-formed CLIs.
Does it need to be CLI only?
Most of the time, a CLI is best implemented as a power-user feature of a more learnable GUI application. That eases the learning curve for the command-line phobic (a pretty large user base), and those seeking extra awesomeness can speed up what they've learned about your app by activating the CLI.
A few precedents we can learn from.
Code editors like GitHub's Atom have a GUI layer with a quick key sequence to call up the CLI. Similarly, the built-in dev tools in Chrome and Firefox have a console that can be called up as needed to avoid clicking around inefficiently.
Quicksilver also has an interesting perspective on graphically supported CLI -- it's mostly command-driven with some speedy GUI extensions.
Search as CLI was called out as a "breakthrough UI" by Don Norman.
search engines have migrated to becoming answer engines, controlled through a modern form of command line interface
The key with search is that much of the power relies on natural language detection and can be essentially ignored by the novice.
Auto-suggest/complete is a pattern common to all of these examples. That speaks volumes about user expectations.
Simple text-only interface example
Here's a search-as-CLI example that incorporates some basic command prompt features:
- Syntax highlighting to aid in proper command construction.
- Auto-suggest/complete where known values exist.
- Straight-forward commands with some natural language support.
Depends, depends, depends...
First off, a question: what are your users familiar with?
People raised on DOS might have been used to quite different UIs than the ones used to OS/400 or Bloomberg console.
Each TUI has its own design paradigms. IBM developed a standard called Common User Access, which might help you.
(BTW, purely from a visual perspective, I've always found OS/400 "green screen" UIs to look cool)
I would guess that it is not a new project: those mostly have either mobile or web UIs nowadays. Therefore, you have an existing software ecosystem to fit into.
Therefore, the first thing you should do is to catalog existing UI into patterns: personally I prefer the Quince format, but it is up to you.
Of course, each of the different systems have their own design guidelines, but most of the time, it's about programming concepts.
I remember, I first understood standard Windows-style design while studying WinAPI and the KDE/Qt environment: what is a combobox exactly, what is it used for, what it shouldn't be used for.
And a final advice: Don't forget to design keyboard interactions and keyboard navigation (including screen-to-screen flows using keyboard!)