Messy is Neat

Posted in technology, work by johnsnavely on November 18, 2011

I published a few images from the Productivity Vision Video that I mentioned in my last post into my portfolio.

The videos have a complex set of criteria. On the one hand, they are used often by marketing folks to give a sense to customers of what we think the future might hold. On the other, we’re trying to inspire product groups within the company to take a fresh look at things. For the interfaces, we try and have a level a detail that is unusually well thought out for a video, but more like a sketch to those who work in interface design. Since we are not a product group, we have a delicate dance to do; we’re not showing the next version of the product and we can’t give away company secrets, but we still need to build something that’s actually relevant. It’s a lot to pack into 5-6 minutes.

I thought I’d give a little behind-the-scenes the thinking process that goes into a few seconds of the movie…

In the home scene, Shannon (the little girl) exits from her math homework and goes to her bake sale scrap book . The sequence takes about 5 seconds (4:50-4:55min on youtube). We thought of Shannon’s device as her digital notebook, a notebook that she took everywhere. There’s a lot of precedence for an “os” that uses the metaphor of books. Most notably Microsoft’s Courier device (in fact we studied some of the early design concepts for the device), but also the Amazon book store, and Apple’s book shelf and One Note for Office.

Most of these interfaces try to take the activity of reading and collecting books and organize it. Bookshelves can be beautiful and are great for displaying books, but when we’re actually working with open books, things look a little different. They might look like this:

Or this:

What would an interface look like that let me “spread out” all my books? What would the books be? How would I navigate it?

For all of Shannon’s digital content, we started to place everything we might traditionally think of as inside “apps” or “windows” as part of books instead. Social networking could be done in her yearbook, while instant messaging and SMS looks like a comic book (see the lower left). Search results are gathered into a book that she could save or dynamically filter. At the beginning of this scene, Shannon learns math from an bear-in-a-book who knows when she should take a break and work on a different project.

To contain all these books we thought a pan and zoom canvas would be ideal for the infinite space, much like the interface Blaise talks about in his TED talk on Deep Zoom & Photosynth. She could organize things spatially and build her own relationships between books– a story about Amelia Earhart sits next to a diagram of how a beetle flies, sits next to a page on how to fold an origami bird. (see the lower right).

As books are layered on and there’s quite a bit of them, however, you might forget where you’ve placed something. Touch and hold brings up a contextual menu. And touch and hold and speech can issue a command, like “Find my bake sale stuff” to search for that book.

There’s more little software secrets hidden in this scene and throughout the video. I wish we had more time to do a video on one of them at a time… I’d love to explore the interaction model we built for the phones, for example.