Touch Development for the Slate PC, May 9th

Sigrid Vandenweghe

What makes a great touch experience?

Human Interface Group

• Specialists in technology ergonomics • Optimizing the user experience of

technological solutions since 1992• Our expertise• Designing user interfaces• Developing user documentation• Training your customers and your employees

• Nice to meet you!• Meet me on LinkedIn

Agenda

• Touch Interaction• Design Principles• Typical Touch Screen design problems

Touch is everywhere

Touch is more…

• Natural• Engaging• Human• Intuitive• Convenient

…than classic WIMP interfaces

Touch Interaction

Touch Interaction

• Gesture• Flick, pan, zoom, rotate, two finger tap, press

and tap

• Manipulation• Naturally like the action in the real world• Moving, zooming, resizing, rotating

• Multitouch• Using multiple contact points simultaneously

Touch comes in flavors

• Touchable, touch enabled, touch optimized• Touch optimized=• Direct manipulation• Immediate feedback• Tasks are forgiving, allowing users to correct

mistakes easily and handle inaccuracy with touching and dragging.

• Tasks are designed to avoid or reduce the need for heavy text input or precise selection

Design Principles

Design principles

1. Direct manipulation2. Use standard controls & gestures3. Show Focus4. Use 'fingertip size' controls5. Be careful with non-standard touch

solutions6. Give tips (but enable ‘dismiss’)

General Touch Rules• Responsive• To feel direct, gestures must take effect immediately

• Consistent• ‘Transfer of knowledge’• Standardize

• Forgiving• where there is direct manipulation, there can be

accidental manipulation—and therefore the need for forgiveness.• provide undo• give good visual feedback• allow users to correct mistakes easily

Typical Touch Screen Design Problems

Typical design problems

• Controls• Gestures• Hover

Controls should be big enough

• But not giant Fisher Price like—just easily touchable

• Minimum 40x40

Control Spacing

• Spacing makes touchable• Target regions of

interactive controls should preferably have at least 5 pixels between them

Control Location

• Locate controls close to where they are most likely going to be used

• Alternative: context menu

Text Controls• Text input and selection

are challenging• Use auto-completion,

auto-suggest, direct manipulation and acceptable default text values to simplify tasks

• OR zoom UI 150 percent by default when touch is used

Controls

Avoid indirect controls• -> use gestures

Typical design problems

Controls

• Direct access

Typical design problems

Gestures

• Majority of users do not use sophisticated gestures• multi-touch, flick, drag ...

• Many user interfaces neither encourage that

• User interfaces have no or little 'handles' and 'triggers' for the multitude of gestures

Typical design problems

Flicks

• Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts

• Navigational flicks include drag up, drag down, move back, and move forward

• Editing flicks include copy, paste, undo, and delete

Hover

• Hover state does not exist

Panu Korhonen, 29/10/2010

Think about mobile use!

So a great touch experience…

• Gives direct access & direct manipulation• Is designed for reduced accuracy• Uses standard controls• Resembles the ‘real world experience’• Is careful with text input• Gives good & immediate feedback• Provides hints

Thank you!See also www.higroup.com/news-publications/white-papers