Exploring Adaptive Interfaces [Generate 2017]

EXPLORING ADAPTIVE

INTERFACESAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

Building for the Web is hard.

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.

But desktop is simple, right?

Chasing screensizes is clearly a

fool’s errand.

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!

“ 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.

Designingfor screens

is hard.

And then there’s everything else.

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

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?

So...?!

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.

The web can go anywhere there’s even a temporary

network connection.

Inclusive design creates giant ripples.

PhotoCredit:Dylan Passmore

wheelchairs strollers bicycles skateboards

one arm arm injury new parent

permanent situational

26K 13M 8M+ +

21 Million People

So how can we makeour interfaces

more adaptive?

Let’s dissectan example.

EXPLORING ADAPTIVE INTERFACES

Content Teasers

Superfluous & expensive

Nice to have

The essential nugget

Content Teasers

minimum viable interface

Content Teasers

Lazy load

Content Teasers

Do we really need it?

Lazy load

Content Teasers

new ideal

How do we planadaptive designs?

Step by step1. Focus on what matters.

The essential nugget

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

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.

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.

heading a

paragraph img time

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)

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

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.

Can’t tell what the episode is called

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

Floated images crush the

text on small screens

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

Step by step

eye tracking Created by Vectors Marketfrom the Noun Project

remoteCreated by Setyo Ari Wibowo

gamepadCreated by Vectors Marketfrom the Noun Project

Step by step

mouseCreated by Christopher Holm-Hansenfrom the Noun Project

eye tracking

Hover?

Step by step

eye tracking Created by Vectors Marketfrom the Noun Project

remoteCreated by Setyo Ari Wibowo

gamepad

Focus & target?

Step by step

mouseCreated by Setyo Ari Wibowo

Gestures?

Step by step

Text expansions?

7. Map the potential experiences.

Step by step

Path AExperience 1Start

Path B

Experience 2

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

Progressive Enhancement

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.

Content Teasers

Lazy load

No imageLoad

Verify browser width condition

No imageLoad

Adjust markup Add custom CSS

No imageLoad

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

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>

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

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

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();};

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

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; }});

No imageLoad

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

LinearLoad

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

LinearLoad

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>

Verify space for tabs

NoAccordion

Build accordion

LinearLoad

Verify space for tabs

NoAccordion

Build accordion

LinearLoad

JS?Load

Verify space for tabsLIVE

NoLinear

Accordion

Build accordion

Native

Insert details & summary

Support details & summary?

EXPLORING ADAPTIVE INTERFACESJS?Load

IxMap Yes

Verify space for tabsLIVE No

Accordion

Build accordion

Native

& summary

Support details & summary?

Split content into sections Make tabs Assign event handlers

Screenreader & ARIA?

Audio Cues

Add ARIA

role="tablist"

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!

That’s pretty adaptive!

Together we canmake the weba little better

every day.

Questions?

Tweet me at@AaronGustafson

Thank you!

@AaronGustafson aaron-gustafson.com

slideshare.net/AaronGustafson

Exploring Adaptive Interfaces [Generate 2017]

Technology

An Intelligent Adaptive Algorithm for Servers Balancing...

ADAPTIVE INTERFACES - DTICreport date 3. report type and...

Adaptive User Interfaces for On-line Shopping€¦ ·...

Can Adaptive Interfaces Improve the Usability of Mobile...

The Human Brain Relationship: Advanced and Adaptive User...

Context-adaptive Multimodal User...

Benefits and costs of adaptive user interfaces

Adaptive and Plastic User Interfaces: A review of the State....

Towards Multimodal Adaptive User Interfaces

Adaptive multimodal web user interfaces for smart work...

iOS Adaptive User Interfaces

Intelligent User Interfaces Design and...

Hardware Accelerated SDR Platform for Adaptive Air...

Adaptive Computer Interfaces

Intelligent and Adaptive Interfaces

Jan 8 2014 NISO Webinar: Device to Device: Adaptive...