# Design Patterns for Discoverability

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?

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.

• would like to add familiarity to this list; use existing keyboard shortcuts, familiar actions which the user might experiment with. – colmcq Oct 17 '11 at 9:59

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).

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.

• +1 for the joy of gamification. In the right situation of course. No point in not unlocking insert image in MS Word until I've written a letter, two presentations, a document with at least 1000 words, and saved at least one of those in HTML format :-) – Roger Attrill Oct 14 '11 at 18:02
• A lot harder in applications for which your audience's usage is going to be very broad and varied. But then you could allow multiple ways to unlock some feature. – JohnGB Oct 14 '11 at 18:31
• I support applying this to emails and forcing aol, yahoo, hotmail and mediacom email users required to earn enough points to forward emails, especially those with images. – Ben Brocka Oct 14 '11 at 22:53
• I've been experiencing this technique with my phone recently. Unfortunately, the reason is that I had to do a factory reset on the phone, and after reinstalling all my apps, they don't remember any of the features I previously accepted or turned down. This is obviously somewhat of an edge case, but it's something to be aware of when using this technique. Providing a way for the user to bypass the "learning mode" should definitely be considered. – devuxer Mar 4 '16 at 23:23

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.

• +1 for the design pattern of daily tips, but can you cite a good example of daily tips that is a gentle and positive aid rather than just being damn annoying and getting turned off 2 mins after installation :-) – Roger Attrill Oct 14 '11 at 14:07
• no, I cannot :) – Assaf Lavie Oct 14 '11 at 14:13
• There are a number of such 'helpers' right here on Stack Exchange. The "here are some possible duplicates" helper. The tags helper. The "maybe you should go to chat" nudge... – Alex Feinman Oct 14 '11 at 14:46
• But they have the good sense not to offer daily tips – Assaf Lavie Oct 14 '11 at 17:11
• Daily tips can be done well - as an aside on a screen which is already needed. e.g. a start screen of some form, which will open up $complex thing$ that you were working on (where said opening up will take some time anyway) – penguat Mar 15 '13 at 11:16