This form does not yet contain any fields.
    « Inspired: D3 Talk - Tom Chi | Main | ux toolbox: interaction animations »
    Monday
    Dec052011

    Touch UI: Gestural and mobile prototyping

    Continuing on from interaction storyboards and animations, we now separate out a specialized form of protyping where we get the benefit of expressing our ideas for touch-based UI gestures that anyone can immediately grasp and engineer.

    A lot of mobile development these days is about being able to iterate on your "here-and-now" product features but it's just as critical to be able to provide blue sky visioning of potential new directions for your product. I've been finding more and more reasons to activate my little tradition of doing animated gestural prototypes - particularly when we're going after money in some of the startups I've been involved in.

    Where I might work over lowfi storyboards in some systems, mobile iOS projects in particular tend to move into high fidelity mockups quickly because of the amazing templates that people have provided to speed up our process (i.e. Photoshop, Illustrator, OmniGraffle). I rarely have to animate out ahead for iOS day-to-day feature sets as I've been lucky to work some amazing developers who could prototype directly. But for more risky development tasks such as highly customized components - working in animated form saves at least a few trips down blind alleys.

    Below, I played with an alternate scenario for activating the undo action in a text field by drawing a "Z" gesture as a play on Command-Z - the undo command in a desktop environment. I did create a specialized undo gesture for an app that never went live that allowed the person to swipe their finger left for undo and right for redo. I think we should stay creative with non-iOS level system gestures while respecting user familiarity as new gestures catch on. NOTE: this was only created to show an example of this type of prototype with a fairly complex interaction rather than an actual suggestion that I hope will be implemented. After all - think of all those users who will have never related to a desktop computer in a few years :D.

     

     

    Gestural Templates

    I tend to customize and create my own visual language on the fly and thus use a wide variety of styles for these gestural prototypes. But there are some lovely people who provide pre-made templates and content that make the creation of this types of documentation a snap. All you have to do is lay them out so they relate correctly to your interface in your program of choice (i.e. Illustrator, OmniGraffle, Fireworks, Photoshop) and animate them (i.e. Flash, Keynote, Fireworks, After Effects) for a quick check-in on the exact gestures you want to adopt for your project.

    Luke W's site: Touch Gesture Reference 
    A comprehensive document that covers a wide variety of touch interface environments. The page has a few different document types as well so it's easy to incorporate into your own interaction storyboards and animations. 

    Open Source Multitouch Gesture Library from gestureWorks
    I've known this crew since back when they were based in San Francisco and working on exhibits with the Exploratorium. Now they're doing some spectacular work in their open source community driven efforts in the multitouch field.

    After Effects Touch Gesture Templates - I haven't tried any of these but they looked kind of interesting. If any of you try them, tell me how they do.

    And an oldie but a goodie - Kicker Studio's touchscreen stencils

    Reader Comments

    There are no comments for this journal entry. To create a new comment, use the form below.

    PostPost a New Comment

    Enter your information below to add a new comment.

    My response is on my own website »
    Author Email (optional):
    Author URL (optional):
    Post:
     
    All HTML will be escaped. Hyperlinks will be created for URLs automatically.