• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Understanding the Touch Interface [IndicThreads Mobile Application Development Conference]

  • 1,260 views
Uploaded on

Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India …

Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India
WEB: http://M10.IndicThreads.com

------------

Speaker: Navin Kabra

Abstract:
With the advent of the iPhone and Android, more and more mobile with touch screens are hitting the market. In spite of superficial similarities, designing an app for a touch based interface is very different from designing an app for a keypad/keyboard/stylus/mouse based interface. Just porting an older app to the touch with minimal design changes is a recipe for disaster.

This talk will cover:
1. Why touch is so important?
2. Which old techniques don’t work well ?
3. Which new techniques can be used ?
4. Common mistakes to watch out for

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,260
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
53
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. Understanding the Touch Interface Navin Kabra Tap 'n Tap / PuneTech
  • 2.
                    • Navin Kabra
    • Background:
      • Computer Science
      • 3. B.Tech, IIT-Bombay
      • 4. Ph.D, Univ of Wisconsin-Madison, USA
    • Currently
      • Consultant at Tap 'n Tap (Android Tablet Platform)
      • 5. Also founder of PuneTech.com, BharatHealth.com
    • Links:
      • http://punetech.com
      • 6. http://punetech.com/navin
      • 7. http://tapntap.com
    • Twitter: @_navin , @punetech
    • 8. Email: [email_address]
  • 9. For more than a decade, when we ask users for their first impression of (desktop) websites, the most frequently-used word has been " busy. " In contrast, the first impression of many iPad apps is " beautiful ." - Jakob Nielsen http://www.useit.com/alertbox/ipad.html
  • 10. This talk will try to show that...
    • iPad is “beautiful” because of “Touch”
    • 11. We'll dig into:
      • How “Touch” enables this
      • 12. How “Touch” forces this
      • 13. Specifics of how you can also do the same
      • 14. How NOT to end up with “unusable” instead of “beautiful”
  • 15. Outline
    • Why is Touch Important
    • 16. The Advantages of Touch
    • 17. The Pitfalls of Touch
    • 18. What you should do...
  • 19. Why Touch is Important
    • Touch will take over the world
      • Dominant interface for the next billion consumers
      • 20. Casual users
      • 21. Special purpose devices/apps
    • Not just for mobile app designers
      • Everyone who's producing content
      • 22. e.g. Websites, games, entertainment
  • 23. The Advantages of Touch
    • More Intuitive Interface
    • 24. Adaptive Interface - Changes With Context
    • 25. Faster
      • Especially for untrained/casual users
    • More compact devices
      • No keyboard/mouse/wires
    • Better for casual users
      • And there will be lots and lots of those!
  • 26. Touch Is More Intuitive #1
    • Natural Interface
      • Direct Manipulation
        • Content is the interface
        • 27. Interaction & output in the same place
      • Realistic look-n-feel
        • Pinch-zoom for photos vs. click to zoom
      • Modeless
        • No Shift / Control / Alt
  • 28. Touch Is More Intuitive #2
    • Simpler Navigation
      • “Forced” by “Disadvantages of Touch”
      • 29. Covered in later slides
      • 30. Net result:
        • Less cognitive overload
        • 31. Progressive disclosure better for users
  • 32. Adaptive Interfaces
    • Touch interface changes with context
    • 33. Number/size/location of buttons change with context
    • 34. Not possible with keyboards and other hardware input devices
    • 35. Possible but largely unused in mouse based GUIs
  • 36. Adaptive interface example #1
    • Different “soft” keyboards in different contexts
    • 37. URL Input Keyboard
      • No space bar
      • 38. “.com” key
      • 39. “Go” key instead of “Enter”
    • Email Input Keyboard
      • '@' and '_' keys more prominent
  • 40. Adaptive Interface example #2 ThickButtons Keyboard
  • 41. New modes of interaction possible
  • 47. Innovation Example: Swype
  • 48. The Pitfalls of Touch “Everything is best for something and worst for something else.” - Bill Buxton “ God is in the details.” - Anonymous Devil
  • 49. Laundry list of “Touch” shortcomings
  • 50. Fat Fingers Problem: Fingers are fatter than mouse cursor. (especially for fat people!) Solution: Make size of buttons & other clickable areas must be large enough Photo by brokenarts via everystockphoto.com
  • 51. Fat Fingers – Implication Problem: Effective screen size reduced Solution: Must prioritize buttons (i.e. actions)
  • 52. No mouse pointer Problem: No “Select.” No “Select-Delete” No “Select-Copy-Paste” Solution: Identify relevant use-cases and come up with workarounds
  • 53. No Select-Delete - Example http://punetech.com How do I go to http://google.com?
  • 54. No Select-Delete - Solution http://punetech.com Delete-all
  • 55. No Select-Copy-Paste - Example Cc: To: [email_address] , amit@ punetech .com How to move this to “Cc:”?
  • 56. No precision Problem: Finger taps not as precise as mouse cursor positioning
  • 57. No Precision - Example http://punetecch.com How to select and delete this extra 'c'?
  • 58. No Hover Problem: No tooltips No change in cursor shape Solution: Button labels must be clearer. “Affordances” must be clearer.
  • 59. My resume is online. My resume is online. My resume is online. My is online. Affordance Example resume Which of these Is clickable?
  • 60. No Keyboard Problem: Most of the time, there's no keyboard No keyboard shortcuts No Ctrl-C, Ctrl-V No Ctrl-A No <TAB> Solution: Identify relevant use-cases and come up workarounds
  • 61. Cc: No <TAB> Example To: navin@punetech.com How to go to the CC field?
  • 62. Cc: No <TAB> Example Solution To: navin@punetech.com NEXT The “Next” Button
  • 63. Standard “Touch” Gestures Problem: People expect gestures to work. ( e.g. swipe, fling.) Solution: Must implement standard gestures
  • 64. No “Right-Click” Problem: No “right-click-mouse” context menu (Non-)Solution: Long-press. (Painful to use.) Solution: Re-think app to not need context-menu
  • 65. Performance Problem: People expect/need touch interfaces to be much more responsive Solution: Must allocate time for performance measurements and tuning
  • 66. Low Discoverability Problem: Users might never discover some features/capabilities/gestures Contrast with: Mouse+menu GUI – Users can systematically explore all menu options Solution: Design for gradual discoverability
  • 67. Performance Thresholds
    • 0.1 sec response time: “Seamless”
      • User doesn't even notice your UI
      • 68. “ Natural”
    • 1 sec response time: “Decent”
      • User notices interface lags
      • 69. But “flow” is not interrupted
    • 1-10 sec response time: “Laggy”
      • Irritating
    • >10 sec response time: “Lose Users”
      • User will switch to another task
  • 70. Don't Overdo
    • Avoid Wacky “Innovative” interfaces
      • Low discoverability
      • 71. Confuses users
    • e.g. Tapping a picture does what?
      • Enlarges it?
      • 72. Opens Album?
      • 73. Pops up navigation options?
      • 74. Flips the picture?
      • 75. Opens hyperlink?
      • 76. Does nothing...
  • 77. Other problems
    • Finger covers screen
    • 78. No tactile feedback - Must look at screen
    • 79. Often requires both hands
    • 80. Accidental Activation
    • 81. Lack of consistency across apps
  • 82. What should you do?
  • 83. All developers must use a touch based device as their primary device for at least 1 week! Understand Touch
  • 84. Eat your own dogfood Must use your own app to understand its shortcomings
  • 85. Not just mobile apps
    • Everybody is affected
      • Website designers
      • 86. Game designers
      • 87. Any content publishers in any format
  • 88. “In the touch screen environment non-intuitive information architecture will be even more frustrating to your users” Source: http://www.foilball.com/best-practices-of-good-touch-screen-interface-design