This paper presents Cloud Menus, a split adaptive menu for small screens where the predicted menu items are arranged in a circular tag cloud with a location consistent with their corresponding position in the static menu and a font size depending on their prediction level. This layout results from a 3-step design process: (i) defining an initial design space on Bertin’s 8 visual variables and 4 quality properties, (ii) identifying the most preferred layout based on agreement rate, and (iii) implementing it into Cloud Menus, a new widget for Android with circular layout. An empirical study suggests that cloud menus reduce item selection time and error rate when prediction is correct without penalizing it when prediction is incorrect, compared to two baselines: a non-adaptive static menu and an adaptive linear menu. From this study, design guidelines for cloud menus are elaborated.

1. Cloud Menus, a Circular Adaptive Menu for
Small Screens
Jean Vanderdonckt, Sara Bouzit, Gaëlle Calvary, Denis Chêne

2. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Motivations
‣ Adaptive menus exist today for desktop, not much for small screens
‣ Split menus represent an open question
ItemA ItemB ItemC ItemD ItemE
MenuItem1
MenuItem2
MenuItem3
MenuItem4
MenuItem5
MenuItem6
MenuItem7 SubMenuItem1
SubMenuItem2
SubMenuItem3
FrequentItem3
FrequentItem6
MenuItem1
MenuItem2
MenuItem4
MenuItem5
MenuItem7
ItemB
FrequentItem3
FrequentItem6
MenuItem1
MenuItem2
MenuItem3
MenuItem4
MenuItem5
MenuItem6
MenuItem7
ItemB
MenuItem3
MenuItem6
MenuItem1
MenuItem4
MenuItem2
MenuItem5
MenuItem7
ItemB
Frequency-
based menu
Menu bar with pull-down menu
Split menu without
replication
Split menu with
replication

3. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Some related work
Ephemeral menuAdaptive prompting
Findlater’s menu:
4 groups of 4 items
Out-of-context disappearing (OCD) In-context disappearing (ICD)
Prediction window
Predicted items

4. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Selected related work Predicted items
Gajos & Chauncey, IUI2017

5. Cloud Menus, a Circular Adaptive Menu for Small Screens
 How to make a menu adaptive? 8 Bertin’s visual variables
Position
Size
Shape
Value
Color
Orientation
Texture
Motion
Spatial stability: position and
orientation remain constant
Physical
stability:
size and shape
remain
constant
Format stability:
value, color, and
texture remain constant
Temporal stability:
motion is constant

6. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Step 1: Initial prototypes according 8 Bertin’s visual variables
Position
Size
Shape
Value
Color
Orientation
Texture
Motion

7. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Step 2: Exploratory study
The most appreciated
The least appreciated

8. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Step 3: Final design of Cloud Menus as implemented
Press [-]
Press [+]
Scroll
down
Scroll
up
Select
unpredicted
item
Select
predicted
item
High
prediction
Medium
prediction
Low
prediction

9. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Controlled experiment of Cloud Menus: 2x19x60=2280 select.
‣ Between-subjects design
2 groups x 19 participants
Group 1: cloud menu vs static menu Group 2: linear menu vs static menu
20 static selections + 40 cloud selections 20 static selections + 40 linear selections
20 correct predictions + 20 incorrect predictions
10 in the center + 10 in the periphery 10 on first screen + 10 on second screen
20 correct predictions + 20 incorrect predictions

10. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Controlled experiment of Cloud Menus
‣ Between-subjects design
1,76
5,6
3,4
4,12 3,4
3,04
0
1
2
3
4
5
6
7
correct prediction incorrect prediction control
Selectiontime(sec)
Cloud (Group 1)
Linear (Group 2)
0
2
4
6
8
10
12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Selectiontime(sec.)
ParticipantHigh Medium Low
First screen Second screen Linear (High)
When prediction is high, end users find the target item among the 6 predicted items in the
Cloud Menu and the Linear Menu faster than in Control condition
When prediction is high, users are faster in Cloud menu than in Linear condition
A target item located in the center of the Cloud Menu are selected faster than when
located in its periphery
In all conditions (Cloud Menu, Linear menu and Control condition), the target item is
selected faster when located on the first screen than on the second

11. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Controlled experiment of Cloud Menus
‣ Error rate
0,85
0,35
1,93
0,33
0
0,5
1
1,5
2
2,5
3 Cloud (G2)
Control for Cloud (G2)
Linear (G1)
Control for Linear (G1)
The error rate of the Cloud Menu is similar to the Linear Menu
When target item is located in the center of the cloud, errors will be less frequent than
when target is in its periphery
When prediction is low, no significant difference between all conditions

12. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Design Guidelines for Cloud Menus
‣ G1. A cloud menu should be used for a substantive static menu
‣ G2. A cloud menu should not hold more than 6 items
‣ G3. A cloud menu should not exceed 3 levels of prediction
‣ G4. A cloud menu should be located as close as possible to the static
original menu
Wiebe et al., IUI’2016

13. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Design Guidelines for Cloud Menus
‣ G1. A cloud menu should be used for a substantive static menu
‣ G2. A cloud menu should not hold more than 6 items
‣ G3. A cloud menu should not exceed 3 levels of prediction
‣ G4. A cloud menu should be located as close as possible to the static
original menu
‣ G5. The items of a cloud menu should be located as much as possible to
point to their corresponding (static) items
‣ G6. A cloud menu on a small screen can be superimposed

14. Cloud Menus, a Circular Adaptive Menu for Small Screens
 Conclusion
‣ Cloud menus have a real impact on item selection time and error rate
‣ Cloud menus represent a manifestation of a split adaptive menu
‣ Cloud menus are effectively applicable to small screens
‣ But
‣ Impact is highly depending on the prediction scheme
Most Common First, Last used First, Most common and recent, etc.
‣ Different layouts of the Cloud Menu are still possible and need further
investigation
Position, Layout type, item position depending on on/off-screen location
Predictive model is expected