Progressive disclosure: making decisions easier and more satisfying

I'm not sure if I've directly used the term on this blog before, but the concept of "progressive disclosure" is (in my opinion) a very important part of good design for any website or application. A good design will help the user find what they're looking for easily. Some people interpret this as meaning you should present up-front every possible piece of information they may need or want. In reality this just confuses the user. Imagine if, when you landed on Amazon's website, you were given a full list of every single product with full product description all on the home page. It would be completely unwieldy and almost impossible to find what you really want. Does "everything up-front" still sound like a good plan?

Progressive disclosure tells you that the best way to get people the information they want is to provide just enough at any given point to help their get to their desired result. To continue with the Amazon example, let's say you wanted to buy a Samsung HDTV. In our "up-front" example, you'd have to scan through an unwieldy page with millions of products to find what you want. Instead, progressive disclosure lets us get the shopper to Samsung TVs by clicking through a hierarchy. "Electronics," then "Televisions & Video," then "Samsung" is highlighted as a brand.

Furthermore, when you land on the Samsung page, you don't just see a text list of products or a full spec sheet for each product. You see each product with its name, an image, its price, and its consumer star rating. You're not given the full list of specs and item description for each item, but you're given extremely quick glances at three major pieces of information - aesthetics, price, and quality - which can then help you narrow down to the selection you want.

There are a lot of other ways of using progressive disclosure that aren't just hierarchical. It is helpful also in stepped processes, such as a shopping cart checkout (often you'll see steps shown, such as "Choose Payment Method" and "Enter Shipping Address," with your current step indicated). This lets the user know what's coming next and how long the process is.

You can also use the concept for things like optional features, such as when you are uploading a photo to a site. You may just want to put the photo up and leave it at that. Or maybe you want to add a caption, or tag people in the photo, or edit the photo, or assign it to an album. Having all these options shown up-front can be overwhelming, particularly to the user who just wants to put a photo up right away, a better method would be to make the most commonly used options visible and then hide some of the less-often used features behind a tab or link called "Customize" or "Edit" or something similar.

If you are already in the user experience field, this is probably nothing new. But it seems a lot of clients are frequently unaware of or even fearful of the concept. "I have this great [product/event/etc.] with all these amazing features and aspects to it, I want people to get excited and know all about how awesome it is! Why wouldn't I tell them all about it as soon as I can?"

The answer is that it doesn't help you if you overwhelm or turn off your potential audience. The above quote comes from a perspective of what the company/organization wants, not what the customer does. What your customers probably want to do is figure out what they are interested in, and then learn more about it. (How would you feel if the moment you walked into a car dealership, the dealer gave you a stack of spec sheets and owner's manuals for every car on the lot before you'd even looked at one? Wouldn't you rather find some cars that interest you and then get ask for more information?)

On any given page of a website, ask what the purpose of the page is and why the visitor may be there. Is it a list of products? They are probably there because they are trying to decide or find a product they want. Provide just enough information to get them to a good match, and then on that product's page give them the full run-down.

There are a lot of adjacent concepts that are relevant as well. "Information scent" is the practice of making sure links are providing just enough information to make the user feel like they are on the right track. And the "paradox of choice" is a concept that it is typically much easier, and much more satisfying, to make a choice from among a handful of options than hundreds of options. You could show 512 choices on one page, or you could add a measly 2 clicks to the process by placing a couple hierarchical categoies of 8 options each, giving your customer a much happier path to their goal.

Don't be afraid that you are going to lose a customer by making them click a few times to find what they're looking for. In reality, you are creating an easier and more satisfying route to guide them.