Concepts in Design – Progressive Disclosure – Gradual Engagement

Place, Product

a strategy for managing information complexity in which only necessary or requested info is displayed at any given time

Very simple but so powerful concept in design – and not just in web application design. Theme Parks all have progressive disclosure – you can never see the end of the waiting line, and always a new section reveals while you move forward one step at a time. That is the real application of progressive disclosure first hand.

In web application, progressive disclosure is best used to generate gradual engagement. I want to give couple examples of progressive disclosure and gradual engagement in web apps;

Groupon – signup process. When you first land in to groupon homepage, first thing you have to do is to confirm your city – nothing else. Immediately it gets your attention and gives you one very simple goal to complete. Second step is to get your email address – check call to action on this step, you are ready to see today’s deal. Then it comes the last part on the signup form, to ask you all the other usual stuff (names, passwords etc) and you can see the offer on the background. You are already engaged, more than ready to enter what’s necessary to start! The whole process is cool and so simple. Instead of asking all the necessary info in one long form, in three short steps Groupon gets you in so effectively.

Basecamp – edit to-do’s. Basecamp is part of the top league in design practices as we all know. They use progressive disclosure so well when you want to edit a to-do item. First, to-do page is very clean and simple. When you decide to edit anything, first thing you would do is to hover your mouse over the task automatically without even thinking. Then magic happens and the edit link along with couple other action options appear just next to the task – it is so intuitive. When you click on the person who is responsible for the task, you get even more options such as assigning the task to somebody else, add a deadline etc. Basically the additional information reveals itself only when you need it, not one second before… now this is beautiful.

I love to use progressive disclosure as much as I can. Here is one example that we used in sign up form for Tel3.com. On the payment options, if you have a PayPal account you don’t even need to see all the credit card fields, and if you don’t have a referral code, again there is no need to show you the blank fields – unless you are interested with that information. Actually we went one step further and when someone comes to the signup page with a referral code (from an email or a link) we automatically expand that section with the referral code embedded to the appropriate section to continue the scent on the page. jQuery accordion style widget is used to accomplish the progressive disclosure effect.

Further reading.

Application areas.

  • any web forms
  • lead generation widgets
  • web application setup/edit/create pages

Comments on this entry are closed.