Designing for Touch Screens

I was totally enamored by the Microsoft Surface at WebDU. Here is a mix of what I learnt, filmed and experienced.

Touch Design Principles

Shane Morris outlined some design prinicples when designing for the Surface, but many would apply to designing for smaller touch screen devices.

  • Don’t deploy a desktop application to a new device, consider the specific requirements of a touch interface
  • You may be designing for more than one simultaneous user. Users may be interacting from different directions so the app should be ‘direction-less’.
  • Non functional gestures need to be acknowledged. (Vapour trails have been built into the Surface platform to orient the user and show non consequential hand gestures.)
  • Use large targets. Avoid traditional controls.
  • Design for the super real i.e. design digital objects using real world objects as inspiration. Think about how the object  behaves in the real world, to design how the virtual object responds to touch.

Below are some amateur video clips of me and others playing around with the Microsoft Surface.

Switching it on

The Surface is not a magic table. Under that huge resistive touch screen is a machine. Weirdly, a convenient button to switch it on, located on the outside, does not seem to have been included in the design brief.

Social

People are happy to clean up the debris left by other users on the Surface, and its all part of the fun and learning.

Hold on! Those 2 demos show it working great but …

One handed, while I was holding the camera, I was having a bit more trouble than the peeps in the Lonely Planet demo. I had objects spinning out of control all over the place but it was still fun.

The point of the Lonely Planet Surface app is to load a passport with information, like photos and videos from the store, that you can look at later online. Each “passport” has a barcode type sticker so the machine can read it. Each Lonely Planet book also has a “barcode”, so as soon as you plonk it on the table it reveals relevant content.

Lonely Planet passport and guide with Microsoft Surface "barcode"
Lonely Planet passport and guide

Resistive Screen

Touch devices are either resistive or capacitive. The Surface is obviously resistive, so the pressure you apply affects the interaction as this simple Ribbons app demonstrates.

Design for the Super Real

This wine store didn’t quite work for me. It used pretty conventional controls, and I kept trying to do something with the bottles themselves. The workflow seemed kinda busted too.

But the piano app works great.

Another learning from this blog post is that videos take forever to upload on Youtube. FOREVER!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: