“Innovation has nothing to do with how many R&D dollars you have. When Apple came up with the Mac, IBM was spending at least 100 times more on R&D. It's not about money. It's about the people you have, how you're led, and how much you get it.” - Steve Jobs

It’s all in between

I’m a big fan of projected motion media: TV & movies. I love it in fact, to a fault. Two of my favorite TV shows are So You Think You Can Dance (SYTYCD) and Top Chef. I watch both of these shows not so much because I’m a dance aficcionado or a foodie (though I do love to dance and eat) but because I love learning about art criticism. I also love Pixar movies and again Pixar killed it with their latest release, Toy Story 3. Couple that with watching the World Cup and a very clear message is coming that I’d like to share to all you designers.

It is all about what you do in between that will turn your fantastically usable system that meets the needs of your customers so perfectly and turn it into an experience sought, after, awarded, lauded, and cherished.

On SYTYCD this week, one of the judges (a very accomplished choreographer, movie director and producer in his own right) gave the direction that you need to be more fluid between your steps. “You are hitting every step” but your movements between the steps are not full enough. (I ended quote b/c I realized I was paraphrasing.) When we look at a dancer, we are struck by fluidity. The movement feels s0 impossible to replicate that we are in awe. We are also entranced by fluidity. When there are fewer and fewer marks where we can find a pause we are brought into hypnosis like watching waves hitting the sea shore. Yes, we can create pause/stops/negative space for its own aesthetic, but this only works when it is actively contrasted against existing fluidity.

Let’s move on to cooking and Top Chef (or even Ratatouille) it is clear that the whole of the combination of ingredients is ever more powerful than them separately. But it is more than just the wine going with the steak that counts here. It is also about how moving between flavors is controlled. This is how the art of deconstructed cooking comes in. In order for it to work, it is more than just separation. The food needs to be prepared so that when eaten separately their order and their make up allows the eater to reflect on the original.

To transition this now to Toy Stor and Pixar, my friend Brooks saw the latest movie before me and he was struck (as were other reviewers) about how much better the computer rendering was. (He graduated with a degree from SCAD’s Digital Media group, so he’s pretty aware of this stuff.) and when I saw it, I too was struck by this. But this is not what made TS3 the best 3rd part of a 3pt series before. It is about the in betweens and about the holism that Pixar so beautifully crafted. Let’s take these on in order.

The trailer: Told me enough of the story to know it was about Andy getting old and the next type of fear all toys face: donation. But it wasn’t that. After watching the trailer (of course we had to prepare) re-watching Toy Story 2 was a completely new experience. It’s like that movie almost 10 years ago already knew what TS3 was going to be about. By playing off of Jessie’s story of abandonment it created the familiar and thus we were able to instantly frame the new story were were going to be entering.

The resolution: I mean screen resolution. This includes 3D, but also the resolution of the 3D rendering. They didn’t play to 3D but every scene felt deeper. By being more like what we expect the world to be we were more incline to believe what was happening in that world. But there was nothing in the digital translation of the analog that felt stopped. It was at such a high resolution that every pixel flowed into the next. There was no perception of aliasing all. The pixels just flowed together.

The segway: Pixar’s use of the segway is art. Every scene flows together perfectly referenced by the previous one. Even when we have a split in contexts/setting the movement between the two are choreographed beautifully through dialog and imagery.

These can be tied to the very well known concept of Gestalt Principles (tons of info) which draws upon the cognition & perception reality that at any given moment we are perceiving our total environment holistically.

But to translate this more tactically to our daily practice here are some things to think about:

Segway: Communicate where you are and where you are going. Yes, I bet you knew this, but do you do it? Do you really do it? How well do you telegraph your system’s journey. Of course, you have to do this without giving away too much, or the user will be overwhelmed.

Transitions: These are a type of segway, but so much more. Yes, they do communicate context, but they also increase fluidity. Transitions used to be difficult for us mere IxD’s to design for our developers in the more stagnant software and web app marketplace, but today tools like Blend and Flash Catalyst make designing transitions so utterly easy.

But this is also about choice of controls. By designing the controls transitions and sketching the motion graphic themselves using the above tools, you will find that your choice of controls may change. Some control types will not afford you the opportunity to manage more fluid transitions and further you’ll need to concentrate on how the presentation of these “new” controls do not degrade the core usability of the system.

The waiting: Transitions are not just about motion graphics. It is about managing the waiting. Whether in a software context or a service context there is almost always waiting. These pauses are seldom in your design control and seldom purposeful but they require as much design effort as the motion graphic transitions mentioned above. Sometimes it can be a simple loading animation that does what ou need, but it can be longer, or not relate directly or indirectly to an activity that can be actively monitored by your system. You are still responsible to the people using your system to engage them through, or segway them past these forced pauses.

Mental models, metaphors, abstraction: How you manage these will greatly effect the experience of “in-between”. “In-between’s” are often about how we fill in the gaps ourselves. In digital systems the gaps are huge. Many we cannot fill with literal mechanisms. We need analogs of linguistic and physical types. This in my mind is where most interaction design falls apart. One because doing this cross-culturally is very difficult, but also because of the wide variations that exist within any culture amongst their individuals. But it is one of our primary tools for filling in the gaps between digital tools and analog people.

If you want to read up more on related issues here I suggest you look up that stuff  on Gestalt Theory, watch SYTCD (the dancing is really great too!), and read up on Jonas Löwgren’s Fluency and Pliability (PDF) in interaction design.

Be Sociable, Share!
  • http://popdevelop.com Mikael Halén

    Well put! As software engineers we often forget about spending time on delivering these transitions and feel that they are there merely for show. If we do fades, slides etc. while loading, the user experiences the time waiting for the system as shorter, even if it is longer. The system is also better looking with these transitions and that makes the user more forgiving because the experience in it’s whole is more pleasant.


The archives run deep. Feel free to search older content using topic keywords.