Intriguing Branches
From http://kuro5hin.org | |
What: |
Place links to interesting content in unexpected places, and label them in a way that attracts the curious user. |
|
The user moves along a linear path -- a text narrative,
a well-defined task, a slideshow, a Flash movie, etc.
You want to present additional content that's not the main
focus of attention, however. 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 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 popular
without this natural curiosity and willingness to follow links
into the unknown. Skillful and playful use of Intriguing
Branches can make your interface more fun.
A tradition of creating Intriguing Branches as inline links (also known as "embedded links") already is well-established on the Web. But functional applications might provide a more interesting use of it. It's well-known that users tend to ignore stuff labeled as "Help." But what if you put help-like content behind links (or buttons, or icons) that were labeled in some other way, like "Learn more..."? You can exploit users' natural curiosity to get them into a place where they can learn what they need. |
How: |
Start with a deep understanding of your users. What might interest
them? Where in the interface are they likely to take time to explore
something further, and where do they just need to get something done?
Create "doors" into the supplemental content that would appeal to users. 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 representative 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 persuade users to read the branch content, and then go back to what they were originally doing; don't get them stranded in a backwater! Pop-up windows should provide "Close" buttons, and new pages in a browser-like UI should provide "Back" links or buttons. |
Examples: |
|
From Gmail Gmail's settings page offers links that are clearly help-related, but are phrased as suggestions, not as "help." Here, a "Learn more" link is under the Keyboard Shortcuts caption. This is akin to other forms of context-sensitive help, like pop-up menus, help buttons, and function keys. "Learn more" is an active phrase, unlike "Help," though, and it's clearly visible on the page, unlike menus and function keys. One can assume that it opens yet another web page, so its operation is entirely predictable. |
|
From http://flickr.com Browsing photos in Flickr is often an exercise in following various intriguing branches -- it offers "side trips" into other photostreams, image sets, and groups of images with common tags. The result is a thoroughly engaging (and popular) user experience. |
|