Posts Tagged ‘temporal’

Spaces in Between

Sunday, March 23rd, 2008

Spaces In Between ThumbnailThis is sort of a backpost since I didn’t have a blog back then. Last October I was sitting at Peet’s reading Bill Buxton’s Sketching User Experiences and he quoted a book on comics stating how the importance between frames are so important because that is where the reader’s imagination fills in the gaps between the static images. Somehow this idea plus the old problem of digital spaces not having the same sense of orientation as physical spaces led to this idea: why not use transitions to give users a sense of where they are going when they browse the web? Instead of teleporting from page to page, transition animations would whisk the user from one page to another. I decided to go home that instant and quickly build a rough “interactive sketch” that Buxton advocates. I wanted to see what the experience would be like.

While working on it in Flash, I decided to convey relationships by having different animations depending on the relationship between the page the user is currently on and the page the user is about to go to. Drilling down into a hierarchy would zoom in. Moving from one page to another on the same level would move side to side. Moving back up the hierarchy would zoom out. Leaving one site to go to another would fly across cyberspace (cached pages in the browser history) and arrive at the requested site. One thing I didn’t really decide on is whether the back and forward buttons would respect relationships or move from side to side. I included a small site map in the corner that shows the current page’s location in the hierarchy for reference. You can watch it here.

All of this could easily be applied to software or other digital products but I chose to apply it to the web to see what it’d look like. Apple has since, with the release of Leopard, introduced even more communicative animations into the Mac UI. They started pretty early with the cube transition for user switching and genie effect for minimizing, but have added more things like the transitions when using the Spaces feature, going to the next page in Preview, or in Time Machine when going “back in time”. Overall however, few digital products actually use animation effectively today. I’m tired of pointless animations in both AJAX and Flash sites that are purely for boom and sizzle instead of substance.

As a very practical tip, you could try doing this in your presentation with a deck of slides. Only use animations either when switching from one major point to another. Examples include subject changes or in preparation for concluding remarks. This is the same strategy those masters of temporal design use when editing film. Usually, all cuts within the same scene are immediate jump cuts because they go unnoticed and don’t distract the audience. Only at the end of a scene is there something like a fade out. Animation is a powerful tool because movement attracts so much attention from the user. It should be used more to communicate instead of distracting. Hopefully we’ll see more of this as time goes on.