How Screenwriting and Film Theory Creates Enchanting Websites
User Experience as a field, and Website creation in general can stand to learn a thing or two from distinctly old-media craft: namely screenwriting and film theory. This year, I’m lucky enough to be joined by Cindy Chastain in proposing to present the topic at SXSW 2010 on exactly how to do that.
To expand on the description in the panel picker where you can give us a push forward with a thumbs-up, here are a few of the concepts we’ll be discussing:
Circular Narrative in Film and Web
You may have taken your children to see a great recent example of circular narrative in the newly released “Shorts.” We see, and have always depended on “classic” or “3-act” narrative to tell stories. This narrative structure is the way all stories are essentially told: with a beginning, middle, and end. Typically, classic narrative starts at the beginning of a time line and moves the audience through a linear accounting of the events.
However, Circular narrative does something a little bit differently: it uses the different characters’ perspectives to tell the story, and typically does so in a non-linear time line. In Citizen Kane, the storyline starts after Kane dies. In Pulp Fiction, the movie starts with a scene in a diner, which in a linear time line would take place 3/4 of the way through the story.
Any of this sound familiar? With every iteration of social networking sites, people’s experience on the Web is becoming more like circular narrative every day, with a central piece of content that is shaped through the lenses of comments and sharing. People who are using these sites are creating their own beginnings, middles, and ends. As Website creators, it’s important to understand these dynamics, and take these lessons into creating sites.
Common-engine Technology
Circular narrative also has technical roots, which we’re calling “Common-engine technology.” Basically, a single database that serves up content and interfaces dynamically according to the needs and perceptions of the audience.
I started working in this in ecommerce way back in 1998, where we would serve up different “storefronts” that rearranged products, prices, and design based on brand. So if “store A” is a price-based brand, the audience is seeing a selection of products designed and ordered around price. If “store B” is a brand known for brand and caters to an audience that is less about price, the interface can be drawn to start at the brand level.
Common-engine technology offers audiences an experience that meets them at their own needs and perceptions, and offers companies a scalable methodology for serving site experiences that achieve business goals more successfully and efficiently.
Recently, we created the Miller ServerSpeak platform with a common-engine framework depending on what kind of bar the visitor works in. This puts the content an the interface into a familiar framework, giving visitors an immediate comfort level and allowing them to dive right into the experience.
In film, this presentation of objects that have meaning on the stage and in time is referred to as mise en scene, and will eventually be a blog post unto itself.
Master-scene format and mental models
One facet that Websites and films have in common is that the space people are immersed in is artificial construct created to mimic our perceived worlds. In both cases, we rely on visual cues to tell us how time and space are defined.
In film, this is done in master-scene format. First, a wide shot of the entire area in which the action takes place. This sets our expectation and understanding of space. If the action happens in an apartment, it’s typical to start with the characters talking while we’re being shown a shot of the entire building, followed by a medium shot that shows the characters in place in the apartment, followed by close-ups of each character in the scene. While this sequence can be shot over days or weeks, and out of order, it is presented to the viewer in a way that continually shows the boundaries of the perceived physical space while revealing new information that propels the story.
Good Web experiences work the same way using Information Architecture, Design, and content strategy. Through a number of devices, whether it be bread crumb navigation, chunking content, and ordering pages to be quickly scanned and clicked through, the placement of these elements for interaction should also always keep users aware of “where they are” and “where they’re going” in the perceived world of the Website, since it has no physical volume like tangible objects (think books) that are always subtly cluing us in on where we are in a real, physical space or object exploration.
By designing with these constructs in mind, we can ultimately create an experience that manipulates perceptions of time and space: to bring more immersion to the table. Getting “sucked in” to a film or a Website is a product of this effective manipulation, along with direction and editing techniques like matched action.
Experience Themes
With all this theory floating around, the natural next question is “How do you do it?” Luckily, Cindy has created a process called Experience Themes that draws from screenwriting to create a process that aligns the people working on a Website to develop the main themes for visitors, and builds the experience around those central ideas. She also has a presentation solely dedicated to the topic that is also worth your thumbs-up on the SXSW panel picker.
In this panel, we’ll be showing the high-level approach to making experience themes specifically related to the ways screenwriters go through the process of creating the story, characters, and outline of their script. Here’s her Experience Theme presentation from the IA summit to give you a feeling of just how interesting and deep this goes:
Hopefully, this gives you a better idea of the topics we’ll be covering in our panel. You’ve gotten this far, now you should help us get to the dais by thumbing-up our SXSW panel on How Screenwriting and Film Theory Creates Enchanting Websites.
But let’s not limit this to this one panel presentation. Please contribute your ideas here in the comment section, or on Twitter @mleis and @cchasitain.
Related posts:
