What makes a great touch experience?<br />Touch Development for the Slate PC, May 9th<br />Sigrid Vandenweghe<br />
Human Interface Group<br />Specialists in technology ergonomics <br />Optimizing the user experience of technological solu...
Agenda<br />Touch Interaction<br />Design Principles<br />Typical Touch Screen design problems<br />
Touch is everywhere<br />
Touch is more…<br />Natural<br />Engaging<br />Human<br />Intuitive<br />Convenient<br />…than classic WIMP interfaces<br />
Touch Interaction<br />
Touch Interaction<br />Gesture<br />Flick, pan, zoom, rotate, two finger tap, press and tap<br />Manipulation<br />Natural...
Touch comes in flavors<br />Touchable, touch enabled, touch optimized<br />Touch optimized=<br />Direct manipulation<br />...
Design Principles<br />
Design principles<br />Direct manipulation<br />Use standard controls & gestures<br />Show Focus<br />Use 'fingertip size'...
General Touch Rules<br />Responsive<br />To feel direct, gestures must take effect immediately<br />Consistent<br />‘Trans...
Typical Touch Screen Design Problems<br />
Typical design problems<br />Controls<br />Gestures<br />Hover<br />
Controls should be big enough<br />But not giant Fisher Price like—just easily touchable<br />Minimum 40x40<br />
Control Spacing<br />Spacing makes touchable<br />Target regions of interactive controls should preferably have at least 5...
Control Location<br />Locate controls close to where they are most likely going to be used<br />Alternative: context menu<...
Text Controls<br />Text input and selection are challenging<br />Use auto-completion, auto-suggest, direct manipulation an...
Controls<br />Avoid indirect controls<br />-> use gestures<br />Typical design problems<br />
Controls<br />Direct access<br />Typical design problems<br />
Gestures<br />Majority of users do not use sophisticated gestures<br />multi-touch, flick, drag ...<br />Many user interfa...
Flicks<br />Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts<br />Navigational flicks incl...
Hover<br />Hover state does not exist<br />PanuKorhonen, 29/10/2010<br />
Think about mobile use!<br />
So a great touch experience…<br />Gives direct access & direct manipulation<br />Is designed for reduced accuracy<br />Use...
See also www.higroup.com/news-publications/white-papers<br />Thank you!<br />
Upcoming SlideShare
Loading in...5
×

Touch Screen Design for the slate PC

1,474

Published on

How to develop touch optimized applications for Windows 7 on the slate

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,474
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Touch Screen Design for the slate PC

  1. 1. What makes a great touch experience?<br />Touch Development for the Slate PC, May 9th<br />Sigrid Vandenweghe<br />
  2. 2. Human Interface Group<br />Specialists in technology ergonomics <br />Optimizing the user experience of technological solutions since 1992<br />Our expertise<br />Designing user interfaces<br />Developing user documentation<br />Training your customers and your employees<br />Nice to meet you!<br />Meet me on LinkedIn<br />
  3. 3.
  4. 4. Agenda<br />Touch Interaction<br />Design Principles<br />Typical Touch Screen design problems<br />
  5. 5. Touch is everywhere<br />
  6. 6. Touch is more…<br />Natural<br />Engaging<br />Human<br />Intuitive<br />Convenient<br />…than classic WIMP interfaces<br />
  7. 7. Touch Interaction<br />
  8. 8. Touch Interaction<br />Gesture<br />Flick, pan, zoom, rotate, two finger tap, press and tap<br />Manipulation<br />Naturally like the action in the real world<br />Moving, zooming, resizing, rotating<br />Multitouch<br />Using multiple contact points simultaneously<br />
  9. 9.
  10. 10. Touch comes in flavors<br />Touchable, touch enabled, touch optimized<br />Touch optimized=<br />Direct manipulation<br />Immediate feedback<br />Tasks are forgiving, allowing users to correct mistakes easily and handle inaccuracy with touching and dragging.<br />Tasks are designed to avoid or reduce the need for heavy text input or precise selection<br />
  11. 11. Design Principles<br />
  12. 12. Design principles<br />Direct manipulation<br />Use standard controls & gestures<br />Show Focus<br />Use 'fingertip size' controls<br />Be careful with non-standard touch solutions<br />Give tips (but enable ‘dismiss’)<br />
  13. 13. General Touch Rules<br />Responsive<br />To feel direct, gestures must take effect immediately<br />Consistent<br />‘Transfer of knowledge’<br />Standardize<br />Forgiving<br />where there is direct manipulation, there can be accidental manipulation—and therefore the need for forgiveness.<br />provide undo<br />give good visual feedback<br />allow users to correct mistakes easily<br />
  14. 14. Typical Touch Screen Design Problems<br />
  15. 15. Typical design problems<br />Controls<br />Gestures<br />Hover<br />
  16. 16. Controls should be big enough<br />But not giant Fisher Price like—just easily touchable<br />Minimum 40x40<br />
  17. 17. Control Spacing<br />Spacing makes touchable<br />Target regions of interactive controls should preferably have at least 5 pixels between them<br />
  18. 18. Control Location<br />Locate controls close to where they are most likely going to be used<br />Alternative: context menu<br />
  19. 19. Text Controls<br />Text input and selection are challenging<br />Use auto-completion, auto-suggest, direct manipulation and acceptable default text values to simplify tasks<br />OR zoom UI 150 percent by default when touch is used<br />
  20. 20. Controls<br />Avoid indirect controls<br />-> use gestures<br />Typical design problems<br />
  21. 21. Controls<br />Direct access<br />Typical design problems<br />
  22. 22. Gestures<br />Majority of users do not use sophisticated gestures<br />multi-touch, flick, drag ...<br />Many user interfaces neither encourage that<br />User interfaces have no or little 'handles' and 'triggers' for the multitude of gestures<br />Typical design problems<br />
  23. 23. Flicks<br />Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts<br />Navigational flicks include drag up, drag down, move back, and move forward<br />Editing flicks include copy, paste, undo, and delete<br />
  24. 24. Hover<br />Hover state does not exist<br />PanuKorhonen, 29/10/2010<br />
  25. 25. Think about mobile use!<br />
  26. 26. So a great touch experience…<br />Gives direct access & direct manipulation<br />Is designed for reduced accuracy<br />Uses standard controls<br />Resembles the ‘real world experience’<br />Is careful with text input<br />Gives good & immediate feedback<br />Provides hints<br />
  27. 27. See also www.higroup.com/news-publications/white-papers<br />Thank you!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×