Prototyping interactive animation
in the UX designer workflow for native mobile apps
UX designers using visual tools commonly experience hitting a wall trying to effectively simulate the feel of native app interactive animations — with the goal of putting a prototype into a user’s hands for testing and validation of interaction design decisions.
Now, it can effectively be done.
This post explores the creation of high fidelity mobile prototypes that achieve near interactive animation parity with native iOS apps for validation testing — without coding by hand or scaling a steep learning curve.
Here, I will go through a workflow from sketching on paper to testing high fidelity mobile prototypes on the device, focusing on interactive animation prototyping. I’m using a tool ring that stays within the cognitive mode of visual design tools native to the stack of UX designers — interaction, visual, motion, etc.
My journey
I’ve been a designer & entrepreneur for my most of my career — persistently finding myself needing to visually communicate app ideas with high-ish fidelity — without coding dependency. I just needed to quickly make my mockups interactive, so you can experience the interaction flow and see what I mean.
I started using Excel for interactive prototyping — back in 2004. Yes, Excel! That highly evolved grid based application where each tab could represent a state for linking graphics made with the same visual toolset found in PowerPoint. I ended up achieving the creation of interactive mockups — all within the same tool I already had. Pretty much everyone I showed this too was amazed that I used Excel. They were like what!?tf?
This was called smoke and mirrors prototyping.
“a prototype is worth a thousand pictures” — someone on it.
Alan Cooper, Tim McCoy, and Lane Haley in my bedroom, Jan 2009.
(with Curtis Schofield at far right)
When I was initially founding a music merchandise startup called Merchluv, Alan Cooper and his crew came over to my apartment to check out this prototyping voodoo.
As my focus shifted to prototyping mobile apps, I turned to Keynote and its magic move animation, with Keynotopia assets plus its companion iOS app for chrome-less, smooth transitions. I used it as my primary tool for creating interactive prototypes. They were exported as interactive PDF’s that retained the hyperlinks between screens, and navigated with single tap gestures. It felt kinda magical.
Wait, is that the app!?
I heard this often — as people thought the prototype looked and felt just like the app itself.
I augmented the keynote mockups and prototypes with the release of Invision — for web-based sharing and collaboration. Instead of linking mockups within Keynote, I uploaded them into Invision and used their hotpot linking tool to navigate between screens and states — and texted the prototype link out to people for viewing it right on the iPhone as a Safari web app (by adding to their home screen to remove the chrome). This was an effective evolution for removing the friction with sharing the prototype — a persistent issue with using Excel and Keynote.
Then I hit a wall
as I tried to communicate the lateral flick of an object within a screen.
I needed to prototype an email flick to reveal actions to tap — like in iOS Mail. This is an interaction design pattern now found in a vast array of apps (such as Evernote and Spotify.)
Hotspot based prototyping tools are great for quickly sharing full comps and showing transitions between screens.
They are not, however, particularly effective at showing the animated interactions within a screen.
It is these single screen interactive animations — the lateral email flick,
the multi-directional card flip, easing, bouncing, scaling, etc. — that have emerged as key experiences for native mobile apps. It’s the motion design. The visceral seat of delight. Plus, animation can serve to facilitate the user’s mental model of an app.
Take that classic Path interaction that spins out into the arc of content input icons we all know, love — and often think about copying (and sometimes do.)
How can we quickly & effectively prototype interactive animation that is so key
to the UX of native mobile apps — without needing to code (in Objective C, Swift,
or JavaScript), or use tools that require scaling a steep learning curve?
Just as I was trying to prototype this email flick interaction, Proto.io 5 was released — which offered the ability to drag objects — as well as states, an animation timeline, and even variables for conditional animations.
So I tried it out — to see if it would allow me to achieve that email flick animation. And it did!
re-created in Proto.io 5 using the new object dragging feature.
I was then able to effectively put the prototype into a target user’s hands for testing and validating how the interactions feel.
I was so impressed with the way that this tool had evolved, I connected directly with their CEO Alexis Piperides at a talk he gave to a group of developers in San Francisco. Then I met him again to give more feedback. And again. Then ended up joining Proto.io to help drive the product forward — feedback, product direction, and evangelism.
Below, I will go through the process of prototyping out this interactive animation from sketching on paper through testing the high interactive fidelity prototype on the device.
The design problem to solve: which affordance?
1) Use any flick strength & release, and then tap a binary choice shown above.
or
2) Select a binary choice based on how far over you drag the email before letting go, shown below:
Mail or Mailbox?
A Workflow
Here’s a UX prototyping workflow for exploring interaction design solutions — from sketching on paper, to creating high visual fidelity assets and comps, adding transitions and interactive animation, and testing the prototype on the device with target users.
- Sketch on paper.
Sketching allows wide design participation because of the low barrier — pen/cil on paper. Plus, the low commitment of sketching engenders reckless exploration of alternative design solutions.
2) Create assets and comps in medium to high visual fidelity
with Sketch (or Fireworks, or Illustrator, or Photoshop, or even Keynote).
3) Import comps into Invision or Flinto and add hotspots and transitions to get feedback on screen-to-screen flow.
Again, the issue with prototyping tools where you simply add hotspots to comps is the limited within-screen interactive animation fidelity. When putting the prototype into a user’s hands to experience the native feel of this flick for testing, such tools fall short.
Explore prototyping animation with individual assets in Keynote using its magic move feature. For more advanced animation explorations, try Edge Animate, and After Effects.
4) Import assets into Proto.io to add gesture based interactive animations within screens, in addition to transitions between screens for full native app simulation.
Using the image component, import your assets into containers
(Proto.io containers act like symbols — change once, and it propagates to all instances.) Arrange the components and containers onto screens, where you can define:
gestures (tap, swipe, pinch, drag, scroll, etc)
animations (fade, scale, move, resize, rotate, ease, delay)
transitions (slide, fade, flip, turn, pop, flow)
states (for screens and containers, using a timeline)
variables (for conditional animation)
Use the standard native iOS (and Android) components to supplement your own custom assets. Also, Google web fonts are available if desired. You could even simply create all the assets right within Proto.io itself.
Once you are ready to share your interactive animated prototype, publish and share it with a link. Anyone can use the link to view it right on the phone. For optimal performance, use the Proto.io player app (available for both iOS and Android). The player also serves as a mobile mirroring tool while editing.
As with Invision, add inline feedback threads on each screen. Collaborate remotely — iterate the prototype in near real-time using the live preview & Skype. I’ve been using this tool to iterate a prototype with a collaborator in Chiang Mai, Thailand.
5) Use Reflector for in-person user testing of the prototype.
Have user testers use the prototype right in their hands (on your phone or theirs using the native app player or as a web app from the home screen). Reflect it onto your computer screen using Reflector. You can even use this app to record a video of the user interaction. Alternatively, use Screenflow to record a video of your screen with audio. Ideally, it would be lovely to also record exactly where the user touches the screen throughout using the prototype. Someone, make this happen! (Lookback looks promising for capturing such data in production apps).
6) Expand testing to remote users
For testing the prototype with a higher volume of users located anywhere, UserTesting offers a mobile testing service.
Repeat and iterate, of course.
Handoff to Developers
The Proto.io prototype serves as the “live spec.” It comprehensively expresses the app’s design in high fidelity (animation timing and easing characteristics, gestural input, sizing, etc.). Further, once the iOS developer explores the execution of the production app, s/he can jump into Proto.io and quickly make animation adjustments to communicate alternatives to the designer, if needed. There’s one example we heard where the designer and developer collaboratively tweaked a prototype within Proto.io and
saved ~80% of the engineering time required to code a desired animation.
“make prototypes, not promises” — Jason Pamental
Wrap
Now, we can quickly explore and validate a wide range of concepts and design solutions with high fidelity app simulations — early in the product development cycle without engineering efforts.
It’s interactive animation — motion design — where apps are increasingly differentiating their user experience. You can effectively substitute Proto.io for an iOS engineer in order to prototype and validate a range of gesture driven interactive animations that reflect how the app feels.
Here’s the classic Path interactive animation re-created with Proto.io
in under 20 minutes:
A) Grab the link to feel it on your phone.
B) “Add to Home Screen” on mobile Safari to remove the browser chrome.
C) Watch how to re-create this classic animation in step-by-step videos.
Explore the growing collection of iOS interactive animations on Capptivate. Can you re-create those examples using this tool?
Go forth
and prototype.
______________
Further exploring
How to get animations out of your head — Scott Hurff
Pasquale D’Silva (animation, interaction design)
Meng To (iOS prototyping via Sketch > Xcode storyboard)
