The UX of Ajax Load Animations

26 Jan 2009

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.

4 Comments

Avatar

Dan

January 26th, 2009 at 2:09 pm

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.

Avatar

Glen Lipka

January 26th, 2009 at 2:12 pm

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.

Avatar

Spinners Redux | commadot.com

February 2nd, 2009 at 10:47 am

[...] I posted a little UX thing about waiting spinners.  Today, I see in Ajaxian a link to http://preloaders.net/.  Very nice work.  These are [...]

Avatar

Tim

September 24th, 2009 at 3:52 am

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

Comment Form

About commadot.com

Started in 1996, Glen Lipka has been been randomly publishing about User Experience, Technology, Human Psychology and other subjects.

Good Karma

Did you save or make money off this blog?

Contact Glen or try to IM me below.

Archives