Intelligent and Adaptive Interfaces

Julia SchwarzApril 25, 2013

Definition

An intelligent or adaptive interface is an interface that changes according to the

current user and/or his/her actions.

Two Kinds…

User agents: ‘Little Helper’ that acts on user’s behalf.

Adaptive interface: the UI changes based on context or user actions.

Outline

User Agents

Adaptive Interfaces

Responsive Interface Libraries (focus: Bootstrap)

Machine Learning Libraries (focus: Weka)

USER AGENTS‘Little Helper’ that acts on user’s behalf

Examples

How Do They Work?

• Beyesian Networks: Infer desired action based on observed data and previous user actions (Clippy, Siri). – Use Hidden Markov Models or other probabilistic

graphical models usually.• Collaborative Filtering: Find people like you

and see what they do (Netflix, Amazon).– Unsupervised Learning: K-Means, Hierarchical

Clustering

Tools for User Agents

• Found no “UI toolkits” but plenty of libraries• Bayesian Inference:– Infer.NET (C#/F# bindings, ‘probabilistic programming’)– HMM Toolbox for Matlab– GHMM (HMM for C)

• Supervised and Unsupervised Learning:– Weka– Matlab Statistics Toolbox– LibSVM: multi-language SVM library– scikit-learn: python (builds on scipy, numpy)

In Depth: Weka

• Popular among HCI community• Provides GUI for:– Building & evaluating models– Visualizing data distribution– Selecting optimal features– Basic data manipulation

• Warning: you are playing with fire!• Demo!

Aside: Why Did Clippy Fail?

ADAPTIVE INTERFACESThe UI changes based on context or user actions.

Examples

• Toolbars/widgets that autohide

• Excel auto-formatting & auto completion

• Excel: pull down to extend function

• Split menus• Auto format for paste

Examples, cont’d

• Adaptive Menus (e.g. more…)

• Autoformatting• Self-revealing toolbars • Automatic creation of

files/folders e.g. My Music, My Documents

• AI failures causes less control, not more

thank you to http://www.zuschlogin.com/?p=15

Responsive Design

Is Your Design Responsive?

http://mattkersley.com/responsive/

Responsive Design Examples

Good:• http://thegreatdiscontent.com/• http://mattkersley.com/• http://www.bostonglobe.com/Bad:• http://cnn.com• http://nytimes.comFun/Interesting:• http

://webdesign.maratz.com/lab/responsivetypography/realtime/

Frameworks for Responsive Design

• CSS to make your web pages responsive• Grid-based (lay out your UI in a grid. always)• Bootstrap fluid layout• Foundation• Skeleton• Comparison:

http://responsive.vermilion.com/compare.php

Discussion: Are Adaptive Interfaces Good?