How to achieve progressive disclosure UI for Non-JS users

5 min readFeb 6, 2023

Here we try to achieve progressive disclosure UI on Java Script disabled browsers.

What is Progressive Disclosure UI?

Progressive Disclosure UI is an user interface where the content and actions change based on user responses. For example, see the below scenario.

Based on the user response to the question — ‘ Do you have the doctor appointment?’, the UI changes dynamically. If the user response is Yes, then the next question will be ‘Is this your first visit?’. Otherwise it will be ‘Do you want to schedule an appointment?’. Please see the flow chart below.

Based on the response to the second question, the next question/content and actions change.

How do you achieve this?

In Java Script enabled browsers, it is easy. You can use radio buttons for Yes/No and make them auto-submit true or a better approach is to use Ajax calls and load just the partial page with appropriate content and actions.

It is not the same case with Java Script disabled browsers (non JS users).

Problems with Non JS / Java Script disabled browsers

In non JS, auto submit and Ajax calls will not work. So whatever solution that is discussed above will fail for Non JS users. If you use radio buttons, when the user clicks on yes/no, the page updates will not happen and this will cause faulty UI. The application will not be responsive and accurate as it is expected to be in progressive disclosure. For example, see the following screen shots.

When you choose Yes and click on submit, the following page is displayed.

Now choose No for the first question. Don’t click on Submit yet and notice the UI. This results in a faulty UI. Please see the flow chart above which says if the doctor appointment is not there, you need to ask the user to schedule an appointment.

The second question should be ‘Do you want to schedule an appointment’. Compare the faulty and Correct UI below.

In this faulty UI, the content and actions are incorrect which might cause wrong entries in DB when Submit is clicked. See the example below.

Please note that all these issues are in Non JS browsers (browsers where JavaScript is disabled). To test this, you can either disable JavaScript in your browser or use ‘Toggle JavaScript’ extension in Chrome.

So how do you fix this issue.

Here is the solution.

In Visual Studio 2022, create a new ASP.NET Core Web App project — NonJSProgressiveDisclosureUI

Here is the final Solution Explorer

Add Enums folder and create new Enum YesNoType

Add New Model IndexViewModel in Models folder

Update Program.cs — add caching services

Update Home Controller

Update Index.cshtml

Add the following views in Views > Shared folder

__DoctorAppointment.cshtml

__DoctorAppointmentQuestion.cshtml

_IsThisYourFirstVisitQuestion.cshtml

_ProvideRegistrationNumber.cshtml

_ScheduleAnAppointmentQuestion.cshtml

_SubmitIdProof.cshtml

Understanding Code

Home controller > SetIndexViewModel method — Based on the user selections, the model values are updated and cached.

All the relevant partial pages are created.

_DoctorAppointment.cshtml — This is where the logic to load appropriate partial pages with correct questions, content and applications is there.

Instead of radio buttons, buttons are used and the model values are updated in SetIndexViewModel method in Home Controller.

Solution

Now run the application and see how the new solution fixes all the issues. You may compare it with the flow chart above.

When user selects Yes, it checks if it is the first visit.

When user selects Yes for the second question, it asks for ID proof to register him as new user.

When user selects No for the second question, it asks for the registration number.

Now when the user selects No for the first question, the second question changes accordingly.

You might have noticed that the second question has changed appropriately.

Say the user selects Yes again for the first question. The UI should retain his previous selection for second question as well i.e. No in this case. Also the second question is to be changed appropriately.