UI Patterns and Techniques

Intriguing Branches


From http://kuro5hin.org

Use when:

The user will be moving along a linear path -- a text narrative, a well-defined task, a slideshow, a Flash movie, etc. But you want to present additional content that's not the main focus of attention. It might be information tangential to a story, as in the example above. It might be supporting text -- examples, explanations of concepts, definitions of terms -- or full-fledged help text. Or it could be hidden functionality, like an "Easter egg."

In any case, you want a graceful way of presenting the content so that it's ignorable by users trying to get something done quickly, but still available to users for whom it's appropriate.

Why:

People are curious. If they see something that looks interesting, and they have the time and initiative to check it out, they will. Web surfing would never have become a '90s hobby without this natural curiosity and willingness to follow links into the unknown!

A tradition of creating Intriguing Branches as inline links is already well-established on the Web. But a more interesting use of it might be in functional applications. It's well-known that users tend to ignore stuff labeled as "Help," for instance. But what if you put help-like content behind links (or buttons, or icons) that were labeled in some other way, like "More..."? You can exploit users' natural curiosity to get them into a place where they can learn what they need to learn.

Skillful and playful use of Intriguing Branches can make your interface more fun. It's often a good thing.

How:

Starting with a deep understanding of your users, create "doors" into the supplemental content that would appeal to them. These doors might be underlined links (even in desktop applications), headlines, buttons, menu items, icons, or clickable image regions -- it's up to you to figure out how to label them in such a way as to inspire curiosity. There's an art to it. When in doubt, usability-test it with a good sample of your user base.

With particularly obscure affordances, like icons or images, you might want to add tooltips or some other kind of Short Description to inform the user where they might be going when they click on it! (With an Easter egg, though, its very non-obviousness is part of the fun.)

Also, provide an obvious way for the user to get back to their original workflow. The idea is to get them reading the branch content, then going back to what they came for, not to get them stranded in a backwater! Popup windows should provide "Close" buttons; new pages in a browser-like UI should provide "Back" links or buttons.