UX Design for Multitouch: Virtual and Contextual Elements

UI Patents, Wild West development and Minority Report, oh my! In my research for this article, I have read much about the impact of multitouch user experience design in many arenas, and those were three reoccurring words. I even learned a new word, haptic technology (we’ll discuss below).

Amadeus Consulting's Internal Minority Report Attempt

Multitouch and mobile app development is something that has exploded in the past year, given the release of the Apple® iPad™, and the upcoming many, many tablet-based options, but as I learned it is actually not a new technology. Bell Labs developed the basis for multitouch technology in the 1980’s, with cameras and gesture recognition. Multitouch development is something that our company has actually been a thought leader and practitioner in for a few years now, as we handle both iPad app development and Microsoft® Surface™ Development. Because it’s a technology that is simplistic in its final form, but has a difficult learning curve, we thought we’d pass along some design tips we have picked up along the way.

What the heck is Haptic Technology?

So we couldn’t throw out that term without explaining it, plus it’s pretty cool. Haptic in general, refers to communication and learning through touch. Multitouch development really refers to two terms in this area: haptic technology (being the overall term) and haptic perception, how people recognize objects through touch. This will definitely come into play when we discuss haptic tactile feedback. Once we learned what these two terms meant, we felt like it really framed the thought process of the multitouch user experience. How people learn by touch, kind of powerful no?

Perhaps the best example of haptic perception:

Courtesy of Purpose Inc., 2010. (& some poor guy)

Haptic Tactile Feedback

Say that out loud, fun to say huh? So you know that vibration or click you feel when you touch an iPhone™ or any multitouch device? That is haptic tactile feedback. What this does is confirm the motion for the user; it is the recognition that input was received. This is something that becomes really unconscious to the user until it is removed, because they come to expect different feedback from different actions. There are several kinds of haptic tactile feedback that you can implement into your multitouch iPad, Slate or any app, and it is a great chance for some creativity. However keep a few things in mind:

  • Is the feedback intuitive to the action?
  • What should the surface of the interface ‘feel’ like?
  • Is the feedback too strong or disruptive? (Will it get annoying quickly?)
  • Does it help give more information about the action? (i.e. turning up the volume, the vibration will be different when you have reached max volume)

Virtual Interface Elements

This is a big term for your buttons, scroll bars, etc. They ‘exist’ because they have a shape that represents their purpose and motion, but are still virtual. This is a critical element of multitouch user experience design, as it physically demonstrates the actions that people need to take, and trains them on the motions needed.

An example of a virtual interface element, with the touch-motion required.

A few key tips to keep in mind when designing virtual interface elements:

  • Keep buttons large without sacrificing too much real estate, people’s fingers are actually not very adept at exact response, and often get easily frustrated if button does not respond to their immediate action.
  • Focus on the function. It’s great to make something really cool looking, but make sure that every virtual interface element has a clear purpose that drives the user to the ultimate goal.
  • Text size is important. This doesn’t mean that everything has to be Readers Digest-like, but just take stock of the overall purpose of your iPad or multitouch application. What size works best for your user/s?

    Courtesy of Team Liquid, 2010.

Contextual Interface Elements

This is where real intuition comes into play. Contextual interface elements are the non-visual motions that take place in the multitouch world. These include: finger scrolling, resizing, zooming, selecting among others.

  • Having a confirmation element can sometimes help new users. Meaning that when a user selects the button, a contextual explanation appears, demonstrating the touch-motion required.
  • Quality graphic design is important. When people pinch, zoom and move their content or images around, they are going to expect the same quality of image, especially on the size of the iPad or the Microsoft Surface. This means creating high-quality images (preferably png’s) that can stand up to pixilation.
  • Follow conventional practices. People do not like to re-learn motions they already have to do, and it will just confuse them. The best course of action is to spend some time playing with other iPad or Surface applications, learn if there is a popular practice for that motion and stick with that.  

About the Author

Lisa Calkins, Amadeus Consulting's CEO and Co-Founder, is also the Director of Creative Services. Lisa is dedicated to the infusion of creativity into every aspect of Amadeus Consulting, including our custom software application design.

Join the Conversation via Facebook

Leave a Reply

If you want a picture to show with your comment, go get a Gravatar.

8 − 1 =