User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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:
(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.
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.
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.
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.
