Touch Screen Design for the slate PC
-
Upload
human-interface-group -
Category
Business
-
view
112 -
download
3
description
Transcript of Touch Screen Design for the slate PC
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