1. Intelligent and Adaptive Interfaces Julia Schwarz April 25, 2013

2. Definition An intelligent or adaptive interface is an interface that changes according to the current user and/or his/her actions.

3. Two Kinds… User agents: ‘Little Helper’ that acts on user’s behalf. Adaptive interface: the UI changes based on context or user actions.

4. Outline User Agents Adaptive Interfaces Responsive Interface Libraries (focus: Bootstrap) Machine Learning Libraries (focus: Weka)

5. ‘Little Helper’ that acts on user’s behalf User Agents

6. Examples

7. 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

8. 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)

9. 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!

10. Aside: Why Did Clippy Fail?

11. The UI changes based on context or user actions. Adaptive Interfaces

12. Examples • Toolbars/widgets that autohide • Excel auto-formatting & auto completion • Excel: pull down to extend function • Split menus • Auto format for paste

13. 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

14. Responsive Design

15. Is Your Design Responsive? http://mattkersley.com/responsive/

16. Responsive Design Examples Good: • http://thegreatdiscontent.com/ • http://mattkersley.com/ • http://www.bostonglobe.com/ Bad: • http://cnn.com • http://nytimes.com Fun/Interesting: • http://webdesign.maratz.com/lab/responsivetypography/realtime/

17. 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

18. Discussion: Are Adaptive Interfaces Good?