Context Aware Front-End (Matt Carver)
-
Upload
future-insights -
Category
Technology
-
view
239 -
download
1
Transcript of Context Aware Front-End (Matt Carver)
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
3C 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
•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
4C 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
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.
5C 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
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
6C 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
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 …
7C 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
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 …
8C 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
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
9C 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
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
1 1C 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
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
1 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
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 📱
1 3C 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
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
1 4C 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
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
1 5C 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
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
1 6C 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
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 = đź‘Ť
1 7C 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
C O N T E X T U A L A W A R E N E S 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
1 8C 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
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
1 9C 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
C O N T E X T U A L A W A R E N E S S
• 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
20C 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
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
2 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
C O N T E X T U A L A W A R E N E S S
@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
24C 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
E X A M P L E 1 : ⚡ ️
B A T T E R Y S T A T U S A P I
2 5C 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
navigator.getBattery()
C O N T E X T + S E N S O R = R E S P O N S E
26C 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
• 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
2 7C 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
navigator.getBattery().then(function(battery) {
if(battery.charging){ // do stuff }}
B A T T E R Y M A N A G E R
28C 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
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
29C 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
C O N T E X T U A L A W A R E N E S 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
30C 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
C O N T E X T U A L A W A R E N E S 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
3 1C 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
C O N T E X T U A L A W A R E N E S 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
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
W H A T T O D R I N K ?
3 3C 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
E X A M P L E 2 :🍻
D A T E
34C 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
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
3 5C 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
• Context - Time • Sensor - getHours • Response - Show different banner
E X A M P L E 2 :🍻
D A T E
36C 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
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
3 7C 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
if(timeOfDay.evening()){ console.log("Drink up!");}else{ console.log("hold tight");}
D A T E
38C 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
for(var x in timeOfDay){ if(timeOfDay[x]()){ var html = document.documentElement; html.className += "is-" + x; }; }
D A T E
39C 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
.is-evening #mainImage{ /* great design! */}
I R R E S P O N S I B L E A D U L T
40C 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
E X A M P L E 2 :🍻
E X A M P L E 2 . 1
4 1C 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
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 !
42C 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
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
43C 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
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
44C 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
C O N T E X T U A L A W A R E N E S S
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
45C 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
C O N T E X T U A L A W A R E N E S S
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
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
W H A T T O W E A R ?
47C 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
E X A M P L E 3 : đź‘«
L O C A L S T O R A G E
48C 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
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
49C 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
localStorage.getItem(key)
localStorage.setItem(key, value)
I N S P E C T O R
50C 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
E X A M P L E 3 : đź‘«
A D A P T I V E U I
5 1C 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
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
5 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
C O N T E X T U A L A W A R E N E S S
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
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
H A R D W A R E … C O N T E X T … Y A D A
54C 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
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
5 5C 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
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 .
• 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
56C 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
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 .
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
5 7C 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
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 .
U R I B E A C O N
58C 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
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 .
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.
59C 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
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
60C 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
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
6 1C 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
W E A V E / B R I L L 0E P I L O G U E
62C 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
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
63C 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
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 = đź’°
64C 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
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
65C 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
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
66C 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
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
67C 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
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
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
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