Context Aware Front-End (Matt Carver)

C O N T E X T A W A R E F R O N T - E N D W E B D E S I G NMatthew Carver Technology Director

A B O U T M E 👦C O N T E X T A W A R E F R O N T - E N D W E B D E S I G N

2C O N T E X T A W A R E F R O N T - E N D W E B D E S I G N | J U N E 2 0 1 5

•Born in Boston

•Settled in Texas

•Live in New York City

•Technology Director at Code and Theory

A B O U T C O D E A N D T H E O R YC O N T E X T A W A R E F R O N T - E N D W E B D E S I G N


•Brand and product

•Formally we’re technology agnostic

•Clients include the LA Times, Motel 6, Huffington Post, WWE

•We’re hiring in New York and San Fransisco

T H E R E S P O N S I V E W E BC O N T E X T A W A R E F R O N T - E N D W E B D E S I G N


M O R E T H A N T H E S C R E E NResponsive web design introduced the concept that the web should embrace it’s versatility.


P R O L O G U E

D E S I G N I S A L O A D E D W O R DM O R E T H A N T H E S C R E E N


The history of design is planning. Through thoughtfulness a designer comes up with a plan, and the plan is then subject to criticism. That criticism leads to refinements, and then the plan is acted upon.

Design starts with a concept, a sketch or just a description of something that ought to be.

F R O M S K E T C H …


M O R E T H A N T H E S C R E E N

Design starts at idea

F R O M S K E T C H …


M O R E T H A N T H E S C R E E N

Web design also finds it’s way into environments, but the environments are in constant growth.

A L L S C R E E N S C R E A T E D E Q U A LM O R E T H A N A S C R E E N


We didn’t discover this. So long as there’s stories to be told, they will be told across formats and storytellers will use technology to provide a richer and more rewarding story.

N O T H I N G N E WM O R E T H A N A S C R E E N

1 0C O N T E X T A W A R E F R O N T - E N D W E B D E S I G N | J U N E 2 0 1 5

Responsive design has affirmed that it should

C A N C O N T E X T E F F E C T D E S I G N ?M O R E T H A N A S C R E E N


Beyond the viewport width and height there’s a wealth of data available to enrich the stories we tell and the tools we build.

F O R E V E R Y S C R E E N , T H E R E ’ S A D E P T HM O R E T H A N A S C R E E N


Mobile first is no longer a best practice with design, it’s how most users experience your site.

M O B I L E F I R S T 📱


M O R E T H A N A S C R E E N

T H E M O B I L E C O N T E X T I S C H A N G I N G


M O R E T H A N A S C R E E N

C O N T E X T U A L A W A R E N E S S


Appropriating user context based on any JavaScript accessible data point in order to deduce a users assumed context. Essentially its a theory that if you can assume what a user is doing you can alter a design to meet the users immediate needs and use all available user data to circumvent frivolous UI or build more intelligent design systems based on a users physical surrounding

W H A T I S C O N T E X T U A L A W A R E N E S SC O N T E X T U A L A W A R E N E S S


Context is the environment the data is presented into. Sensors are how we discover this content.

C O N T E X T + S E N S O R S = 👍



• User • Environment • Task • Technology

T H E F O U R C O N T E X T SC O N T E X T U A L A W A R E N E S S


We apply context based on the user’s technology already with responsive design.

Y O U A L R E A D Y U S E O N E



• JavaScript • Media Queries • User Feedback

S E N S O R SC O N T E X T U A L A W A R E N E S S



A media query is essentially a kind of sensor.

T H I S I S A L S O F A M I L I A R



@media(SENSOR){/* context */}

E X A M P L E 1 : U S E R

2 3

E X A M P L E

C O N T E X T A W A R E F R O N T - E N D W E B D E S I G N | J U N E 2 0 1 5

T H E S T O R Y O F T H E P E R S I S T E N T V I D E O


E X A M P L E 1 : ⚡ ️

B A T T E R Y S T A T U S A P I


navigator.getBattery()

C O N T E X T + S E N S O R = R E S P O N S E


• Context - Battery • Sensor - Data from BatteryManager • Response - Turn off video

E X A M P L E 1 : ⚡ ️

B A T T E R Y S T A T U S A P I


navigator.getBattery().then(function(battery) {

if(battery.charging){ // do stuff }}

B A T T E R Y M A N A G E R


E X A M P L E 1 : ⚡ ️

Properties • Charging - Boolean • Charging Time - How long until the battery is charged • Level - Charge lever (from 0.0 to 0.1)

Events • onChargingChange • onChargingTimeChange • onLevelChange

The point at which the layout changes

R E S P O N S I V E B R E A K P O I N T S



S M A L L

Screen Sizing: -640px Interface: Touch Events Bandwidth: 3G/LTE

M E D I U M

Screen Sizing: 640px - 1240px Interface: Touch + Click Events Bandwidth: Wifi

L A R G E

Screen Sizing: +1240px Interface: Touch + Click Events Bandwidth: Wifi

The point at which the context changes

C O N T E X T U A L B R E A K P O I N T S



C H A R G I N G

Context: Battery Sensor: Charging Response: Play video

N O T C H A R G I N G

Context: Battery Sensor: not charging Response: Pause video

L O W B A T T E R Y

Context: Battery Sensor: >10% Response: Alert user

What to drink

C O N T E X T U A L B R E A K P O I N T S



M O R N I N G

Context: Time Sensor: 4am - 11am Response: Drink Coffee

N O O N

Context: Time Sensor: 11am - 6pm Response: Drink Tea

N I G H T

Context: Time Sensor: 6pm - 4am Response: Drink Booze

E X A M P L E 2 : E N V I R O N M E N T

3 2

E X A M P L E


W H A T T O D R I N K ?


E X A M P L E 2 :🍻

D A T E


function getTime(){ var x = new Date(); x = x.getHours() return x }

C O N T E X T + S E N S O R = R E S P O N S E


• Context - Time • Sensor - getHours • Response - Show different banner

E X A M P L E 2 :🍻

D A T E


var timeOfDay = { morning: function(){ var x = getTime(); return !!(x > 4 && x < 12); }, afternoon: function(){ var x = getTime(); return !!(x >= 12 && x < 18); }, evening: function(){ var x = getTime(); return !!(x >= 18 && x < 24 || x > 0 && x <= 4); }};

D A T E


if(timeOfDay.evening()){ console.log("Drink up!");}else{ console.log("hold tight");}

D A T E


for(var x in timeOfDay){ if(timeOfDay[x]()){ var html = document.documentElement; html.className += "is-" + x; }; }

D A T E


.is-evening #mainImage{ /* great design! */}

I R R E S P O N S I B L E A D U L T


E X A M P L E 2 :🍻

E X A M P L E 2 . 1


Detect the user’s light level’s using light levels

E X A M P L E 2 :🍻

B R I G H T L I G H T !


D A R K R O O M

Context: Light Level Sensor: <10 lux Response: Dark scheme

B R I G H T R O O M

Context: Light Level Sensor: >10lux && <90lux Response: Light Scheme

O U T S I D E

Context: Light Level Sensor: >90lux Response: Drink Booze

E X A M P L E 2 :🍻

L I G H T L E V E L S


window.addEventListener('devicelight', function(event) { var html = document.getElementsByTagName('html')[0];

if (event.value < 50) { html.classList.add('darklight'); html.classList.remove('brightlight'); } else { html.classList.add('brightlight'); html.classList.remove('darklight'); }});

C O N T E X T E S T A B L I S H E D O V E R T I M E



Sometimes the user tells you what they want.

U S E R S S E L F I D E N T I F Y



Observing what a user tells you about themselves can be just as important as what you can find out on your own.

E X A M P L E 3 : T A S K

46

E X A M P L E


W H A T T O W E A R ?


E X A M P L E 3 : 👫

L O C A L S T O R A G E


var woman = document.getElementById("woman")

var womanCount = localStorage.getItem('woman')

woman.addEventListener('click', function(){ localStorage.setItem('woman', womanCount++)});

if(womanCount === null){ localStorage.setItem('woman', 0)}else if(womanCount > 100){ alert('youre probably a woman');}

L O C A L S T O R A G E


localStorage.getItem(key)

localStorage.setItem(key, value)

I N S P E C T O R


E X A M P L E 3 : 👫

A D A P T I V E U I


By tracking a user’s usage you can start adapt the interface to that user’s habits.

E X A M P L E 3 : 👫

Some contexts aren’t as blank and white.

T H E S L I D I N G S C A L E



E X A M P L E 4 : T E C H N O L O G YEnough with the responsive stuff already.

5 3

E X A M P L E


H A R D W A R E … C O N T E X T … Y A D A


E X A M P L E 4 : E N O U G H W I T H T H E R E S P O N S I V E S T U F F A L R E A D Y .

This is where it’s easy to checkout entirely. Once mobile tablet and desktop devices are accounted for, you’e done, right?

L E V E L 4 M E D I A Q U E R I E S



• scan - How does the screen refresh? • update-frequency - How often does the screen refresh? • pointer - The detail of the pointing device’s target area. • customMedia - Scriptable media queries.

U R I B E A C O N



As part of Google’s physical web program, UriBeacon is a low energy bluetooth advertisement beacon program.

U R I B E A C O N



U R I B E A C O N



T H E W O R L D O F D A T AThe web exists to map, quantify, express, and reference the data of the physical world, but the digital world needs a bridge.


E P I L O G U E

If we can be better and add value to our users, it’s our responsibility to do so.

W H E R E W E A R E


E P I L O G U E

Google has begun suggesting that URLs, not Apps are the future of “The Internet of Things”

T H E P H Y S I C A L W E BE P I L O G U E


W E A V E / B R I L L 0E P I L O G U E


Devices and software is more personal than ever before. Our hardware is expected to learn about us and our software is expected to manifest that information.

C O N T E X T I S T H E S T A N D A R D


E P I L O G U E

By inferring context from a user we can save page views and our applications can cut bandwidth costs by putting users where they want to be sooner.

B A N D W I D T H = 💰


E P I L O G U E

C O N T E X T A W A R E F R O N T - E N D W E B D E S I G N




By inferring context from the user, users can use less screens by getting the data they want when they want it.

D E S T R O Y A L L S C R E E N S


E P I L O G U E

F O O T N O T E SShaping Web Usability - Albert N. Badre Battery API - https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager Date API - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date Light events - https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent/Using_light_events The Physical Web - https://github.com/google/physical-web

68



https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent/Using_light_events

https://github.com/google/physical-web


THANKS

@matthew_carver