1

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

  • 1
    Could you specify how long you expect the form to save? Is there any file upload? If it's comparable to video you attached, this kind of feedback is just right (the time gap between you press a button and the action is complete is really short and it doesn't look like it needs more emphasis). – Grzegorz Janik May 4 '15 at 12:08
  • Usually it's a matter of milliseconds.. there's no file upload anywhere. The only time it could take longer is when user has very unstable connection or there are problems on our servers. – fxck May 4 '15 at 12:09
  • I then feel good about what you have demonstrated above, it's really clear enough (also becoming more and more common practice lately, e.g. YouTube). – Grzegorz Janik May 4 '15 at 12:16
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.

0

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:)

0

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. enter image description here

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.