• Seilevel Team

    Here’s the Team

    Welcome to our Seilevel Photo Op.

Gesture Mapping for Mobile Interfaces

Look around you. Many of the tasks we once relied on a desktop or laptop to perform are now done on our phones and tablets. While that’s great news for our airplane carry-ons, it isn’t necessarily the best news in terms of usability. Anyone who has attempted to view or edit a spread sheet on the go certainly knows what I am talking about: without a scroll bar and the physical resistance of a mouse, it can be really challenging to navigate. Mobile Gesture Stencil

Screen size is not the issue here. The real culprit lies in our tendency to extend the metaphor of the desktop computing interface to the mobile device interface. Instead of a mouse, we have a finger; instead of a click, we have a tap. We end up not considering how the dizzying array of different gestures made available through the touch screen interface can transform a smaller screen into the perfect pallet for touch-sensitive computing. It’s not a lack of tools that prevent us from making apps easier and more fun to use, but it is how those tools are implemented by the mobile developers of the world.

It would be too easy to blame developers, because they are just building what they are asked to build. The fault lies with us, the Product Managers and User Interface Designers of mobile apps, who underestimate the fast-growing variety of mobile gestures available. If we aren’t able to communicate in the language of the mobile interface, what hope do we have when it comes time to build the next generation of mobile apps?

Here at Seilevel, we use a model called the User Interface (UI) Flow to show how a user will navigate through a series of screens. Each box represents a screen and each line represents the triggering action that allows a user to move from one screen to the next. This model can be incredibly helpful when communicating how we want a user to move through our systems (two clicks to checkout, one click from the homepage, etc.). But all too often, our trigger is a simple “click”.

Mobile Gesture Shapes

It’s time to refresh our UI design vocabulary to include all the possible gestures a mobile user could employ to zip around an app interface.  This refresh begins with the tools we business analysts use to communicate with developers and designers. So, today we are happy to share with you a new Visio stencil that you can download and use to add these mobile gestures to your UI flows. By placing the corresponding gesture shape directly on the trigger line connecting two screens, we can specifically request a “Left Swipe” or “Multi-Finger Move” trigger to get us from point A to point B.

Mobile Gesture Example

To download this new stencil, simply click here and you will be taken to the download page where, in addition to this stencil, we offer a variety of helpful documents and tools to refresh your project documentation. We are always interested in your feedback, so write us and let us know how they work for you!

2 Responses to Gesture Mapping for Mobile Interfaces

  1. Ajay Bihani August 5, 2013 at 1:37 am #

    Gesture Mapping will be one of the main features of all new OS for mobile phones

  2. Nick Murrell October 2, 2013 at 10:11 am #

    Nice post Kell, very helpful!

Leave a Reply

Your email address will not be published. Required fields are marked *