Hi everyone,
I dug myself a new hole in trying to improve my app. I am currently using a 6-part multi-step form template with the typical backend fundamentals, as a checklist for testing a product my company makes.
As you would already know, the multi-step form template aspect relies on a field in the data sheet that tells it whether to make visible step 1,2,3…and so on. I’ve found that if the multi-step form “window/visualization” is longer than the screen it is displayed on, when you click on your button to continue (at the bottom of said form) the step number would increment to the next step, show the next step visual but not scroll all the way to the top to show the top/beginning of said step.
My concern is someone accidentally starting in the middle of the step. Of course, validation would catch that at the end of that step as they won’t be able to continue, but for UX, I prefer to scroll to the top automatically upon continuing onto a new step right?
So my attempt, instead, have the action open a new screen and put the next step there. Next, keep layering each new step as a new screen. However, I have a button to “Go back” and a button to “save and exit”.
The back button changes column value for step # to one before it and then “goes back” as a custom action.
The save and exit button increments a number of how many times it’s been clicked and goes to main tab of the specific test which is a collection of tests in progress and completed tests. This works because the template is not an actual form but a details page and the value is instantly entered.
Here’s the rub with that. I’ve drawn a chart to try and map it all out but essentially:
step 1a will continue to a new screen/step. let’s call it 2B
the original layered visual steps are still there underneath the new screen which I will call them all by the step number and the letter a.
Now of course 2B will go to 3B, 4B, and so on. If someone clicks back, the column value for step will change and the go back will just then close that new window.
Here’s the rub. When someone clicks on “save and exit” they go back to the main tab as I want. However when they click on their “test in progress” the step value is still the same which takes them to the correct step but it’s not the new screen (2B) but instead 2A which is the original layered visuals before. Well continuing from 1A will go to 2B, then 2B will go to 3B but if you save and exit on 2B, 2A which wouldn’t have been accessible before, would send you to a 2C (a new screen).
Now I can just do duplicates of everything in this tree but I wanted to ask, for the sake of simply scrolling back to the top automatically on the layered visuals A for each step, could you help me think of an easier way?
The only other solution I can think of is instead of layered visualizations, and new screens, each step is a new tab, but I can see that getting my tab management screen messy with all the other tests I have in my app.
I took a break once I started mapping the 3BA (or 3C)
TLDR; multi-step form steps are too big, going to next step needs to start at top of the page. How to make it start at top of page without using tabs as steps.
