0

Consider an Angular app with many user inputs over screens A, B and C. Screen C needs valid inputs from A and B; B from A only; and A is independent. Suppose while on screen B the user enters invalid inputs.

Question: What navigation should I support for B in this case?

My current thinking is to disallow navigation to C due to data validity issues. But what about navigating back to B? On the one hand, there are no validity issues, and the user may want to look up screen A to help with screen B inputs. On the other hand, this would complicate the app's state management. An alternative is to disallow such navigation, possibly with an option to restore the last valid inputs at B. As I lack experience in UX, I'd appreciate answers to help me with this trade-off.

1

Remember always, as a principle, that we (as dev) should try to prevent user errors as much as possible. You are talking about a form that is filled in 3 steps. If you are worried about usability, you should consider the following:

  • Users should know where they are at all times, meaning that it should be very clear to them that they are in step 1, 2, or 3.
  • They should not be allowed to advance if they don't input the minimum required information. Meaning that anything that would let them continue (like buttons, or links) should be disabled until all validations are passed.
  • All required fields should be marked as such upon the loading of the form. They should remain marked until validations are passed.
  • If the user clicks the back button, validations should be passed again. An implementation trick here is to save the state after every step, storing also the status (valid/invalid), the current step, etc. That way the submit button at the end would be only an indicator of finish, or agreement.

Now, in terms of navigation, you should allow your user to go back to any prior step, but they should not be able to go forward. So if you have A -> B -> C, and the user goes back to A while being in C, that is fine. Validations should be passed again. What cannot happen is that the user then tries to go back to C, especially if validations are tied between steps.

And this is all regardless of implementation. Having usability issues, especially in a long task, would put unnecessary stress on the user. That could be fine if you are dealing with an internal system (the users are tied to the system and its tasks), but if this is for clients (like something that happens after your potential customer lands on a page), it can be lethal for business.

Always keep in mind Nielsen's heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/

1

A good way would be to create checkers beside each information that the users would input. Let's say the user has to input four different information in screen A, then there would be four different checkmarks beside each info that lets the user know whether the input is valid or not. That way the user doesn't have to make the mistake first then have to go back to correct it.

If the user needs to check screen A for information to fill in screen B, all he would do is press the back button or whatever functions return them to the previous screen (you could add a save state feature that retains whatever info the user types before using this function so they don't have to start all over).

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