Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
UX / UI + Ecommerce

UI Animation in eCommerce, Some Do's and Don’ts

By:

Morgan Plappert
Morgan Plappert

on 11/2/2018

Some Do’s

1. Encourage the user to purchase your products


ezgif-4-0b2fbc2b8c.gif

2. Take them along a prescribed path


ezgif-4-38815b1b56.gif

3. Assist with search & wayfinding


ezgif-4-159fb8ac5f.gif

4. A common ecommerce feature – Hover zoom. Let’s the user to get a more detailed peek at the product, and allows for better small screen experience.


ezgif.com-gif-maker.gif

5. Enhance the user experience and alleviate frustration by keeping them in the know, every step of the way. Add personality and branding.

1b-out-for-delivery.gif

1b-order-confirmation.gif

Some Dont’s

Generally speaking, don’t do anything that doesn’t lend to a usable, clean and sensible flow/experience. Don’t design for your ego or add to your users cognitive load – It will sacrifice your narrative. Lend to the experience, don’t add. Be aesthetically-pleasing, but more importantly … Be problem-solving.

  1. Animation for the sake of animation – Have a purpose. Not everything has to move. Make sure you are fully acquainted with the brand (tone, look, feel) and put that brand in motion. Tell your story. Mailchimp is a great example of how to express brand through aspects of the UI.
  2. Confuse the user. UI motion design needs to tell a story, connect the dots and give the user context. Use animation for validation and transitions.
  3. ANIMATE ALL THE THINGS – Overwhelming the user with movement will result in an annoying experience and bogged down site. Compliment the visual design and create motion that will go unnoticed by most. A UI animation should take 100-500 milliseconds from start to finish. Don’t get too flashy (pun intended)
  4. Design for “likes” instead of your user. If animation is taking the lead role, you’re no longer designing with a purpose. BE INTUITIVE. Don’t try to entertain the user, try to help the user.
Share to

Related Posts

UX / UI
Wireframing vs. Prototyping and Everything In-Between

By:Morgan Plappert on 7/14/2020

Prototyping demonstrates ideas, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole.

Read More »
The Internet's Bubble Wrap: Your 404 Page is More Important Than You Think

By:Morgan Plappert on 9/13/2017

Hand over that half-empty glass and let us show you a few examples of how to turn possible frustration into opportunity.

Read More »