The Conversation Gets Interesting:
Creating the
Adaptive Interface
<
icro?
presented by Stephen P. Anderson

s started. .
Where thi

SUBJECTIVE / QUALITATIVE
Focused on
Experiences
(People, Activities, Context)
Meaningful
Has personal significance
Pleasurable
Memorable experience worth sharing
Convenient THIS IS THE “CHASM” THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Super easy to use, works like I think
Usable
Can be used without difficulty
Reliable
Is available and accurate
Functional (Useful)
Works as programmed
Focused on
Tasks
(Products, Features)
OBJECTIVE / QUANTIFIABLE

Information presented in the most desirable fashion
(requires high degree of personalization and adaptation)
unique situations
Open Space for
Competitive
Differentiation!
Zone of ‘safe mediocrity’
Data displayed an interface
(no filtering/presentation)

hat I’m NOT
W
talking about. .

hat I’m NOT
W
talking about. .
“Hey what
happened to my
application?!!??”

hat I’m NOT
W
talking about. .
(Microsoft’s ‘Smart Menu’)

hat I’m NOT
W
talking about. . (Adaptive Content)

Neural Networks
hat I’m NOT
W AI
Social Mobs
talking about. . User Models
Unified User Interface Design
Decision-Theoretic Optimization
Machine Learning Algorithms
Active Elicitation
Keyhole Plan-Recognition
Intended Plan-Recognition
Polymorphic Task Hierarchies
Bayesian Optimization Algorithm
etc.

“Scripted”
“Intelligent”

(This example pulled from a slide from Will Wright)

(This example pulled from a slide from Will Wright)

(This example pulled from a slide from Will Wright)

(This example pulled from a slide from Will Wright)

mples of what
2 quick exa
lking about...
I AM ta

(Quicktime Animation, showing file attachment; what if... the default
number of exposed form fields changed based average use?)

http://www.uxmatters.com/MT/archives/000015.php

http://www.uxmatters.com/MT/archives/000015.php

http://www.uxmatters.com/MT/archives/000015.php

“Are people looking for a specific value (i.e.
discharges this month) OR do they simply need
a sense of all the information at once?”
http://www.uxmatters.com/MT/archives/000015.php

context. .
some
is interesting
(why this
to me)

natural
“Greasemonkey”
language
cool
“Identity 2.0” recognition
Javascript
behaviors
product as
person / “Polite
Interfaces”
game
design
My interest in
“Scent”
Adaptive Interfaces “Less”
designing for
small screens
(mobile apps)
Behavioral
Targeting
personalization/
customization “Interface as
features Conversation”

natural
“Greasemonkey”
language
cool
“Identity 2.0” recognition
Javascript
behaviors
product as
person / “Polite
Interfaces”
game
design
My interest in
“Scent”
Adaptive Interfaces “Less”
designing for
small screens
(mobile apps)
Behavioral
and this one
Targeting
personalization/
little project
customization “Interface as
I was on..
features Conversation”

Project”
The “Dream

A ‘group information
management system’ for
a busy executive and his
3 executive admins*.
*overworked and over-stressed personal administrators,
assigned to manage every aspect of one of three dimensions
(family, philanthropy, business) of the busy executive's life

Only 4 Users
No constraints
Application needed to ‘work like I think’
BUT...
Widely different levels of computer literacy
Information needs varied per user
Display of information varied per user
Divergent screen size & orientation preferences

selected agenda type
changed the options
that followed

The ‘regular’ version
different layouts & content the tablet version

only used only used only wanted a
month view month view to to list of today’s
calendar to
never used a look for actions
look for
month view, projects color
‘gaps’ (did most
only a wanted 2 coded as ‘non-
of the
week view profit’ ignored
scheduling) all else
Also, the idea of a ‘personal schedule’ and
this guy’s schedule were pretty blurred!
different calendar/planning views per user

learned:
What I
difficult to
It’ s not that
ized UIs.
te personal
crea

This happens
IF THEN ELSE
and/or
We know that

at
h
W?
If

at
h
W?
If
WHY NOT?

at
h
W?
If
WHY NOT?
If, Then...

larification. .
Quick c

Adaptive
progressive
disclosure
Content UI
Adaptable
(personalization/customization)

Adaptive
Content UI
Adaptable
(personalization/customization)

Adaptive
(and mostly
rich internet
apps)
Content UI
Adaptable
(personalization/customization)

ugh talk .
Eno
hat If?”
n to the “W
O

ugh talk .
Eno
hat If?”
n to the “W
O
(take what you like, leave what you don’t like)

http://javascript.internet.com/forms/textbox-expander.html
(Quicktime Animation, showing
auto resizing text boxes)
http://www.felgall.com/jstip45.htm

http://javascript.internet.com/forms/textbox-expander.html
(Quicktime Animation, showing
auto resizing text boxes)
http://www.felgall.com/jstip45.htm

http://www.daylife.com/home
http://www.ip-adress.com/index.php

What if... YOUR country was at
the top based on IP Address?

What if... we noticed that a user
was ‘missing’ the button. We could
increase the button size!
(Credit to Derek Featherstone for this one!)

http://www.boxesandarrows.com/view/ambient_signifi

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

ShaunInman.com is in its tenth
incarnation; the third in a series of
experiments using color and saturation to
suggest the age (and arguably relative
importance) of its content. Each day of the
year is associated with a color. Winter
begins with a blue which Spring changes
to green. Summer fades to yellow and
turns an orange-red by Autumn. As time
passes, these colors begin to fade.

What if... The prominence of help
links changed over time?

What if... we moved placement of
text based on amount of text

A little information design, to
emphasize the important stuff..

But ‘the important stuff’
changes over time..
What about different ‘time-based’ layouts?

But ‘the important stuff’
changes over time..
Confirmation
What about different ‘time-based’ layouts?

But ‘the important stuff’
changes over time..
Navigation
What about different ‘time-based’ layouts?

But ‘the important stuff’
changes over time..
Check-In
What about different ‘time-based’ layouts?

But ‘the important stuff’
changes over time..
What about different ‘time-based’ layouts?

http://www.alistapart.com/articles/switchymclayout

What if...
We collapsed this
information after
the 50th time!!

Why not..

Why not..
1 area based on
my activity

Why not..
3 ‘fixed’ 1 area based on
areas my activity

Why not..
1 area they want
to expose to me?
3 ‘fixed’ 1 area based on
areas my activity

What if..
We changed the help text based
on audience?

What if..
We changed the labeling per
audience?
Let’s book a trip! Add trip details

What if.. The navigation label varied from region to region?
(slide from Adaptive Path)

“I’ve recently realized that
there’s only 2 types of forms.
There are forms you use very
often, and forms you only use
occasionally.”
I disagree. I think there are 3
types of forms; forms that you
use very often, forms that you
use frequently, and forms that
you use occasionally.
It’s important that we make
this distinction and clarify the
issue so that we can architect
those pages appropriately.
Otherwise, we might end up
making a “frequent” form that
is of an “occasional” difficulty
level; or worse, an
“occasional” form as easy to
use as a “very often” form.
http://v1.garrettdimon.com/archives/the-duality-of-forms

“I’ve recently realized that
there’s only 2 types of forms.
There are forms you use very
often, and forms you only use
occasionally.”
I disagree. I think there are 3
types of forms; forms that you
use very often, forms that you
use frequently, and forms that
you use occasionally.
It’s important that we make
this distinction and clarify the
issue so that we can architect
those pages appropriately.
Why decide?
Otherwise, we might end up
making a “frequent” form that
is of an “occasional” difficulty
Why not adapt
level; or worse, an
“occasional” form as easy to
based on use?
use as a “very often” form.
http://v1.garrettdimon.com/archives/the-duality-of-forms

(Quicktime Animation)

Area 1 Area 2 Area 3 Area 4 Area 5
Option 1
Option 2
Option 3
Where I am.
Option 4
Option 5
Options 6

Area 1 Area 2 Area 3 Area 4 Area 5
g
n
o r
r fo
Option 1
W n !
Option 2
r s
e
t Where Iion
Option 3
t
Pa
am.
t
a
Option 4
ic
pl
Option 5
p
a
Options 6

Where I
started
What I can
do next
Where I am.
Where I
came from
What I can
do next
What I can
do next

“Suddenly, the
interface isn’t
fixed and rigid,
it’s fluid and
molten.”
-Time article, commenting on
the new iPhone

What can we
know about a
person?

User Two Frequents:
What can we amazon.com
ebay.com
know about a techcrunch.com
person?
delicious.com
flickr.com
popurls.com
threadless.com
thinksecret.com
digg.com
User One Frequents: google.com
amazon.com getfirefox.com
ebay.com twitter.com
basecamphq.com
etrade.com bloglines.com
google.com refreshdallas.org
finance.yahoo.com sxsw.com
backpackit.com
mail.yahoo.com
textpattern.com
consumerreports.org lukew.com

How might this help us make a design
decision around discoverability?
(no indication necessary)
“just in time messaging”
explicit indicator

is all this
But
possible?

Given the right data, all of this is relatively easy.

How?
primarily cookies, also ‘data seepage’, rich profiles
(within a site), marketing data (behavioral targeting),
OpenID (+ClaimID, etc.), MAC/IP Address, and of
course, internally collected data and usage patterns.

How?
primarily cookies, also ‘data seepage’, rich profiles
(within a site), marketing data (behavioral targeting),
OpenID (+ClaimID, etc.), MAC/IP Address, and of
course, internally collected data and usage patterns.
http://www.erratasec.com/ferret.html

Elements Page Session Domain Network [all sites]

Why now?

• Bandwidth/Storage (‘yeah, yeah, yeah’)
• “Long Tail” (apps tailored for very specific
audiences)
• Open Source / ReUse (frees up time to do
cooler things!)
• Clean micro changes)
Separation / Standards (ability to
make
• Product Maturity / “Experience Based
Differentiation”

hy bother?
W

Better Experiences

Information presented in the most desirable fashion
(requires high degree of personalization and adaptation)
unique situations
Open Space for
Competitive
Differentiation!
Zone of ‘safe mediocrity’
Data displayed an interface
(no filtering/presentation)

A Silver Bullet?

5 out of 12 require/involve adaption
http://www.socialtechnologies.com/

Any caveats?

Get the basics right first, before trying any of this!

Get the basics right first, before trying any of this!

Communication and disclosure is vital.

Doing it wrong is worse than not doing at all.

Be careful with how you interpret data.

Using a better widget in one place might make
another part of the interface crummy.

Customer support?

QA? Automated Testing?

Consistency.

Keep it small. No BIG changes.

“Please logout if you are not Stephen.”

Be wary of messing with spatial organization.

When dealing with data (especially identity
related data) treat this like a relationship...
Don’t freak people out by ‘knowing’ too
much too soon!!

esting or
ound inter
S
useful?

at
h
W?
If
WHY NOT?
If, Then...

at
h This is the
W? fun part!
If
WHY NOT?
If, Then...

at
h This is the
W? fun part!
If
Ask your friendly
neighborhood
WHY NOT?
developer..
If, Then...

at
h This is the
W? fun part!
If
Ask your friendly
neighborhood
WHY NOT?
developer..
Learn what data
If, Then...
IS available!

Greasemonkey
natural language
Identity 2.0 adaptive
elements
product as
person / “polite
apps”
game
design
INVESTIGATE
“Scent”
THESE TOPICS “less”
Designing for analytics /
Mobile Apps data mining
behavioral
targeting
Personalization/ and more!!
Customization Interface as
features Conversation

Greasemonkey
natural language
Identity 2.0 adaptive
elements
product as
person / “polite
apps”
game
design
INVESTIGATE
“Scent”
THESE TOPICS “less”
Designing for analytics /
Mobile Apps data mining
behavioral
targeting
Personalization/ and more!!
Customization Interface as
features Conversation

Thanks!
ME MY PERSONAL SITE
THE BEST WAY TO REACH ME

Thanks!
ME MY PERSONAL SITE
THE BEST WAY TO REACH ME
and we’re hiring!
Psst.. I work for