Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adapting to Input

Adapting to Input

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.

Jason Grigsby

June 14, 2016
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. = =

  2. 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
  3. 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
  4. 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/
  5. Mouse 1984 Mouse prototypes 1960s by Engelbart and Mallebrein. Xerox

    uses mouse in 70s, early 80s. Apple Macintosh popularizes mouse and GUI in 1984.
  6. 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.
  7. 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.
  8. 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.
  9. 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 ?
  10. 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
  11. = =

  12. 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
  13. 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/
  14. 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
  15. We can only detect input when it is used and

    that’s too late for our user interfaces.
  16. Fitts’s Law The time to acquire a target is a

    function of the distance to and size of the target.
  17. 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
  18. 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
  19. 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
  20. = =

  21. At minimum, don’t assume if one input is present that

    the person doesn’t have access to other types of input.
  22. 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/
  23. 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.
  24. <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/
  25. 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
  26. Learn how to let go of illusions that comfort us.

    http://www.flickr.com/photos/garibaldi/303085857/