Transitions and States

Wed 24 March 2010
By Martin Polley

Wow! Buxton was right. The transitions are just as important as the states (if not more so).

As I play around with jQuery (+HTML + CSS, obviously) as a prototyping tool, I'm finding that I really need to play around with the details of the transitions to make it obvious what is happening (something that it is hard to do in my head, for me at least).

For example, in my prototype I have a thing where you can add new rows (like adding attachments in Gmail). But I'm constrained for vertical space—there's only space for four rows. So I have set it up so that when there are more than four rows, this part of the screen gets a scroll bar.

Having a newly-added row simply appear works fine when you have unlimited space, but with scrolling it gets awkward. What happens if the new row is out of view? Well, we should automatically scroll so that this new item is visible. But this kind of sudden transition is a bit jarring and disorienting.

I found that animating the addition of the row and the automatic scrolling makes it much more clear what just happened, and where things have been moved to. (I must just stress that this is animation done sparingly and not for its own sake.)

What did I learn? That when you're at the prototyping stage, you really need to roll your sleeves up and get your hands dirty to find out exactly how to best handle subtle transitions like this.