5. Resistive Touch
• Input requires pressure
• With pointing device:
– Stylus
– Fingernail
• High precision, more
accurate
• Was most common
before 2007
6. Capacitive Touch
• Gradually become
popular after iPhone
(2007)
• Less accurate, requires
big target size
• Easy input with finger
touch
8. 10 x 10 mm
Smallest average finger pad size
Designing applications for S60 | Forum.Nokia
9. Time to finish typing with different button sizes
http://www.slideshare.net/Apocalypso/technology-behind-touch-user-interfaces-by-symbianfreakcom-presentation?type=powerpoint
10. Guidelines for touch target size
• Apple iOS Human Interface Guidelines
– 44 x 44 points*
• Windows Phone 7 UI and Interaction Guide
– Recommended size: 9mm/34px
– Minimum size: 7mm/26px
– Minimum spacing: 2mm/8px
• Nokia S60
– 7 x 7 mm with 1mm gaps for index finger
– 8 x 8 mm with 2mm gaps for thumb usage
*Apple changed its guideline from “pixels” to “points” after iPhone4
(1 point = 1 pixel on iPhone, 2 pixels on iPhone4) http://www.lukew.com/ff/entry.asp?1085
15. Same size button becomes smaller
on high PPI (/DPI) screens
Pixel Per Inch (PPI)
Dot Per Inch (DPI)
16. • iPhone, 3, 3GS • T-Mobile G1
– 320 x 480 | 3.5” | 164ppi – 320 x 480 | 3.2” | 180ppi
• iPhone 4 • MyTouch 3G
– 640 x 960 | 3.5” | 326ppi – 320 x 480 | 3.2” | 180ppi
• HTC Hero
– 320 x 480 | 3.2” | 180ppi
• Nexus One
– 480 x 800| 3.7” | 252ppi
• HTC Desire
– 480 x 800| 3.7” | 252ppi
• Nokia N900
– 480 x 800 | 3.5” | 266ppi
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
17. Provide alternative (image) resources
for different device groups
Group Screen Density
ldpi ~120 dpi
mdpi ~ 160 dpi
hdpi ~ 240 dpi
xhdpi ~ 320 dpi
http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
18. Use relative units
• “point” on iOS
1 point = 1 pixel on iPhone (164ppi)
= 2 pixels on iPhone4 (326ppi)
• “dp” (density-independent pixel) on Android
1 dp = 1 pixel on 160 dpi screen
= 1.5 pixels on 240 dpi screen
http://developer.android.com/guide/practices/screens_support.html
31. To reinforce feedback, use
Sound (acoustic feedback)
and / or
Vibration (tactile feedback)
However, use with cautious. It might annoy users.
(Allow users to turn off when used.)
Two types of Resistive touch screen It was the most common touch screen technology used on mobile devices before 2007.http://images-mediawiki-sites.thefullwiki.org/05/3/1/0/5141245273936816.pngFrom: http://www.planarembedded.com/technology/touch/
The higher the PPI, the larger your interface will have to be to create suitable touch target.Target = (target size in inches) x (screen width in pixels) / (screen width in inches)From: Designing Gestural Interfaces – by Dan Saffer
http://www.lukew.com/ff/entry.asp?1142Note: common desktop screens are 96ppihttp://2.bp.blogspot.com/-GNBinQ9--yM/TbqXx6pXipI/AAAAAAAAAqo/0pm7ndp9uec/s1600/android-logo.png
http://developer.android.com/guide/practices/screens_support.htmlProvide different images resource and layouts for different device groups
http://developer.android.com/resources/dashboard/screens.htmlAround 75% of Android devices are high (240) dpi. 2011 May 6
