Cross-Device Prototyping Tools - Beyond Paper Sketches

Two weeks ago, I spoke at World Usability Day in Hannover. Among great talks on flat design, feedback forms and gestural interaction, I had the pleasure to talk about prototyping in cross-device design projects. Unfortunately, I could not go into details of the tools I presented (in German). I would like to take this as a starting point for a series of blog posts.

A prototype is a question rendered as an artifact.
— Scott Klemmer

I won't dive into the merits of prototyping, but rather jump directily to the tools I reviewed for my talk. All these tools try to make it easier to build interactive models in order to test them on your devices. Following Fred Beecher's prototype fidelity scale, I'll take some tried and true deliverables like sketches, wireframes and design comps and discuss how they might evolve when designing across devices.

prototype_fidelity.png

In this first post, I'd like to start at the lower end of the fidelity scale with an app called AppSeed.

From static to interactive sketches: AppSeed

AppSeed is an iOS app that has recently been funded on Kickstarter (I'm a proud backer). It's based on the same concept as PoP – Prototyping on Paper:

  • Take a photo of your paper sketches
  • Make your digitized sketches interactive
  • See your sketches in action on screen.

AppSeed takes it one step further though. By using computer vision – as they call it – the app decomposes the individual elements of your sketches and lets you process them digitally. You can then move elements of your sketch on-screen and (where it gets really interesting) you can define your sketched boxes as input fields or as scrollable map elements. What they promise is, that you can take your sketch from flat boxes on paper to interactive modules on screen.

In January we will see if they can keep their promises. I'm looking forward to using the Kickstarter version and test how good the computer vision really is.

What I really like about this approach is that it adapts smoothly to my design process. I can start on paper and can proceed digitally. Of course, the fidelity will most likely not surpass basic interactions (and basically you could also do this with other tools) - but the direct transition from analog to digital is really interesting.

What's Next?

In my next post I will climb the visual fidelity scale. I'll talk about wireframes and how they can evolve in times of responsive design. So stay tuned!

prototype_fidelity_2.png