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:
- Open the help file in a new window
- Open the help file in a new tab
- Open a sidebar-type help
- 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.