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
If you think of apps as simple tools to get a task done, then yes, transitions and animations may not add much to your app. However, we have come a long way since the late 2000’s and app development is now more about guiding your apps narrative. This can perhaps be best describe through an analogy with the movies.
Most transitions in a movie are rather straight forward, a bunch of stuff happens, then in the next frame, we see something completely different and something different is happening. We have either jumped ahead or back in time, jumped to events happening some where else, or jumped to an other act in the story.
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?
The combination of the match, smash and L-cut carries the story forward quite well. We are not sure if Neo was dreaming, or if what we saw in the last scene was real. The L-cut is specifically designed to create a seamless transition and the effect of using all these cuts together is obvious. The way the scene is cut alone conveys a lot of meaning to the user. This is similar to the kind of benefit animation and transitions offer in your app. Just like the movies which have a lot of cuts and transition types:
- Cutting on action
- Cut away
- Cross cutting
- Jump cuts
- Match cuts
- Smash cut
- Invisible cut
- Fade in/out
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:
- Activity transitions
- Fragment transitions,
- View transitions (through animating views in and out)
- Shared element transitions,
- The new transitions framework.
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
This post was in part inspired by the YouTube video below. If you love The Matrix or just want to learn what a difference great scene transitions make, I highly recommend it.
I have take a bit of a break from writing recently so I thought I would get back to it with a light hearted number about transitions. I hope this article was an entertaining read. There are other elements of great movie making that apps have in common, such as colour, on-boarding (capturing audience attention) and character development (making sure people understand the context of the tasks). Hopefully I’ll cover them in the future.
In order to build great Android apps, read more of my articles.