New Help Paradigm: Overlays

In some recent usability tests I noticed that users constantly have to click back and forth between “Help” documents and the content they’re getting help on.  Most software or web help documents suffer from this problem: They are separate from the content they refer to.  Clicking the “Help” link usually does one of four things:

  1. Open the help file in a new window
  2. Open the help file in a new tab
  3. Open a sidebar-type help
  4. Open the help file in the current tab

All four of these suffer some serious issues.  New windows and tabs impose new window management tasks on the user.  The sidebar help is squashed and still only almost-in-context of its content.  The worst offense by far is opening help in the current tab, hijacking the content that the user wanted help about!

Picture what I’m picturing: A “Show Help” button that creates a translucent overlay covering all of the screen’s content. This button would change to “Hide Help” for later removal.  On top of this overlay, relevant help info is placed in lighter containers that just cover the piece of content they refer to.  These containers have information about the element underneath them.  The user can thus quickly switch back and forth between help and content without losing state and without interacting at the application level.

Here is a rough demo using the rich Ableton Live 2007 interface:
Help Overlay Demo

  • Jeff Kraemer

    I’ve just been looking for solutions to a contextual help problem, Loren, and as I was scrolling through a discussion about it on IxDA, I thought, “Why not an overlay?” Then I came across your post and found you beat me to it! I’m not sure it’s feasible for the project I’m on right now, but I’d love to experiment with this in the future. If I do, I’ll let you know how it turns out.

    Nice illustration, too. Thanks!