Designing custom touch interactions

The cross slide interaction in Windows 8 is a fast and fluid way to select photos. In this post we look at how to think about building custom touch interactions into your app.

Touch on modern app platforms is one of the key reasons why we love our new devices. They feel fast, slick and they are fun to use. Tons of great touch interactions are built into the apps that we use every day and the platform that apps can use. Increasingly, apps are pushing beyond what’s offered and building custom touch interactions to differentiate. A slick swipe, swoosh or slide often beats a boring tap on a button or menu.

If you’re an app developer or designer and you’re thinking about pulling in some custom touch interactions into your app, you’ve come to the right place. In this post we’ll introduce a basic framework for how to think about building a touch interaction and how to evaluate it.

What’s built in

On Windows 8 and other touch platforms there are tons of great touch interactions built-in. You use these every day when you navigate the device:

  1. Panning through apps
  2. Zooming a webpage
  3. Flipping through photos
  4. Swiping in a toolbar

When you use these interactions, they feel easy, natural and fluid, so it can mislead you to believe that it is easy to design and build these for your custom interaction. Building custom touch interactions is hard…it’s not hard to figure out the basics (e.g. you pull down, it’ refreshes…easy!), it’s hard to think about the details, and design them in a way that feels easy, natural and fluid.

For touch, details matter

The details of a touch interaction make the difference between a good one and a terrible one. Let’s look just look at one of the basic touch interactions built into the system, panning through apps, and study some of the complexity in making it feel and behave right.

    1. It needs to stick to your finger as you pull it across the screen
    2. When you start a pan, you need to not invoke the app that your finger was on
    3. There is inertia that has to be just right if you flick the view
    4. You can stop the panning inertia by putting your finger down
    5. There is feedback if you pan to the end of the view
    6. The panning stays on “rails” horizontally and doesn’t slide up or down

Panning is a complex interaction, and the good news is that if you’re an app developer, you don’t need to build this behavior yourself, the platform takes care of it for you when you drop in a scrollable container. Whew. However, if you create your own custom interaction or extend a system you need to think about how these details manifest in your interaction.

A scorecard to evaluate with

There is some great Touch Interaction Guidance on MSDN that is worth reading that gives you an overview of how to consider building a touch interaction. When you’re building a custom interaction, here is a scorecard that you can use to evaluate some of the details of your interaction. If you’ve answered “yes” to these questions, you’re on the right track.

  • Is there feedback immediately after putting your finger down?

    When you touch the screen there should be immediate feedback on what is happening. This immediate feedback reinforces to the person using it, that they’ve hit the right place and that they can safely proceed. In the case of a button, the button may light up or show pressed. In the case of a pannable surface, if you move your finger at all, the surface will move.

  • Is there feedback the entire time during the interaction?

    While you’re performing the interaction, you should get feedback the entire time. This tells the person using it that they are doing it correctly, rewards them for what they’ve already done, and gives them a hint of how to continue the interaction. In the case of a pannable surface, immediately sticking to your finger and panning the entire time, tells you that you’re panning in the right direction and that there is more to see in the direction that you’re panning.

  • Are there no timing-dependent aspects of the interaction?

    There should be no time-dependent aspects of the interaction because only the developer knows what the timer is. Timed gestures are often triggered accidentally, or are hard to perform correctly. Timed gestures also erode efficiency because you need to wait for the timer to complete in order to be successful.

  • Is there feedback when you’ve reached a threshold?

    With many interactions, you drag an object a certain distance and then lift your finger and it commits the action. It’s important to visually indicate that you’ve reached the threshold. This way, no matter how fast or slow you use the interaction, you know you’ve done it right, every time.

  • Is the interaction reversible?

    An important aspect of great touch interactions is that you feel confident using them. Reversibility is an important aspect of confidence. When you’re learning how to use the manipulation, you don’t know how far to drag or even how it works. Being able to undo your action helps you feel like you can safely explore how it works and play.

  • Is there feedback on touch up?

    After you complete the interaction, it’s important to know that you did it correctly after you lift your finger. Some indication of success is important to reinforce the behavior.

  • Is the interaction fast and fluid?

    No matter how cool or clever your interaction design is, if it isn’t fast and stick to your finger then it’s not worth doing. Always opt for hardware accelerated, CPU-independent animations and manipulations where possible.

A few examples

In iOS7, Mail abandons the “swipe” gesture trick from iOS6 with a bona fide slide manipulation that reveals some commands. In this post we look at how to think about building custom touch interactions into your app.

Here are a few examples of how some current app implementations of some custom touch interactions and how they measure against the scorecard. I’d be interested in hearing about how your favorite touch interactions fare against the scorecard.

Twitter Pull to Refresh iOS7 Mail Pull To Refresh iOS7 Mail Reveal Commands iOS6 Mail Swipe to Delete
Down feedback

Continuous feedback

No timers

Threshold feedback

Reversible

Up feedback

Fast and fluid

Recap

We looked at a framework for how to approach and evaluate if custom touch interactions are designed and built correctly. In the next post we’ll look at a specific interaction, pull to refresh, and walk through the details on how to design and build it and evaluate it using this scorecard.

7 thoughts on “Designing custom touch interactions

  1. Pingback: Building Pull to refresh | David Washington

  2. Jan-Kristian Markiewicz

    I love the scorecard, it’s a great way to summarize all the details necessary for a great touch interaction!

    Like you said, immediate feedback is super important to make the interaction understandable, but it is also a tool to make the interaction feel more fast and fluid. If the object doesn’t move immediately when you move your finger it feels like the system is slow to react. You can see this in the iOS6 mail swipe (so you could argue that it shouldn’t get a full score on fast and fluid) – I’m glad they finally fixed this in iOS7.

    Reply
  3. dwcares Post author

    Great point J-K! Fast and fluid isn’t just performance it’s driven by the level of interactivity. The iOS6 mail swipe is far less interactive than what we’re seeing in iOS7.

    Reply
  4. Pingback: Lunch and Learn: Building for touch-first - StartupCity

  5. Pingback: Designing custom touch interactions | David Washington | josephdung

  6. Pingback: Add a touch gamepad to your HTML5 game | David Washington

  7. Pingback: Design a game that stands out | David Washington

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>