Desgin for touch

2,108 views
2,204 views

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,108
On SlideShare
0
From Embeds
0
Number of Embeds
395
Actions
Shares
0
Downloads
2
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • http://www.squidoo.com/capacitive-screens-vs-resistive-screens?utm_source=google&utm_medium=imgres&utm_campaign=framebuster
  • 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/
  • From: http://www.planarembedded.com/technology/touch/
  • http://library.forum.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF.htmlFrom: http://www.turntillburn.ch/cms/ttb/fileadmin/website/images/med/finger_hand/hand_ap.jpg
  • From: http://www.slideshare.net/Apocalypso/technology-behind-touch-user-interfaces-by-symbianfreakcom-presentation?type=powerpointhttp://www.shutterpoint.com/photos/S/782312-Red-Fingerprint_thum.jpg
  • From: http://www.lukew.com/ff/entry.asp?1085
  • http://img-android.lisisoft.com/img/3/0/3035-1-com.improot.android.tonedialer.jpg
  • http://blog.hakia.com/wp-content/uploads/iceberg1.gif
  • From:http://www.tipb.com/images/stories/2010/02/iphone_3gs_iphone_4.png
  • 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
  • http://nadzrul.com/media/2010/05/iphone_user.jpghttp://www.ipadshouse.com/wp-content/uploads/2010/12/couch-shot1-502x344.jpg
  • From: http://bindapple.com/apple-iphone-applications/http://www.joystickdivision.com/appstore_ipad_20100225.jpg
  • From: http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
  • http://fajkowski.com/blog/wp-content/uploads/2010/01/ipadPrototypeFront.jpg
  • http://lineandpixel.com/blog/knobs-and-dials
  • http://trentwalton.com/2010/07/05/non-hover/
  • http://www.strangesystems.com/wp-content/uploads/2008/08/touch_phone.jpg
  • http://fronttoback.org/wp-content/uploads/2008/03/haptickb.png
  • http://dribbble.com/system/users/3782/screenshots/141750/slider_03.jpg?1304695747
  • http://2.bp.blogspot.com/_mupm2BmIjtc/S6zudpJhG6I/AAAAAAAALBI/Vzz1fdW3yDc/s1600/hand+palm+thank+you.jpg
  • Desgin for touch

    1. 1. design for May, 2011)
    2. 2. TECHNOLOGY
    3. 3. Infrared Surface Acoustic Wave Projected CapacitiveResistive Capacitive Surface Capacitive Optical http://www.planarembedded.com/technology/touch/
    4. 4. Resistive Capacitive http://touchscreenss.com/2011/04/11/resistive-touch-screen/
    5. 5. Resistive Touch• Input requires pressure• With pointing device: – Stylus – Fingernail• High precision, more accurate• Was most common before 2007
    6. 6. Capacitive Touch• Gradually become popular after iPhone (2007)• Less accurate, requires big target size• Easy input with finger touch
    7. 7. FINGER TOUCH
    8. 8. 10 x 10 mmSmallest average finger pad size Designing applications for S60 | Forum.Nokia
    9. 9. Time to finish typing with different button sizeshttp://www.slideshare.net/Apocalypso/technology-behind-touch-user-interfaces-by-symbianfreakcom-presentation?type=powerpoint
    10. 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. 11. Everything has to look BIG?
    12. 12. Iceberg TipUI control can have a larger target size than visible. Designing Gestural Interfaces – Dan Saffer
    13. 13. Visible sizeTouch target size UI control visual size: 60 – 100% touch target size - Windows Phone 7 Guidelines
    14. 14. Same dimension, doubled resolution? 3.5” 3.5” 320 x 480 px 640 x 960 px (164 ppi) (326 ppi)
    15. 15. Same size button becomes smaller on high PPI (/DPI) screensPixel Per Inch (PPI)Dot Per Inch (DPI)
    16. 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. 17. Provide alternative (image) resourcesfor 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. 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. 19. FORM FACTORS
    20. 20. DIFFERENT from conventionalbig screen, keyboard, mouse design
    21. 21. Design affects User Behavior,
    22. 22. and how a device is held and used…
    23. 23. http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
    24. 24. http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
    25. 25. Try and feel the design with your own hand helps
    26. 26. UI DESIGN CONSIDERATION
    27. 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. 28. http://lineandpixel.com/blog/knobs-and-dials
    29. 29. no more hover state hover Show everything hover Utilize tap http://trentwalton.com/2010/07/05/non-hover/
    30. 30. Responsive: touch feedback • Touching (depressed) • Touched: delayed disappearance of feedback
    31. 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. 32. avoid screen coverage
    33. 33. avoid screen coverageLabel above control, not below 8/17
    34. 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

    ×