Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am puzzling over the location to display a moving GIF so that a user knows when a site is processing and they should wait. The site I am working on has many forms that a user changes between using a dropdown list. Some forms have very large text inputs where they may enter many paragraphs, and I have had users spend an hour entering text in a form just to click save and find out that they have timed out from their session.

So I have the auto-saving logic working great. What I can't decide is which of the following layouts is best for a web application for the general public.

  1. Use a large animated GIF with maybe a transparent overlay during the loading
  2. Use a smaller animated GIF worked into the page layout but in a easily seen location

I'm afraid that if I go with #2, some users will not notice that the page is still processing, and will begin entering text into another control. Then when the update is finished, the information they had entered into the next control would be lost.

While that is a serious concern, plan #1 is not too easy on the eyes, having a large image obscure the site, but it does keep the user from moving on until the update is complete.

Is one method preferred over another? Am I missing a third option?

share|improve this question

migrated from webapps.stackexchange.com Mar 23 '11 at 21:24

This question came from our site for power users of web applications.

    
ui.stackexchange.com might be a better place for this. –  user2248 Mar 23 '11 at 19:42
add comment

2 Answers 2

In my opinion the third option is to not obstruct the usage of the site at all. Why is it necessary to keep the user from typing on while auto-saving the data or to revert changes made while saving? From a usability point of view it would probably be the best idea to auto-save in the background, maybe having an indicator about save-status and progress somewhere. An example of this approach would be the mail form on GMail or the draft saving on the StackExchange sites.

share|improve this answer
add comment

With an auto-save, you definitely should be doing it completely in the background, as jm_toball mentioned. The only time you should have some sort of overlay/loading thing is when the user performed an action that caused it to occur.

I am redoing an interface right now that uses option 2 for things, and I can tell you from experience that people DO NOT notice that loading image at all, and are wondering why the site just sits there for a while while something is processing. If you have an action that requires the user to wait to see the result, then you definitely should use option 1. Otherwise, just use background saving and if needed do a notification

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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