3

I am not a designer nor UX person. I am implementing an application which has multi-step form. Imagine that in this form some steps (screens) need to be validated before person can proceed to next step.

The application has also its own prev/next buttons with progress (dots), showing the person remaining amount of steps needed to be taken.

I am having issue with how to deal with browser navigation. Ideally I want each step of the form to have its own URL. This means URL would control what is rendered (some data for the form is cached in the browser and prefilled for the user). But what happens when user uses browser navigation to visit an URL that should not be allowed?

Imagine following scenario:

I have screen 1 containing a form and screen 2 containing some content. User needs to fill the form in screen 1 to proceed to screen 2. Let's say user fills the form and is redirected to screen 2. Now the user decides to go back, either by using application navigation or browser navigation (both is possible). The scenario which I'm trying to figure out is when user clears the form and uses browser back button. At this point the application is in invalid state.

How to deal with this? I don't know what is the right approach. Maybe I should not let user go to URL that should not be visible to him and instead redirect him to screen 1? But that could be problematic as user would not get any indication.

Improve this question

3 Answers 3

Reset to default
4
+50

But that could be problematic as user would not get any indication.

I think that is the main problem here. Redirecting the user would be fine, most users have come to expect it now that software validates their input. It's only a problem if they don't understand what's happening.

As the very popular 10 Usability Heuristics for User Interface Design by NN Group state:

#1: Visibility of system status.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand.

The main point is to let the user know what the system is doing. So redirecting is totally fine, but just add a message that explains what happened and the user will fully understand:

Same screen as in question but with a warning message added

I'm sure you can pass a variable together with the redirect which tells screen 1 to display a warning.

Improve this answer
1

The problem is that browser displays a cached page when you click back is purely technical. You can ask your dev to disable caching so clicking "Back" will not load cached page but get fresh version (with empty fields)

https://stackoverflow.com/questions/31735428/prevent-browser-back-button-cache

Improve this answer
0

Your example is not very clear. you mention the form is on screen 1 which sends them to screen 2. If they change data on screen 1 and press back they are on screen 0.

It sounds like your talking about a wizard/workflow with steps (pages)

If the user removes required data and tries to press back they should be allowed to step backwards in a workflow but not forwards.

Improve this answer
1
  • Check out how browser navigation works. Scenario where user presses back and goes back to screen 2 is plausible since he already has been there.
    – user3056783
    Jan 22, 2021 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.