NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Wednesday, November 22, 2006

Foo Lessons: Kamishibai

Back in the summer I had the opportunity to attend Foo Camp '06 at the O'Reilly offices in Sebastapol, CA. Foo Camp is a loosely organized gathering of folks that O'Reilly invites to flock together for a weekend of discussions, impromptu sessions, etc. Obviously a lot of interesting people (writer/producer of MacGyver series, engineering creator of the Osborne Computer, flickr folks, Jeff Bezos of Amazon fame, and so on...).

One of the interesting talks that I attended was on the Japanese Storycard Theater. Dave Battino billed it as PowerPoint for People.



It's based on traditional Japanese picture-card dramas called kamishibai (paper theater).
Today's kamishibai has evolved from a form of street-storytelling which was popular throughout Japan from the 1920's into the 1950's.

The kamishibai storyteller was also a candy seller. Riding a bicycle equipped with a small stage for showing the story cards, he would enter a village or neighborhood, dismount and loudly strike together two wooden clappers or allow a lucky child to do so. The sound was a signal for children to run from their homes and gather around him for story time. Those who bought candy got to stand nearest to the stage. Then, in a dramatic manner, he would start to tell 2-3 kamishibai episodes. He would not tell the whole story! The stories were told as continuing serials, that is, he would always stop at an exciting moment, leaving the children impatient for his next visit.

From: http://www.kamishibai.com/background.htm

The idea is really simple. A story is a simple stack of large illustrated story cards. The stack is presented so that the front card facing the audience is the current place in the story. On the back of the last card of the deck is the dialog for the illustration on the front card.

Really simple idea. Instead of having to twist your neck to read the text, you simply glance down at the dialog and a miniture version of the illustration. The trick is placing the dialog at the correct location in the deck instead of directly on the back of the card it goes with.

Why is this important?

The Power of Engagement
It allows you the storyteller to stay engaged with the user. Making eyes with the audience is a powerful principle. Think of how many times you have seen a presentation (I have done it many times myself) where the presenter is constantly twisting their neck or turning their back to the audience to see the presentation. It's easy to lose interest while their back is turned. Watching kids respond to a kamishibai presentation versus a typical library book reading lets you see the benefit of this approach. Kamishibai keeps the kids attention, may book readings lose the attention as the reader cranes their neck to read the story. With kamishibai, the storyteller can concentrate on the drama-- the story instead of the technology.

In the world of conference speaking some of the problem is in the very way that conference presentation technology is arranged. Singers have long employed speaker technology arranged in front of them (monitors) that allow the singer to hear themselves and therefore perform more confidently. This would be a nice addition for presentations. Projecting the same material along the back of the auditorium would allow presenters to always face their audience and receive the assurance that the right material is being displayed, timing their talk with the material (this is done in some venues, but rare at conferences.)

The Beauty of Simplicity
Now I use a lot of technology in my presentations. I employ embedded movies and animation. I like this. And based on feedback, others have enjoyed this approach. But there is an argument to be made for simple presentations. Dick Hardt of Sxip Identity has a wonderfully simple presentation called Who's the Dick on My Site. It just employs single words or phrases that are perfectly timed with his talk. During the talk, Dick does not look at his presentation. He simply talks and the presentation reinforces his story.

I work with Karon Weber a designer at Yahoo! (formerly of Pixar). One of the techniques that Karon has employed in presenting her designs at Yahoo! is to use large (and I mean large, at least 4'x6') poster boards each telling part of the story. Instead of wireframes locked inside a computer, they are set free in this large format. In our current war room for a product we are working on it is fully decorated with these large poster boards. It of course does not dispense with the electronic (they are the source for the poster boards), but it makes the presentation of these ideas completely accessible to anyone who walks into the room (or hallway).

The beauty of this approach is that it is highly practical and completely simple. It is focused on telling a story. It is in the spirit of Kamishibai.

The Power of Good Transitions
When Dave Battino told us a story in the Foo class, I really enjoyed how he transitioned between cards in the story. If there was a quick sequence of action, he would rapidly switch the card. If the hero was in trouble and he wanted to build suspense he would slowly...drag...change...cards... Sometimes the slide was left to right, sometimes it was over the top. But it was effective. How many presenters have gotten enamoured with transitions between their slides and pulled out all of the stops. "Hey, it's in Powerpoint, why should I use the fizzling, spiraling, flipping effect??" Yet, with just a quick flip or a slow drag, the story was enhanced in the kamishibai method--not the emphasis. In my talks on cinematic effects I have talked a lot about the temptation to over emphasize these effects. Making transitions too slow, too long, too vivid, etc. I have often advocated the "cut in half" rule I learned from a member of the Motion Graphics community...

Take the effect, transition, luminence change you have enstated and cut the effect in half.

Transitions are for enhanced communication and engagement... Not for the sake of the effect alone.

Happy Story Telling!

Tuesday, November 21, 2006

Pattern Library: Interactive Games

Eelke Folmer, a professor in the Computer Science & Engineering Department at the University of Nevada, dropped me a note about his work on a pattern library for game usability & game accessibility.

You can find the two libraries at:

http://usability.eelke.com
http://accessibility.eelke.com

Some of the interesting patterns include: Freelook (giving the user freedom to look around independent of where they are currently heading), Instant Replay (allowing users to lengthen their enjoyment of a particularly exciting accomplishment, and Playground (which allows users to experiment without the fear of death.)

Freelook is just a good pattern for any web application. Let the user have freedom to explore the interface without having to directly leave the mode they are in. This could be accomplished on a web site by things as simple as lightweight tour modes (employing lightbox effects).

Instant Replay may not be as applicable to a web application but it follows the principle of letting users get the fullest enjoyment from an interface.

I think Playground definitely has its place in applications. The user needs to feel that they can experiment with their interface without the "fear of death." Which means the user should be able to experiment with the interface without getting into a mode they cannot return from (captured!) or committing a command they cannot reverse (death!) Obviously this is challenging as it requires some level of undo or intelligently placed confirmations (in contrast to idiot boxes that tell the user the obvious) preventing the user from falling off of a cliff.