Info

Tech entrepreneur, executive, and investor; father of eight children; Googler.

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.]

Comments

4 Comments

Post a comment
  1. February 11, 2008

    Hi – I am the editor for Tango. I’m interested if you or any of your readers has tried out the product to see if they have a good emotional reaction to what we’ve done. This is a new type of design, and the more feedback we receive, the better we can make it. You don’t have to pay until the end. πŸ™‚

  2. February 13, 2008

    Thanks for writing up notes from the talk. I’ve posted my slides here: http://www.slideshare.net/sarah.allen/cinematic-interaction-design/

    I noticed you stayed till the end, so I guess you decided it wasn’t just a vendor pitch. I would be interested in what you thought… Did you enjoy the talk? Did you learn anything interesting?

    Sarah

  3. February 13, 2008

    @Rita: I have “people” do my taxes πŸ™‚ but I like what I saw briefly playing around with it.

  4. February 13, 2008

    @Sarah: You are a great presenter and I enjoyed the talk. I appreciated your points about the need for a story, and I hadn’t thought about the value of certain effects before you discussed it (especially showing rows in a table visually move on re-sort; I had considered that just candy previously).

    I would have liked more of a taxonomy of different effects and more concrete information about when they could be used and why–but perhaps you would have gone there with more time.

    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS