Cinematography in User Experience Design

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

Scene 1

Scene 2

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

Scene 1

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.

Example: Google Luxury Phone Lander

Scene 2

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.