4

I am working on an application which has a very dense UI with lots of menu items.

Is there a UI Pattern for navigating to different screens by typing text in a text-field?

Text Field for Navigation

The keyboard focus is on this choice field. The user can type certain commands (usually few letters) to open different modules or even navigate in certain data-sets.

4
  • 1
    Out of curiosity, are you offering a way to "turn these off" for accessibility if they're causing havoc with a screen reader or other assistive technologies?
    – Susan R
    Aug 31, 2010 at 13:51
  • 1
    I don't want to post this as an answer (because it really isn't), but if you have that many menus it might be worth considering a different way to expose functionality to your users. The MS Office folks had this exact same problem when they started work on Office 2007 and as a solution they ultimately ended up with the new Ribbon interface. Take a look at this video, it talks about the problems they faced and why they decided to go the route of the Ribbon: videos.visitmix.com/MIX08/UX09
    – Dan
    Aug 31, 2010 at 13:59
  • No to Susan's question. This is for improving the productivity of users. But that's an interesting thought - The application UI is so overly complex that accessibility techniques could be applied to improve usability for all users. Aug 31, 2010 at 14:05
  • See also Archy, the command-line-meets-GUI interface paradigm that was invented by the late Jef Raskin and continues to be developed by Aza Raskin and others. Aug 31, 2010 at 15:25

3 Answers 3

4

It's not really a UI pattern per se, but Gmail and Google Reader basically standardised this behaviour in web apps, and I've tried to follow it since then:

  • No input field specifically; just have the app respond to key presses throughout (except when focused in an input field)
  • Type ? (shift + /) to open a keyboard shortcut overlay anywhere in the app.
  • j & k to move forward and backward in context, like emails or RSS items
  • Sequences: for instance, typing "g" followed by "i" in Gmail "goes" to your "inbox"
  • Map as many keyboard shortcuts as possible to keys corresponding with the action, which should help memorability. "c" in Gmail is for "compose". Exceptions to this rule: other overriding conventions, such as the abovementioned j/k keys.

The "sequence" feature allows you to respond to individual key presses without requiring users to write words, and it (theoretically) gives you unlimited key press combinations since you have a dozen options per key in the sequence. You should be able to implement most commands you want to within this architecture.

I really like how Google implemented this - it's too bad they didn't really extrapolate it into design patterns somewhere (unless they did and I missed it). It would be nice to see more apps follow the trend they set.

2

I don't know if there's a name for the pattern but there's a great implementation in Mac OS X.

If you go to Help | Search or use shortcut Command+Shift+/ (Command+?). You can start typing the name of a menu item and select that item.

Screenshot of Mac OS X's help shortcut interface

Pressing enter at this point would activate the Reload Page command.

1
  • Cool example, Patrick!
    – Rahul
    Aug 31, 2010 at 14:54
0

I'm not understanding why the traditional "tap Alt then a key sequence" pattern won't work. (N.B.: "tap"!)

e.g. "Alt-F-X" (that is, F.ile-E.xit) to close (most) applications in Windows.

The OS X solution is interesting, and relatively usable until you reach the point where you have to type too many characters to reach a discriminating point (e.g. "Search" vs. "Search in Files")

Also plz let's not call them "chords", despite whatever misguided proposition has been advanced by the warring kings of failed usability (Google, MS, and so many others). Let's call them "sequences". Anybody who plays a musical instrument capable of chords will tell you what an antithetical moniker "chord" is for what we're trying to describe. "Ctrl+Alt+Del" or "Ctrl+B" are chords. "g, i" is a sequence.

TY Dan for the MS video link. can't wait to watch it! If there was a site with videos explaining every other dumb decision they make, I'd probably be on it the rest of my life. Changing the presentation around is one thing, but clear-cutting the mnemonic associations many people have spent the last 20-odd years learning in typical, seemingly arbitrary MS fashion is a productivity killer (and frustration inducer), and I can't wait to hear them try to rationalize it! <--speaking as the "power user" ("powerless", more like) who has to suffer because MS usage metrics show "...99% of users use 'Function A', so let's get rid of functions 'B through D' so we can make all the icons 300% larger." (...also speaking as the proud owner of unopened copies of Office Pro 2007 and 2010.)

3
  • Good call on the chords, I guess I wasn't thinking when I referred to them that way. I think you should have posted that as a comment on my answer, though. :) Feeling your cynicism about Microsoft and Google, though. Not sure why that's necessary - the latest editions of Office and Google products have certainly been milestones in product usability, IMO.
    – Rahul
    Aug 31, 2010 at 21:37
  • New user; not allowed to comment AFAIK. I defer to Wikipedia: "[Classical Cynics] believed the world belonged equally to everyone; suffering was caused by false judgments of what was valuable" (ha!) My orig remarks portray typical gripes; to give a general basis summable in < 500 chars: both equate (over-)simplification with usability, resulting in "usability for the masses". But IMO best usability comes from 1) power! (i.e. Function) accessible via 2) extreme configurability resulting in 3) ultimate user-tool affinity; they both fail in this department. Poweruser v. luser, commercialism wins.
    – powerless user
    Sep 1, 2010 at 1:08
  • (not to spam up the comments but...) Haven't used actual Google apps much (grumble grumble) but for example, new Image Search UI, a classic case of them "fixing" what ain't broke. MS the two-headed beast- Head #1: "Where do u want to go today?" "Win 7 was my idea!" etc.; Head #2: i52.tinypic.com/2yl33if.jpg re: my orig post - the "so many others" r off the hook again cuz I'm out of chars! TBH @ this point I'm most interested in OP's answer to my on-topic remarks! ;) BTW, my remark on "chords" was not meant 2 b harsh @ u-most likely a misnomer someone else taught u; not ur fault! pce! :)
    – powerless user
    Sep 1, 2010 at 1:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.