Why We Love Integrated Help

Have you noticed all the friendly, integrated help popping up everywhere? YouTube, Google+, MySpace (you should check out the new MySpace), and tons of apps are all moving away from traditional help menus and stand-alone content to more intuitive introductions and in-the-moment assistance…

Have you noticed all the friendly, integrated help popping up everywhere? YouTube, Google+, MySpace (you should check out the new MySpace), and tons of apps are all moving away from traditional help menus and stand-alone content to more intuitive introductions and in-the-moment assistance.

A few examples


This HR term to describe what new employees undergo to become effective more quickly has been borrowed by Information Architecture practitioners to refer to the feature tours you experience when first starting out with a new website element or mobile app. Here are some examples that literally point out navigational elements or introduce the top actions you’ll take. This is a good approach for both new and existing users, especially when the interface has changed from a previous version.

Some offer more involved step-by-step tutorials that popup the first time you login or use the app, with embedded assistance (suggestions) like “type your status update here” or “click here to add a link.” The point here is to actually walk you through filling out the data. They may even indicate how many steps you are from completing a task, like completing your 100% profile (a completeness meter à la LinkedIn) or creating a playlist.

Wunderlist 2 (www.wunderlist.com) presents a picture of its web page when you first visit, with encouraging callouts that reveal features when you roll over them.

Wunderlist 2 screenshot

Wunderlist 2 example of integrated help

The new iTunes 11 provides a simple splash screen and invites the user to view tutorials (traditional video demos), before revealing the full interface.

iTunes example of integrated help

Weather Underground’s WunderMap greets the new user with a modal overlay that dims the screen and points out the major features, until the user clicks to “Explore Map.”WunderMap example of integrated helpGoogle Maps has a mapping feature powered by WebGL that shows really cool 3D zooms, 45 degree satellite images, and photo montages. When the feature is enabled, the user is invited to a guided tour that involves typing in certain information when prompted, clicking highlighted locations and using many parts of the interface.


Google maps example of integrated help

Continuous prompting (training wheels)

Still other interfaces use integrated reminders/tips that stay on-screen until you’ve taken action by clicking “got it” or “ok.” These work for the casual, yet committed user (AKA forgetful), and serve as training wheels that let the user decide when they are ready to go without prompting. Other interfaces might change up the amount of help given, once you have indicated that you get it.

The new YouTube interface has a few modeless dialogs that remain on-screen until you send them away. They fit into parts of the screen that don’t interfere with using the site.

YouTube example of integrated help

Google+ has a notification function within its community feature: initially, turning on notifications provides more explanation about what will occur. Later, rolling over the button area displays minimal help text. (This happens in a lot of places with Google+.)

Google+ example of integrated help

Just let me get started

A subtler experience approach (termed gradual engagement by Luke Wroblewski) consists of asking fewer or no forced questions upfront, but getting the user to the experience quickly, and filling in the blanks (or creating an account) over time. The overall concept is based on allowing users to decide when they want to participate more, and puts the onus on designers to quickly deliver value and earn trust.

While Google+ begins with a multi-step signup process that is hard to skip, and prompts from time to time to “find your friends,” the actual act of setting up a complete profile (which makes Google+ more useful but isn’t entirely necessary) can be performed a little bit at a time. Sometimes the interface will suggest that you add or edit your data. When a new user chooses to edit, the useful interface points out the areas you will be changing and provides tips. On later uses, these extra prompts do not appear.

Google+ example of integrated help

Pandora (in the browser) allows users to type in an artist, etc. and immediately begin listening to music; no account is needed.Pandora example of integrated help









SoundCloud works the same way. You can listen to a lot of great new music, and share with your social networks with no registration at all.

SoundCloud example of integrated help

Why do we love these?

They improve the user experience.

No one wants to scroll through a long list of updates to the latest version of your app, or flip back and forth between a training video and the system you’re training them to use, or even read a manual. Yet it’s a good assumption that people will have a better time with your software/site/tool/thing if they get some form of instruction.

Whether it’s with onboarding functionality for new users or adding user tips right next to the feature on-screen, embedding some form of help right into the interface itself will give your users a head start. Consider how much interaction you can provide anonymous visitors, and make it your job to hook them with something valuable. Of course, whether before or after these techniques, a poor user experience like an ugly form has no place anywhere.

They’re more fun, and fun = better.

Users adopt the new platforms or features more quickly and intuitively when they require less of a commitment and are more entertaining. They also are more likely to begin to participate when they know what they are getting into. And for certain experiences, it’s just a lot easier to skip the training and get notified of features you might otherwise miss right at the moment you’re using them.

They’re a best practice.

We’ve designed a variety of interactive tutorials for clients in recent years, and we continue to recommend them as part of any complex interactive solution. As users experience these helpful systems across the web, they’re going to become accustomed to on-screen help and even less inclined to engage in manuals or other external training systems.

On Merillat.com, a site built by Hanson, users can save kitchen cabinet styles, accessories, design photos and more to an “IdeaFolio” profile. When we introduced the feature almost 10 years ago, we designed it to allow visitors to save up to five items before having to create an account (which saves the items forever, of course). If users actually already have an account, the new items are merged. Another site we built, DeltaFaucet.com, also allows guests to consider many items for purchase, with a very visible prompt at the top of the screen so they know they have the option to create an account if they wish.

Delta Faucet example of integrated help

Just as Google’s search-as-you-type feature raised users’ expectations for search everywhere, we anticipate that these integrated help screens will continue to become an expectation of users, which makes them a new best practice for website and app development. To be sure, inline help isn’t altogether new – Apple started using balloon help in 1991. And a lot of these UX techniques have been employed on the sites of many “Web 2.0” startups in the past few years. But frameworks such as Joyride from Zurb are making it all the easier to be sure your solutions are used to their fullest. We expect 2013 will see them hitting a tipping point.

Do you have any great experiences to share? Let me know by leaving a comment below.

0 Tweet
You May Also Like