home > services 

Adaptive Path Blog

The Team

Designing for Gestures – Lessons From Print

by Rachel Glaves

As a digital and web designer, most of my work has traditionally lived on a screen. Sure, I believe in the power of hand-sketching concepts and paper prototyping, but after a certain point in a project my focus moves to, and stays with, the computer. I always have a few reasons to feel anti-paper for digital work, whether they be philosophical, technical, environmental or just plain stubbornness. However, I do have an academic background in print design, and on a recent project designing a complex gestural interface, I found myself unexpectedly relying on a lesson learned while setting type for brochures and banners.

Across the spectrum of design, print and gestural interfaces might seem to be on opposite ends. One is passive, the other is so active it changes with a single touch. But they do have one thing in common – they live in the non-digital world and they engage our physical body in some way. In print, it’s all about our eyes, the natural way we see things. What size type or leading is best for reading a novel? What about for reading a poster, or a banner meant for the side of a building? In a gestural interface, it’s all about touch. The natural way we grab, stroke, tap and point. How big does a button need to be so people can touch it and not its neighbor? Where does a menu need to be so my hand can use it easily? Does the angle of this swipe feel uncomfortable?

While in school, I always heard my professors repeat the same thing; print it out actual size! Get it into the real world and see how it looks, even if it’s just a piece of the whole. They hold that it is impossible to evaluate how a print design is working on a screen. I say the same thing applies to anything that will ever interact with our bodies instead of a mouse pointer. Physicality matters, accurate size matters. Providing paper printouts of a gestural interface at the size it will eventually be produced can make an immense improvement in how thoroughly the design is evaluated. It can also uncover ideas that suddenly seem obvious when you’re holding the design in your hands.

I’ve seen myself, my team and our clients do the same thing with a paper representation of the interface; if we wanted to know whether it made sense, we tapped, we touched, we drew gestures with our fingers and filled in the gaps by talking. When my team presented our ideas digitally – through email or on a projector – the client feedback was diminished in both quantity and critical depth. When we presented the design at actual size, in person, on paper, ideas and solutions developed easier, faster and more thoroughly than when we didn’t.

So if you find yourself designing a gestural interface, remember; get it into the real world, at real size, while you’re designing it. Do it early and do it often. You’ll build something better for it.

2 Responses to “Designing for Gestures – Lessons From Print”

  1. Paper - Scissors - Phone « matt.me63.com - Matt Edgar Says:

    [...] 2008: Rachel Glaves at Adaptive path tells how she likes to print stuff out to make it real – Designing for Gestures – Lessons From Print Possibly related posts: (automatically generated)Google’s Open Source Android OS Will Free the [...]

  2. Dale Sande Says:

    I guess my question is, what is the value of a printed comp of UI versus an interactive prototype? Myself coming from a print background also, I truly see the value of printing out a design for review versus proofing on the screen. You need that ‘real’ touch to see what it will really look like. That 22 pt header looks great on screen, but when I hold it in front of me does it have the same impact or is it to overwhelming. I get that.

    But the point there is that you are reviewing the design in as close to the final deliverable as possible, right? So, when delivering a digital product, wouldn’t you want to do the same thing?

    I have made it a practice to deliver my design comps in a browser frame. Then the client can have a sense of how the design will look when presented in the browser. Then once I nail down the design element, I am out of Photoshop and into rapid prototype development. Tapping on a piece of paper is one thing, but clicking on that prototype and seeing what the next step is infinitely more valuable to me.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>