Touch UIs are Quite Different

13,434 views

Published on

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

3 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total views
13,434
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
304
Comments
3
Likes
38
Embeds 0
No embeds

No notes for slide

Touch UIs are Quite Different

  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
  7. Urban screenTabletMobile Principles of the converging touch UIs. NOT: specific SW platforms or OSs. FOCUS TODAY
  8. 10 Windows 7 MeeGo? Apple Android Symbian RIM MOBILE DEVICES
  9. 11 Android MeeGo?Apple Windows 7 TABLETS
  10. 12 URBAN SCREENS
  11. BASICS
  12. Tap Swipe Spread Pinch Rotate Long press TOUCH GESTURES - de facto standards BASICS
  13. 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
  14. No hover states in UIs. No tooltips. Design for touch first, then add hovers for the web. NO POINTER
  15. Tap always opens the item. You can’t put focus on an object. NO FOCUS
  16. Tap will open the item No selections or multi-select
  17. Solutions: use check-boxes or a selection mode; object menu for several functions. NO FOCUS
  18. Tap on check-box to select Long press for object menu ✓ ✓ Add to favorites Send a link
  19. Drag to pan, pinch to zoom etc. Avoid indirect controls DIRECT MANIPULATION
  20. Scrub to delete photo? + Direct access to features - Recognition errors - Recalling - Recognition delay - Conflict with swipe ... GESTURES
  21. PHYSICAL
  22. 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
  23. PARALLAX
  24. Angry Birds: aiming by adjusting finger TAPPING TARGET Tapping is not accurate. Adjusting is.
  25. Mobile (right hand) Mobile (two hands)Mobile (left hand) FINGER REACH
  26. Tablet (two hands)Tablet (one hand) FINGER REACH
  27. Urban screen See also: http://www.tiresias.org/research/guidelines/touch.htm FINGER REACH
  28. Avoid visual feedback below the controls Sending failed! Send Send OBSTRUCTING HAND
  29. FINGERS AND HAND On large screens, allow scrolling with palm or several fingers
  30. MOVEMENT Use short drags, or use flick.Long dragging will cause accidental drops.
  31. Urban screenTabletMobile Vibra motor Pietzo (Electrotactile) (none yet)(none yet) FEEDBACK Lack of haptic feedback: compensate with visual and audio.
  32. Urban screenTabletMobile ENVIRONMENTAL CHALLENGES Moisture Gloves Vibration Sun, glare (typically used inside) Moisture Gloves Sun, glare
  33. Urban screenTabletMobile ENTERING TEXT Too small Decent Too large
  34. http://www.wulffmorgenthaler.com/strip.aspx? id=86c5551c-48dc-4e20-a71e-a8f5d9e8badb
  35. COGNITIVE
  36. COGNITIVE Indicate every touch —Compensate for environment and non- optimal touch technology.
  37. Label A tappable button A draggable slider AFFORDANCES Tell people where to touch, and how. No hover.
  38. Move, resize, zoom, inertia, bounce, ... LAWS OF PHYSICS + works as expected - hidden functionality
  39. Options next to the finger Public Library BE DIRECT Functions where the finger is.
  40. ! Info that may get missed LEAD THE EYE Especially on large screens.
  41. CC license: http://stimulant.io/
  42. How do you close a pop-up in Android? See also: http://en.wikipedia.org/wiki/Inattentional_blindness COGNITIVE Inattentional Blindness
  43. Explicit button for closing a pop-up.How to close Nokia N900 menus and dialogs? MAKE IT EXPLICIT Avoid any key -problem
  44. DIRECTIONS Design for spatial awareness - scrolling is cheap - use less windows and Z-order
  45. Long vertical pages for similar content See also: http://www.informationarchitects.jp/en/ipad-scroll-or-card/ Horizontal for paged content
  46. How do you find X? X DESIGN SPATIAL Problems with continuous 2D navigation
  47. SOCIAL
  48. PRIVATE SOCIAL Urban screen PC TV Tablet Laptop Mobile HOW SOCIAL?
  49. PRIVATE SOCIAL Urban screenPC TVTabletLaptopMobile HOW SOCIAL? My (subjective) order
  50. HOW SOCIAL? Most private of devices PRIVATE SOCIAL Mobile
  51. PRIVATE SOCIAL Tablet HOW SOCIAL? Shared use
  52. MULTITOUCH
  53. PRIVATE SOCIAL Urban screen HOW SOCIAL? Multi-user, multi-touch; spectators
  54. CC licence: http://stimulant.io/
  55. CC licence: http://stimulant.io/
  56. SUMMARY
  57. 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
  58. CC licence moleitau, magicalnihilism.com
  59. 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
  60. Panu Korhonen Managing Director www.nordkapp.fi LET’S TALK

×