What does a great movie and a great app have in common? — Transitions

Developers have a hard time wearing a users hat. We know how much work animations and transitions are, and as such, we are often doing a cost versus benefit analysis in our head when it comes to animations and transitions. We can be forgiven for concluding that transitions don’t add much to the usability of the app.

Usability is not the same as user experience

Movie transitions

Take a look at this scene from Furious 6. At around the 3 minute 35 second second mark, we see a few of the actors driving cars, then we cut to an other scene inside a tank. There is little to nothing joining the two frames except the background music. This is a cut in the same scene and hence doesn’t look too bad. Often between different scenes you’ll see something similar as well (sorry, finding clips of more than 1 scene on YouTube is hard).

This is an example of a transition and it works! Furious 6 is a great movie, nothing wrong with this. What I want you to note is that nothing else carries from one cut to the other except the background music. However, compare this to the Agent Smith Interrogation scene from The Matrix.

At around the 4 minute 30 second mark, we see Neo screaming as Agent Smith inserts a bug in his belly button. Neo is screaming because his mouth has just sealed shut and there is something crawling into his belly button. Then we see Neo wake up, still screaming. This is an example of a transition known as an L-cut. The audio carries over to the next shot. But, there is also a bit of a match-cut, which is when the composition of the scene is similar between two scenes and there is also an element of the smash cut which is when the cut is quite abrupt. Neo was lying down screaming trying to get loose. In the next scene we see Neo sit up on his bed (i.e. he was lying down, hence match-cut), we find him in his room (smash cut) and he is still screaming (L-cut).

That’s great and all, but what does it have to do with apps?

  • Cutting on action
  • Cut away
  • Cross cutting
  • Jump cuts
  • Match cuts
  • Smash cut
  • Invisible cut
  • L-cut
  • J-cut
  • Fade in/out
  • Dissolve
  • Wipe
  • Whip-pans

There are many forms of animations and transitions between screens in app design and development as well. On Android there are a few ways to animate elements on the screen:

Using the above, you can perform animations and transitions such as fade, resize, pan, translation, zoom, rotation, path and colour morphing, the list goes on and on.

Using the correct transition can help your user understand the context and hierarchy of your app and your screen. It can show that two screens are related or the content on the two screen is related as with shared element transitions. This along with trying to make your apps interaction feel natural is what material design tries to achieve. I recommend you watch the video on Material motion below and the Session on Material design motion from Google I/O 2016.

Learn more on what makes The Matrix such a great movie

Finally

In order to build great Android apps, read more of my articles.

Yay! you made it to the end! We should hang out! feel free to follow me on Medium, LinkedIn, Google+ or Twitter.

A software engineer, an Android, and a ray of hope for your darkest code. Residing in Sydney.