Comments on Storyboarding iPad Transitions

Alexis Piperides — Wed, 16 Nov 2011 19:32:14 GMT

Great article! I also believe that high-fidelity fully interactive prototypes can make huge difference. Check out a tool that is designed to do just that, Proto.io (http://proto.io).

Proto.io is a new prototyping tool specifically designed for mobile app prototyping. With Proto.io you can quickly and easily create high-fidelity fully interactive mobile app prototypes that support native mobile functionality like screen transition, touch events and gestures. Prototypes not only can be viewed on the browser but also on the actual mobile device thus allowing the users to get a feel of their app before even producing a single line of code.

Don Gaconnet — Mon, 12 Sep 2011 15:18:59 GMT

Being in the search engine business, I haven’t had a strong request for this type of service, but now that I am working as a copywriter and being asked to assist designers, I am in need of this information. This has been a great help in motivating designers to design transitions using a far more solid foundation of though!

Paul Geronca — Thu, 18 Aug 2011 18:09:00 GMT

Great UX article, notwithstanding the irony of the iPad video itself not actually being viewable on an iPad. Valid points on the current importance of transitions on a device built around gestural interfaces and solid UX.

Leanne Waldal — Sat, 16 Jul 2011 22:22:40 GMT

The video won’t play on an iPad, otherwise, excellent article.

Andrew Cascone — Thu, 26 May 2011 19:24:48 GMT

How do I get to see the video? It’s marked private. Please advise. Thanks!

Floris Kruger — Wed, 18 May 2011 16:08:22 GMT

Fantastic article and comments. Occurred to me a few years ago that it is precisely, for example, Mac OS’ subtle, fluent transitions that create a crucial sense of mental continuity throughout the user experience, as opposed to the way things just appear and disappear in Windows.

sooraj kv — Mon, 18 Apr 2011 07:40:12 GMT

I am not able to play the video, is it private? can you help me on this. Thanks

Fabiano Nadler — Thu, 21 Apr 2011 14:57:32 GMT

The Apple inc video is private. How can I watch this?

Kevin Haggerty — Mon, 04 Apr 2011 18:40:17 GMT

Excellent article, even better comments -

Totally agree that software should step up and enable rapid animation and transition prototyping. It’s possible now in the browsers that support CSS3 animation, and I’m a designer/developer who loves to bring animation to interaction design work.

If it’s all right to self-link here, please check out my High-Fidelity CSS Animated Prototyping Web App. http://editroom.splatcollision.com

I’m a solo designer/developer and I’m building this for designers. It’s perfect for prototyping animated transitions as described in this article.

Thanks,
Kevin

Melissa Robison — Tue, 29 Mar 2011 01:46:48 GMT

Greg,
Good article! I was also inspired by Chet and Guy’s great Devoxx presentation, Animation Rules! You did a good job bringing it home a bit.

Also, excellent follow-up points in the comments. Aneesh brings up good points on low-fidelity ways to storyboard and prototype the animations.

Great stuff!

Aneesh Karve — Thu, 10 Mar 2011 16:04:54 GMT

Given the abundance of designer-friendly animation tools, I wonder if time spent storyboarding isn’t better spent prototyping the animation in software? Programs as straightforward PowerPoint and KeyNote can be used to quickly prototype transitions, as outlined in this article: http://arcball.com/?p=1308.

The key is that motion prototypes can be created quickly, give stakeholders a deeper feel for how the transitions will work in the real world, and inspire stakeholders.

I’ve found the following prototyping tools useful, listed roughly in order of complexity:
Keynotopia – http://keynotopia.com/
iAd Producer – http://developer.apple.com/iad/iadproducer/
Sketchflow – http://www.microsoft.com/expression/products/Sketchflow_O…
Processing – http://processing.org/
Quartz Composer – http://developer.apple.com/graphicsimaging/quartz/quartzc…

michael griffith — Sat, 25 Jun 2011 22:34:00 GMT

Great topic. Our office has been discussing who owns this responsibility. We have arrived at the thought that the strategist (aka User Experience Director) owns it at the pencil/wireframing stage but the Art Director has the right to revise as needed once it moves into visual design (pencils don’t always translate to the screen).

Also important to note is that everyone involved needs to have a solid understanding of what can be done in iOS core animation and what can not. It is easy to design something that may not be worth the time and effort to create. This will only get messier as we design for new tablets and devices that may or may not have the capabilities.

Malay Nagda — Wed, 09 Feb 2011 12:41:48 GMT

Agree with Antonie. One the best articles I have read in a long time.

Antoine Bonnin — Mon, 18 Apr 2011 08:23:57 GMT

One of the best UX article I have read in a long time. Thanks.

Aaron Cooper — Thu, 17 Feb 2011 15:25:10 GMT

Also, note how the introduction of app groups/folders within the iOS introduced some interesting app launch transition challenges. That is, if you combine apps into groups as I do, the app launch transition is necessarily different than what is shown in this article in regards to ” illusion.” Try it out on your iPad and watch carefully as you launch an app from within a group.

Perhaps this speaks to keeping transitions simple to accommodate scaling and changes to OS design patterns. Some illusion may be warranted, but more complex transitions may limit scalabilityif they rely on surrounding context in the OS. Not a bad thing, but something to keep in mind. Some transition patterns are perhaps more timeless and bulletproof than others.

Love the emphasis you’ve brought forward here. As somone with animation, film editing and industrial design experience I often comment on the need for designers to consider the ways we can orient and enrich the experience in tangible ways that keep the UI out of the way of content while adding to the elegance and inherent ambience of the solution.