O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Adapting to Input
Jason Grigsby • @grigs • cloudfour.com
Web was created formless.
https://www.flickr.com/photos/chiaralily/3068047592
http://www.wired.co.uk/magazine/archive/
2014/03/web-at-25/tim-berners-lee
https://www.flickr.com/photos/inpivic/5206515374/
https://www.flickr.com/photos/tomokyo-blue/5812115264
http://www.flickr.com/photos/60415054@N00/14301113/
So we told ourselves
that the web was…
http://www.flickr.com/photos/60415054@N00/14301113/
640 px
480px
640 px
480px
800 px
600px
1024 px
768px
http://www.flickr.com/photos/adactio/6153481666/
Then mobile came and
made us realize…
that it was a consensual hallucination all along.
http://www.flickr.com/photos/garibaldi/303085857/
The web never had a fixed canvas.
http://www.flickr.com/photos/paulocarrillo/124755065/
https://www.flickr.com/photos/giuliatanini/7125944117/
http://www.flickr.com/photos/69797234@N06/7203485148/
We’ve made tremendous prog
But there is another consensual hallucination.
http://www.flickr.com/photos/garibaldi/303085857/
=
=
mobiledesktop
THE ART OF WEB DEVELOPMENTTHE ART OF WEB DEVELOPMENT
Web widgets
THE ART OF WEB DEVELOPMENTTHE ART OF WEB DE...
It’s not that we’re technically incapable, but adapting a
phone UI to a tablet UI is not so dissimilar from trying to
auto...
It’s fairly certain that the highest-value use
will stay predominantly on desktop… Most
complex tasks have vastly better u...
http://www.flickr.com/photos/royalsapien/2387707860
We envision desktop users as different from mobile.
http://demos.kendoui.com/web/grid/editing.html
http://www.flickr.com/photos/shantellmartin/4543010568
https://www.flickr.com/photos/keh-s/6020885164/
It’s time to break free
of our assumptions
about input.
Four truths
about input
#1
Input is exploding
An incomplete history
of computer input
Focus on broad adoption
Using Apple as a lens
Keyboard
1874
First typewriters in 1860s
Remington Typewriter 1874
Popularizes Qwerty keyboard
Qwerty patent granted 1878
Mouse
1984
Mouse prototypes 1960s by
Engelbart and Mallebrein.
Xerox uses mouse in 70s,
early 80s.
Apple Macintosh popular...
Many alternatives to the mouse are
created—trackballs, trackpads, and
joysticks to name a few—but all replace
the mouse an...
Scroll Wheel
1996
First scrolling mouse in 1985.
Scroll wheel on side.
Microsoft Intellimouse
popularizes scroll wheel in
...
Camera
2005 / 2006
Cameras are now included in
phones and computers.
Cameraphones sold in 2005
alone greater than all digi...
iPhone
2007
Multi-touch screen
Camera
Accelerometer
Proximity Sensor
Ambient Light Sensor
Macbook Air
January 2008
Multi-touch trackpad
Gestures in Mac OS
Controls more than cursor
iPhone 3G
2008
GPS (Location services)
iPhone 3GS
2009
Voice control
Magnetometer (Compass)
iPhone 4
2010
Gyroscope
Front facing camera
Magic Trackpad
2010
Multi-touch trackpad
Gestures in Mac OS
No longer limited to laptops
iPhone 4S
2011
Siri
Bluetooth LE
iPhone 5
2012
Nothing?
iPhone 5S
2013
Fingerprint Sensor
iPhone 6
2014
NFC (Apple Pay)
Barometer
iPhone 6S
2015
3D Touch
Same story could be told using Android or Microsoft.
19841874
142 years
1996
12 years
19841874 1996
1984 1996 2005
9 years 2 years
2007
1984 1996 2005 2007
2007
2007
Touch
Camera
Accelerometer
Proximity Sensor
Ambient Light Sensor
GPS
Trackpad
2008
Voice control
Magnetometer
2009 20...
Touch
3D Touch
Fingerprint sensor
Camera (video and image)
GPS (location)
Compass
Bluetooth LE
Audio (Siri)
Gyroscope
Acce...
Things aren’t slowing down.
https://www.flickr.com/photos/andreastsonis/8675283555
Siri gets all of the hype…
http://www.98ps.com/viewnews-15222.html
but both Microsoft and Google have
compelling voice input in their products.
How should web pages change to support voice control?
Google voice search
https://www.youtube.com/watch?v=kwn9Lh0E_vU
Remember Leap Motion?
https://www.youtube.com/watch?v=LJPxyWM9Ujg
https://www.youtube.com/watch?v=fiZkEYLXctE
#2
Input is a continuum
=
=
Supports hover and pointer events.
Keyboard and touch.
Even the iPhone can have a keyboard.
Are these laptops or tablets?
Desktop computer with 23” touch screen
Luke
Wroblewski
nailed it.
http://static.lukew.com/unified_device_design.png
We can no longer make
assumptions about input based on
screen size or form factor.
3. Input is undetectable
Higher precision with mouse
means smaller targets possible
Hover state
Less precise than mouse and
requires larger touch t...
I got this. Detect touch.http://www.flickr.com/photos/28096801@N05/5012309802
Whatever you may think, it currently isn't
possible to reliably detect whether or not
the current device has a touchscreen...
Chrome has
entertained
idea of
enabling
touch by
default.
https://code.google.com/p/chromium/issues/detail?id=159527
https...
Detect a mouse? Not reliably.
Surely we can detect a keyboard?
NOPE
https://www.flickr.com/photos/mediaflex/4628277817/
https://www.flickr.com/photos/
dentyone/2410917872/
Be thankful.
This saves us from ourselves.
Interactive touch laptop experiments
by Boris Smus
We can only detect input when
it is used and that’s too late for
our user interfaces.
4. Input is transient
Knowing what input is used
one moment tells you nothing
about what will be used next.
Input is
exploding
continuum
undetectable
transient
Overwhelmed?https://www.flickr.com/photos/cheo70/2702682262/
https://www.flickr.com/photos/evilerin/3723714381/
We just need to rewire our brains again.
Adapting to
input
#1
Design for the largest
target by default
Fitts’s Law
The time to acquire a target is a function of the
distance to and size of the target.
After poking at this problem for a few weeks, my
conclusion is: every desktop UI should be
designed for touch now. When an...
#2
Design for modes of interaction
instead of inputs
Display
density
settings
Th Dream Experience - …
Uploaded 2 years ago
More Of The Dream Exp…
Uploaded 2 years ago
The Dream Experience -…
Uploaded ...
Couch Mode+ See allCentric TV’s videos / Recently viewed / Related videos
Th Dream Experience - …
Uploaded 2 years ago
Mor...
Vimeo Couch Mode
You’re designing for user
need—not for a specific
form factor or input.
#3
Make things accessible
D-pad remote controls
http://www.flickr.com/photos/stewc/6669743035/
TVs browsers that
support d-pad, send
arrow key events.
If then
http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
is undetectable.
If then
http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
Support
http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
Building accessibly
increases the
likelihood of
support for future,
unknown inputs.
#4
Design for multiple
concurrent inputs
=
=
Interactive touch laptop experiments
by Boris Smus
At minimum, don’t assume if
one input is present that the
person doesn’t have access
to other types of input.
Look for opportunities to
combine input to create more
powerful experiences.
#5
Abstract baseline input
Mobile Tablet Desktop
Small Medium Large
TAP
https://www.flickr.com/photos/openexhibits/5884451755
CLICK
POINT
SELECT
Mouse events and touch events are fundamentally
different beasts in browsers today, and that makes it
hard to write cross-p...
http://ie.microsoft.com/testdrive/ieblog/2011/Sep/20_TouchInputforIE10andMetrostyleApps_1.png
http://www.w3.org/TR/pointer...
Shipped OpposedIn development
jQuery Pointer
Events Polyfill
https://github.com/jquery/PEP/
#6
Progressively enhance input
Opportunity is knocking!
We’re pretty
good at using
Geolocation.
Compass.js
http://ai.github.io/compass.js/
Warby Parker
Gyroscope
https://www.warbyparker.com/eyeglasses/women/simone/tea-rose-fade
Or hover
https://www.youtube.com/watch?v=7Yp0BpiDzXE
https://www.youtube.com/watch?v=Ow8gA0qe9SI
<input type="email" autocomplete="email" name="email">
<input type="text" autocomplete="cc-name" name="card-name">
<input ...
You can use speech recognition too.
http://www.google.com/intl/en/chrome/demos/speech.html
http://www.moreawesomeweb.com/d...
Special thanks to Eric Bidelman
http://moreawesomeweb.com
Speech Recognition API Support
https://www.youtube.com/watch?v=_BUwOBdLjzQ
Web Bluetooth
https://www.youtube.com/watch?v=FYxQ5TeVFdE
Physical Web
https://www.youtube.com/watch?v=6z9ED4fmi1w
Physical Web &

Web Bluetooth
#7
Make input part of test plans
Need to add input
to our device labs
http://blog.adtile.me/2014/01/08/adtile-device-lab/
https://www.flickr.com/photos/jeepersmedia/14692542501
https://www.flickr.com/photos/yuckymuffintech/6988362001
1. Design for the largest target by default
2. Design for modes of interaction instead of inputs
3. Make things accessible...
Input is
exploding
continuum
undetectable
transient
www.flickr.com/photos/brunauto/5062644167/
Learn from our
mobile context
mistakes.
Who are we to judge which input is better?
http://www.flickr.com/photos/fensterbme/4783366926
We need to learn to adapt.
http://www.flickr.com/photos/cdm/147947664/
Learn how to let go of illusions that comfort us.
http://www.flickr.com/photos/garibaldi/303085857/
Thank You!
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Próximos SlideShares
Carregando em…5
×

0

Compartilhar

Baixar para ler offline

Adapting to Input — Smashing Conference NYC

Baixar para ler offline

Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.

In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja a primeira pessoa a gostar disto

Adapting to Input — Smashing Conference NYC

  1. 1. Adapting to Input Jason Grigsby • @grigs • cloudfour.com
  2. 2. Web was created formless. https://www.flickr.com/photos/chiaralily/3068047592
  3. 3. http://www.wired.co.uk/magazine/archive/ 2014/03/web-at-25/tim-berners-lee
  4. 4. https://www.flickr.com/photos/inpivic/5206515374/
  5. 5. https://www.flickr.com/photos/tomokyo-blue/5812115264
  6. 6. http://www.flickr.com/photos/60415054@N00/14301113/ So we told ourselves that the web was…
  7. 7. http://www.flickr.com/photos/60415054@N00/14301113/ 640 px 480px
  8. 8. 640 px 480px
  9. 9. 800 px 600px
  10. 10. 1024 px 768px
  11. 11. http://www.flickr.com/photos/adactio/6153481666/ Then mobile came and made us realize…
  12. 12. that it was a consensual hallucination all along. http://www.flickr.com/photos/garibaldi/303085857/
  13. 13. The web never had a fixed canvas. http://www.flickr.com/photos/paulocarrillo/124755065/
  14. 14. https://www.flickr.com/photos/giuliatanini/7125944117/
  15. 15. http://www.flickr.com/photos/69797234@N06/7203485148/ We’ve made tremendous prog
  16. 16. But there is another consensual hallucination. http://www.flickr.com/photos/garibaldi/303085857/
  17. 17. = =
  18. 18. mobiledesktop THE ART OF WEB DEVELOPMENTTHE ART OF WEB DEVELOPMENT Web widgets THE ART OF WEB DEVELOPMENTTHE ART OF WEB DEVELOPMENT Mobile widgets
  19. 19. 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… —Todd Anglin, Kendo UI http://www.kendoui.com/blogs/teamblog/posts/12-09-11/universal_mobile_apps_with_html5_and_kendo_ui.aspx
  20. 20. It’s fairly certain that the highest-value use will stay predominantly on desktop… Most complex tasks have vastly better user experience on the desktop and thus will be performed there. —Jacob Nielsen https://www.nngroup.com/articles/transmedia-design-for-3-screens/
  21. 21. http://www.flickr.com/photos/royalsapien/2387707860
  22. 22. We envision desktop users as different from mobile. http://demos.kendoui.com/web/grid/editing.html
  23. 23. http://www.flickr.com/photos/shantellmartin/4543010568
  24. 24. https://www.flickr.com/photos/keh-s/6020885164/ It’s time to break free of our assumptions about input.
  25. 25. Four truths about input
  26. 26. #1 Input is exploding
  27. 27. An incomplete history of computer input
  28. 28. Focus on broad adoption Using Apple as a lens
  29. 29. Keyboard 1874 First typewriters in 1860s Remington Typewriter 1874 Popularizes Qwerty keyboard Qwerty patent granted 1878
  30. 30. Mouse 1984 Mouse prototypes 1960s by Engelbart and Mallebrein. Xerox uses mouse in 70s, early 80s. Apple Macintosh popularizes mouse and GUI in 1984.
  31. 31. Many alternatives to the mouse are created—trackballs, trackpads, and joysticks to name a few—but all replace the mouse and control the cursor. No change in behavior.
  32. 32. Scroll Wheel 1996 First scrolling mouse in 1985. Scroll wheel on side. Microsoft Intellimouse popularizes scroll wheel in 1996. Scroll wheel controls windows, not cursor.
  33. 33. Camera 2005 / 2006 Cameras are now included in phones and computers. Cameraphones sold in 2005 alone greater than all digital cameras sold to date. All Mac computers include cameras starting 2006.
  34. 34. iPhone 2007 Multi-touch screen Camera Accelerometer Proximity Sensor Ambient Light Sensor
  35. 35. Macbook Air January 2008 Multi-touch trackpad Gestures in Mac OS Controls more than cursor
  36. 36. iPhone 3G 2008 GPS (Location services)
  37. 37. iPhone 3GS 2009 Voice control Magnetometer (Compass)
  38. 38. iPhone 4 2010 Gyroscope Front facing camera
  39. 39. Magic Trackpad 2010 Multi-touch trackpad Gestures in Mac OS No longer limited to laptops
  40. 40. iPhone 4S 2011 Siri Bluetooth LE
  41. 41. iPhone 5 2012 Nothing?
  42. 42. iPhone 5S 2013 Fingerprint Sensor
  43. 43. iPhone 6 2014 NFC (Apple Pay) Barometer
  44. 44. iPhone 6S 2015 3D Touch
  45. 45. Same story could be told using Android or Microsoft.
  46. 46. 19841874 142 years 1996 12 years
  47. 47. 19841874 1996
  48. 48. 1984 1996 2005 9 years 2 years 2007
  49. 49. 1984 1996 2005 2007
  50. 50. 2007
  51. 51. 2007 Touch Camera Accelerometer Proximity Sensor Ambient Light Sensor GPS Trackpad 2008 Voice control Magnetometer 2009 2010 Gyroscope Front-facing Camera Magic Trackpad 2011 Siri Bluetooth LE 2012 2013 Fingerprint Sensor 2014 NFC (Apple Pay) 2015 3D Touch 2016 ?
  52. 52. Touch 3D Touch Fingerprint sensor Camera (video and image) GPS (location) Compass Bluetooth LE Audio (Siri) Gyroscope Accelerometer Barometer Proximity sensor Ambient light sensor NFC (Apple Pay) iBeacon
  53. 53. Things aren’t slowing down. https://www.flickr.com/photos/andreastsonis/8675283555
  54. 54. Siri gets all of the hype… http://www.98ps.com/viewnews-15222.html
  55. 55. but both Microsoft and Google have compelling voice input in their products.
  56. 56. How should web pages change to support voice control?
  57. 57. Google voice search
  58. 58. https://www.youtube.com/watch?v=kwn9Lh0E_vU
  59. 59. Remember Leap Motion?
  60. 60. https://www.youtube.com/watch?v=LJPxyWM9Ujg
  61. 61. https://www.youtube.com/watch?v=fiZkEYLXctE
  62. 62. #2 Input is a continuum
  63. 63. = =
  64. 64. Supports hover and pointer events.
  65. 65. Keyboard and touch.
  66. 66. Even the iPhone can have a keyboard.
  67. 67. Are these laptops or tablets?
  68. 68. Desktop computer with 23” touch screen
  69. 69. Luke Wroblewski nailed it. http://static.lukew.com/unified_device_design.png
  70. 70. We can no longer make assumptions about input based on screen size or form factor.
  71. 71. 3. Input is undetectable
  72. 72. 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
  73. 73. I got this. Detect touch.http://www.flickr.com/photos/28096801@N05/5012309802
  74. 74. 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 http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
  75. 75. 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
  76. 76. Detect a mouse? Not reliably.
  77. 77. Surely we can detect a keyboard? NOPE
  78. 78. https://www.flickr.com/photos/mediaflex/4628277817/
  79. 79. https://www.flickr.com/photos/ dentyone/2410917872/
  80. 80. Be thankful. This saves us from ourselves.
  81. 81. Interactive touch laptop experiments by Boris Smus
  82. 82. We can only detect input when it is used and that’s too late for our user interfaces.
  83. 83. 4. Input is transient
  84. 84. Knowing what input is used one moment tells you nothing about what will be used next.
  85. 85. Input is exploding continuum undetectable transient
  86. 86. Overwhelmed?https://www.flickr.com/photos/cheo70/2702682262/
  87. 87. https://www.flickr.com/photos/evilerin/3723714381/
  88. 88. We just need to rewire our brains again.
  89. 89. Adapting to input
  90. 90. #1 Design for the largest target by default
  91. 91. Fitts’s Law The time to acquire a target is a function of the distance to and size of the target.
  92. 92. 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
  93. 93. #2 Design for modes of interaction instead of inputs
  94. 94. Display density settings
  95. 95. 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
  96. 96. Couch Mode+ See allCentric 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 allCentric 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
  97. 97. Vimeo Couch Mode
  98. 98. You’re designing for user need—not for a specific form factor or input.
  99. 99. #3 Make things accessible
  100. 100. D-pad remote controls
  101. 101. http://www.flickr.com/photos/stewc/6669743035/ TVs browsers that support d-pad, send arrow key events.
  102. 102. If then http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
  103. 103. is undetectable.
  104. 104. If then http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
  105. 105. Support http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/
  106. 106. Building accessibly increases the likelihood of support for future, unknown inputs.
  107. 107. #4 Design for multiple concurrent inputs
  108. 108. = =
  109. 109. Interactive touch laptop experiments by Boris Smus
  110. 110. At minimum, don’t assume if one input is present that the person doesn’t have access to other types of input.
  111. 111. Look for opportunities to combine input to create more powerful experiences.
  112. 112. #5 Abstract baseline input
  113. 113. Mobile Tablet Desktop
  114. 114. Small Medium Large
  115. 115. TAP https://www.flickr.com/photos/openexhibits/5884451755
  116. 116. CLICK
  117. 117. POINT SELECT
  118. 118. Mouse events and touch events are fundamentally different beasts in browsers today, and that makes it hard to write cross-platform apps. These incompatibilities lead to applications having to listen to 2 sets of events, mouse on desktop and touch for mobile. https://github.com/jquery/PEP/
  119. 119. http://ie.microsoft.com/testdrive/ieblog/2011/Sep/20_TouchInputforIE10andMetrostyleApps_1.png http://www.w3.org/TR/pointerevents/ http://blog.webplatform.org/2013/02/pointing-toward-the-future/ New Pointer Events spec normalizes touch, mouse and stylus Pointer Events builds on the DOM event model to offer a new way to handle input on the web, enabling developers to build touch-first experiences that work with mouse, pen, and other pointing devices as well…They are also designed from the ground up to allow modern browsers to accelerate the touch-surface performance, leading to a smoother user experience.
  120. 120. Shipped OpposedIn development
  121. 121. jQuery Pointer Events Polyfill https://github.com/jquery/PEP/
  122. 122. #6 Progressively enhance input
  123. 123. Opportunity is knocking!
  124. 124. We’re pretty good at using Geolocation.
  125. 125. Compass.js http://ai.github.io/compass.js/
  126. 126. Warby Parker Gyroscope https://www.warbyparker.com/eyeglasses/women/simone/tea-rose-fade
  127. 127. Or hover
  128. 128. https://www.youtube.com/watch?v=7Yp0BpiDzXE
  129. 129. https://www.youtube.com/watch?v=Ow8gA0qe9SI
  130. 130. <input type="email" autocomplete="email" name="email"> <input type="text" autocomplete="cc-name" name="card-name"> <input type="text" autocomplete="cc-number" name="card-num"> <input type="text" autocomplete="cc-exp-month" name="card-exp-month"> <input type="text" autocomplete="cc-exp-year" name="card-exp-year"> <input type="text" autocomplete="cc-csc" name="card-csc"> Remember to support browser auto-fill and new Payment Request API http://www.html5rocks.com/en/tutorials/forms/requestautocomplete/
  131. 131. You can use speech recognition too. http://www.google.com/intl/en/chrome/demos/speech.html http://www.moreawesomeweb.com/demos/speech_translate.html
  132. 132. Special thanks to Eric Bidelman http://moreawesomeweb.com Speech Recognition API Support
  133. 133. https://www.youtube.com/watch?v=_BUwOBdLjzQ Web Bluetooth
  134. 134. https://www.youtube.com/watch?v=FYxQ5TeVFdE Physical Web
  135. 135. https://www.youtube.com/watch?v=6z9ED4fmi1w Physical Web &
 Web Bluetooth
  136. 136. #7 Make input part of test plans
  137. 137. Need to add input to our device labs http://blog.adtile.me/2014/01/08/adtile-device-lab/
  138. 138. https://www.flickr.com/photos/jeepersmedia/14692542501
  139. 139. https://www.flickr.com/photos/yuckymuffintech/6988362001
  140. 140. 1. Design for the largest target by default 2. Design for modes of interaction instead of inputs 3. Make things accessible 4. Design for multiple concurrent inputs 5. Abstract baseline input 6. Progressively enhance input 7. Make input part of test plans
  141. 141. Input is exploding continuum undetectable transient
  142. 142. www.flickr.com/photos/brunauto/5062644167/ Learn from our mobile context mistakes.
  143. 143. Who are we to judge which input is better? http://www.flickr.com/photos/fensterbme/4783366926
  144. 144. We need to learn to adapt. http://www.flickr.com/photos/cdm/147947664/
  145. 145. Learn how to let go of illusions that comfort us. http://www.flickr.com/photos/garibaldi/303085857/
  146. 146. Thank You!

Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers. In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.

Vistos

Vistos totais

793

No Slideshare

0

De incorporações

0

Número de incorporações

3

Ações

Baixados

38

Compartilhados

0

Comentários

0

Curtir

0

×