Upload
victor-nichols
View
221
Download
2
Embed Size (px)
Citation preview
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?