blink design library

Video Help Content - Discoverable but not Obtrusive

A study we did for a client a while back involved a system that made extensive use of video to introduce people to the service. The reaction from participants was completely polarized - they either loved and were enraptured by the videos or quickly lost patience and stopped watching (the videos, by the way, were professionally-produced and extremely well-done.) The participants who stopped watching wanted to dive in and figure things out on their own (see paradox of the active user).

Huddle doesn't build the initial page views around introductory video - instead it shows a closed video area, which the user may open (click to see full-sized version).

Video hidden

Video displayed

This approach seems to have a good balance between discoverability and not getting in the way of those folks ready to dive in.

Top bar for introducing new features

Both the New York Times and Twitter display a top bar that prompts users to discover new features (click to see images full-sized):

I would be interested to see eye-tracking data to understand  how quickly users notice this type of display. The New York  Times uses a drop-shadow treatment at the bottom of the bar, which visually brings the top bar  forward on the page. Twitter uses a slight embossing treatment and has plenty of empty space around the bar. Both treatments probably aid discoverability.

Twitter uses what I think is a subtle but effective display to indicate when the "Election 2008" bar is minimized:

After clicking the "No thanks" link on the New York Times top bar, I couldn't find a way to re-display it--and wasn't sure where else I could look to if I was interested learning more at a later time.

Looking for Teachable Moments

When people start working with a new system, most will immediately start clicking around and exploring - and continue that mode of use as a way of learning the system. This occurs despite the availability of clear, well-written documentation, much to the chagrin of technical writers everywhere. This tendency is known as the paradox of the active user. It's a paradox because in the long term users would perform more efficiently if they invested time up-front in learning about features and functions.

While we still advise clients to provide help for their applications (users will refer to it if they get hopelessly stuck), we also look for opportunities to provide small bits of help that won't completely interrupt a user's task flow. An example of this comes from Adobe Lightroom, which provides a brief introduction to the basic areas of the interface when the application is first launched (click to see full-size images):

What is likely effective about his approach is that gives just a bit of information that supports users' "clicking around" mode of learning.

Introducing What's New

I cringe a bit when I hear someone say they need to "educate their users." This sometimes reflects a company's attitude that their users must conform to their world, not the other way around.

Still, users often aren't aware of useful features that could help them accomplish their goals quickly and more easily. One way of increasing awareness is alerting people when new features are available.

Yahoo Mail recently introduced a new set of features called Yahoo Shortcuts by showing an interstitial page (a page displayed before taking a user to their Mailbox).  The page explained the new features and included a link to turn them off  if the user so desired:

(Click image above to view full-sized)

This page only appeared once: the first time a user attempted to access their Mailbox where the new features were enabled.

Many desktop applications use a similar approach. When a user launches the application, the system displays a dialog box with options to learn about new product features:

In this approach, the dialog continues to display each time the application is launched--until the user changes the preference (in this case de-selects "show this window on startup").

Both these approaches assume users want to proactively learn about features. In reality, most users prefer to learn by doing, even if they ultimately miss the full benefit of the application. This is known as the paradox of the active user.

Encouraging Learning

Similar to the progress bar that LinkedIn uses to encourage users to complete their profile, Wetpaint uses a progress bar to encourage its users to engage in learning.

From: Wetpaint

Overall, getting users to proactively learn a system is a challenge. People tend to just jump right in and start working. This tendency is known as the paradox of the active user because in the long term people would save time by spending time up-front in learning.

Field Tips

This is similar in concept to the dynamic help display shown here, but works even if there isn't blank page space adjacent to the fields. When the cursor is in a field, the field tip is displayed as a call-out to the right of the field.

From: Vox

This implementation could be improved by moving the field tip closer to the field, creating a tighter visual association.

Overall, this is an approach that works best for fields that users are likely to have "in focus" before making their entry. This is less likely for controls such as radio buttons, check boxes, and drop-down menus.

Dynamic Field Help

When the user's cursor in is a field, the related field help displays on the right. The appearance of caught my eye, bringing my attention to it (this type of text tends to be overlooked, which can lead to errors). This solution also eliminates the clutter of exposing all the field help on the form.

From: Multiply

Help Drawer

Under the possible selections, users can open a "help drawer" to find out more about the options. This is a nice alternative to the help pop-up because it's anchored to the context on the page.

Drawer Closed:

Drawer Open (on click):

From: Wetpaint