Why to use Transitions
When we design an interface, we mostly focus on the lay-out, where to put every item, the hierarchy of items, and aesthetics. But what we forget, is to think about the transitions between pages, or in-page-actions and the transitions between different states.
For the user, it is important to know where he came from, from what page, and what path he has walked through the application. It’s important he understands the navigation, and that the flow he follows is natural and logical. To help him with that, we can use transitions; little and subtle animations that provide more feedback about the transition from one page/ state to another page/ state. Also, they give the user a better sense of control.
A good example of an app that makes great use of transitions, is Path. Path is a social network app which combines elements of Facebook, Twitter and Instagram, but uses wonderful subtle animations which strongly enhance the user experience. For example, you can swipe to the right to see your own Path (kind of rip-off from the Facebook Timeline) which provides in this way good feedback about the structure and navigation of the app. Also the little animations when clicking on the plus button to see all the possible functionalities for your Path, are great. They’re just small enough to hardly notice and therefore don’t irritate you, but these beautiful animations also give you a ‘wow’ feeling and they make life just a little bit better :)
Path – Introducing Path 2 from Path on Vimeo.
Another great example of a transition that gives good feedback, is the good old shopping basket functionality which is seen on several e-commerce websites like the Dutch V&D website. A user can select the item he wants to buy and a little animation is shown that the item actually gets put in his shopping basket. This is a great metaphor and corresponds with the real physical world.
At twnkls we also try to use transitions to provide more feedback for the user, and to create a more wonderful experience. In the OBI app, a user has to find 5 items in a brochure, and he has to scan these with his smartphone and put them in his basket. When a user taps on the augmented 3D product he has found, a transition is shown in which the 3D item disappears and the basket screen opens. In this screen, the found item fades into the missing spot and a little sound displays. The user understands better what has happened and why this new screen is opened and how to navigate back to the previous screen. Because we use the Unity engine, we can do a lot with 3D and 2D animation, sound and interaction and so we can develop these transitions that are so important for the overall experience and understanding of the app.
From my point of view, every User Experience Designer should think about the transitions between pages and states, and design the desired animation and sound for these transitions. This will certainly improve the overall experience of your app!
You can read more about the importance of transitions in this article of Mark Cossey: http://uxdesign.smashingmagazine.com/2012/02/28/mission-transition/
