4

I have seen many sites using Ajax loader as an icon or some use plain text and some use both. What is the significance of using the above three methods? Especially the third method where both are used (Google,Facebook use same method)?

Is there a rule of thumb or a standardized rule for the same? Or is it just a visual treat?

4 Answers 4

2

The reason that most services utilize both text and animation is to enforce the UX of the service. Studies have shown, previously discussed here on UX.SE, that the perceived time that the user acknowledges is shortened when they visually can see progress while they wait, ie. animations make the perceived time move faster.

A label that says "Loading..." doesn't offer much background feedback, to be honest, all it's saying is "What ever it is I'm doing I'm not done, and I have no idea when I will be done either. The UX in that statement is not that good, it's very poor in fact. Compare this to a label that says "Loading.." together with an animated progress bar:

enter image description here

(All credit goes to fredley who composed this GIF-animation)

In this instance the element is telling the user that "I'm loading your email and I've loaded THIS much and THIS much is remaining". Here the feedback is greater and thus the UX is improved.

1
  • tnx for the ans, in ur example the case fits just fine. however, in most cases i have seen the loader (the circle gif) and loading... text , so here it would mean the same , textually and graphically , isn't it? so it looses its significance, as u said..
    – sree
    Apr 19, 2012 at 18:35
2

The purpose of the loader is to confirm to the user that while the action has not yet completed, the computer is working on their request. As long as the interface clearly indicates to the user that their request was received and is pending, then the UI element has done its job. If you use a very standard graphic (rotating circle, hourglass) then it is very likely no other visual is needed. If you have a graphic that is very specific to your site (such as a company logo), then the words 'In progress' or 'Loading' may be advised to avoid user confusion.

4
  • ok, but why does (e.g google) gives both loading text and progress bar?, i am curious to know if its something related to standards :)
    – sree
    Apr 19, 2012 at 10:33
  • 1
    It's simple: to avoid confusion. As long as there is room there is little reason not to be as clear as possible. In the Gmail example pointed out by AndroidHustle the dialog is alone on the page; there is nearly unlimited space to present the information, so they have a progress bar and words. In other contexts your space may be more constrained, or you may choose a more minimal presentation for design reasons. Apr 19, 2012 at 17:04
  • 1
    Also note: the word 'Loading' appear even when a user has graphics disabled or is using assistive technologies like a screen reader. Apr 19, 2012 at 17:05
  • alright sounds good, tnx for ur time :)
    – sree
    Apr 19, 2012 at 18:40
2

A label isn't always necessary, but it can be helpful in addition to an animation.

If it's an extremely brief action, just a loading icon/bar might suffice. When you're performing multiple "loading" tasks some descriptive text can help.

A great example is Google Currents. When opening an already downloaded "issue" in Currents, you get a textless loading animation for maybe half a second. It's so brief you don't really need a loading icon.

However when Currents is downloading an issue, it says "Fetching current items..." to let you know it will take longer. It also gives you the option to cancel this step and read the old issues, and the cancel option wouldn't make much sense with no loading text.

Never use just a static lable, because as AndroidHustle notes, there's really no visual indication that anything is working. The animation is in no small part to help you see that the page isn't frozen.

1
  • tnx for the great answer :)
    – sree
    Apr 19, 2012 at 18:39
1

A combination is the best in my opinion. It will appeal to the most users because some users rely on reading and others are very visual. The loader is there to say it is working and not "locked up" and it is there to reinforce whatever text you put with it (i.e. loading).

If you can make it look clean and simple using both, then go with that. But if you are going to pick one, go with the loader because it communicates that something is actually happening.

1
  • tnx for the answer :)
    – sree
    Apr 19, 2012 at 18:39

Your Answer

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

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