DEV Community

Cover image for Improving Human-Computer Interfaces
Michael Landry
Michael Landry

Posted on

Improving Human-Computer Interfaces

Cover art copyrighted by Fantasy Flight Games

Ideally, as professionals who interact with computers to complete their work, minimizing the friction between our thoughts and querying the appropriate data or updating the appropriate records or accessing the necessary system should be a paramount goal. The more imaginative minds might arrive at the following mental image, clamoring that useful convenient virtual reality can't come soon enough.

hologram ui

Image by Urku 3DArt

This is a great idea, but, being realistic, this is a ways off, and there is plenty of friction I see at play that can be removed with well-focused effort. Consider the following exhibit:

too many tabs

This is a common sight I witness on a daily basis, and occasionally it elicits a comment in jest, but for me, I'd stress at the thought of my virtual work area, where I spend the majority of my time contributing to building a better place, as being disheveled like this.

In the worst case scenario, if we cannot see the tabs and have no recollection of where the desired tab would be, the worst case outcome would be to have to check every single tab. Multiply this by the number of times changing interfaces is needed in order to complete a typical task, we are looking at a lot of lost time here. (For you time complexity junkies, the worst case time cost here is xy, where x is the number of tabs typically open and y is the number of times the user has to access an interface, 2 typically large numbers, costing a polynomial amount of time when it should be a constant operation)

As a software engineer, I want to spend my time building and delivering software, not wrestling with my tooling.

How did this happen?

Turing back the clock, I have a distinct memory of the Opera Web browser being the first major browser to introduce tabbed browsing. I can't claim that that information is accurate, but historically speaking, shortly after tabbed browsing debuted, every browser had it, and people came to use it, because it was an improvement over the existing design. Unfortunately, the typical user of today can expect to require touching multiple web interfaces, numbering in the dozens for a single task, and the tabbed browsing approach is no longer sustainable. Noble efforts are being made, in form of 'grouped tabs' and other gimmicks, but ultimately, a paradigm shift is needed to tackle the issue properly. Let's se if we can do better!

Thinking beyond

As per the title, I didn't want to make this a blog specifically to be a diatribe on the shortcomings of browsers, but the problem in general. "How do we remove as much friction between the brain and the computer system?" Thinking deeper about a computer, its primary purpose in interacting with humans is to show requested interfaces to the human. What I really want to focus on is improving the journey from the inception of the thought in the brain to the interface on the screen. Most minds usually conclude that a specific task needs to happen, and a specific tool(interface) will complete the task. Using the following mental conversation as an example:

"I need to look at production logs"

The only mental effort here should be to parse that idea into an input of sorts that could then be used to fetch the appropriate interface. Perhaps something like

" logs > production"

With further possibilities to disambiguate the parts of production as needed.

This simplicity certainly outshines the current status quo which is usually something along the lines of

"I need to look at production logs.
Is that an application installed on my computer, or a webapp?
Its a web app... Okay, now I need to find the (right) browser (if its already open, or I need to open a new on?)
Browser already open here, and I have 40 tabs open. Gotta search through these tabs... Actually, I'll just open a new tab.
What is the URL for production logging? I've stashed it into my bookmarks somewhere... Looking at the bookmark library now, how is this sorted? Okay, I know, navigating through the tree of directories to get to the desired bookmark.
new tab opened, now I have to navigate this site in order to get to the correct interface to solve my problem..."

And on and on...

Optimizing the OS UI-UX.

What I am aiming to establish is that operating systems were designed first and foremost to mediate between computer software and the underlying metal, and secondly as a suite of user interfaces intended to be as generic as possible, IE, NOT optimized for efficiently executing common workflows flows of a particular user. With its rich and storied journey of going from punch cards to assembled native applications to "byte code" apps that run in virtual boxes, to browser apps and every branch, side road, and failure along the way, computers are always evolving according to the "laws of the jungle" rather than whatever was necessarily the best user experience. What I also want to suggest is that any interface and interaction can, and should be investigated for improvement. As a developer, I spend a lot of time in a terminal, and not necessarily by choice, and I really like to think in terms of 'build the thing' instead of ./gradlew -A -s -xsns 2048 10240 'tcp port 80 and (((ip[2:2] - ((ip[0]&0xf)<<2)) - ((tcp[12]&0xf0)>>2)) != 0)' | egrep --line-buffered "^........(GET |HTTP\/|POST |HEAD )

Candidate Solutions

We will all have different tastes, and I wanted to establish a springboard of sorts for thinking about the nature of this problem, and ways to improve. I'll share some of the following techniques I've come across which you are welcome to use or as inspiration for your own taste and situation.
I've found the Keyboard Maestro application to be the most powerful weapon in my arsenal on a Mac for improving my day to day toil in building the interfaces I want. It's an app that I use to convert my computer into a friction-free tool that solves the problems I face day to day.

Requesting the desired interface

The majority of the value Keyboard Maestro delivers is in the form of loading the right interface I need. After several iterations, I've arrived at the following solution. After pressing a specified key (I chose F1), the user is shown a list of options to select. Once presented the user may click (or, more often) type the target choice (once enough letters are submitted to unambiguously identify the target, the option fires).

Image description

That's it.

Every interface I might need is stored in a tree of words. I just have to know the name I assigned it (with the option of adding redundant options to reach the same interface), type it, and I am already where I want to be.

Massaging the approach

Well almost. There is the option, and the temptation, to group different interfaces into collections, then bind that collection to various keystrokes or triggers, but I found that lumping everything together into a single group cut down on the extra overhead of trying to remember or assign specific interfaces to specific groups and the resulting and tedious internal philosophical discussions of deciding how to group items, why group them that way, and what to do when something breaks the convention ... With the exception that I've bound IDE-projects interfaces to F5 and repository viewers (aka Github deeplinks to corresponding projects) to F8, and interfacing with project management software (aka Jira) with F2 due to the frequency of these invocations.

Story time! An example

My personal experience as a software engineer leads me to conclude that I probably spend more time going back and forth with colleagues about story requirements, details, and updates than I do actually implementing them. As such, I've put some thought and effort into removing the friction of dealing with Jira stories. Consequently, it makes for a fine example of what is possible using an approach like mine. Keyboard Maestro comes with easily programmable GUI interfaces, which I exploit in order to facilitate receiving prompts for only what the computer needs, and letting the scripting deal with the toil. I have such a GUI interface I use for All Things Jira, which becomes the target interface I invoke when that becomes my task. As mentioned previously, I could press F1, then type 's'-'t'... or just hit F2 as it's common enough to merit an even faster shortcut.

keyboard maestro story time macro

pressing F2, as you see here brings up a default value of 12345. That is my 'current story number'. I could overwrite it with a different number, at which point the new number becomes the 'current story number'. That value will also populate in other interfaces across macros.

"open in chrome" will open the webpage for the ticket in question. It is a blue button meaning that its the default choice if 'enter' is pressed, so F2-enter brings up the details of my current story. Super convenient!

"paste story url" puts the url of the current story on my clipboard. This is a huge time saver when I need my colleagues to take a look at said story.

"set current story" binds the current story number with a 'description', and remembers it forever in a dictionary built into Keyboard maestro. Binding a 'description' to a story number is also immensely convenient, as more often than not, there is a great deal of ceremony and ritual around branch names, commit messages, pr descriptions and juggling tickets. and the description really comes in handy for tying all that together. Its an example of set-it-then-forget-it way of describing tickets and never having to worry or fret about branches, tickets, pr descriptions, and commits getting out of sync.

Alternative Tools

For further considerations, I'd recommend auto hot key for windows, toby extension manager, and the time proving practice of writing shell scripts is always available.

Conclusion

Imaginative sci-fi authors have provided fantastical concepts for empowering us bags of meat to access cyberspace. The current reality is still quite far removed, with many still caged up in cubicles pecking away at plastic keys. All the same, some effort and imagination can cut the friction and toil that inserts itself between us and our craft, and hopefully some of those ideas will spill over into how mainstream user interfaces are designed and delivered to the masses.

Top comments (0)