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

Combining context and HTML5 for a better user experience

Combining context and HTML5 for a better user experience

A talk from Camp Digital 2014 (http://campdigital.wearesigma.com) on how we can use HTML5 APIs to determine more about a users context and in turn provide a better user experience for them.

A video of this talk is also available at https://www.youtube.com/watch?v=YTt60-Jx9Q4&feature=youtu.be

richclark

March 27, 2014
Tweet

More Decks by richclark

Other Decks in Technology

Transcript

  1. COMBINING CONTEXT
    AND HTML5 FOR A BETTER
    USER EXPERIENCE
    Camp Digital 2014
    @rich_clark

    View Slide

  2. Who’ve we got?

    View Slide

  3. View Slide

  4. View Slide

  5. http://platform.html5.org

    View Slide

  6. https://www.mozilla.org/en-US/firefox/os/

    View Slide

  7. User on the go

    View Slide

  8. Mobile user
    •  Google research?

    View Slide

  9. Context

    View Slide

  10. Device

    View Slide

  11. View Slide

  12. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

    View Slide

  13. Our context(s) drives
    device choice
    “"

    View Slide

  14. Input/Output

    View Slide

  15. Responsive design

    View Slide

  16. http://www.columbian.com/news/2013/dec/30/fitness-bands-are-great-for-aspiring-health-nuts/

    View Slide

  17. http://www.flickr.com/photos/nest/6264860247/

    View Slide

  18. APIs

    View Slide

  19. http://shinydemos.com/photo-booth/

    View Slide

  20. http://webdesign.maratz.com/lab/responsivetypography/simple/

    View Slide

  21. http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia

    View Slide

  22. View Slide

  23. Orientation
    Camera &
    Microphone
    Web
    Storage
    Vibration File API

    View Slide

  24. Location

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. Geolocation

    View Slide

  31. Time

    View Slide

  32. View Slide

  33. http://www.bbc.co.uk/blogs/internet/posts/digital_olympics_reach_stream_stats

    View Slide

  34. View Slide

  35. •  Anticipatory shipping
    http://www.flickr.com/photos/fugutabetai/3244225116/

    View Slide

  36. Notifications Alarm Time/Clock

    View Slide

  37. Environment

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. Ambient
    light
    Proximty Network
    Battery
    AppCache/
    Offline

    View Slide

  42. Multiple Devices

    View Slide

  43. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

    View Slide

  44. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

    View Slide

  45. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

    View Slide

  46. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

    View Slide

  47. Device Location Time
    Environment Multiscreen

    View Slide

  48. Reading - Context
    •  http://www.cennydd.co.uk/2013/designing-with-context
    •  http://uxmag.com/articles/designing-for-context-the-
    multiscreen-ecosystem
    •  http://alistapart.com/article/environmental-design-with-
    the-device-api (Read comments too as parts of the article
    are incorrect).
    •  http://www.creativebloq.com/web-design/beyond-
    responsive-design-discover-context-driven-design-8134226
    •  http://www.fastcolabs.com/3016702/why-the-next-big-
    thing-in-computing-is-conversation

    View Slide

  49. Reading – APIs –
    Google is your friend here though
    •  https://hacks.mozilla.org/2011/08/introducing-webapi/
    •  https://wiki.mozilla.org/WebAPI
    •  https://developer.mozilla.org/en-US/docs/WebAPI
    •  http://www.w3.org/2009/dap/
    •  https://hacks.mozilla.org/2012/01/mozilla-joins-the-w3c-dap-webapi-progress/
    •  https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent
    •  http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ (We didn’t talk about
    this one!)
    •  https://hacks.mozilla.org/2013/04/ambient-light-events-and-javascript-detection/
    •  http://www.slideshare.net/jamesgpearce/mobile-device-apis
    •  https://hacks.mozilla.org/2013/06/the-proximity-api/
    •  http://html5doctor.com/finding-your-position-with-geolocation/
    •  http://www.html5rocks.com/en/tutorials/webperformance/usertiming/

    View Slide

  50. Thanks!
    @rich_clark
    [email protected]

    View Slide