Exploring Adaptive Interfaces [Generate 2017]

EXPLORING
ADAPTIVE
INTERFACES
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

Building for 
the Web is hard.
© Brad Frost

Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…

800 × 600
Ok, we can go a little larger.

1024 × 768
Ok, a bit larger, but that’s it.

Created by Vectors Mark
1366 × 7681024 × 600
1280 × 800
800 × 600
Of course laptops…

1024 × 768
The web’s“happy place”.

640 × 200
Created by Douglas Santos
Created by creative outlet
240 × 240
We were ignoring mobile…

3840 × 2160320 × 480
Until this happened.

Don’t even get me
started on tablets.
© Brad Frost

1920 × 1080
7680 × 4320
But desktop is simple, right?

Chasing screen 
sizes 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!

“ 200
In 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

Designing 
for 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 Market
mouse
Created by bezier master
T9
Created by Christopher Holm-Hansen
eye tracking
remote
Created by Setyo Ari Wibowo
pen
keyboard
audio
gamepad
printCreated by Adriano Emerick
braille

Over varied networks and 
in changing conditions
hardline
wifi
mobile
homes
buildings
cars
buses Created by Vectors Market
trains
airplanes

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

Anyone notice I
haven’t even
mentioned 
browsers?
;-)
© Brad Frost

Reality check:
Nothing about our users’
experiences of the web 
has ever been as
homogenous 
as we imagine.
© Brad Frost

The challenges of 
web design today 
are the same as 
they were yesterday.
© Brad Frost

The web can go anywhere
there’s even a temporary
network connection.
© Brad Frost

© Brad Frost
Photo Credit: romanboed

© Brad Frost
Photo Credit: Evgeni Zotov

© Brad Frost
Photo Credit: Climate Change, Agriculture and Food Security

Inclusive design creates
giant ripples.
© Brad Frost

wheelchairs strollers bicycles skateboards

one arm arm injury new parent
permanent situational

26K

26K 13M 8M+ +
21 Million People

So how can we make 
our interfaces 
more adaptive?
© Brad Frost

Let’s dissect 
an example.
© Brad Frost

EXPLORING ADAPTIVE INTERFACES
Content Teasers

Content Teasers
Superﬂuous & 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 plan 
adaptive designs?
© Brad Frost

Step by step
1. Focus on what matters.
51
The essential nugget

Step by step
2. 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 step
54
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad

Step by step
3. Look for semantics that support 1 & 2.
55
heading
a
paragraphimg time

Step by step
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)

Step by step
57
<script type="application/ld+json"> 
{
"@context": "http://schema.org",
"@type": "NewsArticle", 
"headline": "Martin excited about Vols’ summer progress",
"dateline": "Chattanooga, TN",
"image": [
"https://www.example.com/image1.jpg",
],
"datePublished": "2015-09-05",
"description": "Some Vols are working out in Knoxville…",
"articleBody": "THE WHOLE ARTICLE"
}
</script>

Step by step
4. Think about how design can improve comprehension.
58
Visually the mostimportant text
Visually tied to the
headline & carries
some visual weight
distinct from thecontent & diminishedin importance
Less important &
distinct from content

Step by step
5. Consider how your design choices impact the reading experience.
59
Can’t tell what theepisode is called

Step by step
60
Floated images crush the
text on small screens
Ouch

6. Think about the many different ways folks might interact.
Step by step
61
mouse
T9
eye tracking Created by Vectors Market
remote
pen
keyboard
gamepadCreated by Vectors Market
from the Noun Projectbraille
audio

Step by step
62
mouse
eye tracking
Hover?

Step by step
63
mouse
T9
eye tracking Created by Vectors Market
remote
pen
keyboard
gamepad
Focus & target?
audio

Step by step
64
mouse
pen
Gestures?

Step by step
65
from the Noun Projectbraille
Text expansions?
audio

7. Map the potential experiences.
Step by step
66
Path A
Experience 1Start
Path B
Experience 2
Notes
Decision point Change

1. Focus on what matters.
4. Think about how design can improve comprehension.
7. Map the potential experiences.
8. Iterate.
Step by step
68

UserExperience
Browser Capabilities
BASIC ADVANCED

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

Let’s get adaptive.
© Brad Frost

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
Verify browser
width condition
Yes
Image
Adjust markup
Add custom CSS

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

Until there is
data-image-src="/i/sample.jpg"></div>
data-image-src="/i/sample.jpg"
data-has-image="true">
<img alt="" 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 Watcher
window.watchResize = function(callback)
{
var resizing;
function done() {
clearTimeout( resizing );
resizing = null;
callback();
}
window.onresize = function(){
if ( resizing ) {
clearTimeout( resizing );
resizing = null;
}
resizing = setTimeout( done, 50 );
};
callback();
};
91

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

JS Watcher
window.watchResize(function(){
var threshold = 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
Verify browser
width condition
Yes
Image
Adjust markup
Add custom CSS
LIVE

Smart CSS
display: block;
}

Smart CSS
display: block;
}
@media only screen and (min-width:400px) {
[data-img-src][data-image-loaded] {
display: block;
}
}
Assuming that’s your threshold

Tabbed Interface

Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container"> 
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual 
get-together with friends, our Pumpkin Pie will make 
entertaining easy!</p>

</div>

</div>

Cleaner approach
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jpg" alt="" />

<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep 
dish pie crust</li>
<li>½ cup white sugar</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
Make tabs
JS?
No
LinearLoad
IxMap

Linear HTML
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jpg" alt="" />

<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep 
dish pie crust</li>
<li>½ cup white sugar</li>

</ul>
<h2>Directions</h2>

</div>

Tabbed
<div class="tabbed-interface TabInterface-enabled"> 
<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id="folder-1">
<h2>Overview</h2>
<img src="pie.jpg" alt="">

</section>

</div>

Yes
Tabs
Make tabs
IxMap
Yes
Verify space
for tabs
No
Accordion
Build accordion
JS?
No
LinearLoad

Yes
Tabs
Make tabs
IxMap
Yes
Verify space
for tabs
No
Accordion
Build accordion
JS?
No
LinearLoad
LIVE

JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
<?>
Yes
Native
Insert details
& summary
Support details & summary?

JS?Load
IxMap Yes
Verify space
for tabs
LIVE No
Accordion
Build accordion
<?>
Yes
Native
Support details & summary?
Yes
Tabs
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

Exploring Adaptive Interfaces [Generate 2017]

Recommandé

Recommandé

Contenu connexe

Similaire à Exploring Adaptive Interfaces [Generate 2017]

Similaire à Exploring Adaptive Interfaces [Generate 2017] (20)

Plus de Aaron Gustafson

Plus de Aaron Gustafson (20)

Dernier

Dernier (20)

Exploring Adaptive Interfaces [Generate 2017]