5

I'm designing a CRM (Web-based. Optimized for desktop use. Clients are using Chrome on Windows) which has a lot of forms in order to edit everything. Currently, when you save a form, the Save button transforms into a loading-gif and is disabled (more clicks won't do anything) and if successful back to the save button with a success message.
It should be mentioned that the user edits detail-information inside the form. So the same form can be edited multiple times consecutively.

Normally, the user doesn't has to wait more than 1 second until the form is processed and saved. But what if it takes longer?
Currently the user is able to navigate away before the form is saved, if the processing takes a long time. The saving-process is asynchronous, so it still will be saved. But if an error occurs, and the user is on a whole different page, the error message won't be displayed.

So should I stop the user from navigating away while the form is still processed?
If yes, how? Overlay over the navigation? Over the whole screen? Info-Message that if navigating away, he won't be notified if there is an error?
If I shouldn't stop the user, how should I inform him, if the save-process was successfull or failed?

2
  • 1
    What type of application is this? Web, desktop, mobile?
    – musefan
    Commented Jul 9, 2020 at 11:32
  • @musefan. Web. Optimized for Desktop. Commented Jul 23, 2020 at 14:24

3 Answers 3

1

I agree with Nick that you can’t really stop the user from going away from the page. If the saving takes more than a second or 2, most users will start getting impatient, either closing the webpage or press the back button. An interface I saw on Wix which I feel that you can copy is to have a pop up dialogue that warns users that navigating away from the page may bug the field, asking if they would like to proceed. Thought that this design is good to copy to solve your issue here. Just sharing a screenshot from Wix to illustrate what I meant. screenshot on Wix with warning dialogue when user tries to navigate away from the site

0

The hard way

You can't really stop the user from going away, he will manage to close it, forget it, go away, bug it, no matter how much instructions you give him, he and new users will always fall to the same behavior, simply because humans don't like to wait, at all. I gave up on this loading-lock behaviors a long time ago, instead now, I work with Promises.
Yes, just like Javascript Promises, I give a promise to the user that something will be resolved in the future, a similar behavior can be found on Microsoft Azure:

Azure Notification Example

But that's because most my use cases revolve around long-running or complex tasks that actually require a long future.
Doing the same on regular systems that run near-realtime CRUD operations will definitely be a case of premature optimization.

What can you do?

Most options you have will involve interaction locks.

  1. Disable the submit button:
    Loading button
    This is the most simple(and effective!) solution, users will recognize that something is going on and will wait for it(most of the times) to finish. However, this usually is not a good indicator that something is happening because it's very discrete and the user can lose his attention/patience and do something else. But if your operations will rarely take long, this is a good solution, remember the KISS!

  2. Full screen progress: Fullscreen progress example
    In this approach you create an overlay on the entire screen(That blocks any interaction bellow it) that shows pertinent information, always let the user know what is happening and what is expected from him to do:

Processing, do NOT close the software.

Hold on, we are working on your request.

Try to keep full-screen loadings friendly, this way, your user will be greeted with a nice feedback that will lower his chances of frustration, you can even create complex(yet, gorgeous) indicators that will reduce even further the user anxiety, like this: Animated loading indicator

Benchmark it!

Remember the KISS and premature optimization?
Maybe you don't even need to worry about it(The loading issue), benchmark, benchmark and benchmark!
Always monitor how your users behave, understand their expectations and work around it!


You can't fix everything

Unless you're working with a very enclosed system, user mistakes are impossible to be avoided, I dealt one time with a company that submitted their forms and just unplugged their PC's to go home afterwards(I used the *Promise* solution here).
Users will always find a way to break stuff, deal with it, try to make it as hard as you can(Validation, loading indicators..) but don't overwork it, most times you don't even need to worry about some stuff.
-2

okay so this can be done based on response when you call POST/PUT on form submit you can do a loader icon and based on the response of the request take either action

  • Navigate to different page if successful (if response code 2xx or 3xx)
  • Stay on same page if failed (4xx 5xx response codes)

this is doable in javascript/angular/vue.

Hopr this heps

1
  • Rohit, this site is dedicated to UX design and not implementation. That's why people downvoted your answer.
    – Nash
    Commented Nov 9, 2020 at 14:00

Your Answer

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

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