SlideShare une entreprise Scribd logo
1  sur  35
design for




             May, 2011)
TECHNOLOGY
Infrared       Surface Acoustic Wave             Projected Capacitive




Resistive Capacitive     Surface Capacitive                        Optical


                                               http://www.planarembedded.com/technology/touch/
Resistive                 Capacitive




            http://touchscreenss.com/2011/04/11/resistive-touch-screen/
Resistive Touch
• Input requires pressure
• With pointing device:
   – Stylus
   – Fingernail
• High precision, more
  accurate

• Was most common
  before 2007
Capacitive Touch
• Gradually become
  popular after iPhone
  (2007)

• Less accurate, requires
  big target size
• Easy input with finger
  touch
FINGER TOUCH
10 x 10 mm
Smallest average finger pad size




                                   Designing applications for S60 | Forum.Nokia
Time to finish typing with different button sizes




http://www.slideshare.net/Apocalypso/technology-behind-touch-user-interfaces-by-symbianfreakcom-presentation?type=powerpoint
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
Everything has to look BIG?
Iceberg Tip
UI control can have a larger
  target size than visible.




                               Designing Gestural Interfaces – Dan Saffer
Visible size




Touch target size


     UI control visual size: 60 – 100% touch target size
                          - Windows Phone 7 Guidelines
Same dimension, doubled resolution?




           3.5”           3.5”
       320 x 480 px   640 x 960 px
         (164 ppi)      (326 ppi)
Same size button becomes smaller
                          on high PPI (/DPI) screens



Pixel Per Inch (PPI)
Dot Per Inch (DPI)
•   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
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
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
FORM FACTORS
DIFFERENT from conventional
big screen, keyboard, mouse design
Design affects User Behavior,
and how a device is held and used…
http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
Try and feel the design with your own hand
                                      helps
UI DESIGN CONSIDERATION
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)
http://lineandpixel.com/blog/knobs-and-dials
no more hover state

   hover




                 Show everything



   hover




                      Utilize tap
                      http://trentwalton.com/2010/07/05/non-hover/
Responsive: touch feedback




 • Touching (depressed)
 • Touched: delayed disappearance of feedback
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.)
avoid screen coverage
avoid screen coverage
Label above control, not below

              8/17
Common touch gestures



       Tap      Swipe/Flick                 Drag/Pan




 Double tap   Pinch           Spread               Touch and hold

                              UI Design and Interaction Guide for Windows Phone 7
Desgin for touch

Contenu connexe

Similaire à Desgin for touch

Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel PublishingJoe Welinske
 
Supporting multi screen in android
Supporting multi screen in androidSupporting multi screen in android
Supporting multi screen in androidrffffffff007
 
Technical documentation of game development Part -1
Technical documentation of game development Part -1Technical documentation of game development Part -1
Technical documentation of game development Part -1krishn verma
 
Supporting multi screen in android cn
Supporting multi screen in android cnSupporting multi screen in android cn
Supporting multi screen in android cnrffffffff007
 
InFocus Solutions Displays
InFocus Solutions DisplaysInFocus Solutions Displays
InFocus Solutions DisplaysGabriel Navakas
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstWebExpo
 
UX and UI Designing for all android screen
UX and UI Designing for all android screenUX and UI Designing for all android screen
UX and UI Designing for all android screenArnold Saputra
 
Going Mobile by Nate Beck
Going Mobile by Nate BeckGoing Mobile by Nate Beck
Going Mobile by Nate Beckmochimedia
 
Surface computing,towards business technology
Surface computing,towards business technologySurface computing,towards business technology
Surface computing,towards business technologyrajesh441
 
Interactivo Education Solutions V112014
Interactivo Education Solutions V112014Interactivo Education Solutions V112014
Interactivo Education Solutions V112014George Khayat
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerRobert Zinner
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite DifferentPanu Korhonen
 
iPad Pro vs Surface Pro 4 Infographic
iPad Pro vs Surface Pro 4 InfographiciPad Pro vs Surface Pro 4 Infographic
iPad Pro vs Surface Pro 4 InfographicOurITDepartment
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
Alpha Products 15 email
Alpha Products 15 emailAlpha Products 15 email
Alpha Products 15 emailJon Cox
 
Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Nate Beck
 
It's All About Context
It's All About ContextIt's All About Context
It's All About ContextKevin Suttle
 

Similaire à Desgin for touch (20)

Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
Supporting multi screen in android
Supporting multi screen in androidSupporting multi screen in android
Supporting multi screen in android
 
Technical documentation of game development Part -1
Technical documentation of game development Part -1Technical documentation of game development Part -1
Technical documentation of game development Part -1
 
Supporting multi screen in android cn
Supporting multi screen in android cnSupporting multi screen in android cn
Supporting multi screen in android cn
 
InFocus Solutions Displays
InFocus Solutions DisplaysInFocus Solutions Displays
InFocus Solutions Displays
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 
UX and UI Designing for all android screen
UX and UI Designing for all android screenUX and UI Designing for all android screen
UX and UI Designing for all android screen
 
Ux & hybrid app
Ux & hybrid appUx & hybrid app
Ux & hybrid app
 
Going Mobile by Nate Beck
Going Mobile by Nate BeckGoing Mobile by Nate Beck
Going Mobile by Nate Beck
 
Smart Ppt
Smart PptSmart Ppt
Smart Ppt
 
Surface computing,towards business technology
Surface computing,towards business technologySurface computing,towards business technology
Surface computing,towards business technology
 
Interactivo Education Solutions V112014
Interactivo Education Solutions V112014Interactivo Education Solutions V112014
Interactivo Education Solutions V112014
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite Different
 
iPad Pro vs Surface Pro 4 Infographic
iPad Pro vs Surface Pro 4 InfographiciPad Pro vs Surface Pro 4 Infographic
iPad Pro vs Surface Pro 4 Infographic
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Alpha Products 15 email
Alpha Products 15 emailAlpha Products 15 email
Alpha Products 15 email
 
Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012
 
It's All About Context
It's All About ContextIt's All About Context
It's All About Context
 

Dernier

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Dernier (20)

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Desgin for touch

  • 1. design for May, 2011)
  • 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
  • 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
  • 20. DIFFERENT from conventional big screen, keyboard, mouse design
  • 21. Design affects User Behavior,
  • 22. and how a device is held and used…
  • 25. Try and feel the design with your own hand helps
  • 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)
  • 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.)
  • 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

Notes de l'éditeur

  1. http://www.squidoo.com/capacitive-screens-vs-resistive-screens?utm_source=google&utm_medium=imgres&utm_campaign=framebuster
  2. 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/
  3. From: http://www.planarembedded.com/technology/touch/
  4. 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
  5. 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
  6. From: http://www.lukew.com/ff/entry.asp?1085
  7. http://img-android.lisisoft.com/img/3/0/3035-1-com.improot.android.tonedialer.jpg
  8. http://blog.hakia.com/wp-content/uploads/iceberg1.gif
  9. From:http://www.tipb.com/images/stories/2010/02/iphone_3gs_iphone_4.png
  10. 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
  11. 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
  12. http://developer.android.com/guide/practices/screens_support.htmlProvide different images resource and layouts for different device groups
  13. http://developer.android.com/resources/dashboard/screens.htmlAround 75% of Android devices are high (240) dpi. 2011 May 6
  14. http://nadzrul.com/media/2010/05/iphone_user.jpghttp://www.ipadshouse.com/wp-content/uploads/2010/12/couch-shot1-502x344.jpg
  15. From: http://bindapple.com/apple-iphone-applications/http://www.joystickdivision.com/appstore_ipad_20100225.jpg
  16. From: http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/
  17. http://fajkowski.com/blog/wp-content/uploads/2010/01/ipadPrototypeFront.jpg
  18. http://lineandpixel.com/blog/knobs-and-dials
  19. http://trentwalton.com/2010/07/05/non-hover/
  20. http://www.strangesystems.com/wp-content/uploads/2008/08/touch_phone.jpg
  21. http://fronttoback.org/wp-content/uploads/2008/03/haptickb.png
  22. http://dribbble.com/system/users/3782/screenshots/141750/slider_03.jpg?1304695747
  23. http://2.bp.blogspot.com/_mupm2BmIjtc/S6zudpJhG6I/AAAAAAAALBI/Vzz1fdW3yDc/s1600/hand+palm+thank+you.jpg