Interaction08: Sarah Allen on Cinematic Interaction Design

Cinematic Interaction Design by Sarah Allen (Laszlo)

[This isn’t a good sign; the laptop/projector link isn’t working, and given the highly visual nature of the talk, hmm…]

Who in the room has heard the term “Cinematic Interaction Design”? [A smattering of hands is raised.] This term was coined by the founder of Laszlo Systems [ugh] and we’re seeing it emerge across the industry. [Maybe I should have sat somewhere where I could make an easy exit; I hope this isn’t a Laszlo ad or vendor pitch.]

I don’t like the term “user”; it reminds me of the drug industry. I like the term cinematic interaction design. [Poor Sarah is trying to march on with the talk despite the lack of projector.]

[Sarah’s talking about how websites are based on pages and links and how that doesn’t really map into a lot of applications and causes confusion when overlaid on transactional systems. Finally, the projector is working.]

I started writing desktop apps in 1990 back in the Mac II and Windows 3.1 days. GUIs were pretty established back then; they’d been happening for a long time and were taking over personal computing. It was all about putting power back in the hands of the user; in the 80s you had to be a programmer to use them.

[Slides up now. She’s showing a video of various displays and interfaces, making the point that graphical displays are everywhere.]

All of this technology gives us opportunity:
– high-fi graphics
– animation
– personalized data
– smarter applications

“If you don’t have a story, no amount of graph trickery will make it interesting” – Harry Marks

Story = task + context
– interactivity does not preclude a storyline
– developing a story helps people to successfully accomplish a task

Optimal state of mind for expanding knowledge:
– relaxed alertness: moderate to high challenge, low threat, and sense of well-being

This enables learning
– allow people to access what they already know
– think creatively
– tolerate ambiguity
– delay gratification

From Making Connections: Teaching and the Human Brain

[Sarah talked a lot about the importance of avoiding gratuitous animation effects.]

How does animation help?

“By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain” – Animation: From Cartoons to the User Interface, Bay-Wei Chang, David Ungar, 1995

By the way, this is not about how to make applications for the visually impaired.

[Sarah’s now going through various examples to showcase some of these techniques.]

IBM’s website:
– various sections of the website expand and collapse when you click on a “plus” button, allowing users to get more information without losing the context of the whole page

iPhone:
– shows how sliding helps the user keep context in the system. [While I like the transitions, I wonder if they are material in preserving context in this case; would love a demo without the transitions; maybe I should do that.]

Netflix:
– clicking on the move-to-top-of-queue button moves things to the top of the queue visually; you might not realize that otherwise.

LZPix:
– a Laszlo picture viewer. Show points out that when you click on a photo amongst a group of photos, the whole set of photos appear at the bottom. [iPhoto does the same thing but without the animations; could be a good comparison.]

iShares
– lists of items visually show the new sort when you resort the list or add items. This is helpful because you don’t have to manually track where things have gone. [This is definitely a great example of how motion helps.]

[Sarah is talking about Casablanca and introducing the roulette scene, which differs from the rest of the movie in style; rather than the traditional long cuts, it has a series of quickly edited short cuts.]

This is an example of “invisible style”: when there’s importance in a scene, there’s more attention, a lot of cuts, etc.

I’m going to show you some examples of how storyline, emotion, and visual transitions are put in practice.

Pandora
– storyline: you create a personal radio station and listen to it
– emotion: conversational voice
– visual transitions: establish a sense of place

The storyline when you create a radio station shows how Pandora is not some geeky technology that has this machine that creates custom music for you; it’s more like your musicologist friend who makes recommendations for you.

“Pandora doesn’t have users, it has fans.”

I’m short on time, but other examples:

– Behr. Storyline: I want to paint my bathroom. They tripled their sales with their new site.
– H&R Block. Tango is this cool tax creation program. They introduced emotion with a personal voice with confidence and humor. They also have trust with delayed save and summary data. They have create visual cues with an overview, single page, and smooth transitions.

[Sarah had to end abruptly; the organizers kept the show moving on-time.]