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

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

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

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!