Usability Institue Logo- A bolt that can be fastened with any of 4 tools
Reducing Training to Its Sensible Minimum: Zero...
Inexpensive, Independent Usability Consulting by Jack Bellis
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles Site Reviews and Critique About: details on who I am and what I do Address, phone, number,  and so on

Learnability Gallery

If you want to contribute, email me; I will add you to the authors list.

  • A visual library of learnability techniques, patterns (to use the current parlance).
  • I recently wrote an expose on the high learnability of This page takes that a step further and creates a repository to catalog all of those techniques to the extent that they are visual. In contrast to "facility," (the other half of usability), learnability is almost always visual. Facility often involves the interaction design or fingers, not eyes, so it's less suitable to graphics.
  • 2008-Sep-3

Put Functions Everywhere Where They Apply

Although the lion's share of the techniques in this gallery will be text effects, text is almost always a substitute for a more powerful measure... one that usually entails writing a lot more code... providing more functionality... designing bolder solutions. So we'll start with an example from Macromedia Dreamweaver where they emphatically answer an age-old question in software development: where should this function go? The answer is everywhere. In the screen sample below I show four places where you can assign a style to an item. And there are more that I didn't get to! Gone are the days when it was acceptable to provide only one "invocation" or when designers had to justify the fact that redundancy is not foolish.

Instantaneous (Character-At-A-Time) Feedback

Explicit, Verbose Function Labels

Email Tips

Don't Disable, Don't Hide... Explain

Advice Right on Menus

Page Advice


What Vs. Why

This point gets into pure techwriting. When explaining new features, you must explain two distinct facts: what something technically accomplishes and what the benefit ultimately is... how it saves time (or effort, which translates to time, no?).


Documenting "Not" Conditions

"We Have a Different Mental Model"

Explain What "Won't" Happen... and How To Do It If You Really Want To

Explicit Capability Limits

Unsuccessful Results

Describe Visual Items Visually, Not with Text

Animated Help

Field Information

Help Beside Every Field

Help Below Every Field

Special Requirements


Field Help in a Rollover


Function Information/Time Lags

Prominent Feedback

Show Progress Indicators, Not Just the Browser Status Bar


Menus in Order of Frequency

Functions Right at the Point of Need

Display the Whole State of Affairs

Link and Blurb

Just-On-Time Tips

Action/Technique Rollovers

Panel Introductions

Perfect Graphics

Detailed Message

How-To Messages

For a Mistaken Effort

Sequential Steps

For Deferred Results

Explain Complex Options in Detail

This message deals with one of the most powerful and complex techniques, bulk or en masse changes. I'd consider two somewhat trivial improvements: Bold captions in the two group box borders, and change "OK" to "Update" because of the impact of the ensuing actions.

Show Choices Visually

Revision History

  • 2006-Sep-14: Created

"My interest in usability arose from the pain and tears of patching the wounds of suffering interface designs with the inadequate bandages of help files and user guides." — Daniel Cohen

2002,   All Rights Reserved
Any and all content may be reused without prior consent if you simply acknowledge the source,