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

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
    rich@kmp.co.uk
    

    View Slide