You may be familiar with the concept of User Experience, or UX. If so, you know that providing good UX in web design is essential for a site to reach its full potential, whether for lead generation or as an e-commerce platform for your business. A term central to the principles of UX that may be less familiar to you is progressive disclosure.
As a Web Designer & UX Specialist at KWSM who works extensively on our Digital Marketing Strategies for clients, I first encountered the concept of progressive disclosure during my UX certification training. Since then, I’ve seen firsthand the incredible results that can be achieved when a website is redesigned with progressive disclosure as a guide. In this blog, I will share some insight on how you can use progressive disclosure to elevate your web presence.
What is Progressive Disclosure?
Progressive disclosure is a key principle of UX design. It is the gradual, strategic presentation of information or features—from simple to complex—as a user navigates through a digital interface such as a website or phone app. In simpler terms, using progressive disclosure means that users get only the information they need when they need it—nothing more.
What is the Purpose of Progressive Disclosure?
Progressive disclosure makes it easier to absorb information because it aligns with how the human brain processes data. Especially when we encounter a new idea or concept, we require a general, broad overview of that subject to begin with. If the subject is relevant to us, we may want to learn more details about it—but not all at once. Our brains are unable to absorb too much information thrown at us, especially if it’s detailed information. Instead, it’s human instinct to resist the demand to stop and sort a lot of data into smaller “bite-sized” amounts—especially if it’s unclear whether the information is even relevant to us. This kind of brain work is often referred to as “cognitive load,” and progressive disclosure aims to reduce it as much as possible.
Examples of Progressive Disclosure
One familiar example of progressive disclosure is a purchase form on an e-commerce website or application. Imagine you’ve added a pair of shoes to your shopping cart and have clicked on “Check Out.” A big form with 20 fields pops up. On a web browser, it takes up more than the whole page, and on your phone, you have to keep scrolling and scrolling to fill it all out. You quickly feel tired and overwhelmed, and maybe you decide you don’t need the shoes that badly.
Instead, most e-commerce platforms display checkout forms using progressive disclosure. They may begin with a very short form requesting the highest-level data—your name, email, phone number—and you must select “next” before another short form will be displayed, asking for your shipping address. As you move through the form, you supply billing information, and then credit card information. Finally, you’re shown all of the data you’ve entered to confirm that it’s accurate and invited to press the “Complete Purchase” button. Other checkout interfaces may use accordions or tabs to divide the form up, which makes it even easier for you to go back and change your selections or data without having to see all of the information at once.
Using progressive disclosure, a 20-step task (filling out a purchase form field by field) is broken up into five smaller tasks—five very short forms, presented one at a time. Completing those five little tasks feels quick and easy in comparison, especially if you have Autofill enabled. (For more tips on creating an effective e-commerce website, see our blog on 3 Simple Tactics To Improve E-Commerce Conversion.)
3 Reasons Progressive Disclosure Is an Essential Component of Good UX in Web Design
Progressive disclosure doesn’t just make for a faster, smoother checkout experience. It’s a vital aspect of good UX in web design for three reasons.
- Most people don’t read websites, especially on the Home page. Instead, they skim headers and images to try to confirm the site has what they’re looking for, whether that’s information, services, or products. If they encounter long paragraphs of text that don’t seem relevant to them, they will not stop to read them. They may even navigate away from the site (or “bounce”).
- The brain categorizes “unnecessary” information as noise, and will actively ignore it to conserve calories. If you want website visitors to easily take in the information on your website, make it skimmable, with all of the most pertinent, highest-level information in headers. Limit the amount of text below those headers as well, even on internal pages where you do need to share more details—think about how much information the user will view at any one time, and divide it up to be easy to digest.
- Giving your website users only the information they need reduces their cognitive load. If they don’t have to work hard to understand your product or service and how it’s relevant to them, they will be much more likely to convert.
Case Study: Personal Injury Attorney Website
A personal injury law firm needed an overhaul to its website’s design and UX. There was a lot of good information for potential clients on their site, but it was presented in large blocks of text, even on their Home page. This made it impossible for users to easily scan so that they could quickly identify what they were looking for.
KWSM redesigned the website using the tenets of progressive disclosure—the copy was reduced to short, easily digestible paragraphs and bullets with icons for visual reference. Page layouts presented top-level information above the fold, and provided more details as the user scrolled down the page, including Case Study results and FAQ sections. Since the redesigned site was launched, conversions have increased, as potential clients are finding the website much easier to use overall.
“One way that progressive disclosure can significantly improve the UX of a website is through the use of accordions. We design and develop Frequently Asked Questions sections on our websites with an accordion feature. Users can see all the questions at a glance, but it’s not until they click on a question that the answer to it is revealed. This type of progressive disclosure allows viewers to see only the information that’s relevant to them. Instead of having to sort through answers to all of the questions, users can focus on the answers only to the questions that they have. This makes it an ideal user experience.”
– Angie Smith, Creative Director, KWSM, A Digital Marketing Agency
Ready to Update Your Website Content?
Now that you’re familiar with progressive disclosure, you will see countless examples of this concept on websites, phone apps, video games (think in-game tutorials), and even in educational courses.
But what about your business website—does it use progressive disclosure to provide a good user experience? If you’re not sure, KWSM can help. Fill out the form below to learn about our website services, including in-depth UX and design analysis.
