exploring adaptive interfaces [generate 2017]

EXPLORING ADAPTIVE

INTERFACESAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

http://twitter.com/aarongustafson

http://slideshare.net/AaronGustafson

Building for the Web is hard.

© Brad Frost

Created by Vectors Marketfrom the Noun Project

640 × 480

In the beginning…

800 × 600Created by Vectors Marketfrom the Noun Project

Ok, we can go a little larger.


1024 × 768

Ok, a bit larger, but that’s it.

Created by Vectors Marketfrom the Noun Project1366 × 7681024 × 600


1280 × 800Created by Vectors Marketfrom the Noun Project800 × 600


Of course laptops…


The web’s “happy place”.

640 × 200

Created by Douglas Santosfrom the Noun ProjectCreated by creative outlet

from the Noun Project

240 × 240

We were ignoring mobile…

3840 × 2160320 × 480Created by Vectors Marketfrom the Noun Project


Until this happened.

Don’t even get me started on tablets.

© Brad Frost



But desktop is simple, right?

Chasing screensizes is clearly a

fool’s errand.

© Brad Frost

In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected

— Jason Samuels IT Manager, National Council on Family Relations Source

“1062

One year after the iPhone

3 years ago!

http://blog.jasonsamuels.net/post/21633531278/analytics-confirm-the-need-for-adaptive-web-design-and

“ 200In 2008, 27 screen resolutions showed up with more than 10 visits, in 2014 that number was

— Jason Samuels IT Manager, National Council on Family Relations Source

Chasing screensizes is clearly a

fool’s errand.

© Brad Frost

Designingfor screens

is hard.

© Brad Frost

And then there’s everything else.

© Brad Frost

Your content can and will go anywhere that’s connected





wearables smart tvs IoT assistants

Meaning users will need to interact in different ways


touch Created by Vectors Marketfrom the Noun Project

mouseCreated by bezier masterfrom the Noun Project

T9Created by Christopher Holm-Hansenfrom the Noun Project

eye trackingCreated by Vectors Marketfrom the Noun Project

remote

Created by Setyo Ari Wibowo

from the Noun Projectpen


keyboardCreated by Vectors Marketfrom the Noun Project

audioCreated by Vectors Marketfrom the Noun Project

gamepadCreated by Vectors Marketfrom the Noun Project

printCreated by Adriano Emerickfrom the Noun Projectbraille

Over varied networks andin changing conditions


hardlineCreated by Vectors Marketfrom the Noun Project

wifiCreated by Vectors Marketfrom the Noun Project

mobile


homesCreated by Vectors Marketfrom the Noun Project

buildingsCreated by Vectors Marketfrom the Noun Project

cars


buses Created by Vectors Marketfrom the Noun Project

trainsCreated by Vectors Marketfrom the Noun Project

airplanes

And, ultimately, our users all have different needs too.

Anyone notice I haven’t even mentionedbrowsers?

;-)

© Brad Frost

So...?!

© Brad Frost

Reality check: Nothing about our users’ experiences of the web

has ever been as homogenous

as we imagine.© Brad Frost

The challenges ofweb design today

are the same asthey were yesterday.

© Brad Frost

The web can go anywhere there’s even a temporary

network connection.

© Brad Frost

© Brad FrostPhotoCredit:romanboed

https://www.flickr.com/photos/92082510@N04/35481258174/

Inclusive design creates giant ripples.

© Brad Frost

PhotoCredit:Dylan Passmore


wheelchairs strollers bicycles skateboards

one arm arm injury new parent

permanent situational



26K



26K 13M 8M+ +

21 Million People

So how can we makeour interfaces

more adaptive?

© Brad Frost

Let’s dissectan example.

© Brad Frost

EXPLORING ADAPTIVE INTERFACES

Content Teasers


Content Teasers

Superfluous & expensive

Nice to have

The essential nugget


Content Teasers

ideal

minimum viable interface


Content Teasers

ideal


Lazy load


Content Teasers

ideal


Do we really need it?

Lazy load


Content Teasers

new ideal

How do we planadaptive designs?

© Brad Frost


Step by step1. Focus on what matters.

51

The essential nugget


Step by step2. Write it out, then read it back.

53

How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other it’s embarrassing•


Step by step2. Write it out, then read it back.

54

Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad


Step by step3. Look for semantics that support 1 & 2.

55

heading a

paragraph img time



56

heading (also .p-name) a (also .u-url)

paragraph(also .p-summary)

.p-author.h-card (person)

.h-entry (feed)

img (also .u-photo) time(also .dt-published)



57

<scripttype="application/ld+json">{"@context":"http://schema.org","@type":"NewsArticle","headline":"MartinexcitedaboutVols’summerprogress","dateline":"Chattanooga,TN","image":["https://www.example.com/image1.jpg",],"datePublished":"2015-09-05","description":"SomeVolsareworkingoutinKnoxville…","articleBody":"THEWHOLEARTICLE"}</script>


Step by step4. Think about how design can improve comprehension.

58

Visually the most important text

Visually tied to the headline & carries some visual weight

distinct from the content & diminished in importance

Less important & distinct from content


Step by step5. Consider how your design choices impact the reading experience.

59

Can’t tell what the episode is called


Step by step5. Consider how your design choices impact the reading experience.

60

Floated images crush the

text on small screens

Ouch


6. Think about the many different ways folks might interact.

Step by step

61





eye tracking Created by Vectors Marketfrom the Noun Project

remoteCreated by Setyo Ari Wibowo




gamepadCreated by Vectors Marketfrom the Noun Project



audio



Step by step

62


mouseCreated by Christopher Holm-Hansenfrom the Noun Project

eye tracking

Hover?



Step by step

63





eye tracking Created by Vectors Marketfrom the Noun Project

remoteCreated by Setyo Ari Wibowo




gamepad

Focus & target?


audio



Step by step

64



mouseCreated by Setyo Ari Wibowo


Gestures?



Step by step

65



Text expansions?


audio


7. Map the potential experiences.

Step by step

66

Path AExperience 1Start

Path B

Experience 2

Notes

Decision point Change


1. Focus on what matters.

2. Write it out, then read it back.

3. Look for semantics that support 1 & 2.

4. Think about how design can improve comprehension.

5. Consider how your design choices impact the reading experience.


7. Map the potential experiences.

8. Iterate.

Step by step

68

Progressive Enhancement

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

I like an escalator because an escalator can never break, it can only become stairs.

— Mitch Hedberg

Technologicalrestrictions

What matters

Let’s get adaptive.

© Brad Frost


Content Teasers


Content Teasers

Lazy load


IxMap

JS?No

No imageLoad


IxMap

JS?No

No imageLoad

NoYes

Verify browser width condition


IxMap

JS?No

No imageLoad

NoYes


Yes

Image

Adjust markup Add custom CSS


There is no image…<divclass="entry-image"data-image-src="/i/sample.jpg"></div>

87


Until there is<divclass="entry-image"data-image-src="/i/sample.jpg"></div>

<divclass="entry-image"data-image-src="/i/sample.jpg"data-has-image="true"><imgalt=""src="/i/sample.jpg"/></div>

88


CSS at rest[data-image-src]{ display:none;}

89


CSS at play[data-image-src][data-image-loaded]{ display:block;}

90


JS Watcherwindow.watchResize=function(callback){ varresizing; functiondone(){ clearTimeout(resizing); resizing=null; callback(); } window.onresize=function(){ if(resizing){ clearTimeout(resizing); resizing=null; } resizing=setTimeout(done,50); }; callback();};

91


JS Watchervarbrowser_width=0;window.watchResize(function(){ browser_width= window.innerWidth|| document.body.offsetWidth;});

92


JS Watcherwindow.watchResize(function(){ varthreshold=400, image=document.createElement('img'), paragraphs=document.getElementsByTagName('p'), i=paragraphs.length, p,loaded,src,img; if(browser_width>=threshold){ image.setAttribute('alt',''); while(i--){ p=paragraphs[i]; src=p.getAttribute('data-image-src'); loaded=p.getAttribute('data-image-loaded'); if(src!=null&&loaded==null){ img=image.cloneNode(true); img.setAttribute('src',src); p.appendChild(img); p.setAttribute('data-image-loaded',''); } } image=paragraphs=p=img=null; }});


IxMap

JS?No

No imageLoad

NoYes


Yes

Image

Adjust markup Add custom CSS

LIVE


Smart CSS[data-image-src][data-image-loaded]{ display:block;}


Smart CSS[data-image-src][data-image-loaded]{ display:block;}

@mediaonlyscreenand(min-width:400px){ [data-img-src][data-image-loaded]{ display:block; }}

Assuming that’s your threshold


Content Teasers


Tabbed Interface

Traditional approach<h1>PumpkinPie</h1><divclass="container"><ulclass="tabs"><li><ahref="#">Overview</a></li><li><ahref="#">Ingredients</a></li><li><ahref="#">Directions</a></li><li><ahref="#">Nutrition</a></li></ul><divclass="section"><h2>Overview</h2><imgsrc="pie.jpg"alt=""><p>Whetheryou'rehostingafestivepartyoracasual get-togetherwithfriends,ourPumpkinPiewillmake entertainingeasy!</p></div></div>

Cleaner approach<h1>PumpkinPie</h1><divclass="tabbed-interface"><h2>Overview</h2><imgsrc="pie.jpg"alt=""/><p>Whetheryou'rehostingafestivepartyoracasual get-togetherwithfriends,ourPumpkinPiewillmake entertainingeasy!</p><h2>Ingredients</h2><ul><li>1(9<abbrtitle="inch">in</abbr>)unbakeddeep dishpiecrust</li><li>½cupwhitesugar</li></ul><h2>Directions</h2></div>


No JS, basic CSS


IxMap

JS?No

LinearLoad


IxMap

Yes

Tabs

Split content into sections Make tabs Assign event handlers (mouse & keyboard)

JS?No

LinearLoad


Yes

Tabs


JS?No

LinearLoad

IxMap

Linear HTML<h1>PumpkinPie</h1><divclass="tabbed-interface"><h2>Overview</h2><imgsrc="pie.jpg"alt=""/><p>Whetheryou'rehostingafestivepartyoracasual get-togetherwithfriends,ourPumpkinPiewillmake entertainingeasy!</p><h2>Ingredients</h2><ul><li>1(9<abbrtitle="inch">in</abbr>)unbakeddeep dishpiecrust</li><li>½cupwhitesugar</li></ul><h2>Directions</h2></div>

Tabbed<h1>PumpkinPie</h1><divclass="tabbed-interfaceTabInterface-enabled"> <ulclass="tabs"><li><ahref="#folder-1">Overview</a></li><li><ahref="#folder-2">Ingredients</a></li><li><ahref="#folder-3">Directions</a></li><li><ahref="#folder-4">Nutrition</a></li></ul><sectionid="folder-1"><h2>Overview</h2><imgsrc="pie.jpg"alt=""><p>Whetheryou'rehostingafestivepartyoracasual get-togetherwithfriends,ourPumpkinPiewillmake entertainingeasy!</p></section></div>


Yes

Tabs


IxMap

Yes

Verify space for tabs

NoAccordion

Build accordion

JS?No

LinearLoad


Yes

Tabs


IxMap

Yes

Verify space for tabs

NoAccordion

Build accordion

JS?No

LinearLoad

LIVE


JS?Load

IxMap

Yes

Tabs

Yes

Verify space for tabsLIVE

NoLinear

No

Accordion

Build accordion

<?>

Yes

Native

Insert details & summary

Support details & summary?

EXPLORING ADAPTIVE INTERFACESJS?Load

IxMap Yes

Verify space for tabsLIVE No

Accordion

Build accordion

<?>

Yes

Native

& summary

Support details & summary?

Yes

Tabs

Split content into sections Make tabs Assign event handlers

!

Screenreader & ARIA?

No

Audio Cues

Yes

Add ARIA


role="tablist"

116

Adding ARIA


role="tab"aria-selected="true"aria-controls="folder-1"

Adding ARIA


role="tab"aria-selected="false"aria-controls="folder-4"

Adding ARIA


role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"

Adding ARIA


Result!

Questions?

Tweet me at@AaronGustafson

Thank you!

@AaronGustafson aaron-gustafson.com

slideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson

exploring adaptive interfaces [generate 2017]

Technology