Cinematic User Engagement

Progressive User Engagement might be the wrong way to go, when we have all the tools necessary in the browser to present a more cinematic initial experience to a new user, and a chance to increase the perceived value of the product before they begin to use it.

Think of your favorite movies. Do you remember the title sequence? Maybe. Title sequences often go un-noticed by audiences, usually because they are constructed in a way as to help set the tone without being distracting. Or in the case of Star Wars, go all out to signal the beginning of something never before seen.

Some Directors spend great amounts of time choosing the title sequence font and how the dynamics of the sequence plays out. They do this because it can give the viewer a subtle clue as to what kind of movie they are about to see. And if done well, it can greatly enhance the impact of the opening sequence.

Half Life 2 was arguably the first game to raise the bar (ho ho!) in terms of convergence between Game and Movie. It borrowed many of the idioms of the Movie opening sequence throughout the game to mask the necessary loading sections between levels, for example.

In one of the sequels, Half Life 2: Episode One, Valve went to far as to incorporate a new type of ‘Cinematic Physics’ intended to bring the grand spectacle of the movies to the small screen, and deepen user immersion. As did Crysis 2:

Cinematic Physics seems to involve a lot of bridges.

Some authors have written about Progressive User Engagement, where the user is gradually introduced to form elements that request necessary information, or defer the collection of that information until later, in order to have as frictionless a process as possible for the new user.

The reasoning here is that since the signup process is a one time experience for the user, its best to get it over as quickly and painlessly as possible. The result tends to be small, static form elements that are served up briefly and then moved out of the way, and the user thrown into the application.

I think this strategy misses a chance to instead further deepen the experience for the user in such a way that it sets the tone for the forthcoming application.

How can we utilize the ‘Cinematic User Engagement’ techniques for the web? What if we were to layer the notion of ‘Cinematic User Engagement’ on to these ideas of Progressive User Engagement? What would this look like?

I think for a first pass, we could borrow some elements from Game Consoles such as the XBox 360 and their ideas around the 10-foot user interface, and motion graphic design ironically often used in Movies to present a laughable cinematic notion of futuristic computer interfaces.

• Instead of having cluttered screens that carry over brand, footers and other extraneous elements, we could have a completely minimalist screen which only displays the current element the user is to interact with.

• Instead of having small forms, we could user over-sized text on high contrast backgrounds and fading techniques to transition from one form element to the next.

• We could utilize HTML5 video elements to provide subtle backgrounds that set the tone for the Application the user is about to enter.

• Subtle audio or music could be used to provide cues to the user at key stages. The Motion Graphics concept of the New MySpace demonstrates this.

The new Myspace from Myspace on Vimeo.

• Once all of the necessary details have been collected, immediately launch a full-screen HTML5 video showing a user operating the application to get the central task it supports done.

There is much that could be done in the browser using CSS3 and JavaScript to increase and enhance the user experience during first contact, that we are only beginning to scratch the surfaces of. And while it may not suit every application, it’s definitely a technique that could create a lasting impression in your user’s minds.

The future of web application user experience lies somewhere in the convergence of movie, game and appliance - that space will be the battleground for user adoption in the 21st century.

I’d love to find the time to build a demo of these concepts, or if someone wants to take these ideas and execute them, I’ll gladly work with you. Just get in touch.