The Graphical Keyboard User Interface

WIMPy and the Terminal

Wimpy

Terminal

The history of user interfaces can be very briefly summarized into two distinct eras: the command line, followed by the graphical user interface. Interactions on the command line are very fast, but the set of possible commands is not discoverable. GUIs are essentially the opposite, on both issues. Interactions with graphical user interfaces are slower, but possible commands are given visual affordances, and icons attempt to convey possible commands through metaphors.

The GUI is largely considered superior to command line interfaces that predated it, but that isn’t entirely true. For instance, while I was in college a majority of students preferred Pine (screenshot) over graphical email clients like Outlook. A group of students in a human computer interaction class I was in did an in-depth analysis of the usability of each application. They found that across a wide variety of metrics, like simplicity, system response time, and (most critically) overall time on task, Pine knocked Outlook’s toolbar-customizing-dialog-poping-drag-and-drop socks off.

Tradeoffs

Instead of trying to conclude which is superior, a GUI or a keyboard-based interface, it is important to note the specific tradeoffs each interface currently makes in terms of the bandwidth of output, and bandwidth of input.

Modern graphical user interfaces are clearly higher bandwidth than text-based command line interfaces in terms of output, but consider the bandwidth of input:

Standard GUIs, with their drop down menus, check buttons, and tree-lists just cannot compare to the range of options that a text interface gives effortlessly. In just five alphanumeric characters, you can choose one out of 100,000,000 possible sequences. And choosing any one sequence is just as fast as any other sequence (typing five characters takes roughly 1 second). I challenge you to come up with a non text-based interface that can do as well. (Command Line for the Common Man: The Command Line Comeback)

Tradeoffs

Graphical user interfaces often provide keyboard shortcuts to serve as accelerators. But these keyboard shortcuts are not interfaces in themselves, but simply serve as hooks into various parts of the GUI. For instance, consider control-D in Firefox, it simply pops up the bookmark creation dialog box, and suddenly the user has to go back to using the mouse (or awkward tabbing) in order to complete their task.

The Best of Both Worlds

Over the last six months, I’ve been thinking a lot about the work of two designers: Nicholas Jitkoff (Blacktree, creators of Quicksilver) and Aza Raskin (Humanized, creators of Enso). Both have designed user interfaces that exist in the riven between command line interfaces and graphical user interfaces. And both of these applications are a joy to use.

Quicksilver

Unfortunately these types of hybrid keyboard/GUI user interfaces have gone largely unexplored by interaction designers. Aside from feed and label navigation in Google Reader, I don’t know of too many other applications that are currently leveraging these types of incredibly streamlined graphical interfaces, designed solely for keyboard input.

How Firefox Could Potentially Leverage Graphical Keyboard User Interfaces

Here are some ideas I’ve had about how several different Firefox features could be designed using a graphical keyboard user interface. Please note that these are all only conceptual mockups, and we currently have no official plans to implement these features for Firefox 3 (although, we may at some point release a prototype extension through Mozilla Labs). If you are an extension developer and are interested in contributing to a project like this, please email me or leave a note in the comments.

All of these mockups show interfaces that are entirely keyboard driven. A keyboard shortcut launches the UI, and the UI is later dismissed by either selecting an item using the arrow keys and hitting enter, or by hitting escape. These interfaces are all modal, and when invoked they occupy large amounts of space on the screen.

For each of these mockups you can click through for a larger version.

Searching the Web (control+k, or alt-alt)

Of all of these mockups, I think keyboard-based Web search would be the most useful. This mockup also features some favicon upscaling code I wrote for another Mozilla Labs project.

I1Kuiwebsearch

In addition to Web search, the “Bookmarks and History” search will likely be more efficient than the current WIMPy ways of accessing bookmarks in Firefox:

The move back to language started with web search engines in general, with Google placing the capstone when its name became the house-hold verb for “typing to find what you want”. In fact, Googling is almost always faster then wading through my bookmark menu (which says there is something wrong with using menus as a mechanism for accessing bookmarks). (Command Line for the Common Man: The Command Line Comeback)

Switching Tabs (control+tab)

I1Kuitabswitching

Navigating Recent History

I1Kuirecenthistory

Tagging Pages

I1Kuitagging

Acting on Microformatted Content

I1Kuimicroformatdetection

Conclusion

-Just because the command line predated the graphical user interface doesn’t mean interfaces based on windows, icons, menus and pointers are always superior to interfaces based around using the keyboard for input.

-Designing interfaces based solely around the mouse and standard GUI widgets, and adding keyboard accelerators as an afterthought, does not always result in creating the most effective and streamlined user interfaces for advanced users.

-Interaction designers should consider designing keyboard-based graphical user interfaces, to simultaneously take advantage of both high bandwidth input, and high bandwidth output.

62 Responses to “The Graphical Keyboard User Interface”

  1. For me, the ideal UI is something like in Visual Studio, where as you type, the IntelliSense (http://en.wikipedia.org/wiki/IntelliSense) menus automatically appear near your cursor (but not steal focus), offering you autocomplete options as well as lists of available/applicable commands. Maybe we could have something in Firefox’s URL bar where, when you type “tags: games flash”, it would create a popup menu automatically listing all known bookmarks with both those tags. I prefer this to a bunch of keyboard shortcuts because it requires less memorization and the commands are more discoverable (as they are all listed in the menus).

    Also, someone mentioned keywords for bookmarks. A lesser known variation of them is “bookmarklets”, where you enter a whole javascript function as the bookmarked URL. This allows for an extra layer of flexibility.

  2. vs says:

    for a long time i have trouble with navigating tabs (usually ~100 tabs opened in my browser) – so idea to implement such thinks not once strikes me. And problem like this we have in development – and in the most IDEs it was solved. In Eclipse or other IDEs you can hit Ctrl-E and walk throw list of tabs with camel-case filtering.

  3. Mourner says:

    I especially love the proposed searching functionality. This would be just great.

  4. Ivan Ičin says:

    I fully agree, I use Launchy to start Windows programs. Though, I would put this thing into something that is new address bar – read my concept idea: http://features20.blogspot.com/2007/07/natural-languange-navigation-finally.html

  5. usnutrition says:

    Illinois auto insurance california small group health insurance insurance medigap policy medicare health companies costs low cost home owners insurance quotes.
    Health immediate insurance online quote california health insurance state auto insurance online rate health care insurance for college students group health insurance rates.

  6. Rowanci says:

    i am gonna show this to my friend, bro

  7. Приветствую всех!
    У меня такой вопрос,кто что интересное подскажет буду признателен.
    Мы с друзьями собираемся поехать в круиз по просторам России и ближнего зарубежья месяца на два на своих машинах,но не как не можем согласовать маршрут,если у кого уже был опыт такого путешествия,может,что посоветуете.Девчонок с собой не берем,думаем,что во все городах России с этим не будет проблем,если у кого будут рекомендации и в вопросе отдыха с девушками тоже буду признателен.

    С уважением Сеньчик

  8. carlo says:

    Just in case you are still interested in keyboard-driven interfaces you could give a look to PodiPodi, a project in interaction design inspired by Enso but adressed to web designers in a way that they can embed PodiPodi as a widget in their website and give their use another layer of interaction and a bunch of new services.

    Bye bye
    carlo

  9. Matt says:

    Interesting enough there is a major program that made use of a similar function to quicksilver. No where near as polished, but the quick apply function in indesign has become my best friend since I discovered it’s ability to act the same as I use quicksilver for the rest of my computer. Complete access to menu functions from the keyboard without memorizing the shortcuts or creating a custom set. I’m just hoping it gets added to the rest of CS by CS4.

Join Mozilla!

About Mozilla Labs

Laboratories are where science and creativity meet to develop, research, and explore new ideas. Mozilla Labs embraces this great tradition - a virtual lab where people come together to create, experiment, and play with new Web innovations and technologies.

Newsletter

Enter your email address here to subscribe to our mailing list for announcements: