Design technique: Progressive Disclosure

1-QwxkebxjQRZKN0d4rUcNXg@2x

Dieter Rams 10 Principles are a great way to describe “Good Design.” But what are the underlying techniques that help us achieve these principles?

There are plenty of techniques that make designs more effective. But few actually line up with Dieter Rams Principles. Effective design often celebrates discovery and exploration. Company’s measure screen time and impressions, then build algorithms to manipulate customers.*

*Not all discovery or algorithms are bad. Spotify do an amazing job of discovery without manipulating their customers.

But what about focus? Sites like Medium are built on focus, and it’s the reason we love it. That’s where Progressive Disclosure comes in. It creates useful, aesthetic, understandable, honest and, most importantly, focused design. It’s not new either, in fact its been around for more than 30 years!

Progressive what?

Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand. (Wikipedia)

Don’t fret, even if you haven’t heard of it, you will have seen and designed to it. A common example is the navigation system on iOS (Nested Doll Navigation). There are so many features in iOS so there needs to be a simple way for customers to find them.

For example, turning on Wi-Fi on an iOS device is simple. Firstly the Settings screen focuses the customers on finding the right feature. The word Wi-Fibecomes the minimum amount of data needed. Even on the Wi-Fi screen available networks aren’t displayed until Wi-Fi is switched on. Why show customers available networks if their Wi-Fi isn’t even switched on?

iOS Nested Doll Navigation

The journey moves from an abstract location (Settings) to somewhere specific (Wi-Fi). It requires a few extra taps to get to the feature, but it reduces the amount of thinking needed in each step. Facebooks search feature is a great example of how a few extra steps creates a more focus.

Why’s it so great?

As you’ve already heard me say it’s FOCUS. Remove all the distractions and letting customer get their tasks done! Banking apps make great use of progressive disclosure and staying focused. The last thing they want is for a customer to be distracted when transferring money. Distractions increase the likelihood of errors, which would need to be fixed by the bank.

Progressive disclosure creates a more obvious flow for customers (and obvious always wins). Look at the checkout on any good ecommerce site, they have a clear path forward. Take it to the extreme and remove the entire checkout and you get Amazon. 1-Click checkout removes all the distractions of the checkout by using smart defaults. Customers setup their defaults once and never have to look at them again.

Amazon 1-Click Checkout

Also it creates honest designs. Progressive disclosure moves secondary features from the main flow. Prioritising and evaluating features before you move them requires brutal honesty. Killing and reprioritising* features means asking those difficult questions. But what you’re left with is an honest product for the customers, not pretending to be something it’s not.

*Design is iterative so just because something isn’t working right now doesn’t mean it won’t work down the track. But until it’s useful for the customer don’t force it.

What to watch out for

As with everything there are some keys to getting this technique right. The obvious one is don’t hide features that your customers need. Start off by identify and prioritising your users goals (if things are complex you can bust out a Task Model). If you have analytics have a dig around to validate your prioritisation.

Once you decide to move a feature onto a secondary screen, test your labels and flow with your audience. Labels like “More” or “Advanced Settings” are pretty ambiguous and scare customers away. Put yourself in your customers shoes, try to uncover the words going around in their head. For example banking apps allows customers to transfer money. What are the keywords in the customers head? Are they thinking “transfer, transfer, transfer” or “send, send, send” or something completely different?

Finally, there’s the business side of things. If the business has invested in a new feature they’ll want it to be front and centre. Sometimes there’s a case for this, it could be a strategic advantage over the competition . Other times you’re distracting your customers.

The Iconic Checkout

Progressive disclosure ❤️ might add a few steps to your design, but that’s not always a bad thing. Use it correctly and you have a powerful technique to keeps your designs focused.

20 thoughts on “Design technique: Progressive Disclosure

Leave a Reply

Your email address will not be published. Required fields are marked *