Lessons from the Movie Theatre — Part 1.
This is the first of a three post series which explores the connection between the cinematic language used by filmmakers and the interactive language used by web creators in UI design and development.
In this series you will learn some important techniques used in cinematography and how it can be applied to the interactive playground.
Cinematic Continuity in User Interface Design
The majority of films and audiovisual productions are composed according to a set of rules developed in the early 1920s in the United States which create the impression of continuity by editing together discontinuous viewpoints.
This set of rules, known as the Continuity Editing Rules, allowed filmmakers to shoot scenes “cutting for continuity”, and emphasized smooth transitions between shots in which space and time were unobtrusively condensed.
Cutting for Continuity maintains continuous action and self-consistent detail in the various scenes of a movie or broadcast.
Continuity is at the very core of filmmaking and visual storytelling; by maintaining continuity throughout the scene, the rough cuts that the scene is composed of is perceived as one single cut, which makes it easier to follow the story.
According to Blain Brown there are four primary categories of continuity:
- Continuity of CONTENT. Everything visible in the scene needs to remain there from shot to shot.
- Continuity of MOVEMENT. Everything moving in the scene needs to carry its movement from one cut to the next.
- Continuity of POSITION. All the objects in the scene need to keep their position throughout cuts.
- Continuity of TIME. The time of shooting, meaning the illumination, needs to be consistent throughout the scene.
Content, movement, position and time, are the four key factors our brain pays attention to when connecting cuts to perceive a scene.
While I’m not going to pretend that web designers are story tellers like filmmakers are, we do however share a range of of similarities; one of them is that we both have a similar audience. An audience which is easily bored and full of preconceived notions. Another similarity that we share is that both mediums need to be partially understood in order to become either, engaging, informative and or entertaining later on.
If we wish to retain the attention of the public we have to maintain
unbroken connection with each preceding shot
Alfred Capus, 1908
Continuity and UI Design
Continuity plays a key role in UI Design as it helps user’s understanding of the system they are using. When users understand the environment and its potential, the UI can then aim to be either informative, entertaining, functional, or all three at the same time.
Continuity is especially challenging in UI Design by comparison with filmmaking as there is no such thing as a linear timeline. On the contrary, in an interactive environment the user builds his own timeline while interacting with the system. Therefore continuity needs to work like glue by keeping all the pieces together and consistent throughout the experience.
The most important rule of continuity in filmmaking is the 180 Degree Line Rule where the camera remains on one side of the action to keep the actors on the same side of the screen and the screen direction is always fixed along the scene.
Now because the use of render cameras is not a common functionality with regular websites (except 3D environments), our screen direction is always fixed. Therefore our actors are always on the same side of the screen and it’s our task to make sure that they animate in and out following a logic users can follow.
A good example of this is provided by Apple in their iOS Human Interface Guidelines when explaining animation best practices. Apple’s recommendation is to strive for realism and credibility since people can feel disoriented when they experience movement that doesn’t make sense or appears to defy physical laws. For instance if tapping on an email from a list moves the list to the left revealing the full email coming from the right , when tapping “back” the animation should be reverse and bring the list of emails back from the left to the right.
How can we use continuity to our advantage when designing UIs?
While animation and motion tests have become essential when illustrating transitions or interactions on mobile devices (with big players like Google or Apple), there is still a lack of motion practices when designing websites for desktop browsers. Sadly enough, most sites are still just a collection of disconnected sections grouped together by a global navigation.
I do categorize websites and interactive experiences, regardless of their platform, in two kinds depending on their use of continuity.
I. “Cutting to continuity” Experiences
Websites that have several sections connected through a global navigation fall into this category. When browsing them the user jumps from section to section without a clear physical correlation between the different sections. The only connection between them is their similar aesthetics and content treatment.
Cutting to continuity sites are dominant online and work within a standard “click to load” mechanic.
II. ”Single take” Experiences
Just as in an Alfonso Cuarón movie there is no need to emulate continuity when there are no cuts. Think about sites where all the sections are naturally connected in a framework and there is no such thing as a “click to load” mechanic but rather a “click to reveal” mechanic instead. Mobile Apps are especially good at this and so are interactive installations.
Animation is rooted in these experiences and makes all the physical laws tangible by bringing in sections and components with a given logic.
Single take experiences feel like a solid system. Website Frameworks in this category are for example paginated scroll with side content or layouts with content overlays.
Know the rules well, so you can break them effectively.
Continuity in UI Design is achieved through logical order and animation. Where Apple’s animation guidelines calls for realism and credibility by not defying physical laws, Google plays a whole different game.
Google Material design and more specifically Android Lollipop offers a take on continuity that ignores physical laws as we understand them traditionally. Material design is somewhat rooted in physicality but it adds a layer of magic on top. I.e. Buttons can transform into new interfaces when interacting with them.
By creating brand new components Google has created a continuity language that doesn’t rely on physical laws like Apple, but instead relies on a consistent and hierarchical constant mutation of the user interface.
Google follows the four basic pillars of continuity by keeping a key element in the screen while transitioning from one section to another. For instance, when clicking on an album from a grid, the transition’s key element is the element the user just interacted with, that’s where their eyes are looking at, and what drives the animation.
Can you mention an example of continuity besides Apple and Google’s models?
While not many of us have the power to come up with a whole set of rules that will affect a whole Mobile OS or a Web Ecosystem, we do have the power to create interfaces that will improve people’s lives.
Continuity comes in handy when designing new frameworks from the ground up to ensure we can maintain an unbroken connection between sections and therefore retain the user’s attention and gain their understanding.
End of Part 1.
This is the first of a three post series. Follow the upcoming articles here @Claudioguglieri and see the references for this article below to learn more:
The History of Cutting — The Birth of Cinema and Continuity Editing
Apple iOS Human Interface Guidelines
How Google uses motion design to make tangible tech.
BORDWELL, THOMPSON & STAIGER, 1985.
BROWN, Blain. Cinematography: Theory and Practice: Image Making for Cinematographers and Directors.
THOMPSON & BORDWELL, 1994 Film History.
