Your SlideShare is downloading. ×
Touch Screen Design for the slate PC
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Touch Screen Design for the slate PC

1,429
views

Published on

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

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,429
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. What makes a great touch experience?
    Touch Development for the Slate PC, May 9th
    Sigrid Vandenweghe
  • 2. 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
  • 3.
  • 4. Agenda
    Touch Interaction
    Design Principles
    Typical Touch Screen design problems
  • 5. Touch is everywhere
  • 6. Touch is more…
    Natural
    Engaging
    Human
    Intuitive
    Convenient
    …than classic WIMP interfaces
  • 7. Touch Interaction
  • 8. 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
  • 9.
  • 10. 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
  • 11. Design Principles
  • 12. Design principles
    Direct manipulation
    Use standard controls & gestures
    Show Focus
    Use 'fingertip size' controls
    Be careful with non-standard touch solutions
    Give tips (but enable ‘dismiss’)
  • 13. 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
  • 14. Typical Touch Screen Design Problems
  • 15. Typical design problems
    Controls
    Gestures
    Hover
  • 16. Controls should be big enough
    But not giant Fisher Price like—just easily touchable
    Minimum 40x40
  • 17. Control Spacing
    Spacing makes touchable
    Target regions of interactive controls should preferably have at least 5 pixels between them
  • 18. Control Location
    Locate controls close to where they are most likely going to be used
    Alternative: context menu
  • 19. 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
  • 20. Controls
    Avoid indirect controls
    -> use gestures
    Typical design problems
  • 21. Controls
    Direct access
    Typical design problems
  • 22. 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
  • 23. 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
  • 24. Hover
    Hover state does not exist
    PanuKorhonen, 29/10/2010
  • 25. Think about mobile use!
  • 26. 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
  • 27. See also www.higroup.com/news-publications/white-papers
    Thank you!