form save progress indication

Question

In our app, when you save/submit a form, two things happen

1. submit button greys out(becomes disabled)
2. there's a progress bar running at the top of the page(similar to medium.com), which is an indicator used across the app for an ongoing action(not limited only to saving forms, since it's an SPA app)

Do you think it's clear enough for the user that things are being saved, or it would be better to add a loader directly associated with the form(inside the button for example)?

Here's what it looks like at the moment. https://youtu.be/xzc7P8R751M

Answer 1

If it's a matter of milliseconds then your approach works just fine.

You're refreshing the entire main body after the form submits, so your users will most likely not even notice the progress bar because they will be reorienting their vision around the new panel.... Your progress bar appears at the edge of the screen so it is in peripheral vision.

Some tips:

• If you really need the progress bar to be more noticeable, thicken it. But I don't think that's necessary given the short duration.

• I presume the done toast is not something you plan on keeping? Because it is overkill....you have too much going on in a few milliseconds for users to reasonably process.

• I'd recommend not using the same font size for "loading" as for your page title, because users will associate the "loading" with a fleeting/transient message and having the static page title show up in the same font size creates cognitive inconsistency for users by forcing them to change their perception of that font.

Answer 2

I had similar issue. Saveing was usualy 0.2s but in some cases it was takeing aprox 4-6s.

What was done: - click green "save" button - button goes gray with spinner and text "saving" - when done buttons goes green with "done"

Progress bar is nice solution... but only when you are able to determine the end of process.

Your loading is overwhelming. But still it is good to show it if it takes time, maybe not so big. Also a lot of things happens in the top: yellow bar disappears, orange notify goes down and "loading" disappears - like in action movie:)

Answer 3

In my opinion, When user submits form by clicking 'Submit button' instead of making that button disabled, show the 'progress bar' in that button. This will not break user's focus and attention.