Bad Ergonomics vs. Good Ergonomics

Looking at contrast between bad and good design is useful for designers. Following common practices is not always a cure to avoid unfriendly interface. Let’s look on the example of trendy practice and how to prevent inappropriate usage.

Bad Example of Animation

While interactive style is an ultimate tool for making web page more appealing it’s also can become noticeable and annoying. When it comes to creating nice pop up window, first priority should be its functionality. Greatest example of over stepping the bounds is Vladyslav Tyzun’s animation concept for a PayPal email receipt, published on Dribbble.

It looks tidy and minimalistic. As for a designer it just feels good to enjoy the animation. This solution is, however, superfluous. To get all transaction information user needs to wait 3.5 seconds. Alternative solution could be some simple drop-down receipt.

Good Example of Animation

Animated solution can be great-looking with elaborate approach

Let’s consider Stripe Checkout’s Animation. In this case animation is not only elegant but it also speeds up the interactivity. While waiting for confirmation SMS, user can see the progress and wait for pre-confirmation that message was sent instead of being confused.  

Small guide of what principles to consider:

1. Duration and speed of the animation
   Make sure user doesn’t wait for elements to appear
2. Choreography in interfaces animation
   Keep user’s attention on one direction at the time of transition from one state to another
3. Easing
   Provide more natural interactivity