Design Patterns for Discoverability

Question

What are some tried and true design patterns for discoverability in UI/UX, where information or a feature isn't necessarily overt at first glance, but is discoverable by using the interface through progressive disclosure? How can one signal that an interface has discoverable elements?

Answer 1

The whole of the following linked article is interesting, but the following section is pertinent and I think worth including in the context of this question, even though not providing actual patterns.

From Scott Berkun's The myth of discoverability (2003)

How do you actually make something discoverable?

As a designer, you have a handful of resources for emphasizing things, and trying to draw attention to them:

• Real estate: You get a certain amount of pixels to use however you want. Larger targets are likely to be located first, and easier to be found again. Big targets are easier targets.
• Order: You can place things in specific orders, from left to right, and top to bottom, that might form patterns people can learn to follow, depending on their language (some are left to right, some are right to left, etc.).
• Form: You can use color, font, shape, shadow, composition, and other graphic design constructions to help make use of the real estate you have.
• Expectation & Flow: Depending on how you use the above, you can put things into forms or patterns that are in some way familiar to people. The most obvious examples are printed newspapers, and how columns, line breaks, and headings are used. This might be achieved by emulating another design from another website, or from something in the real world.
• Consistency: If you use the screen in consistent ways, you can teach people to look for certain kinds of commands in certain places. By being predictable, you can score some extra discoverability points. This can often be assisted by using available conventions, and trying to make use of knowledge your users already have.

Every metaphor or paradigm you might be familiar with (GUI, Windows, Mac, amazon.com, etc.) makes use of real estate, order and form to achieve the results they do. Good systems provide some basic constructions for making elements discoverable that can easily be reused.

Answer 2

One idea is to align the functionality you want discovered with existing user behaviour. (I only have one example in mind, so can't in good honesty call this a "pattern" just yet.)

The example of this method is noticing that users tend to reflexively attempt to scroll for more in twitter or rss iphone/ipad apps, especially if the twitter/rss stream tends to periodically refresh by itself and add more at the top. Notice that behaviour, even when there are no unread updates "above the fold", and instead of having it be a null event tie a manual refresh to it. And now you have "pull down to refresh". Discoverable.

I've noticed another reflexive user behaviour on my part, that of hitting Ctrl-S or Cmd-S in an open document any time I pause after typing or editing. I even catch myself hitting Ctrl-S a minute later, when all I've done is scrolled the document, reading a bit here or there, or even answer the darn phone. That is, there are no changes to save and yet I hit Ctrl-S. It's a habit. Now ... if some software app was to do something intelligent with that, that'd be great.

---

Ok, found some more actual documented patterns over at the Yahoo Pattern Library. Only they don't call them "discoverability patterns".

Invitation Design Patterns

Designer needs to cue the user that an interactive feature exists

Cursor Invitation -- Designer needs to cue the user that an object can be interacted with.

Drop Invitation - Designer needs to indicate valid candidate drop sites during a drag and drop operation.

Hover Invitation - Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object.

Tool Tip Invitation - Designer needs to cue the user about what will happen if they click the mouse on the hovered object.

---

And I just observed another design solution leading to discovery while writing this answer: if you click on the little help icon and open up the help menu, when you click on one of the help topics there (eg. Styling/Heading) you will quite possibly see some of the icons just above bounce once or twice while the help topic is displayed.

Now, I knew what some or most of those icons were, but I didn't know that one of them was for blockquote. When I opened the help topic for "Blockquotes" the ❝ icon/button bounced.

OK, if we can find few more examples of the animate related object design solution, I think we can call that a pattern too. (The Yahoo Drop Invitation pattern could be a sub-pattern of this).

Answer 3

New users will be overwhelmed with too many options or functions, while experienced users are likely to want many more than they already have. The solution to this is progressive revelation or treasure hunt if you prefer.

When a new user starts with the application, give them just the basics that they need to get things done - hide everything else. That way they can get from zero to effective within a short space of time and easily feel more confident in the application.

After they have achieved some measure of use (we use points for this), as a reward you reveal another feature and mark it as new or recently unlocked. This puts them in a position where they know the application well other than this one feature. It's easy to learn one more thing, and great for the experience if it's also something useful to them.

Keep on revealing features in this way and your customers will never feel overwhelmed with the application while progressively learning.

Another added bonus is that once people realise that this is the mechanism, they are likely to explore, and thereby learn, the application just to unlock new features - the gamification effect.

Edit: For complicated applications with varied use (like Word), you could give visual hints to points and features or even show features and provide hints on how to unlock them.

Answer 4

DUH! Use Clippy, of course. What you need to do is program some sort of interactive animated character that pops up whenever the user tries to do anything in your program and suggest other stuff that he might want to do. It's highly important to word this just right. Start every such tip with "I noticed you were ...." and then add your discoverable feature.

Animation is critical because otherwise users might focus on what they're doing and won't be distracted by your dicoverabilibuddy. Better just make it modal to be on the safe side.

An even better option is to show daily tips. User opens your application, trying to get some work done, BAM! you blast him with some knowledge about features he doesn't yet know he wants to use. I might suggest that you go for hourly tips, because dailies have been done to death. It'll make your features 24x more discoverable.

hth my 2c