How Progressive Disclosure can Work With Interfaces

Web Design | on Jul. 18, 2011 | by 0 Comments

For web designers, the interfaces and working spaces are essential to enhance and get the most of their designs. There are many solutions to maximize and take advantage of these areas and display designs at their best, such as drop-down menus, tooltips and complex single pages. However, progressive disclosure is now proving to be one of the most powerful techniques and has a strong influence on the design of all interfaces.

Progressive disclosure is a technique that gets rid of clutter by breaking down the content of a website into smaller portions that will be visible only when needed. These may be HTML elements that will not appear when users are browsing through a website if the display and visibility properties in CSS are used. Interfaces can be kept simple and easier to use if the content presentation design pattern is used.


The main problem involves negotiating between complexity and simplicity. Nowadays, users seek more powerful tools and flexibility when using websites but they also want browsing to be a simple affair. Basically users do not want to bother learning how to use certain applications even though they would like to use these for an enhanced browsing experience.

When readers click an item in the menu, usually a dialogue box appears offering various options. When using progressive disclosure, this will appear not only in the dialogue box but also in the tabs readers use to browse through the different categories. This technique has now expanded as users are becoming more demanding, thus web developers provide more advanced navigation options by disclosing parts of a page.


Progressive disclosure offers advantages as the interfaces are more reliable as they are clean and simple. They also display the more important content more effectively and focus on the most popular features. Content that is not normally used will be hidden, in order to avoid cluttering the page, thus avoiding browsing errors that usually occur when beginners navigate through the pages.

There are disadvantages as the accessibility may cause a few problems when there is the need to help screen readers browse to the different parts of a page. The preloaded content increases the size of the files thus the page will take longer to load. Sometimes, having too many items to choose from when navigating through a page may confuse the users. Progressive disclosure techniques may also affect the indexing with social networks or search engines.


When a web designer or developer uses progressive disclosure to design a website, it is important to keep in mind that content should be prioritized in two categories, primary and secondary. The primary content should be displayed the moment a user clicks on the page and should be clearly visible to the reader. The secondary content should be visible when the following actions take place: when the user clicks on a certain area of the browser window and the content slides down at his or her request, by using tabbed interfaces so that content is replaced in the layout and by overlapping the primary content in modal windows.

Feature image

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

Leave Your Response

* Name, Email, Comment are Required