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 covers: 1. Why touch is so important? 2. The advantages of Touch 3. The disadvantages of Touch 4. What you should do (Talk given at IndicThreads conference on mobile application development - 2010).

1. 1
Understanding
the Touch
Interface
Navin Kabra
Tap 'n Tap / PuneTech

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
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

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
Scope
Only for “mobile” and “tablet” devices
Does not apply to “Minority Report” style
interfaces

6. 6
Outline
Why is Touch Important
The Advantages of Touch
The Pitfalls of Touch
What you should do...

7. 7
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

8. 8
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!

9. 9
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

10. 10
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

11. 11
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

12. 12
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

13. 13
Adaptive Interface example #2
ThickButtons Keyboard

14. 14
New modes of interaction possible
Advanced Gestures
Pressure
etc
etc
etc
Lots of innovation possible

15. 15
Innovation Example: Swype

16. 16
Touch is no substitute for good
design
iPhone Blackberry
Storm Source: ChangeWaveResearch

17. 17
The Pitfalls of Touch
“Everything is best for something and worst for
something else.”
- Bill Buxton
“God is in the details.”
- Anonymous
Devil

18. 18
Laundry list of “Touch” shortcomings
(Note: all these have solutions, but you still need to be aware of
them...)

19. 19
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

20. 20
Fat Fingers – Implication
Problem: Effective screen size reduced
Solution: Must prioritize buttons (i.e. actions)

21. 21
No mouse pointer
Problem: No “Select.”
No “Select-Delete”
No “Select-Copy-Paste”
Solution: Identify relevant use-cases and come up
with workarounds

22. 22
No Select-Delete - Example
http://punetech.com
How do I go to
http://google.com?

23. 23
No Select-Delete - Solution
http://punetech.com
Delete-all

24. 24
No Select-Copy-Paste - Example
Cc:
How to move this
to “Cc:”?
To: navin@punetech.com, amit@punetech.com

25. 25
No precision
Problem: Finger taps not as precise as mouse
cursor positioning

26. 26
No Precision - Example
http://punetecch.com
How to select
and delete this
extra 'c'?

27. 27
No Hover
Problem: No tooltips
No change in cursor shape
Solution: Button labels must be clearer.
“Affordances” must be clearer.

28. 28
My resume is online.
My resume is online.
My resume is online.
My is online.
Affordance Example
resume
Which of these
Is clickable?

29. 29
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

30. 30
Cc:
No <TAB> Example
To: navin@punetech.com
How to go to
the CC field?

31. 31
Cc:
No <TAB> Example Solution
To: navin@punetech.com
NEXT
The “Next”
Button

32. 32
Standard “Touch” Gestures
Problem: People expect gestures to work. (e.g.
swipe, fling.)
Solution: Must implement standard gestures

33. 33
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

34. 34
Performance
Problem: People expect/need touch interfaces to
be much more responsive
Solution: Must allocate time for performance
measurements and tuning

35. 35
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

36. 36
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

37. 37
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...

38. 38
Other problems
Finger covers screen
No tactile feedback - Must look at screen
Often requires both hands
Accidental Activation
Lack of consistency across apps

39. 39
What should you do?

40. 40
All developers must use a touch based device as
their primary device for at least 1 week!
Understand Touch

41. 41
Eat your own dogfood
Must use your own app to understand its
shortcomings

42. 42
Not just mobile apps
Everybody is affected
Website designers
Game designers
Any content publishers in any format

43. 43
“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

44. 44
More Info
 Link-bundle for further reading:
http://bit.ly/cOqFzS
 If in Pune:
– Join the Pune Android Developers Group
– (Google Groups)
 Contact me:
– navin@tapntap.com