DATATIUMDATA AS MATERIAL FORCONTEXTUALLY RESPONSIVEDESIGNBe Responsive, September 8, 2015

Andrew Fisher @ajfisher

Hi, my name's AndrewFisher and I'm aninteraction researcher.Tonight I'd like to talk toyou about data as a designmaterial for the next 40minutes.

THE WEB WAS ALWAYS RESPONSIVE

What I find mostinteresting aboutresponsive design is thatthe web actually startedfully responsive - fluiditywas inherent in the way itwas designed.

THEN WE BROKE IT

(CC) Flickr Thomas Hawk

But for 20 years after thatwe basically systematicallybroke that inherentresponsiveness - mostlybecause of table baseddesign but generallybecause we made thingswork for the monocultureisof the day - first Netscapeand then IE.

THEN WE FIXED IT

(CC) Flickr Antoine Lefeuvre

Then mobile came along,and we spent a long timefixing stuff that was onlyreally broken because westuffed it in the first placeand over the last 2 yearswe have all becomeconverts to the idea ofresponsive design. So thesum total of our last 20years of effort has been tolargely bring us back to thepoint where we started,albeit with bettertypography and fewerbeavers in hardhatsweilding shovels.

Continue on, we come back to the light soon That's me being a littledisgenerous obviously,because we do have abetter platform for designthan we had 20 years ago -but the point is, we brokethings due to our focus onexecution for what was infront of us, and didn't thinkof what was coming nexteven when it was apparent.So in the last couple ofmonths we've probablytransitioned past the pointof no return on mobilethough we're not quite sureif we're there or not. Moretraffic is now coming frommobile web than desktopweb and if it hasn't quitemade it yet then we aredamned close. Basically ifyou don't have mobile inyour business now then it'sto late. The question isreally one of how bad it'sgoing to be for you. With anaudience like you all that'sprobably not a problem butit will be for others.

LOSING FOCUS ON WHAT MATTERS

(CC) Flickr Jyrki Salmi

However even if you arefully mobile and you'vedone a good job I thinkmany organisations havemissed a critical featureabout what underpinswhat's happening inbehaviour right nowbecause we're a littlefixated on screens.

4K‡4096 x 2160UHD-1

3840 x 2160QSXGA2560 x 2048

WQXGA2560 x 1600

WQHD2560 x 1440

UWUXGA2560 x 1080

QXGA2048 x 1536

2K‡2048 x 1080

WUXGA1920 x 1200

HD 10801920 x 1080

UXGA1600 x 1200

SXGA1280 x 1024

1280 x 960

PAL*768 x 576

SVGA800 x 600

XGA1024 x 768

SXGA+1400 x 1050

1152 x 768

1440 x 960

1440 x 900

1366 x 768

WXGA1280 x 768

WSVGA1024 x 600

HD 7201280 x 720

1280 x 854

WXGA1280 x 800 WSXGA+

1680 x 1050

PAL†1024 x 576

1440 x 1080

1600 x 900

XGA+1152 x 864

WVGA854 x 480

(NTSC†)

WVGA800 x 480

VGA640 x 480

(NTSC*)

480 x 320HVGA

SIF**384 x 288

CIF352 x 288

QVGA320 x 240

CGA320 x 200

21:9

17:916:9

8:5(16:10)

5:4

5:3

4:33:2

* NTSC and PAL/SECAM are analog video standards with no fixed horizontal resolution. The resolutions depicted here for 4:3 aspect ratio assume square pixels, but the actual horizontal resolution (in non-square pixels) ranges from 320 (VHS/Betamax) to 720 (DVD) for both standards.** Although computer industry defines SIF as 384x288 for PAL countries (for NTSC countries, it is equivalent to QVGA), MPEG-1 defines it as 352x288 (CIF) or 360x288 (for NTSC: 352x240 or 360x240).† The resolutions depicted here for 16:9 widescreen NTSC and PAL/SECAM assume square pixels, but theactual horizontal resolution (in non-square pixels) ranges from 520 (PALplus) to 720 (DVD).‡ Although Digital Cinema System specifies 2K at the depicted resolution in square pixels, in some situations it can assume non-square pixels and go as high as 2048 x 1536. Aspect ratio 17:9 is approximate.

WE'RE STILL (MOSTLY) OBSESSED WITH SIZE

"Vector Video Standards8" by (Wikipedia)Jedi787plus

I think we're largelythrough the size debatesand should we supportmobile and we're now inthe mode of "I'm designingfor a small screen or a largescreen". But we're also stilla bit stuck in the "look, seehow this all reflows, see - itworks". That's awesomeand all but we're missingthe underlying behaviourgoing on here. Thesedevices have allowedcomputation to move intodifferent contexts and ashumans we are changingour behaviour as a result ofthis change in tech,

NEW FORMS OF COMPUTING

(CC) Flickr Yacine Petitprez

Yes, a phone may be a smallscreen but it's a smallscreen that is not on a deskin a fixed location. It's asmall screen attached to anincredible computer thatcan access just about anyinformation in the worldwithin a few seconds and ataps on the screen. It's alsoa small screen that we canput away and pull out at amoment's notice. With thetrasition to mobile webovertaking desktop webthe predominateinteraction method isprobably now touch, itcould easily also be voicebut it sure as hell isn'tsitting down with akeyboard and mouse anymore. We have movedfrom sit down computing towherever you arecomputing and that's veryvery different in terms ofthe behaviour it affords.

MOBILE'S DIRTY SECRET

desktop

mobile

tablet

Conversion meta analysis Zhan / Fisher, JBA

And this is the thing thatwe as an industry havemissed and it's alreadyhurting and will hurt evenmore. Take a look at this.This is some aggregateddata I pulled togetherwhich looks at normalisedconversion rates by deviceclass. You can see howpoorly mobile performs,only about 2/3 as well asdesktop and tablet isn'tmuch better. Even the bestin mobile only justapproach what would beconsidered "below"average on desktop. I'veseen data from adobe thatlooked at every analyticsclient they have and theirnumbers are the same (andwhat spurred me to look atours). Mobile traffic isgoing up yet ability to turnthat traffic into actualoutcomes is poor. Yes, youmight have upped yourconversion by 5 times fromwhat it was on mobile butwhen the majority of yourtraffic comes from mobileand it's performing worsequestions are going to beasked and I can tell youCEOs and CMOs memoriesare short.

RESPONSIVE DESIGN SHOULD BE ABOUT ME

(CC) Flickr jonrawlinson

Responsive design is still allabout my device, not aboutme and what I want. Wespend more time reactingto whether I have a mobileand what orientation I'mholding it or what fancynew framework is infashion this month than wedo thinking about theservice the web applicationis delivering to me and thecontext I'm in when I'musing it.

DATATIUM

Da

To truly create interestingexperiences. To truly takemobile from being just adifferent screen. To trulyrealise the idea of a webthat is responsive, we needto think beyond pixels andstart thinking aboutcontext and behaviour.Tonight, I want to talk toyou about contextuallyresponsive design and howdata can be used tofacilitate it. In my work Ithink about data as amaterial - something I calldatatium, and I'd like toshare this with you so youcan go away and startdesigning responsiveexperiences as well.

AGENDA

What is contextually responsive design?

Using data as a material.

Creating contextually responsive experiences.

1

2

3

To do that we'll cover offthese three areas - What iscontextual design - Data asa material and how we getit - Creating contextuallyresponsive experiencesLet's get cracking

WHAT IS CONTEXTUAL DESIGN?Contextual designembraces the chaoticnature of behaviour. Wethink about intent a lot -what is this person tryingto achieve, rather thandoes this design layout theright way on this device.These experiencesconstantly evolve and areshaped by the dataavailable to the experienceyou're creating.

A MULTITUDE OF FACTORS

Explicit data (what do I tell you?)

Implicit data (how do I behave?)

Extrinisic factors (what can you infer?)

⦿

⦿

⦿

Contextual design uses acombination of explicitinformation - what they'vetold me such as preferenceinformation. We useimplicit data such asbehavioural informationbut we also use externalinformation as well -information we can infer orderive from other sourcesand factors. You need all ofthese components in orderto be able to create acontextually responsiveexperience.

MISSING ONE PIECEHere's an example of anokay experience. This camefrom vodafone warning meI was approaching my datalimit and when it wouldstart again. There was onepoint of failure with it andthe eagle-eyed amongstyou may spot it. It hits twoof the three factors: -Explicitly I've toldvodafone to contact me if Iapproach a threshold. SoI've expressed preference -Implicitly I've been usingmy data allowance so thesystem knows I'veexceeded that threshold.This is the point themessage gets sent. Themissing part is the extrinsicfactors - what else can bederived from knowledgeabout me or my behaviouris missing and is what turnsthis into only an okayexperience rather than agreat one. We'll return tothis example later and I'llshow you how to make itbetter.

CONTEXTUAL DESIGN IN ACTION

Avengers, 2012 - © Marvel

So here's what acontextually responsiveexperience looks like in myopinion and how seamlessit can be from anexperience perspective.Here's a clip from the firstavenger's movie.

CONTEXTUAL DESIGN IN ACTION

Avengers, 2012 - © Marvel

Notice here how the HUDchanges from a generaldisplay on what's going onto full threat tacticaldisplay in a heartbeat.Stark doesn't activate it atall and it becomes perfectlytuned to the tacticalsituation around him,responding contextually tothe threats nearby. Mostinterestingly, this interfacewas designed withconsultation from an A-10pilot who worked with thedesigner on the UI andtheir focus on was oncontextual tacticalinformation - notablybecause that's NOT howcurrent heads up systemswork in military aircraft.Now clearly this HUDdoesn't exist in anythingother than a fictional sensebut this completely sumsup how I want the web tobehave every day - and I'llsettle for this without theflying suit of armour andpulse cannons in my hand.

ODD EXPERIENCES

(CC) Flickr Joe Goldberg

In a forum like thiseveryone would bepracticing the coreresponsive designtechniques. But I bet you'restill coming across someissues - probably morefrequently now everythingyou're doing is inherentlyresponsive. Here's thesituation. You design awonderfully responsivesite everything reflowsbeautifully - it's a work ofresponsive art. But youthen use the webapplication on mobile - ormaybe you go from mobileto desktop - and somethingjust "feels" wrong. Youcan't put your finger on it,but there's something oddabout the experience whenyou move from one deviceto another. Instagramgoing from mobile todesktop feels like this - it'sjust not right. Has anyoneexperienced this? Good - acouple.

CONTEXT SHIFT

(CC) Flickr CAFNR

What you are noticing isthe effect caused bycontext shift. Sometimes inour services the shift to adifferent device causes thewhole idea of how you usethat service to changefundamentally. By shiftingthe device interactionwe've actually forced anentirely different context.This is where we need tostart accounting for howcontext is driving therequirements rather thansimply device. Here's anexample of this.

CONTEXT DRIVES REQUIREMENTS

ANZ GoMoney

I've been told anecdotallythat when ANZ came tobuild their GoMoneyapplication for mobiledevices it was basedaround the insight that themajority of users logged into the existing webapplication on their phone,looked at their accountbalance and exited again.As such in their mobile appthey put it front and centreand then tacked on makinga payment as well as thatwas the number two taskpeople did. Context drivesneed and requirements.When I'm out and aboutand I'm really mobile, Idon't need the fullcapabilities of the entireANZ online bankingplatform. I just want to seewhether I've been paid andwhether I have enoughmoney to buy that newgame or not.

IS THIS A BROWSER?

Apple watch © Apple

This is my final point for themoment about why youshould be thinking aboutcontext. Designing this wayis important because ournotion of what is a browseris starting to break down.Our services are starting totranscend the browserwe've become accustomedto after these 25 years. Theweb is scalable. Far morescalable than a thousandapps installed for everyperson on every devicethey own. But the idea ofhow we experience thatweb is going to changefundamentally over thenext few years ascomputing becomes moreembedded into ourenvironments and getscloser to our bodies.

DATA AS MATERIAL

(CC) Flickr Marcin Ignac

Now you have a bit more ofan understanding aboutwhat I mean when I talkabout context andcontextual design, I'll giveyou some understandingabout how we get to use it.The critical component isdata and specifically,starting to think about howwe use data as materialduring our design process -just like we do any othercomponent of design suchas type, animation, colourand light. I'll start withwhat things matter, howwe get that data, and howwe plan our experiencesaround this.

GETTING USEFUL DATA

(CC) Flickr Eric Fischer

The first thing tounderstand is that there'sno magic variables. I cangive you pointers towardssome things but other onesare going to be specific toyour own web application.For example the contextvariables that areimportant for the guardianwebsite are totallydifferent from tinkercadwhich is a 3D designapplication. The contextschange because you'rebuilding differentapplications. Having saidthat, there are a couple ofstarting points I alwayslook at to begin withbecause they do cause bigchanges of context acrossmany differentapplications.

DEVICE SHAPES BEHAVIOUR

(CC) Flickr Japanexperterna.se

This is the obvious place tostart and where all of youare right now. The reality isthat this only really givesyou a sense of whattechnical capabilities aperson is attached to.However, in some casesdevice might be reallyimportant. For example ifI'm a telco like telstra, I candetermine the rough age ofyour device and inferwhether you might belooking to upgrade.Similarly if you're anandroid user on the iPhonemicrosite at Apple youcould highlight some of thebenefits of iOS and howyou can still use all yourusual google apps.

TIME SHAPES BEHAVIOUR

(CC) Flickr Martina Photography

Next we can look at time.People do different thingsat different times of theday. Your morningactivities are very differentthan your evening ones. I'llshow you some datarelating to this in a minute.

LOCATION SHAPES BEHAVIOURWe can also considerlocation - is the personmoving or stationary? Youcan infer location but youcan also ask a user for theirlocation if you think it willmake it a betterexperience. Does theperson’s location overlapwith known places like atrain station, a train line orsay you were a retailer oneof your stores (or close toit). These are just a fewpoints that can create awhole bunch of differentcontexts that the user maybe in.

CONTEXT SHAPES BEHAVIOUR

(CC) Flickr Nana B Agyei

If I visit a site on my phoneat about 8am everymorning through the weekand I'm moving chances areI'm on my commute. This isvery different to me using atablet in landscape mode at9pm where I'm connectedvia a high speed wifi linkfrom a static location.

TIME AND DEVICE

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

desktop

mobile

tablet

Device class-time of day meta-analysis Zhan / Fisher JBA

Here you can see somedata that was composed asan aggregate of visitationacross many clients I workwith. This is a few monthsold now but you can seesome clear behaviouraldifferences when you lookat time of day against classof device. You can see thattablet and mobile devicesstart earlier than desktops.Who here browses in bedbefore you get up? Okay sothat's probably you.Likewise mobile and tabletgo later into the day. Whosits in bed using a tabletmore mobile before goingto sleep? Okay so that'sprobably you up this end.And you can obviously seethis big drop off of desktoponce you go outside ofbusiness hours.

CONTEXT VARIABLESContext starts creating asignificant number ofcombinations of variablesand this can quickly spiralout of control but start byjust considering device,location, time and speedand you'll get a surprisingnumber of contexts fromthem to consider in yourdesign.

PLANNING FOR THIS DATA IN OUR DESIGNS

When can I tell what someone is going to do?

Why did they do that at that point?

What else could I know that will help the user to their end goal?

⦿

⦿

⦿

When I'm working on anexperience, I'm constantlylooking for data about whatpeople are doing and whatmore can I know that willhelp take this experiencefrom good to great. There'salways pragmatisminvolved obvioously, butwe can use these variablesto start the process. I oftenstart by just asking thesequestions and go into theprocess from there.

CREATING CONTEXTUALLY RESPONSIVE EXPERIENCESNow you understand whatdata is important and howto get it it's time to look atthe types of experiencesyou can go and create.Unfortunately at themoment the examples are abit thin on the groundbecause we're only startingto think about this type ofdesign. My generalapproach is to considerdesire lines, links betweenthe physical and the digitaland response to failure.

UNDERSTANDING DESIRE LINES

(CC) Flickr webwetwork

A desire line is when youcan see from someone'sbehaviour what they aretrying to achieve beforethey get there. So We canask questions about auser’s intent. What arethey after? Are theyexhibiting any sorts ofbehaviour where we canstart predicting what theyare ultimately wanting todo? Are they using oursystem in a particular waythat allows us to tune theexperience for that.

SURFACING CONTENT / FEATURES CONTEXTUALLY

(CC) Flickr masine

If we understand a desireline properly then it meanswe can surface content orfeatures contextuallywithout the user evenbeing aware of it. GoogleNOW is probably the bestexample of this.Particularly to do withtravel.

GOOGLE NOWBeing able to show just asyou need it the informationto do with your flights a daybefore to remind you andthen just before your flight,showing gate anddeparture information is avery good example. Otherareas of google now are alittle weak - such assuggesting that every placeI search I want to go toafterwards - however flightdetails are exceptionallywell handled. To the pointthat I just archive all mytravel details now as soonas they arrive as I knowGoogle Now will sort themout when I need them. Thisis what contxtual contentlooks like - we just needthat surfaced to thebrowser now too.

LINKING TIME AND SPACE

(CC) Flickr Pabak Sarkar

Time and space go togetheralmost always. It's rare Ineed to worry about myshopping list when I'm notat the supermarket forexample. Being able to linksomeone's location to thetime they are in is apowerful mechanism forresponsive design. If youtrap details about thesetwo things then you cansurface actions or improvethe design once you knowwhere and when someoneis at.

INBOXAnother good example ofthis is Google's Inbox. Ifyou haven't used it yet andyou're a gmail user I highlyrecommend you requestaccess as this is one of thestrongest examples ofcontextual design inexistance at the moment.The main feature as shownhere is the ability to snoozea message until a time suchas later, to a place such ashome or a combination ofboth. Being able to remindyou to take action onsomething when you're inthe right time and place todo it is very interesting andseeing how this developsbeyond just email will begood to watch.

DESIGNING FOR FAILURE

(CC) Flickr Aristocats Hat

we need to considerdesigning in methods toallow people to correct amistake. If you embrace thechaos of contextuallyresponsive design you AREgoing to make mistakes inwhat you put to the userbut they are goodopportunities to learn. Soin your design process youneed to do two things.

BE TRANSPARENTThe first is to make ittransparent to the userabout WHY they are beingprovided with theinformation you'reproviding them. Sometimesthis can be hard toarticulate easily so youmight need to work at it.Amazon recommendationswork quite well herebecause it tells you whatyou purchased or looked atin order to get therecommendation so youcan see how it's affectingwhat you're seeing.

CAPTURE FAILURE DATAThe second is allowing theuser to correct things.Facebook ads are a goodexample of this as they letyou fix a problem and infact they look at it as anopportunity to collect someadditional data about WHYit was no good for youwhich helps them withtheir targeting ongoing.Don't pass up theopportunity to learn fromyour mistakes.Contextually responsivedesign is inherently fuzzyso you will make mistakes.Always remember to letthe user take action tocorrect things if needed.

DESIGNING A CONTEXTUALLY RESPONSIVE EXPERIENCERemember this? The SMS Igot from Vodafone. If youwere looking closely youwould have noticed thedate. I had 1GB left on theday I was going to switch tomy new billing month and Igot a warning about it. Tomake this experiencebetter Voda should bechecking the trajectory ofmy usage and predictingwhen I'm going to fall short.If I'm highly unlikely suchas having 25% of mymonthly plan left with onlya day to do then don't evenwarn me - it's burningcontact for no reason.Likewise though, if I'mgoing to fall short by a tinyamount then make a call onjust providing grace. Whybother charging for whatmay be a 1% overage for amonth. Indeed send a textmessage like this:

A BETTER MESSAGE

"You just went over your monthly limit. Don'tworry - anything you use within reason is on usuntil tomorrow when you reset."

Now that's a moreinteresting experience forthe end user I think you'llagree.

SUMMARY

Design for context from the outset

Use location, time, speed, device to start

Learn from failure

⦿

⦿

⦿

To finish off then. We'velooked at what iscontextually responsivedesign, how to get the datawe need to facilitate it andlooked at some examples ofhow to do it in practice. Ifyou take nothing moreaway, these three thingswill serve you well. Buildcontext into your processfrom the start, work withsome core variables andbuild up familiarity andmake sure you learn fromyour fails.

DATATIUM - DATA ASMATERIAL FOR CONTEXTUALLYRESPONSIVE DESIGNBe Responsive, 8 September, 2015

Andrew Fisher @ajfisher

Slides: http://datatium.ajf.io/

Thanks very much forlistening. All my details arehere, including the link tothe html slides and if youhave any questions I'd behappy to answer them now,after or ping me via twitter.