Adaptive Input — Refresh PDX

Dac45089aeda3bca56193072601a49d4?s=47 Jason Grigsby
November 19, 2014

Adaptive Input — Refresh PDX

Presented at Refresh PDX on November 19, 2014

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

November 19, 2014
Tweet

Transcript

  1. Adaptive Input Jason Grigsby • @grigs • cloudfour.com http://bit.ly/grigs-refreshpdx

  2. We’re hiring!

  3. Follow along at @grigs_talks http://bit.ly/grigs-refreshpdx

  4. http://www.flickr.com/photos/cdm/51747860/

  5. http://www.flickr.com/photos/rheaney/4397863376 It started with TVs.

  6. Designing for a 10-foot UI is very different. http://www.flickr.com/photos/chrisbartow/5835428673

  7. Larger text and fewer words.

  8. Make up, down, left, right directions clear. http://images.dailytech.com/nimage/29122_large_amazon_prime_screen_5.jpg

  9. How do we know what is a TV?

  10. This is HDTV.

  11. This is HDTV. 1980 px 1080 px

  12. Resolution does not define the optimal experience.

  13. Next came responsive web apps. https://twitter.com/freediverx/status/354698695041744896

  14. Responsive design for apps is inevitable. http://blog.cloudfour.com/responsive-design-for-apps-part-1/

  15. Lines between device classes are blurring Model Type Size Size

    Display Resolution Resolution Viewport Viewport W H W H W H Samsung Galaxy Note 2 Phone 3.17” 5.95” 5.5” 720 1280 360 640 Motorola RAZR HD Phone 2.67” 5.19” 4.7” 720 1280 360 519 Motorola Atrix HD Phone 2.75” 5.26” 4.5” 720 1280 540 812 HTC Droid DNA Phone 2.78” 5.5” 5” 1080 1920 360 640 Nexus 7 Tablet 4.72” 7.81” 7” 800 1280 600 793 Kindle Fire Tablet 4.72” 7.44” 7” 600 1024 600 819 Kindle Fire HD Tablet 5.4” 7.6” 7” 800 1280 533 731
  16. 640 px 600 px 519 px 640 px 622 px

    533 px 812 px Which are phones and which are tablets?
  17. x 480 320 x 568 320 x 667 375 x

    736 414 x 768 1024 Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  18. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  19. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  20. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  21. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  22. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  23. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  24. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  25. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  26. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  27. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  28. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  29. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  30. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  31. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  32. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  33. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  34. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  35. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  36. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  37. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  38. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  39. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. The Magic 32 pixels iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  40. https://twitter.com/_munter_/status/511770590123143168

  41. http://www.flickr.com/photos/geatchy/8489505999

  42. How do I make this responsive? How do I make

    this responsive?
  43. None
  44. mobile desktop THE ART OF WEB DEVELOPMENT THE ART OF

    WEB DEVELOPMENT Web widgets THE ART OF WEB DEVELOPMENT THE ART OF WEB DEVELOPMENT Mobile widgets
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. It’s not that we’re technically incapable, but adapting a phone

    UI to a tablet UI is not so dissimilar from trying to automatically adapt desktop UI to a phone. They are fundamentally different platforms with different usability considerations, and something that makes sense on phones may or may not belong on tablets. —Todd Anglin, Kendo UI http://www.kendoui.com/blogs/teamblog/posts/12-09-11/universal_mobile_apps_with_html5_and_kendo_ui.aspx
  52. Sometimes it’s hard to envision a responsive version. http://demos.kendoui.com/web/grid/editing.html

  53. http://www.flickr.com/photos/jesuspresley/384080245/ We want people to be productive…

  54. and stay in the zone. http://www.flickr.com/photos/raccatography/8038855203

  55. http://www.flickr.com/photos/shantellmartin/4543010568 Which seems very different from playing on an iPad.

  56. For both the TV…

  57. and the desktop web app…

  58. input matters much more than screen size.

  59. The grid is important to support d-pad interaction. http://images.dailytech.com/nimage/29122_large_amazon_prime_screen_5.jpg

  60. http://www.flickr.com/photos/royalsapien/2387707860

  61. And keyboard and mouse are what we envision work is.

    http://www.flickr.com/photos/royalsapien/2387707860
  62. http://www.flickr.com/photos/hellogeri/6154034099/ A few years ago, Jeremy talked about how…

  63. http://www.flickr.com/photos/60415054@N00/14301113/ we told ourselves that the web was…

  64. http://www.flickr.com/photos/60415054@N00/14301113/

  65. http://www.flickr.com/photos/60415054@N00/14301113/ 640 px 480 px

  66. 640 px 480 px

  67. None
  68. None
  69. None
  70. None
  71. 1024 px 768 px

  72. http://www.flickr.com/photos/adactio/6153481666/

  73. http://www.flickr.com/photos/adactio/6153481666/ Then mobile came and made us realize…

  74. that it was a consensual hallucination all along. http://www.flickr.com/photos/garibaldi/303085857/

  75. The web never had a fixed canvas. http://www.flickr.com/photos/paulocarrillo/124755065/

  76. Even our tools perpetuate the lie.

  77. http://www.flickr.com/photos/69797234@N06/7203485148/ We’ve made tremendous progress.

  78. But there is another consensual hallucination. http://www.flickr.com/photos/garibaldi/303085857/

  79. None
  80. = =

  81. None
  82. Supports hover and pointer events.

  83. None
  84. None
  85. Keyboard and touch.

  86. None
  87. None
  88. Even the iPhone can have a keyboard.

  89. None
  90. None
  91. Are these laptops or tablets?

  92. None
  93. None
  94. Desktop computer with 23” touch screen

  95. None
  96. Luke nailed it. http://static.lukew.com/unified_device_design.png

  97. None
  98. We can no longer make assumptions about input based on

    screen size or form factor. And we probably never should have.
  99. http://www.flickr.com/photos/cblue98/7254221968

  100. Input represents a bigger challenge than screen size. http://www.flickr.com/photos/cblue98/7254221968

  101. http://www.flickr.com/photos/taedc/9278192929

  102. And it is changing more rapidly than ever before. http://www.flickr.com/photos/taedc/9278192929

  103. So let’s take a closer look…

  104. Let’s start with futuristic input. http://www.flickr.com/photos/jdhancock/3714748769/

  105. http://uncyclopedia.wikia.com/wiki/ File:Man_yelling_at_computer.JPG VOICE

  106. http://uncyclopedia.wikia.com/wiki/ File:Man_yelling_at_computer.JPG VOICE

  107. http://www.98ps.com/viewnews-15222.html

  108. Siri gets all of the hype… http://www.98ps.com/viewnews-15222.html

  109. but both Microsoft and Google have compelling voice input in

    their products.
  110. None
  111. None
  112. None
  113. How should web pages change to support voice control?

  114. None
  115. None
  116. Google voice search

  117. You can use speech recognition too. http://www.google.com/intl/en/chrome/demos/speech.html http://www.moreawesomeweb.com/demos/speech_translate.html

  118. Web Speech API Specification 19 October 2012 Editors: Glen Shires,

    Google Inc. Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups.
  119. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  120. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  121. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  122. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events
  123. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events
  124. Special thanks to Eric Bidelman http://moreawesomeweb.com Speech Recognition API Support

  125. None
  126. Gestures?

  127. http://leapmotion.com

  128. https://www.kickstarter.com/projects/1761670738/ring-shortcut-everything

  129. https://www.kickstarter.com/projects/1761670738/ring-shortcut-everything

  130. https://vine.co/v/MIjTE3ZDxa3

  131. None
  132. Amazing, but too new to know what, if anything, this

    technology will mean for the web.
  133. Let’s come back from the future and look at something

    much Dumber. Dumber
  134. Dumber

  135. Dumber

  136. -pad remote controls D

  137. -pad remote controls D

  138. -pad remote controls D

  139. http://www.flickr.com/photos/stewc/6669743035/

  140. http://www.flickr.com/photos/stewc/6669743035/ TVs browsers that support d-pad, send arrow key events.

  141. http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/

  142. If then http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/

  143. None
  144. is undetectable. This is a recurring theme for input.

  145. Sensors and camera http://www.flickr.com/photos/retrocactus/2170677056

  146. Sensors and camera Camera http://www.flickr.com/photos/retrocactus/2170677056

  147. GPS http://www.flickr.com/photos/3dking/149450434

  148. GPS GeoLocation http://www.flickr.com/photos/3dking/149450434

  149. None
  150. Gyroscope & Accelerometer

  151. http://www.flickr.com/photos/chrisjagers/4694134078

  152. Back to today’s problems. http://www.flickr.com/photos/chrisjagers/4694134078

  153. None
  154. Hover state No hover state

  155. Hover state Typing easier for many No hover state Typing

    often more difficult
  156. Higher precision with mouse means smaller targets possible Hover state

    Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difficult
  157. Higher precision with mouse means smaller targets possible Hover state

    Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difficult Right clicking and “power” tools Single and multi-touch gestures
  158. None
  159. None
  160. http://www.flickr.com/photos/28096801@N05/5012309802

  161. I got this. Detect touch. http://www.flickr.com/photos/28096801@N05/5012309802

  162. None
  163. Whatever you may think, it currently isn't possible to reliably

    detect whether or not the current device has a touchscreen, from within the browser. —Stu Cox, You Can’t Reliably Detect a Touch Screen http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
  164. Chrome has entertained idea of enabling touch by default. https://code.google.com/p/chromium/issues/detail?id=159527

    https://docs.google.com/a/cloudfour.com/presentation/d/1-n1qyzewpagREbzW2zm0wOalq33UhbtbSkWf9mEdly8/ edit#slide=id.gc2d80e5b_171
  165. None
  166. Detect a mouse? Not reliably.

  167. None
  168. None
  169. Surely we can detect a keyboard?

  170. Surely we can detect a keyboard? NOPE

  171. None
  172. Input is dynamic.

  173. Input is dynamic.

  174. Boris Smus’s experiments responding to input. http://smus.com/touch-laptop-experiments/

  175. Boris Smus’s experiments responding to input. http://smus.com/touch-laptop-experiments/

  176. http://www.flickr.com/photos/lyza/7382235106 Maybe we need to be more zen about input.

  177. None
  178. After poking at this problem for a few weeks, my

    conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do. —Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml
  179. None
  180. What about those who won’t let go of their “power”

    interfaces? http://www.flickr.com/photos/ecos/4092571213/
  181. http://www.flickr.com/photos/scarygami/5689980135/ One option: give them a choice.

  182. None
  183. Gmail display density settings

  184. None
  185. None
  186. Th Dream Experience - … Uploaded 2 years ago More

    Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  187. Couch Mode + See all Centric TV’s videos / Recently

    viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  188. Couch Mode + See all Centric TV’s videos / Recently

    viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Couch Mode + See all Centric TV’s videos / Recently viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  189. Vimeo Couch Mode

  190. None
  191. The key benefit of this approach: You’re designing for user

    need not for a specific form factor or input.
  192. http://www.flickr.com/photos/raver_mikey/504815463

  193. None
  194. Progressive Input?

  195. Graph from Chapter 1 of Adaptive Web Design by Aaron

    Gustafson http://easy-readers.net/books/ adaptive-web-design/
  196. Graph from Chapter 1 of Adaptive Web Design by Aaron

    Gustafson http://easy-readers.net/books/ adaptive-web-design/ Progressive enhancement contains a value judgment
  197. Who are we to judge what input is better? http://www.flickr.com/photos/fensterbme/4783366926

  198. We need to adapt and respond. http://www.flickr.com/photos/cdm/147947664/

  199. Learn how to let go of the illusions that comfort

    us. http://www.flickr.com/photos/garibaldi/303085857/
  200. None
  201. None
  202. None
  203. This is the web as it should be. As it

    wants to be. The web in its natural state. http://www.flickr.com/photos/25062265@N06/6069101123
  204. It is what our users expect. http://www.flickr.com/photos/johanl/ 6798184016

  205. None
  206. http://www.flickr.com/photos/wwworks/138495

  207. Thank You! SLIDES: http://bit.ly/grigs-refreshpdx Special thanks to Flickr users for

    generously sharing their photos under creative commons license.