This document describes SAM (Self-Adapting Menus), a framework that makes web menus fully adaptive. SAM decomposes adaptive menus into two key components - a target policy that computes item importance, and an adaptation style that specifies visual changes. It works by abstracting menus from their DOM representation, tracking user interactions, applying a target policy to compute scores, and then an adaptation style to visually rearrange items. The framework is entirely client-side using JavaScript and CSS, and can be used by end-users, practitioners, and researchers to make websites adaptive, improve their own sites, and study adaptive menus respectively.

1. SAM: Self-Adapting Web Menus
Camille Gobert Kashyap Todi Gilles Bailly Antti Oulasvirta
github.com/aalto-ui/sam

2. Menus are everywhere…

3. [MenuOptimizer, UIST ’13]
[Split Menus,
TOCHI ’94]
[Cloud Menus,
IUI ’18]
[Hierarchical Pie
Menus, CHI ’10]
[Marking Menus,
CHI ’93]
[Your paper]
Menu Design
Visualisations
Interaction
Techniques
Adaptive Menus
etc…
Lots of menu research…

4. [MenuOptimizer, UIST ’13]
[Split Menus,
TOCHI ’94]
[Cloud Menus,
IUI ’18]
[Hierarchical Pie
Menus, CHI ’10]
[Marking Menus,
CHI ’93]
[Your paper]
Efforts are isolated and fragmented
Prototypes often not deployed or adopted
Replication not feasible or challenging
Lots of menu research …but

5. How can we make the web fully-adaptive?
Privacy
Disparity
Compatibility
Security

6. Item A
Item B
Item C
Item D
Item E
Item B
Item A
Item C
Item D
Item E
Static Adapting
SAM
Self-Adapting Menus

7. Target Policy Adaptation Style
Computes the importance
of menu items and groups
Specifies the visual changes
to be made to the menu
SAM decomposes adaptive menus into 2 key components
Self-Adapting Menus

8. Target Policy Adaptation Style
• Fully modular approach
• Mix & match combinations
• Facilitates extendability
SAM decomposes adaptive menus into 2 key components
Self-Adapting Menus

9. Menu Abstraction
Item A
Item B
Item C
Item D
Item E
DOM
<div id="main-menu">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
<ul>
</div>
{ “#main-menu”: “li” }
Supports
hierarchical
SAM Framework

10. User Logging
Menu Abstraction
Item A
Item B
Item C
Item D
Item E
Events
DOM
Mouse clicks
Page visit durations
Cursor movements
<Your own user data>
SAM Framework

11. User Logging Target Policy
Menu Abstraction
Metrics
Menus
Item A
Item B
Item C
Item D
Item E
Events
DOM
SAM Framework

12. Target Policies
• Click Frequency
• Page Visit Frequency
• Total Page Visit Duration
• Page Visit Recency
• Serial-Position Curve (Frequency, Recency, Primacy)
• AccessRank (Frequency, Recency, Temporal Clustering, Time)
• <Your own policy here>
Used to compute scores for each element

13. User Logging Target Policy
Adaptation StyleMenu Abstraction
Metrics
Menus
Scores
Item A
Item B
Item C
Item D
Item E
Events
DOM
SAM Framework

14. Adaptation Styles
• Highlighting
• Item Reordering
• Group Reordering
• Folding
• <Your own style here>
Determines visual changes made to the menu
Multiple styles can be combined to form composite styles

15. User Logging Target Policy
Adaptation StyleMenu Abstraction
Metrics
Menus
Scores
Item A
Item B
Item C
Item D
Item E
Item C
Item B
Item D
Item A
Item E
Events
DOM DOM
Modifi-
cations
SAM Framework

16. SAM Framework
User Logging Target Policy
Adaptation StyleMenu Abstraction
Metrics
Menus
Scores
ENTIRELY
CLIENT-SIDE!
JSS + CSS

17. ISo how do use or extend it?

18. I
End-Users
Practitioners
Researchers
So how do use or extend it?

19. As an end-user
• Enable SAM by specifying selectors for menus on a
page, and injecting JavaScript + CSS.
A repository of menu-tags can be created to
facilitate adoption by users.
More details in the paper
Make website menus self-adapting by injecting SAM.

20. • Define custom or SAM-specific selectors for your menu(s)
• Integrate SAM by including the required JS + CSS
=> Make your website menus self-adapting
More details in the paper
Improve your own website(s) by making it adaptive
As a practitioner

21. More details in the paper
Reduce the overhead for studying adaptive menus
• Experiment and add new policies
• Experiment and add new adaptation styles
• Conduct “in-the-wild” studies of adaptive menus
As an researcher

22. DEMO

23. SAM: Self-Adapting Web Menus
Camille Gobert Kashyap Todi Gilles Bailly Antti Oulasvirta
github.com/aalto-ui/sam
User Logging Target Policy
Adaptation StyleMenu Abstraction
Metrics
Menus
Scores
Events
DOM DOM
Modifi-
cations
Item A
Item B
Item C
Item D
Item E
Item B
Item A
Item C
Item D
Item E