1

An app that I'm building has a comprehensive onboarding process, involving a multi-step form with 5 steps. It's already a pretty boring process to fill out 5 forms with a bunch of image attachments, and the users also have to wait for each step to submit before moving on to the next. The backend's API is also designed to accept form submissions at each step.

Is there a way to let the user move on to the next step instantly after pressing the "Next" button, without having to wait for the form to be submitted at each step? If I make the submission in the background, I also want to be able to gracefully handle the scenario of when the submission fails. What would be a good UX for this?

One suggestion I found here was to go to the next step immediately and show a loading interface there instead of on the current step, but this only solves part of the problem and still leaves the user waiting for some time before being able to fill up the next form, especially if they are on a flaky connection (which would be the case for many users on the app that I'm building).

Thanks in advance!

  • Hi Ashwin, note that ux.stackexchange is strictly about UX and not about implementation. I think a good UX would be if the user is not blocked while the data is transmitted and validated. You could display a small status icon that shows what the current progress is and if a validation fails (similar to the save label that google sheets shows while it is saving). Are there forms on one step that depend on input from another step? – Nash Jul 29 at 11:50
  • Hey @Nash, sorry about the nature of the question, how can I reword it to make it more about UX? I'm just trying to make the form-filling process feel as snappy as possible, and am open to suggestions. To answer your question, the form inputs are not dependent across steps, they're completely separate. And about the status icon, an indicator would surely help (perhaps a small spinner that turns into a green check on success and a red exclamation on failure), but it might also be confusing for the user to have to guess how to take action in the event of a failure, which is where I'm stuck atm. – Ashwin M Jul 29 at 12:18
  • Depending on what you're willing to change, you could have your whole form on one page and after the user fills in an input box or uploads an image it would automatically validate the input and, if there is an error, display it in a box on the corner with errors in the form. So by the time the user reaches the end, most errors will have already been found, and clearly marked for completion. – MarsNebulaSoup Jul 29 at 13:52
  • Instead of a small red exclamation mark you would have a box with each error clearly labeled so the user can see and interact with each error. Additionally, you could have a dynamic form of which it's elements are composed of the inputs that failed validation. This would go at the end of the form and he prefilled with what the user already inputted – MarsNebulaSoup Jul 29 at 13:57
0

One common pattern that seems to work is to present this similar to a wizard where the list of steps is always present, either down the side or across the top, but with the modification that users can return to a previous step without resetting the process.

Then each step can be Incomplete, Processing, Failed, or Success independently of the others and error messages can be displayed on Failed pages close to the fields that need to be modified.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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