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

Adaptive Input — UXLX

Adaptive Input — UXLX

Slides from the presentation at UX Lisbon

Jason Grigsby

June 06, 2014
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. 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
  2. 640 px 600 px 519 px 640 px 622 px

    533 px 812 px Which are phones and which are tablets?
  3. 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
  4. 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
  5. And keyboard and mouse are what we envision work is.

    http://www.flickr.com/photos/royalsapien/2387707860
  6. = =

  7. We can no longer make assumptions about input based on

    screen size or form factor. And we probably never should have.
  8. Amazing, but too new to know what, if anything, this

    technology will mean for the web.
  9. 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
  10. 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
  11. 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/
  12. 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
  13. 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
  14. What about those who won’t let go of their “power”

    interfaces? http://www.flickr.com/photos/ecos/4092571213/
  15. 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
  16. 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
  17. 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
  18. The key benefit of this approach: You’re designing for user

    need not for a specific form factor or input.
  19. Graph from Chapter 1 of Adaptive Web Design by Aaron

    Gustafson http://easy-readers.net/books/ adaptive-web-design/
  20. 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
  21. Thank You! Special thanks to Flickr users for generously sharing

    their photos under creative commons license.