Intelligent and Adaptive Interfaces Julia Schwarz April 25, 2013.

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?