The Conversation Gets Interesting: Creating the Adaptive Interface

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

Slide 2: s started. . Where thi

Slide 3: 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

Slide 4: 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)

Slide 5: hat I’m NOT W talking about. .

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

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

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

Slide 9: 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.

Slide 13: “Scripted” “Intelligent”

Slide 16: (This example pulled from a slide from Will Wright)

Slide 17: (This example pulled from a slide from Will Wright)

Slide 18: (This example pulled from a slide from Will Wright)

Slide 19: (This example pulled from a slide from Will Wright)

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

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

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

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

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

Slide 25: “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

Slide 26: context. . some is interesting (why this to me)

Slide 27: 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”

Slide 28: 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”

Slide 29: Project” The “Dream

Slide 30: 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

Slide 31: 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

Slide 32: selected agenda type changed the options that followed

Slide 33: The ‘regular’ version different layouts & content the tablet version

Slide 34: 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

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

Slide 36: This happens IF THEN ELSE and/or We know that

Slide 37: at h W? If

Slide 38: at h W? If WHY NOT?

Slide 39: at h W? If WHY NOT? If, Then...

Slide 40: larification. . Quick c

Slide 41: Adaptive progressive disclosure Content UI Adaptable (personalization/customization)

Slide 42: Adaptive Content UI Adaptable (personalization/customization)

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

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

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

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

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

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

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

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

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

Slide 60: 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.

Slide 61: 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.

Slide 62: 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.

Slide 63: 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.

Slide 64: 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.

Slide 65: 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.

Slide 66: 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.

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

Slide 68: What if... we moved placement of text based on amount of text

Slide 69: A little information design, to emphasize the important stuff..

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

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

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

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

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

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

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

Slide 83: Why not..

Slide 84: Why not.. 1 area based on my activity

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

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

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

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

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

Slide 91: “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

Slide 92: “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

Slide 93: (Quicktime Animation)

Slide 94: 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

Slide 95: 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

Slide 96: 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

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

Slide 98: What can we know about a person?

Slide 99: 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

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

Slide 101: is all this But possible?

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

Slide 103: 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.

Slide 104: 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

Slide 106: Elements Page Session Domain Network [all sites]

Slide 107: Why now?

Slide 108: • 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”

Slide 109: hy bother? W

Slide 110: Better Experiences

Slide 111: 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)

Slide 112: A Silver Bullet?

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

Slide 114: Any caveats?

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

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

Slide 117: Communication and disclosure is vital.

Slide 118: Doing it wrong is worse than not doing at all.

Slide 119: Be careful with how you interpret data.

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

Slide 121: Customer support?

Slide 122: QA? Automated Testing?

Slide 123: Consistency.

Slide 124: Keep it small. No BIG changes.

Slide 125: “Please logout if you are not Stephen.”

Slide 126: Be wary of messing with spatial organization.

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

Slide 128: esting or ound inter S useful?

Slide 129: at h W? If WHY NOT? If, Then...

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

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

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

Slide 133: 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

Slide 134: 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

Slide 135: Thanks! ME MY PERSONAL SITE THE BEST WAY TO REACH ME

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