understanding the touch interface
If you can't read please download the document
TRANSCRIPT
Understanding the Touch Interface
Navin Kabra
Tap 'n Tap / PuneTech
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: [email protected]
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 Nielsenhttp://www.useit.com/alertbox/ipad.html
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
Scope
Only for mobile and tablet devices
Does not apply to Minority Report style interfaces
Outline
Why is Touch Important
The Advantages of Touch
The Pitfalls of Touch
What you should do...
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
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!
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
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
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
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
Adaptive Interface example #2
ThickButtons Keyboard
New modes of interaction possible
Advanced Gestures
Pressure
etc
etc
etc
Lots of innovation possible
Innovation Example: Swype
Touch is no substitute for good design
iPhone
BlackberryStorm
Source: ChangeWaveResearch
The Pitfalls of Touch
Everything is best for something and worst for something else. - Bill Buxton
God is in the details. - Anonymous
Devil
Laundry list of Touch shortcomings
(Note: all these have solutions, but you still need to be aware of them...)
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
Fat Fingers Implication
Problem: Effective screen size reduced
Solution: Must prioritize buttons (i.e. actions)
No mouse pointer
Problem: No Select.No Select-DeleteNo Select-Copy-Paste
Solution: Identify relevant use-cases and come up with workarounds
No Select-Delete - Example
http://punetech.com
How do I go tohttp://google.com?
No Select-Delete - Solution
http://punetech.com
Delete-all
No Select-Copy-Paste - Example
Cc:
How to move thisto Cc:?
To: [email protected], [email protected]
No precision
Problem: Finger taps not as precise as mouse cursor positioning
No Precision - Example
http://punetecch.com
How to select and delete this extra 'c'?
No Hover
Problem: No tooltipsNo change in cursor shape
Solution: Button labels must be clearer.Affordances must be clearer.
My resume is online.
My resume is online.
My resume is online.
My is online.
Affordance Example
resume
Which of theseIs clickable?
No Keyboard
Problem: Most of the time, there's no keyboardNo keyboard shortcutsNo Ctrl-C, Ctrl-VNo Ctrl-ANo
Solution: Identify relevant use-cases and come up workarounds
Cc:
No Example
How to go tothe CC field?
Cc:
No Example Solution
NEXT
The NextButton
Standard Touch Gestures
Problem: People expect gestures to work. (e.g. swipe, fling.)
Solution: Must implement standard gestures
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
Performance
Problem: People expect/need touch interfaces to be much more responsive
Solution: Must allocate time for performance measurements and tuning
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
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
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...
Other problems
Finger covers screen
No tactile feedback - Must look at screen
Often requires both hands
Accidental Activation
Lack of consistency across apps
What should you do?
All developers must use a touch based device as their primary device for at least 1 week!
Understand Touch
Eat your own dogfood
Must use your own app to understand its shortcomings
Not just mobile apps
Everybody is affected
Website designers
Game designers
Any content publishers in any format
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
More Info
Link-bundle for further reading:http://bit.ly/cOqFzS
If in Pune:Join the Pune Android Developers Group
(Google Groups)
Contact me:[email protected]