Save 37% off PRO during our Black Friday Sale! »

From Responsive to Reactive: Harnessing Context on the Web

D0255d4b7110cd38b2376d50d228432d?s=47 tomprior
January 24, 2013

From Responsive to Reactive: Harnessing Context on the Web

Responsive design allows us to tailor websites based on device dimensions and browser capabilities.

But what other information could we use to customise interactions on the web?

This talk will explore how contextual data about users could help us deliver more relevant online experiences.

D0255d4b7110cd38b2376d50d228432d?s=128

tomprior

January 24, 2013
Tweet

Transcript

  1. responsive REACTIVE From To Thomas Prior, 24 January 2013 Harnessing

    context on the web Photo attribution: http://www.flickr.com/photos/pahudson/5860587073 Photo attribution: http://www.flickr.com/photos/r_id/3575391547
  2. DESIGNER/DEV Photo attribution: http://www.flickr.com/photos/ytwhitelight/123461580

  3. RWD? Photo attribution: http://www.flickr.com/photos/chasingdaisy/5843303770/

  4. None
  5. FLUID GRID FLEXIBLE MEDIA CSS3 MEDIA QUERIES Photo attribution: http://www.flickr.com/photos/gabrielamadeus/5830650494

  6. "It's not called responsive anymore, it's called web design" @McElaney

    (Brian McElaney)
  7. SENSORS Things that sense the environment SYSTEMS Process the information

    ACTUATORS Activate a change of state http://www.markboulton.co.uk/journal/a-responsive-experience
  8. “Until recently, advertisers have understood one thing better than web

    and app designers: context.” Joe Johnston - .NET magazine issue 236 Photo attribution: http://www.flickr.com/photos/lergik/4262301072/
  9. REACTIVE WEB DESIGN http://24ways.org/2012/should-we-be-reactive/ Photo attribution: http://www.flickr.com/photos/highersights/6231641551

  10. contextual interfaces Photo attribution: http://www.flickr.com/photos/roll_initiative/3305000778 http://www.netmagazine.com/opinions/reactive-web-design

  11. CONTEXT? Physical Location Time of Day Temperature Ambient Noise Air

    Pressure More? Photo attribution: http://www.flickr.com/photos/chorazin/4477619057
  12. Pocket Size, Sensor Rich Photo attribution: http://www.flickr.com/photos/intelfreepress/7791649188/

  13. Tip your developer: Device API’s http://www.w3.org/2009/dap/

  14. SOCIAL SENSORS?

  15. DIGITAL CONTEXT HUMAN TECHNICAL Fjord’s ‘Working Definition of Context’ http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

    Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  16. DIGITAL CONTEXT HUMAN TECHNICAL Movement People Nearby Time of Day

    Weather Social Network Calendar Schedule Usage Patterns Preferences Device Location Fjord’s ‘Working Definition of Context’ http://cdx.dexigner.com/article/21960/Design_for_Context.pdf Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  17. DIGITAL CONTEXT HUMAN TECHNICAL Desires Nuances of Behaviour Group Dynamics

    Goals Etiquette Meaning of Relationships Likes and Dislikes Mood Movement People Nearby Time of Day Weather Social Network Calendar Schedule Usage Patterns Preferences Device Location Fjord’s ‘Working Definition of Context’ http://cdx.dexigner.com/article/21960/Design_for_Context.pdf Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  18. ‘Context Bloody Context’ Cennydd Bowles http://vimeo.com/47548905 Photo attribution: http://www.flickr.com/photos/rthakrar/4608756938 Device

    Environment Time Activity Individual Location Social
  19. None
  20. None
  21. “a system can detect who is standing next to you,

    but it needs to understand in order to know what that person means to you.” http://cdx.dexigner.com/article/21960/Design_for_Context.pdf
  22. None
  23. SWEET SPOTS Photo attribution: http://www.flickr.com/photos/joanet/5772686658/

  24. Contextual Storytelling

  25. "It was a simple story...that ended with the man writing

    his son's name in wet concrete. As I read the story, I looked down, and there it was...a name in the sidewalk I'd often passed but never noticed.” http://theweek.com/article/index/234165/the-silent-history-the-strange-new-e-book-that-makes-you-travel-to-read-it Photo attribution: http://www.flickr.com/photos/29245046@N03/3782444513
  26. hello context, hello... Photo attribution: http://www.flickr.com/photos/afiler/226337451/

  27. Context != intent http://mark-kirby.co.uk/2011/the-mobile-context/

  28. CONTEXTUAL ENQUIRY Photo attribution: http://www.flickr.com/photos/yourdon/3754271881/

  29. DIARY STUDY Photo attribution: http://www.flickr.com/photos/bdorfman/15846725

  30. Uncomfortable comedy: ‘Internet Users Demand Less Interactivity’ http://www.theonion.com/articles/internet-users-demand-less-interactivity,30920/ Photo attribution:

    http://www.flickr.com/photos/drb62/1842820851/
  31. START THINKING/DESIGNING/HACKING The data is on its way CAREFUL WITH

    ASSUMPTIONS Qualify your context-led hunches DON’T BE RUDE Respect privacy and settings while finding the sweet spot PROGRESSIVELY ENHANCE Your baseline experience should not suffer
  32. Thank you @tomprior www.thomasprior.co.uk www.thebestisyettocome.co.uk www.klektd.com