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
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 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
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
Outline
Why is Touch Important
The Advantages of Touch
The Pitfalls of Touch
What you should do...
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
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
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
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
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
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
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
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
24. 24
No Precision - Example
http://punetecch.com
How to select
and delete this
extra 'c'?
25. 25
No Hover
Problem: No tooltips
No change in cursor shape
Solution: Button labels must be clearer.
“Affordances” must be clearer.
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
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
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
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
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
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
Other problems
Finger covers screen
No tactile feedback - Must look at screen
Often requires both hands
Accidental Activation
Lack of consistency across apps
38. 38
All developers must use a touch based device as
their primary device for at least 1 week!
Understand Touch
39. 39
Eat your own dogfood
Must use your own app to understand its
shortcomings
40. 40
Not just mobile apps
Everybody is affected
Website designers
Game designers
Any content publishers in any format
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