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.

Typical can be good

Anyone working in a creative field will feel, from time to time, a little bored. It may feel like you've done the same thing before, and it feels like you're going through the motions. "This just feels so typical." So you try to shake things up by doing things differently, by starting from scratch, deliberately avoiding the way you've done things before.

That's good, right?

Well... not necessarily, particularly in web design.

While creative people may get bored, most people -- your consumers -- tend to resist change. Change is uncomfortable and unexpected. We operate on muscle memory a lot -- most web visitors know to click a logo for the home page. Most people know how tabs work. Most people understand a dropdown menu.

When you start changing those fundamentals, you're forcing people to learn something new, you're breaking well-entrenched habits, and you are putting your visitor in a position of unfamiliarity.

You can try to push past the typical in many aspects of design, just don't forget that the visitor is probably coming to your site to get something done, and they will accomplish that better if, at least at the interaction level, the design follows standards they are familiar with and have used before. Typical is often actually the best way to go.

Why are hosting admins so awful?

One of the new challenges I've faced in expanding my freelance work is that I have to interact with a variety of admin interfaces for different clients' web hosts. And they pretty much all suck. Why is that?

To be fair, web hosts have a tricky line to walk -- in many cases, experienced coders will be the ones interacting with the admin interface, and it is appropriate to use more advanced knowledge and to reduce the number of "walk you by the hand" tools. But at the same time, you may be dealing with staff members at smaller organizations who know next to nothing about web coding and yet are in charge of doing things like setting up email addresses and uploading files. Ideally, this would never really be the case -- but in those situations it does make sense to have a few tools and wizards to help.

So why do these hosting companies build interfaces that confound everyone equally? I just logged into one that instructed me NOT to use FTP to upload files (an incredibly simple procedure that is basically "drag and drop"), and that I was required to use FrontPage for fear of corrupting files. Of course, I'm ignoring this, as there's no logical way I'd be corrupting anything, but it's bizarre that this was set up this way in the first place. I'd figure that if you are in charge of a hosting company, you'd probably be an expert on how that sort of thing works, and I can't imagine any expert would set things up to require a particular software program to function (unless there is some devious co-branding going on here).

The worst case I saw was a company that actually professed to be comprised of usability experts. Not only was their administrative back-end completely unusable, but just finding out how to get help was confusing. They listed different methods of help contact for different "plan" levels, but nowhere (even after logging in) did it tell you what plan you were on.

Hosting companies could take a serious lesson from the variety of new admin interfaces that have popped up -- whether it's Facebook or Blogger or Flickr -- and note how simple and clear those interfaces usually are. One might argue they are not as complex as a full hosting package, but that is no reason to bury tools and functionality in unfamiliar terms or to overcomplicate simple processes. If these interfaces are confounding me, someone who works in the web industry and knows how to code a site, I can't imagine how confusing they must be to those less versed in web technologies.

As a side note, this seems to be a persistent problem I find whenever I am researching new ways to do things. When I am lucky enough to stumble on to a tutorial for a new technique, it invariably turns out to be an overly detailed process for something much simpler than what I was looking for. Conversely, when I actually do find information about the technique I'm looking for, it's frequently presented with the expectation that the reader already has an advanced understanding of the subject at hand, thus offering little value to someone who is actually trying to learn something genuinely new to them.

Much like bad hosting admin interfaces, bad tutorials fail to think about their prospective audience. Either cater your instructions to multiple types of users, or say upfront what the user should already know before reading (and if possible, link them to where they can learn that information if they don't already know it).