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.

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/
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
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
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