ACE: An Adaptive CSS Engine for Web Pages and Web-based Applications

Luis A. Leiva

Departament de Sistemes Informàtics i Computació
Institut Tecnològic d'Informàtica
Universitat Politècnica de València (Spain)
llt@acm.org

So far, at WWW '12:

• Implicit In-page Interaction
• Interactive Hypervideo Visualization
• Adaptive CSS Engine

Outline

1. Introduction
2. Related Work
3. System Overview
4. Examples
5. Evaluation
6. Future Work

Related Work

• Ivory et al., 2002
• Tsandilas and Schraefel, 2003
• Kurniawan et al., 2006
• Bila et al., 2007

System Overview

Framework

ACE modifies numerical CSS properties

System Overview

User Interaction Protocol

1. User enters
   • if previous user info, restyle
   • start event tracking
2. User leaves
   • store interaction data

System Overview

API (the important parts)

ACE.listen(objEvts, [keepDefaults]).adapt(objElems, [domContext]);

.listen({
  "eventType1": priorityNum, 
  "eventTypeN": priorityNum
}, true)

.adapt({
  "selector1": ["property1", ..., "propertyN"],
  "selectorN": ["property1", ..., "propertyN"]
}, window.document)

System Overview

API examples

.listen({
  "mousemove": 1, 
  "click": 20
}, true)

.listen({
  "keypress": 0, 
  "resize": 0
}, true)

.listen({
  "blur": 5, 
  "focus": 5
}, false)

.adapt({
  "#foo > p ul": ["font-size", "color", "margin-left"],
  ".my input[type='text']": ["border-color", "border-width"]
}, document.getElementById("bar"))

System Overview

Scoring scheme

System Overview

Smooth adaptation

Examples

Examples

Examples

<script type="text/javascript">        
ACE.adapt({
  "div a": ["font-size", "color"],    ➊
  "p ul" : ["font-weight", "margin"]  ➋
});
</script>

Examples

Examples

<script type="text/javascript">        
ACE.adapt({
  "div + a": ["font-size", "color"],    ➌
  "p + ul" : ["font-weight", "margin"]  ➍
});
</script>

Examples

Examples

<script type="text/javascript">        
ACE.adapt({
  "div ~ a": ["font-size", "color"],    ➎
  "p ~ ul" : ["font-weight", "margin"]  ➏
});
</script>

Examples

Evaluation

Informal study with 12 users

• Q1 Do you think page elements are well laid out?
• Q2 Did you notice any change on the page?
• Q3 If so, did you find distracting those changes?
• 

Conclusion

• A novel approach to restyle websites
• No end-user intervention
• Attentive, smooth adaptation

Future Work

• Handle non-numerical properties (e.g. text-align)
• Handle other user signals (e.g. biometrics)
• Run a formal user evaluation

Future Work

Luis A. Leiva. Automatic Web Design Refinements based on Collective User Behavior. Proc. CHI EA, 2012.

Thank you!

• Video at http://vimeo.com/luileito/ace-www
• Demo at http://personales.upv.es/luileito/ace/
• Code at https://github.com/luileito/ace