1. design for
May, 2011)

2. TECHNOLOGY

3. Infrared Surface Acoustic Wave Projected Capacitive
Resistive Capacitive Surface Capacitive Optical
http://www.planarembedded.com/technology/touch/

4. Resistive Capacitive
http://touchscreenss.com/2011/04/11/resistive-touch-screen/

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

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

11. Everything has to look BIG?

12. Iceberg Tip
UI control can have a larger
target size than visible.
Designing Gestural Interfaces – Dan Saffer

13. Visible size
Touch target size
UI control visual size: 60 – 100% touch target size
- Windows Phone 7 Guidelines

14. Same dimension, doubled resolution?
3.5” 3.5”
320 x 480 px 640 x 960 px
(164 ppi) (326 ppi)

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

19. FORM FACTORS

20. DIFFERENT from conventional
big screen, keyboard, mouse design

21. Design affects User Behavior,

22. and how a device is held and used…

23. http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/

24. http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/

25. Try and feel the design with your own hand
helps

26. UI DESIGN CONSIDERATION

27. Discoverability:
touch affordance (/signifier*)
• Big enough (for finger)
• Conventions
– Button look
• Rounded corner
• Shaded surface
– Underlined hyperlink on
web design
*Donald Norman uses “signifier” instead of “affordance” now. (http://www.jnd.org/dn.mss/signifiers_not_affordances.html)

28. http://lineandpixel.com/blog/knobs-and-dials

29. no more hover state
hover
Show everything
hover
Utilize tap
http://trentwalton.com/2010/07/05/non-hover/

30. Responsive: touch feedback
• Touching (depressed)
• Touched: delayed disappearance of feedback

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

32. avoid screen coverage

33. avoid screen coverage
Label above control, not below
8/17

34. Common touch gestures
Tap Swipe/Flick Drag/Pan
Double tap Pinch Spread Touch and hold
UI Design and Interaction Guide for Windows Phone 7