Cinematography in User Experience Design

Preface

The movies use cinematic techniques to tell a story and sell an idea. Use the same techniques for your online experiences so people can understand your message better.

Pretend for a moment browsing the internet is like browsing Netflix for shows. You’re a producer of one of those shows - an action adventure. A viewer decides to give your show a chance for the first time.

The Action Adventure

As an action adventure you’re selling excitement. You can excite the audience early by jumping into the story before credits with a “cold open”. The Dark Knight’s opening bank robbery scene is a famous example of this cinematic technique.

The narrative becomes easier to explain afterwards because the viewer is already engaged.

If you’re building a new Disney World theme park lander, give them a taste of the park before throwing prices and dates at them.

Example: Disney World Theme Park Lander

  • A full screen video for a roller coaster attraction begins playing.
  • The video is filmed from a rider’s point of view.
  • The coaster is about to go over the tallest peak.
  • The video pauses right before it drops.
  • A question box slides into the foreground - “Children / Adults / Dates?”
  • You make your selection and the video resumes.
  • The coaster plummets downwards then descends into a dark tunnel.
  • Video ends fades to black.
  • A lander page fades in from black to take its place.

The second call to action might be “Plan Your Trip” or “Explore Attractions”.

In this storyboard you removed the hardest call to actions early. You gave a cold open, they became engaged and forgave the first call to action. You fed them a bit more, so they are likely to interact with the second.

You can choose to show this intro once if cookies are set for their accommodations.

The Fantasy

As a fantasy you’re selling a new world to get lost in. You can create a sense of scale for this world by using a “long shot”. The Lord of the Rings uses this cinematic technique when Frodo stands in the distance overlooking Mt. Doom.

Keeping scale in a distant perspective gives your imagination and storyline flexibility.

If you’re building an activity planner app for TripAdvisor - always keep itinerary in a long shot so you never run out of room for more adventure.

Example: TripAdvisor Activity Planner App

  • You are browsing for activities and make some selections.
  • Selections appear inside a planning widget.
  • On your 5th selection, the widget condenses activities into two collapsed groups.
  • Your jet ski ride, snorkeling adventure and fishing trip become “water sports”.
  • Your deep tissue massage and yoga class become “by the hotel”.

In this storyboard the planner always feels empty. By using negative space and grouping, activities are seen from a long shot view. You feel encouraged to add more because your list never becomes overwhelming.

The Animated Series

As an animated series you’re selling a product. You make royalties from merchandisers and content creators who license original artwork, stories and characters. The characters drive the franchise so your animated series will put a lot of emphasis on them.

Tilt shots, zoom shots and mixing focal lengths can be used to create emphasis on characters in your scene.

If you’re building a product lander for Google's new luxury phone - let them try it with an animated 3D model right in the browser.

  • A phone pans into scene.
  • The phone turns on and a logo and brand name appears.
  • A title slides into the foreground. “Super Thin”.
  • The phone quickly rotates 45 degrees to show its depth.
  • A title slides into the foreground. “Light”.
  • The phone slowly spins as it rises.
  • The camera tilt shifts upward to dramatize it’s ascension.
  • A title slides into the foreground. “Amazing Picture Quality”.
  • The phone falls back down and rotates into its original view.
  • The camera centers it’s focus and zooms in.
  • Pictures are sliding down the screen.
  • A “Customize” button slides into the foreground.
  • You clicked “Customize”
  • A pallet of phone skins slide into the foreground.
  • The phones skin changes to something new.
  • The phone can be rotated with gestures.

The next call to action might be “Buy Now”.

This storyboard accentuates the phones features with animation and camera techniques. We help the user fall in love with the phone through playful interaction.

Conclusion

The user experience of landing on a website is often confusing and overwhelming. Were selling information to people at the wrong time, in the wrong order. We need to storyboard how visual elements come into focus with intention. We can use cinematographic techniques to help us deliver these elements with more impact and understanding.