touch screen design for the slate pc
DESCRIPTION
How to develop touch optimized applications for Windows 7 on the slateTRANSCRIPT
![Page 1: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/1.jpg)
Touch Development for the Slate PC, May 9th
Sigrid Vandenweghe
What makes a great touch experience?
![Page 2: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/2.jpg)
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
![Page 3: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/3.jpg)
![Page 4: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/4.jpg)
Agenda
• Touch Interaction• Design Principles• Typical Touch Screen design problems
![Page 5: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/5.jpg)
Touch is everywhere
![Page 6: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/6.jpg)
Touch is more…
• Natural• Engaging• Human• Intuitive• Convenient
…than classic WIMP interfaces
![Page 7: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/7.jpg)
Touch Interaction
![Page 8: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/8.jpg)
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
![Page 9: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/9.jpg)
![Page 10: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/10.jpg)
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
![Page 11: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/11.jpg)
Design Principles
![Page 12: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/12.jpg)
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’)
![Page 13: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/13.jpg)
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
![Page 14: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/14.jpg)
Typical Touch Screen Design Problems
![Page 15: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/15.jpg)
Typical design problems
• Controls• Gestures• Hover
![Page 16: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/16.jpg)
Controls should be big enough
• But not giant Fisher Price like—just easily touchable
• Minimum 40x40
![Page 17: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/17.jpg)
Control Spacing
• Spacing makes touchable• Target regions of
interactive controls should preferably have at least 5 pixels between them
![Page 18: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/18.jpg)
Control Location
• Locate controls close to where they are most likely going to be used
• Alternative: context menu
![Page 19: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/19.jpg)
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
![Page 20: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/20.jpg)
Controls
Avoid indirect controls• -> use gestures
Typical design problems
![Page 21: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/21.jpg)
Controls
• Direct access
Typical design problems
![Page 22: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/22.jpg)
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
![Page 23: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/23.jpg)
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
![Page 24: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/24.jpg)
Hover
• Hover state does not exist
Panu Korhonen, 29/10/2010
![Page 25: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/25.jpg)
Think about mobile use!
![Page 26: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/26.jpg)
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
![Page 27: Touch Screen Design for the slate PC](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c83fad4a7959246e8b4580/html5/thumbnails/27.jpg)
Thank you!See also www.higroup.com/news-publications/white-papers