1
Understanding
the Touch
Interface
Navin Kabra
Tap 'n Tap / PuneTech
2
Navin Kabra
 Background:
 Computer Science
 B.Tech, IIT-Bombay
 Ph.D, Univ of Wisconsin-Madison, USA
 Currently
 C...
3
For more than a decade, when we ask users forFor more than a decade, when we ask users for
their first impression of (de...
4
This talk will try to show that...
 iPad is “beautiful” because of “Touch”
 We'll dig into:
 How “Touch” enables this...
5
Outline
 Why is Touch Important
 The Advantages of Touch
 The Pitfalls of Touch
 What you should do...
6
Why Touch is Important
 Touch will take over the world
 Dominant interface for the next billion
consumers
 Casual use...
7
The Advantages of Touch
 More Intuitive Interface
 Adaptive Interface - Changes With
Context
 Faster
 Especially for...
8
Touch Is More Intuitive #1
 Natural Interface
 Direct Manipulation
 Content is the interface

Interaction & output i...
9
Touch Is More Intuitive #2
 Simpler Navigation
 “Forced” by “Disadvantages of Touch”
 Covered in later slides
 Net r...
10
Adaptive Interfaces
 Touch interface changes with context
 Number/size/location of buttons change
with context
 Not ...
11
Adaptive interface example #1
 Different “soft” keyboards in different
contexts
 URL Input Keyboard
 No space bar
 ...
12
Adaptive Interface example #2
ThickButtons Keyboard
13
New modes of interaction possible
 Advanced Gestures
 Pressure
 etc
 etc
 etc
 Lots of innovation possible
14
Innovation Example: Swype
15
The Pitfalls of Touch
“Everything is best for something and worst for
something else.”
- Bill Buxton
“God is in the det...
16
Laundry list of “Touch” shortcomings
17
Fat Fingers
Problem: Fingers are fatter than mouse cursor.Problem: Fingers are fatter than mouse cursor.
(especially fo...
18
Fat Fingers – Implication
Problem: Effective screen size reduced
Solution: Must prioritize buttons (i.e. actions)
19
No mouse pointer
Problem: No “Select.”
No “Select-Delete”
No “Select-Copy-Paste”
Solution: Identify relevant use-cases ...
20
No Select-Delete - Example
http://punetech.com
How do I go to
http://google.com?
21
No Select-Delete - Solution
http://punetech.com
Delete-all
22
No Select-Copy-Paste - Example
Cc:
How to move this
to “Cc:”?
To: navin@punetech.com, amit@punetech.com
23
No precision
Problem: Finger taps not as precise as mouse
cursor positioning
24
No Precision - Example
http://punetecch.com
How to select
and delete this
extra 'c'?
25
No Hover
Problem: No tooltips
No change in cursor shape
Solution: Button labels must be clearer.
“Affordances” must be ...
26
My resume is online.
My resume is online.
My resume is online.
My is online.
Affordance Example
resume
Which of these
I...
27
No Keyboard
Problem: Most of the time, there's no keyboard
No keyboard shortcuts
No Ctrl-C, Ctrl-V
No Ctrl-A
No <TAB>
S...
28
Cc:
No <TAB> Example
To: navin@punetech.com
How to go to
the CC field?
29
Cc:
No <TAB> Example Solution
To: navin@punetech.com
NEXT
The “Next”
Button
30
Standard “Touch” Gestures
Problem: People expect gestures to work. (e.g.
swipe, fling.)
Solution: Must implement standa...
31
No “Right-Click”
Problem: No “right-click-mouse” context menu
(Non-)Solution: Long-press. (Painful to use.)
Solution: R...
32
Performance
Problem: People expect/need touch interfaces to
be much more responsive
Solution: Must allocate time for pe...
33
Low Discoverability
Problem: Users might never discover some
features/capabilities/gestures
Contrast with: Mouse+menu G...
34
Performance Thresholds
 0.1 sec response time: “Seamless”
 User doesn't even notice your UI
 “Natural”
 1 sec respo...
35
Don't Overdo
 Avoid Wacky “Innovative” interfaces
 Low discoverability
 Confuses users
 e.g. Tapping a picture does...
36
Other problems
 Finger covers screen
 No tactile feedback - Must look at screen
 Often requires both hands
 Acciden...
37
What should you do?
38
All developers must use a touch based device as
their primary device for at least 1 week!
Understand Touch
39
Eat your own dogfood
Must use your own app to understand its
shortcomings
40
Not just mobile apps
 Everybody is affected
 Website designers
 Game designers
 Any content publishers in any format
41
“In the touch screen environment non-intuitive
information architecture will be even more
frustrating to your users”
So...
Upcoming SlideShare
Loading in...5
×

Understanding the Touch Interface [IndicThreads Mobile Application Development Conference]

1,314

Published on

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

Published in: Technology, Health & Medicine
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,314
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Understanding the Touch Interface [IndicThreads Mobile Application Development Conference]

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

    Clipping is a handy way to collect important slides you want to go back to later.

×