Web Prototyping for Touch Gestures

February 13, 2013

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="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="https://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.