With a little downtime at work, I’ve been catching up on some nice UX articles online. Here’s one I found about storyboarding iPad transitions using sketching called “Storyboarding iPad Transitions” by Greg Nudelman. The article calls out 7 principles that can be applied to storyboarding iPad transitions.
- Component Relationship (background-foreground)
- Illusion (motion perception and perceptual constancy)
- Exaggeration (highlighting states, actions, and changes in state)
- Staging (camera view, lighting, focus)
- Acceleration and Deceleration (slow in and out)
- Metaphors (using real-world analogies to convey complex digital events)
- Simplicity (avoiding noise)
Actually, I wish I’d seen this article about 3 months ago as it’s directly related to the mobile project I’m currently working on. I did create a lot of sketches, on Post-Its(!), but I didn’t think so much about documenting the transitions as much as focusing on the user flow, which is what I’ve posted examples of below.
Here are some examples of what I did:
The article really makes it sound like this is a fairly complicated process; a lot of work. But, I think it would be very helpful, depending on your project. Particularly for off-shore development. Unfortunately, my project has simply too many screens to efficiently even sketch the interactions out, let alone wireframe them all. I hope I get to try this out on another, smaller project.