My presentation at UXmarathon, www.uxmarathon.com, about touch user interfaces.

1. TOUCH UIS ARE
QUITE DIFFERENT
PANU KORHONEN
26.10.2010

2. Panu Korhonen
1986 - 1993 SW engineering
1993 - 2007 Nokia: HCI Research & Design
2008 - 2009 Nokia: Maemo/MeeGo UI lead
2009 - Nordkapp
ABOUT ME

3. Hired 50+ UX specialists
Nokia S30 & S40 evolution
Original Nokia S60 UI concept
First MeeGo UI Concept
Key touch UI patents
ABOUT ME

4. WE ARE
NORDKAPP

5. We design new business,
products and services.
NORDKAPP

6. INTRODUCTION

9. Urban screenTabletMobile
Principles of the converging touch UIs.
NOT: specific SW platforms or OSs.
FOCUS TODAY

10. 10
Windows 7 MeeGo?
Apple Android Symbian RIM
MOBILE DEVICES

11. 11
Android MeeGo?Apple Windows 7
TABLETS

12. 12
URBAN SCREENS

13. BASICS

14. Tap Swipe
Spread Pinch Rotate
Long press
TOUCH GESTURES
- de facto standards
BASICS

15. See also: http://www.lukew.com/ff/entry.asp?1071
Tap
Swipe
Longpress
Spread
Pinch
Rotate
Other
Open, select
Scroll, pan, move object
Invoke object menu, change mode
Zoom in, enlarge object
Zoom out, shrink object
Rotate object
Other gestures have not become standard yet
TYPICAL ACTIONS

16. No hover states in UIs. No tooltips.
Design for touch first, then add hovers for the web.
NO POINTER

17. Tap always opens the item. You can’t put
focus on an object.
NO FOCUS

18. Tap will open the item No selections or multi-select

19. Solutions: use check-boxes or a selection
mode; object menu for several functions.
NO FOCUS

20. Tap on check-box to select Long press for object menu
✓
✓
Add to favorites
Send a link

21. Drag to pan, pinch to zoom etc.
Avoid indirect controls
DIRECT MANIPULATION

22. Scrub to delete photo?
+ Direct access to features
- Recognition errors
- Recalling
- Recognition delay
- Conflict with swipe ...
GESTURES

23. PHYSICAL

24. Urban screenTabletMobile
http://www.lukew.com/ff/entry.asp?1085 Colle H, Hiszem K.“Standing at a kiosk: effects of key size and spacing on touch screen numeric
keypad performance and user preference.”
No recommendations available yet
7 mm
7 mm
20 mm
20 mm
7 mm ?
7 mm ?
MINIMUM TOUCH TARGET SIZES

25. PARALLAX

26. Angry Birds: aiming by adjusting finger
TAPPING TARGET
Tapping is not accurate.
Adjusting is.

27. Mobile (right hand) Mobile (two hands)Mobile (left hand)
FINGER REACH

28. Tablet (two hands)Tablet (one hand)
FINGER REACH

29. Urban screen
See also: http://www.tiresias.org/research/guidelines/touch.htm
FINGER REACH

31. Avoid visual feedback below the controls
Sending failed!
Send Send
OBSTRUCTING HAND

32. FINGERS AND HAND
On large screens, allow scrolling with palm or
several fingers

33. MOVEMENT
Use short drags, or use flick.Long dragging
will cause accidental drops.

34. Urban screenTabletMobile
Vibra motor
Pietzo
(Electrotactile)
(none yet)(none yet)
FEEDBACK
Lack of haptic feedback: compensate with
visual and audio.

35. Urban screenTabletMobile
ENVIRONMENTAL CHALLENGES
Moisture
Gloves
Vibration
Sun, glare
(typically used inside) Moisture
Gloves
Sun, glare

36. Urban screenTabletMobile
ENTERING TEXT
Too small Decent Too large

37. http://www.wulffmorgenthaler.com/strip.aspx?
id=86c5551c-48dc-4e20-a71e-a8f5d9e8badb

38. COGNITIVE

39. COGNITIVE
Indicate every touch
—Compensate for environment and non-
optimal touch technology.

40. Label
A tappable button A draggable slider
AFFORDANCES
Tell people where to touch, and how.
No hover.

41. Move, resize, zoom, inertia, bounce, ...
LAWS OF PHYSICS
+ works as expected
- hidden functionality

42. Options next to the finger
Public Library
BE DIRECT
Functions where the finger is.

43. !
Info that may get missed
LEAD THE EYE
Especially on large screens.

44. CC license: http://stimulant.io/

45. How do you close a pop-up in Android?
See also: http://en.wikipedia.org/wiki/Inattentional_blindness
COGNITIVE
Inattentional Blindness

46. Explicit button for closing a pop-up.How to close Nokia N900 menus and dialogs?
MAKE IT EXPLICIT
Avoid any key -problem

47. DIRECTIONS
Design for spatial awareness
- scrolling is cheap
- use less windows and Z-order

48. Long vertical pages for similar content
See also: http://www.informationarchitects.jp/en/ipad-scroll-or-card/
Horizontal for paged content

49. How do you find X?
X
DESIGN SPATIAL
Problems with continuous 2D navigation

50. SOCIAL

51. PRIVATE SOCIAL
Urban screen
PC
TV
Tablet
Laptop
Mobile
HOW SOCIAL?

52. PRIVATE SOCIAL
Urban screenPC TVTabletLaptopMobile
HOW SOCIAL?
My (subjective) order

53. HOW SOCIAL?
Most private of devices
PRIVATE SOCIAL
Mobile

54. PRIVATE SOCIAL
Tablet
HOW SOCIAL?
Shared use

55. MULTITOUCH

56. PRIVATE SOCIAL
Urban screen
HOW SOCIAL?
Multi-user, multi-touch; spectators

57. CC licence: http://stimulant.io/

58. CC licence: http://stimulant.io/

59. SUMMARY

60. When designing for touch
—Forget the old
—Aim for direct manipulation
—Use de-facto conventions
—Be careful with non-standard touch solutions
—Consider physical, cognitive, and social aspects
SUMMARY

61. CC licence moleitau, magicalnihilism.com

62. Touch target sizes:
http://www.lukew.com/ff/entry.asp?1085
iPad design tips:
http://www.lukew.com/ff/entry.asp?1196
iPad design resources:
http://www.ipadatelier.com/design-for-ipad.html
The Best 10 articles on Multi-Touch:
http://www.pointanddo.com/2009/09/10-best-articles-on-multitouch.html
How not to do gestures in your iPhone app:
http://www.touchusability.com/blog/2010/9/12/how-not-to-do-gestures-in-your-iphone-
app.html
Free Wireframing Kits, UI Design Kits, PDFs and Resources:
http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-
and-resources/
Non Hover:
http://trentwalton.com/2010/07/05/non-hover/
Finger Positions for Touch Screens:
http://www.kickerstudio.com/blog/2010/08/finger-positions-for-touchscreens/
Japanese vending machine with 47” touch screen:
http://www.engadget.com/2010/08/11/japan-takes-vending-machines-to-their-logical-47-
inch-extreme/
Touch screens in ATMs:
http://futureselfservicebanking.com/
Gestures:
http://ignorethecode.net/blog/2010/05/25/gestures/
Scroll of Flick?
http://www.informationarchitects.jp/en/ipad-scroll-or-card/
UI guidelines:
http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
Touch User Interface - Touch Screen and Multi-touch:
http://www.touchuserinterface.com/2009/06/links-for-overview-of-touch-user.html
Urban screens in Helsinki:
http://blog.nordkapp.fi/2010/03/urban-screens-presentation/
Tap the TV: Online TV concept for multi-touch tablets
http://blog.nordkapp.fi/2010/06/tap-the-tv/
FUTHER READING

63. Panu Korhonen
Managing Director
www.nordkapp.fi
LET’S
TALK