I guess most people agree that displaying a "loading" image or text is nice. But do you display it beside the button, or somewhere else such as the top of the page (like gmail used to do)

Aside from that, would you disable the buttons to prevent sending additional requests? If so, do you do it just in the background, or change the appearance of the button too?

I'm designing a responsive website to it applies to both regular website and mobile.

  • I say you don't necessarily need anything. If the update happens fast enough, the flash of a loading indicator would be more disconcerting than helpful. If on average the load takes less than 300 milliseconds it wouldn't need a loading indicator. If a person is on a slow connection they're used to seeing slow loading pages and divs. – obelia Feb 17 '14 at 3:39

Displaying spinner/progress is a must, but there’re more ways to make your site look responsive:

  • Displaying spinner in place (inside a button/link pressed, inside object being loading) is preferable because it’s easier to notice and user sees it’s his response is processed now, not random interface stuck doing unrelated work.

  • Aim for instantaneous feedback. Once user clicks something, something gotta change: color of the button, button state, progress, spinner, animation. Under any circumstances, do not leave user with guesses if it’s working or not.

  • You can hide short loads behind interface animations (you’re loading something and displaying how panel is sliding in meanwhile). But animations must be short (<100ms) otherwise they’ll make users angry

  • Avoid block jumps (it’s one size while displaying progress, and once it’s loaded it changes size). Make blocks where content will be shown of fixed size.

  • Do not bother showing progress/spinner for fast changes, it just creates flicker. Start displaying progress only if request takes unexpectedly long (>500ms).

  • If possible, try to prioritise network requests and load first what’s user is most likely looking at right now. Load important content first and minor details later. This can make huge difference.

  • It might be appropriate to animate/coordinate displaying of request(s) results instead of “show as fast as it’s ready”, check out this page for ideas on how it could be done: http://ilyabirman.net/projects/emerge/

Here’s a good example of responsive UI in web: http://seesu.me/o. http://fastmail.fm is another one.

  • Thanks. What about disabling the button on submitting a form? – user3163577 Feb 16 '14 at 22:16
  • . A visual indication that the button's been pressed is good. You cannot rely on a disabled button to stop a double message, a flag is also necessary. – QuentinUK Feb 18 '14 at 15:30
  • When button (or something nearby) is indicating progress, it should not be pressable to avoid users confusions – Nikita Prokopov Feb 19 '14 at 5:45

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