The UX of Ajax Load Animations

Consider the spinner.  There are even sites to help you build these ubiquitous items.  They serve a very useful function.  At heart, the spinner is an animation to take your mind off the fact that the system isn’t instantaneous.  They are also there to communicate to you, “I know what you want, and I am working on it.  Please hold.”

What else can a spinner do?

A spinner also allows you to communicate your culture and personality to your users.  It allows you to engage and communicate in a very specific way.  The user is in the eye of the storm of activity.  It is the calm before the action.  This quiet time is perfect to communicate a quick feeling.  Consider some of the following.

progress1

Not very interesting if you ask me.  It seems to say, “I look like a progress bar, but I loop, which means I don’t know how long this will take.  Sorry.”  Even WordPress (a great app) has a candy-cane version of this that isn’t very interesting or engaging. 

progress2

This one is nearly ubiquitous.  Everyone uses it.  It’s subtle and communicates effort without confusing when the effort will end.  However, it’s BORING.  What is to love about this?  It loses the opportunity to engage.  Everyone does this.  Are you just like everyone else?  Do you want to be?

animatedspinner2

This is one I just made.  Needs work  maybe, but it is “different”.  Being different than the throngs is half the battle.  Of course, you will want to have a designer match your site theme to the loading theme so it’s a seamless experience, but try to design out of the box on this.

progress3

Wow.  Super simplistic, but it is alot of fun.  I am not suggesting to use any of these examples exactly, but this is a perfect example of something that is fun and interesting and perfectly conveys that the user should wait.  Check out the other varieties of this stick figure theme.

hourglass32

A little choppy, probably could use more tween frames, but the look is definetely different.  This took about 5 minutes to create.  Simply spinning a well designed icon is interesting and different.

progress4

This is really cute.  It still conveys waiting.  It conveys character and creativity.  It’s engaging.

ajax_indicator_small

I actually used this one in an application and people loved it.  They called them the “skittles”.  This is exactly the feeling you want.  It’s fun, it’s lovable, it’s engaging.  You even want to give it a nickname.

So what is the point here?  I am saying that a spinner is an oppourtunity to be creative and to engage with your customers.  If they believe that your application is fun and interesting, they will overlook some missing features or snags.  They will give you the benefit of the doubt.  You still need a great application, but this is an easy way to earn a few extra points with your users.

I hope Smashing Magazine has a 80 best loading animations article at some point in the future.

Comments

3 responses to “The UX of Ajax Load Animations”

  1. Dan Avatar
    Dan

    Why not actually communicate with words. Have your companies tag line over or over again. What is the limit of the loop time? Can you have it read trivia questions, like the caps on Snapple bottles. When you computer is working like this, the user is a captive audience. For Marketo, why not use the little Marketo logo? It’s not too exciting but it’s branding (maybe it can morph into a $ sign). Of course, the best one are the ones that are actually useful, that ones that somewhat accurately tell you how much longer you have to wait.

  2. Glen Lipka Avatar
    Glen Lipka

    You often do not know how long it is to wait. Factors like server load and latency make that impossible.

    My point is to NOT show your logo over and over or your tagline. People will hate you. You have an opportunity to be interesting and engaging. Your logo is not interesting.

    Trivia is interesting. This is why Gmail and Snapple both use it to make a human connection. However, if the wait time is less than 1 second you run the risk of not being able to see it long enough to appreciate it.

  3. Tim Avatar

    Dear users of http://preloaders.net!

    We would like to inform you that Preloaders.net has new upgrades. We have improved the preloader generating form in terms of usability. Also from now on you can set a reverse animation for the preloaders. Please check out the web-site to see the difference

Whatya think?