Slide — A Multi Touch Gesture
New Interaction Design Pattern
Backstory
As part of my masters thesis, I designed a new time picker interaction that makes it blazing fast and smooth to pick time on touch devices. User can pick time for setting alarm, reminder, etc. with a single interaction we are calling as the Slide gesture.
During the design process, I realized that this gesture can be separated from my solution and applied to solve other design problems as well. So I worked on it a bit more to abstract out the underlying design pattern. This article explains the new touch gesture Slide, and its application as a time picker. More applications of the gesture are documented in my thesis.
Multi Touch Gestures
Multi touch surfaces allow interactivity by recognizing one or more touch points, and then responding to the input based on the gesture’s meaning defined by the software. Although there are several touch interaction gestures used as inputs, the basic set of touch gestures are shown here:
Just like the digital binary codes, each touch input gestures comprise of two basic units — a Press, and a Move on a surface. Each touch interaction paradigm combines these fundamental units in different sequences and define input gestures. Most touch platforms like iOS, Android, Web OS, Windows, Wacom, and others treat an input either as a press gesture (tap, long tap, double tap) or a move gesture (drag, flick, pinch, spread, rotate). When a move gesture is registered, the position of first touch on surface is also recorded, and the response is appropriated with reference to that position. So each gesture takes a single point input and invokes a response. What if a single moving gesture could do double the work?
Slide is analogous to drawing a free-form line on a sketching application. It extends the existing interpretation of a Move gesture. A Slide registers the position of first touch as Point A and the position of touch release as Point B. This allows the system to get two inputs with a single gesture. While the start and end points of Slide gesture act as primary inputs, its path provides directional information which can aid in creating meaningful transitions.
These additional informational cues allow user to specify relationship between related objects. In my view, the rich information captured in a Slide gesture shifts the balance of human computer interaction — enabling interfaces do more and users to do less. The rest of this article explains how Slide gesture can transform the painful time picker interaction into a pleasant experience.
Time Pickers
Time picker interactions are known to be painful. Existing design patterns are complex combination of pickers for each sub-unit of time: hour, minute, period. Touch screen design patterns have extended the legacy of the WIMP paradigm which has predominantly affected UI design since 1986. As touch design pattern do not capitalize on capabilities of the medium, users have to bear the burden. This is a problem, and it needs to be fixed.
During my research I found that many people keep a saved list of inactive alarm times so that they can avoid the pain of cumbersome interactions while setting reminders or alerts. In my performance tests across 19 participants, I found that a person on average takes at least 13 seconds to adjust the time values. Although this number doesn’t sound as horrible, but on a touch screen this is a lot of time. And people feel a lot of frustration during this time. This is also the reason people avoid setting meetings and reminders on touch screens. And it is my hypothesis that this limitation contributes to failure of many productivity applications too.
Yes, Siri and other voice input solutions address some of these issues, but only partially. They are clunky at best in noisy environments, and their support is nascent for people who are not native to English. Nokia’s Meego Harmattan OS proposed an elegant solution in late 2011 but after its deal with Microsoft, the design was curbed in favor of the Windows Metro UI. Of all designs I’ve seen, I feel Rise does a great job. While it’s UI is great to set alarms its difficult to see it scale as a universal design pattern on bigger touch surfaces.
The great efficiency breakthroughs in software are to be found in the fundamental architecture of the system, not in the surface design of the interface.
— Bruce Tognazzini
Slide-Clock
The new time picker solution delivers an easy to use experience through a combination of its unique structure and the ingenuity of the Slide gesture. The design resembles a wall clock to allow users to relate to the conceptual model of its unique architecture. The illustration below shows how a user can adjust time from 12:10 to 8:15 with a single Slide gesture. An additional tap switches PM to AM, the interface changes color to minimize accidental switch.
The structure of Slide-Clock is inspired from architecture of a physical clock, extended into an interactive system for touch surfaces. It comprises of concentric rings for hour, minute, and period selections. The hour and minute values are spatially distributed across their respective rings. The ring structure provides a clear separation which is necessary in enabling the Slide gesture interaction. This arrangement allows a single Slide gesture to accept two input values simultaneously.
The interaction details of Slide-Clock go beyond Slide gesture to support other scenarios. For eg. user can just tap on the hour ring to adjust hour value or tap on minute ring to adjust minute value, like they would tap on period ring to switch AM-PM.
During the usability tests, I observed that owing to design’s resemblance with clocks, users wanted to grab the hour and minute arms as if it was a physical object, and rotate it to adjust input values. This was an interesting phenomenon, so I went through couple of iterations and extended the design to allow for this feature.
In order to make the design more efficient, I created two rings for minute adjustments. The inner ring allowed adjust minutes in 5 minute intervals which is what most people wanted. But for a very specific time input, user can extend the tap or Slide gesture to the outer ring and adjust precise minute values. The hierarchy of design allows for efficiency in normal circumstances while keeps the solution comprehensive and scalable to support edge case scenarios.
During usability tests, participants took an average of 0.9 seconds on Slide-Clock prototype to adjust time values. In terms of performance, this solution was more than 1300% efficient compared to the performance of iOS time picker. One participant said:
Oh wow, this is unbelievable. I really hate to keep swiping through those numbers to get to what I want. This lets me do it in a single shot. I didn’t even imagine I could do that.
Wrapping Up
I hope one day Apple, Google, Microsoft, and other touch operating systems provide native support to gestures like Slide which take advantage of the medium. To keep the article manageable, I shared only the Slide-Clock design so far, soon I’ll share other manifestations of the Slide gesture.
Taking inspiration from Peek Calendar app, I’m working towards an app that helps you manage time. The design involves Slide gesture and few other novel gestures to make interactions simple for users, but that makes life of developers more difficult. So I’m on a lookout for partner(s) who can help me with an iOS app. If Slide inspired your thinking, and you have some spare time over next couple of months then please reach out to me on Twitter. Even otherwise, I would love to hear your reactions to the design pattern. Do you think you can use it for your ideas?
