Coming from a background in old-school application design, designing for motion is something I didn’t have to worry about much in the past – except for maybe the occasional sliding/expanding panel. However, in these days of ‘one-page websites’, animation and cinematography are finding their way more and more into everyday applications. This is for two reasons:
- Yes, appropriate animation can make a user interface more appealing. (Tip, the more a person uses your application, the less appealing your animation will become.)
- More interestingly, animation allows us to capitalise on visual momentum to help people understand how an application is unfolding as a response to their actions.
Visual Momentum comes to us from cinematography, and is the idea that as we expand the information available to a viewer of a scene, we change some things (new information) while we keep some things static so that the viewer understands the relationship between the new information and the old. Enter the ‘establishing shot’.
We kinda lost visual momentum altogether in the early days of ‘rip and replace’ HTML pages where the entire user interface disappeared and was replaced by an updated one some seconds later. (While there were constant elements – the nav bar for example, the loss of continuity left the user having to join the dots between ‘before’ and ‘after’.)
So what’s this got to do with Tech.Ed?
Well those crazy guys over at Tech.Ed have come up with the idea that all attendees will be issued with RFID chips. (Relax, they’re in your conference pass, not subcutaneous). One cool thing we can do with that is visualise the arrival and departure of people to and from sessions, who they are and what we know about them. So while the guys at Breeze are working on the back-end and RFID readers and the like, I was approached about getting a Silverlight visualisation together.
Now initially I was going to do my job properly and find an Aussie agency to do it. Then I decided "hang that", agencies get to have all the fun – I’m gonna do it myself.
Hence I find myself in the uncharted territory of motion design. We’ve had lots of different ideas for the visualisation, some of which were extremely lame. Currently I’m moving little people around on screen – which requires a lot of motion design finesse.
Basically I’m spending a lot of time getting the movement of little people just right so that they seem natural. This requires a lot of use of key splines in Expression Blend, and a lot of trial and error. I’m sure experienced animators have a much more intuitive feel for this and can get it ‘just right’ the first time, but for a newbie like me it’s a fascinating and frustrating new world.
Begs the question: as movement becomes more and more prevalent in our designs, how do we specify movement in a UI design document? In TV and cinema they use storyboards, but even these only give a sense of the desired motion. Maybe prototyping the motion is the only way to go – especially if you don’t even know what will work until you try it.
Meanwhile, for me, lot’s of new stuff to learn from animators, cinematographers and game designers…
See you on-screen at Tech.Ed!