Different UX Design Patterns help us provide solutions to global issues that all UI and UX designers face in their day-to-day work. In this post we’ll explore Progressive Disclosure and how to apply it to your web and mobile prototyping.
In recent years, the wireframing process, as well as its documentation, has become increasingly complicated: more functionalities, more sophisticated interactions, different devices, all aiming at reaching and engaging as many users as possible.
However, as they say, “if you are designing for everyone – you are designing for no one”. This situation has been exacerbated by the era of flat design, a minimalist design without interruptions, which continuously offers users everything they want to see. We all want something simple, without distractions, which responds to our needs.
Another element leads us to attempt to minimize the functionalities and content we offer users, and it comes in the form of mobile devices. The restrictions inherent to this medium make us increasingly focused on UX Design Patterns, which help us inform users according to their level of know-how. Furthermore, as stated by Alan Cooper and Robert Reimann in About Face, the user’s knowledge about our interface waxes and wanes, i.e. the relevant user could be beginner, intermediate or advanced. Yesterday’s beginner user can become tomorrow’s advanced user, but months later if the very same user has not used the tool for months, he can become a beginner once again.
When we carry out the UX Design process and documentation, we must keep in mind the following:
- Give the right content to the right user.
- Keep it nice and simple.
- Make it responsive to any device and browser.
UX Design Patterns to offer better content at the right time
Progressive Disclosure is a UX Design Pattern that consists in displaying more advanced functionalities of the webpage or mobile app interface as the user interacts with it. It’s like clicking on “more information” without leaving the screen. In the words of Nielsen: “Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone”. Some examples of this UX Design Pattern are tooltips, labels, keyword shortcuts, expandable text or instructional overlay
Staged Disclosure is very similar to progressive disclosure, in fact, Nielsen defines it as a variation. It consists in showing users step-by-step content in a linear fashion. A classic example of this would be a wizard. So, while Staged Disclosure displays information in a linear fashion, Progressive Disclosure does so in depth. Staged Disclosure is very useful when the steps are consecutive (first do this, and then that). However, it isn’t as useful when steps are independent of each other.
Progressive Reduction is a technique proposed by Layervault based on simplifying the interface of a webpage or mobile app, as the user becomes more of an expert. It assumes that as users understand how the page or app works, they will need fewer elements.
Download Justinmind today to supercharge your prototyping process!
This Progressive Reduction technique is accompanied by its counterpart Experience Decay, which consists in displaying additional elements when it’s been a while since the user has used the webpage or mobile app. As you can see, these UX Design Patterns can be very useful but they must not be overused. Sometimes the problem can be solved by simply creating another screen, instead of trying to cram it all into one. It’s also important to ensure that users can remove the pieces of extra content as they wish. It would not make sense, for instance, if the users were unable to close a tooltip or a pop-up window. It is highly recommended (if not essential) to have a solid Content Strategy to help decide what type of information should be displayed on one same screen – be it in a linear manner, in depth or by reducing elements – and what content should be placed on another.
Ben Baron-Nuget provides an interesting perspective in UXBooth on Progressive Reduction, where he discusses Progressive Content and states that Content Strategy is the first step to defining what content to display and when. In fact, the link that connects all these different types of content elements is called storytelling, where a story is told during the user-interface interaction.
Undoubtedly, these techniques provide challenges when thinking about content and how to display it in the design. However, these elements should already be in play at the prototyping stage. It can save you time and money.
When to apply Progressive disclosure in your web and mobile prototypes
To help you know when to apply these UX Design Patterns, consider the following questions. In order to equip you with the tools you need to answer them, we will show you some of the techniques used in User Research. Who is the content for?
- Personas: discover who your users are, what they do, what their objectives/frustrations are.
- Scenarios: within what context does a person use our tool/service, e.g. to buy something or to look for a room.
- Customer Journey Map: a graphical representation of the entire interaction history of the user with our product or brand, from an individual/personal viewpoint.
What content?
- Use social media: discover what your possible users ask about you or your industry.
- Speak with customer care or sales representatives: they have the most contact with users and can tell you what they ask for, and when they need it.
- Look at your metrics: what’s the most popular content? What are the most visited questions in your FAQ section? Whatever the answer, this is the content that should be shown first.
- Test: as always, data can provide you with the answers to your hypothesis.
Is it possible to apply any UX Design Patterns?
- Differentiate well between main and secondary functionalities: which ones can be omitted and are more basic, and which ones are sought by advanced users.
- Mark well how the user can proceed: be very clear. For example, if there is a field to reply to a comment, there should be a reply link to expand the field.
Once you answer these questions, you can prototype your interfaces and optimize them to help new users, upskill intermediate users, and delight advanced users.
How JustInMind can help you in Web and App prototyping with UX Design Patterns
Justinmind enables you to prototype using these techniques and reflects all behaviors and situations. As we’ve already mentioned, it is essential to be able to reflect these types of movements and animations on your web or app prototype, in order to test whether you are offering the right content at the right time, and to determine if your users (of all levels) understand. Below are some examples of what you can do with Justinmind:
- Display content dynamically using dynamic panels, variables and conditions. This is a good way to apply Progressive Disclosure, and show the fields of a form as the user completes it and according to their answers.
- Create effects and animations to simulate different progressions in your web or app prototype.
- Expand and collapse content, in order to selectively display optional information.
- Change content on mouse click to show different content in the same screen depending on the user interaction.
- Create and customize tooltips, a very useful resource for helping your newer users.
- Include dialogs and pop-ups to interact with your users offering additional information.
- Create scenarios to model your user cases and navigation flows.
Add comment