Web Prototyping for Touch Gestures

Sanjay Raval

The working process of many web designers involves using a wireframe, a static outline of page layout that can be filled with design elements, perhaps drawn from a Photshop comp.

Developers, however, need to build functionality not available in a static wireframe. A web prototype is more like a working model that allows a developer to experiment with how things work on a web page.

In this article, you’ll learn how to create a web prototype with touch gestures using simple and easy HTML, CSS and jQuery.

Prototyping for Touch

For a recent project, I wanted to incorporate a facility to allow appropriate screens to respond to touch gestures.  I designed a static wireframe and then thought to build a rich web prototype to run on tablet devices to demo to the stakeholders.

Considering it was a just a prototype and wasn’t going to be used for actual development, and given that I have a limited knowledge of programming (a common problem for designers), I was looking for an easy JavaScript framework for allowing swipe gestures to work on mobile browsers, specifically tablets and iPads.

The main requirement would be to show the primary navigation bar with sliding animation when the user swipes their finger from left to right.  I started Googling, and tried various frameworks from jQuery mobile to hammer.js. All the frameworks I tried were either too complex to use or not very responsive on mobile browsers.

Finally, I tried another framework called wipetouch.js, and it worked the way I wanted. It is very simple and easy to use and the swipe gesture is very responsive in platforms like iOS and Android.

Note: the demo is primarily made for iPad and tablets but it runs well on desktop browsers, too. For desktop, in place of swipe, the user can slide the mouse pointer. To see the result, open the link on your iPad or Android tablet, then swipe the finger from left to right, right to left and top to bottom.

View Demo

demo page screenshot

Files used for this exercise

  • index.html for html
  • style.css for styling
  • common.js for JavaScript
  • jquery.wipetouch.js – a framework used for swipe gesture
  • and link to jQuery files

Images used in this exercise

Swipe from Left to right:
Showing the left menu bar with sliding animation

left menu

Swipe from right to left:
Showing the right bar with sliding animation

right menu

Swipe from top to bottom:
In this example, I wanted to use a swipe down gesture to add the product without tapping on the + icon, because swiping is easier and quicker than tapping on a small icon.

But, as this touch gesture has a problem of discoverability, the icon to add the product is there in case the user is not aware of this gesture.

top menu

Getting Started

Note: To make the article easy and clean, I will only explain the code used to slide the left menu on swipe from left to right. For right and top menu, the code is pretty much same (and is provided in the actual demo source files).

Step 1 – Link JavaScript and jQuery files

First we’ll link the required jQuery files and wipetouch.js framework for this prototype in the HTML page. We’ll use jQuery for showing the sliding animation and wipetouch.js for the swipe gestures. Common.js is the JavaScript file used for this assignment.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script src="jquery.wipetouch.js"></script>

<script src="common.js"></script>

Filename – index.html

Download wipetouch.js

Step 2 – Add Images

In HTML, we will add the left_menu.png image and give it an ID. We will use this ID in the CSS and JS files.

<img src="images/left_menu.png" width="262" height="600" id="menuLeft">

Filename – index.html

Step 3 – CSS Code

In CSS, we will position the image on the page from where we want the sliding animation to start.

/* Set Position of Left bar */
#menuLeft {
    position:absolute;
    left:0;
    top:0px;
    z-index:99;
}

Filename – style.css

Step 4 – Hide the #menuLeft when page loads

$("#menuLeft").hide();

Filename – common.js

Here menuLeft is the ID applied to left_menu.png.

Step 5 - Show the navigation bar with sliding animation when user swipes from left to right

wipeRight: function(result) {
    $("#menuLeft").show("slide", { direction: "left" }, 1000);
}

Filename – common.js

Here wipeRight is the function from wipetouch.js that is triggered when the user swipes the finger from left to right.

On this swipe action, we show the menuLeft image with sliding animation from the left direction.

Step 6 – Slide back the image on tap

Now we need to slide same image back the when user taps on the image.

$("#menuLeft").click(function () {
    $("#menuLeft").hide("slide", { direction: "left" }, 1000);
});

On tapping on the image, it slides back to be hidden.

Note: To make the article easy and clean, I have only explained the code used to slide the left menu on swipe from left to right. For swiping from right to left and swiping from top to bottom, the code is pretty much same and given in actual demo source files.

Download Demo Source Files

In Conclusion

No doubt the available prototyping tools will soon cover touch gestures, but right now this solution does the trick. I hope this demo provides a good base for you to build a prototype to show touch gestures and basic animation on touch devices using easy simple code.

Please let me know if you have any suggestions for improvements. Please share your thoughts, opinions and ideas in the comments section below.

Further Reading

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
Another nice demo created using touchwipe.js to slide show on swipe

http://eightmedia.github.com/hammer.js/
Another very popular JS framework for mobile devices

http://www.appliness.com/multitouch-with-hammer-js/
A nice demo created using hammer.js to show drag and drop

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.reezwonders.com Karna Shukla

    Awesome information dude! Very helpful…

    • http://sanjayraval.in/ Sanjay Raval

      Thanks Dear, you are the first to see my article and comment on that…

  • http://abovethemark.in K . S . Karthick Murari

    This is interesting. Thanks for sharing the technique Sanjay!

    • Sanjay Raval

      Thanks Karthick for your compliments,

      Actually I was working on a web prototype that can respond to touch gestures, but I could not find much on internet.

      And after some initial struggle and trying various frameworks, I solved the problem. Then I thought to convert my learning and research in the form of article, so people who are solving the same problem can get the help.

  • http://uberbuilder.github.com/ Jeremy Iglehart

    Thank you for the great writeup on your project!

    I’m very interested in improving my ability to deliver the right experience to the right devices for the users advantage.

    I really like this idea, and it brings to mind what they are doing with the new Ubuntu Phone navigation. Consider this video: http://youtu.be/cpWHJDLsqTU?t=7m1s – I already fast forwarded to the important part ;)

    Great blog :)

    Cheers,
    -Jeremy

    • http://sanjayraval.in/ Sanjay Raval

      Thanks Jeremy for sharing the Ubantu gesture demo, its very inspiring and seems very easy to use.

      I strongly believe the gestures can take the user experience of new devices to a next level in terms of simplicity and speedy interactions. But the flip side is, every one is coming up their own guidelines for gestures and there is no standardization.

  • Tejashree Bhanawala

    Great idea Sanjay. Infact, just a day after you showed this demo to me, I read an article on Ubuntu. Ubuntu is designing the similar navigation for its new mobile OS. They used the same idea of providing simple and clean navigation to end customers. I was amazed by the fact that designers could think alike. Then it has to be a very clear indication as to what we are doing now is not the best approach.

  • Kiran Mistry

    Very nice and informative article!

  • Pavan

    Hi Sanjay,

    Thanks for sharing. We also have a similar experience to test the app on iPad and smart phones and we used Axure RP to develop the functional prototype and it was a great success.

    • http://sanjayraval.in/ Sanjay Raval

      Thanks Pavan for sharing your experience,

      I have not used Axure for touch prototyping. I would appreciate if you can share your link or demo for reference.

  • Manjunath Lakshminarayana

    Great read.. Keep it up!

  • http://www.mattearly.com Matt Early

    Unless theres a specific reason for left to right swiping (such as a book), horizontal scrolling is still gut churning.

    • http://sanjayraval.in/ Sanjay Raval

      Thanks Matt for your thought.

      Yes I agree, user may not find it convenient to get the navigation bar on swipe.
      Also there is a problem of discoverability of this approach. But the positive side is, after user learns this, its very convenient for him to open the navigation bar quickly with simple swipe from any screen than tapping on a tiny icon on a corner.

      Anyway, this is just a prototype and an experiment for one of my projects.