Using Animations in Web Design is Not Only Cool, it’s Also Really Helpful

Remember that little paperclip guy “Clippy” that helped you navigate Microsoft Office back in ’97? Or how about that random person that walks on screen and talks to you while visiting a site?

Forget about them because today we are talking about practical animations that enrich the User Experience of a website.

Practical animations are not flashy, jarring experiences. They are subtle changes in the interface that can give the user a queue that they’ve interacted with something. When I’m clicking (or tapping) through a site, I want to know that the site is responding to my input. Actually, I want it to “feel” right.

Mobile browsing is the best topic for this article because we are limited to gestures with our fingers rather than “hovering” or “clicking” with a mouse. To get this right, we need to make sure we give options or queues to the user that they are doing something.

Let’s envision a section of an e-commerce site that you are about to submit an order to. When clicking the Submit button you get a confirmation pop-up that asks: “Are you sure you wish to submit this order?” While this IS helpful, what if we could show that message AND give you options right where your finger is at the time of pressing that Submit button?

What if, once you hit the Submit button, a new set of options slides in from the right of the screen? One button for “No, Wait” and to the right, another button for “Yes, Submit.” Maybe include some helper text like: “Are you sure you want to submit this order?” above the buttons.

submit

are-you-sure

We have now solved for two scenarios:

  • You want to cancel the order (for whatever reason).
    The “No, Wait” button slid into the same spot that the submit button was, and right where your finger is when you tapped the Submit button.
  • You want to quickly place the order and move on to the next task.
    The “Yes, Submit” button is just to the right of where you tapped the Submit button. If you accidentally tap the “No, Wait” button in a moment of frantic purchasing, you will now know that hitting the Submit button again will produce the same animation and options to complete your purchase.

But wait, there’s more!

We want you to really love the experience, so why not show you that the order is processing?

processing

After that? Let’s give you a mini-confirmation and an option to view your order!

view-order

That feels like a pretty smooth experience to me! By the time you hit the view order button, you will have an email confirmation sitting in your inbox. All of this was accomplished without leaving the screen and staying exactly where you were when you hit the Submit button. This example is based on the fact that the you have a preferred method of payment and are logged in, but it wouldn’t take much to tweak this experience to accommodate for non-authenticated users without leaving this part of the order process.

Written by Daniel

Design, Development, and Human Centered Design junkie. I live and breathe web and graphic design. I took the red pill.

New products, info and free design stuff for your business!