The power of transitions & why I stopped relying on static design mocks

The power of transitions & why I stopped relying on static design mocks

Thomas Bogner, the designer behind the beautiful iWatch Mock-Up created this short animation to show off his design but why did he create an animation instead of just showing a flat design?

dribbble_small_iwatch

To see this as a static picture simply wouldn’t have done the design justice. Thomas understands that transitions are an integral part of the design and need just as much love and attention as the rest of our design and should involve less of us holding up printed a4 paper making swooshing noises mimicking the movement we envision.

No longer can we think of user interfaces as static designs and add the magic of interaction later on. Instead, we need to embrace the interactive nature of the Web from the very beginning and think of it as natural constituent.

So your discussing the progress of your project and when you come to the part were you explain your animation and you get a response which is something along the lines of ‘yeah but the animation is just something fancy and not needed, surely it can do the same thing without the animation so lets not do the animation bit.

Kill them!! – only joking, a good explanation is needed here to help your client understand that the animation is to help the user understand what has just happened when he clicked or interacted with something on a page. Below shows a user moving from the home screen to the contact screen:

 

ScrollingNoAnimation

So if you compare this with the animated transition here:

ScrollingAnimated

The user can understand the journey a lot more with the animation. Without the animation it took users over a minute to understand what had actually happened. Abrupt changes in an interface are hard for users to process. Don’t leave them in the dark; always show what’s happening. Nothing feels more unnatural than a sudden change, because sudden changes just don’t exist in the real world.

If you need some inspiration on how to transition your work take a look at these sites.

Conclusion

The point is not to show the coolest and fanciest interaction techniques, but rather use the techniques available to highlight how small interaction details can significantly improve the user experience.

If we are to design better ecommerce pages, we need to challenge what we currently do and see how changing interaction patterns can potentially ease our customers lives. Let’s not recreate whats already been done but always explore new technologies available to see if any can improve how things are currently done.

Jay Townley Senior UX Designer ao.com DRL Limited

Submit a Comment

Your email address will not be published. Required fields are marked *