SUPPORTING MENU LAYOUT DESIGN BY GENETIC

PROGRAMMING

Cosimo Birtolo, Roberto Armenise

Poste Italiane S.p.A., Tecnologie dell’Informazione, Sviluppo Sistemi Informativi, Centro Ricerca e Sviluppo

Piazza Matteotti 3, 80133 Naples, Italy

Luigi Troiano

University of Sannio, CISELab, Department of Engineering, Viale Traiano, 82100 Benevento, Italy

Keywords:

Menu layout, User interface, Genetic programming, Search based software engineering.

Abstract:

Graphical User Interfaces heavily rely on menus to access application functionalities. Therefore designing

properly menus poses relevant usability issues to face. Indeed, trading off between semantic preferences and

usability makes this task not so easy to be performed. Meta-heuristics represent a promising approach in

assisting designers to specify menu layouts. In this paper, we propose a preliminary experience in adopting

Genetic Programming as a natural means for evolving a menu hierarchy towards optimal structure.

1 INTRODUCTION

Among the different components available to design a

graphical user interface (GUI), menus are among the

most prominent. Menu represents the major means

by which the user gets access to the different applica-

tion functionalities. Menu usability depends on sev-

eral factors. Structure, layout, colors, labeling and

control are among them. The issue regarding how

to optimize menu usability by acting on those fac-

tors have been investigated in literature (Hollink et al.,

2007; Cockburn et al., 2007; Zhang et al., 2007).

Recently application of meta-heuristics to optimizing

the layout of hierarchical menus have been proposed

(Troiano et al., 2008; Matsui and Yamada, 2008). The

problem of ﬁnding the layout that maximizes usabil-

ity is combinatorial in nature, as it depends on the

arrangement of each item in different positions onto

the menu structure. This suggests that the problem

is NP-hard. Genetic Algorithms (GA) have been ap-

plied with encouraging results (Troiano et al., 2008).

Main limitation of this approach resides in the difﬁ-

culty of modeling the evolution of hierarchical struc-

tures by means of linear chromosomes, as those pro-

cessed by ordinary genetic algorithms. Attempts have

been proposed in order to overcome this problem. For

example Matsui and Yamada (Matsui and Yamada,

2008) encode menu layout as a sequence of menu

items. Menu layout is built by assigning in turn menu

items to nodes according to similarity of labels and

load. Troiano, Birtolo, Armenise and Cirillo (Troiano

et al., 2008) have proposed a coding in which each

gene represents the path from root to a menu item.

In some cases, an action can be accessed by differ-

ent paths. For example, if an action is allowed twice,

there is a need for two genes each representing a

different path. The mapping between genes and ac-

tions is kept by an association table. Such a chromo-

some structure is more robust to genetic operations

than others, allowing a better control of action items,

whose best placement is the ultimate goal of the opti-

mization algorithm. Main drawbacks to linear coding

of menu layout are: (i) hierarchy imposes additional

constraints to guarantee consistency of structure; (ii)

a bigger number of non-valid solutions is produced;

(iii) convergence becomes more difﬁcult when addi-

tional structural and semantic constraints occur; (iv)

a larger number of individuals and generations is re-

quired. Genetic Programming (GP) could overcome

such drawbacks allowing the direct evolution of menu

hierarchy.

In this paper we propose GP as an effective means

for optimizing a menu layout as a trade-off between

designer preferences and usability goals: Section 2

formulates the problem, Section 3 describes the al-

gorithm, Section 4 provides preliminary experimental

248

Birtolo C., Armenise R. and Troiano L. (2010).

SUPPORTING MENU LAYOUT DESIGN BY GENETIC PROGRAMMING.

In Proceedings of the 12th International Conference on Enterprise Information Systems - Human-Computer Interaction, pages 248-251

DOI: 10.5220/0003022402480251

 SciTePress

results, Section 5 outlines conclusions and future di-

rections.

2 HIERARCHICAL MENUS

In this paper we will refer to menu layout as the hi-

erarchical structure by which the user gains access to

application functionalities. A menu layout is made

of menus; each menu is made of a list of items refer-

ring to submenus or to actions. The ﬁrsts are menus

at lower level, the latter are aimed at activating func-

tionalities, thus they represent the menu system leaves

(i.e. terminals).

In designing a menu layout we have to take into

the account: (i) accessibility as the ease of reaching

desired actions, (ii) guidelines as a set of best prac-

tices in organizing the menu layout, and (iii) prefer-

ences, as a wish list made explicit or implicit by the

end user.

As the menu system aims at quickly activating

functionalities, we will consider accessibility as the

optimization driver, whilst we will refer to guidelines

and preferences as optimization preferences (con-

straints, when mandatory). Therefore, the problem

solution relies on ﬁnding a menu layout that maxi-

mizes accessibility and compliance to guidelines and

user preferences. Menu selection entails user to vi-

sually inspect the menu, and to read and comprehend

items in order to reach a desired functionality.

Several models for predicting the selection time

have been proposed. If items are sorted, e.g. alpha-

betically, search time can be predicted by Hick’s Law

(Hick, 1952), which states that the time to locate an

item is a logarithmic function of the menu size. When

menus are not alphabetically ordered, users have to

scan them in sequence the menu, but if the user mem-

orizes the item position, search time becomes con-

stant. Fitts’ Law (Fitts, 1954; Cockburn et al., 2007)

estimates the time required to move the cursor to a

particular item, as a logarithmic function of the ratio

between the target distance d and the target width w,

known as the task’s Index of Difﬁculty (ID).

Recently, Bernard (Bernard, 2002) has presented

a further model for predicting the selection time. The

Hypertext Accessibility Index measure (H

HAI

) is de-

ﬁned as

HAI

(x) =

∑

i=1

∑

j∈N

log

+ 1)log

+ 1) (1)

where x is the menu structure, L the maximum num-

ber of levels of x, N

the set of menus and menu items

at level i, b

the number of children of j, d

the depth

of j, assuming for the root and all menu item d = 1.

It can be easily veriﬁed that H

HAI

∈ [1, +∞): the

lower H

HAI

is, the more menu items are accessible;

when all menu items are assigned to the root menu

(i.e. no submenu is considered) H

HAI

= 1. An in-

teresting characteristic of this model is that H

HAI

index predicts the expected navigation time on the

basis only of the menu system layout. Bernard’s

model shows that though broader trees in general

tend to have better search efﬁciency than deeper trees,

topological shape has also an important effect. The

HAI

metric has been validated by comparing predic-

tions with the empirical results found by others and

Bernard himself.

Designers usually use guidelines to organize the

menu structure. They provide a collection of best

practices in organizing and structuring the menu lay-

out. Examples are Apple’s Human Interface Guide-

lines and Sun’s Java Look and Feel Guidelines.

Guidelines are either too speciﬁc or too vague, so they

do not always apply to the problem at hand. For in-

stance an Apple’s Human Interface Guidelines sug-

gests putting on menu bar some particular menus that

an user expects to ﬁnd such as “File”, “View” and

“Help”. Guidelines say, as a general rule, to avoid

creating long menus, in fact they are difﬁcult for the

user to scan and can be overwhelming, from other side

it has not to put many items in a single menu and it

needs to regrouping them in other menus. In most

guidelines, it is suggested not to go further two lev-

els of cascading menus, although in some cases it is

convenient to violate this rule.

The importance of developing usable menu sys-

tem is particular important in some domains such as

mobile phone. Zhang et al.(Zhang et al., 2007) state

menu displaying pattern should be identical with hu-

man cognition and is a key element for the efﬁciency

of the communication. They prove that users, gen-

erally, preferred menu system in which the reaction

time was faster and a hierarchical structure of menu

could help users to improve small screen operating

efﬁciency and their preference.

Hollink et al.(Hollink et al., 2007) address the op-

timization of menus with a purely navigational func-

tion and deﬁne the optimal menu as the one that mini-

mizes the average time users need to reach their target

pages. People are not always good at building hierar-

chies and at organizing menu items. However, build-

ing a quality menu system requires a large group of

users (e.g. focus groups) and a large number of tri-

als in order to ﬁnd the best way or structuring the

menu layout. Search techniques, can provide a valu-

able support in screening alternatives and in providing

starting point that can be reﬁned more efﬁciently and

effectively.

SUPPORTING MENU LAYOUT DESIGN BY GENETIC PROGRAMMING

249

3 ALGORITHM

The algorithm implemented a breeding sequence typ-

ical of evolutionary algorithms, that can be outlined

as follows:

Algorithm 1. Algorithm structure.

Generate and evaluate a random population

repeat

Select individuals for mating

Cross selected individuals

Mutate selected individuals

Apply elitism

Evaluate generated individuals

until generation limit is reached

Initial population is built using a procedure able

to meet as much as possible the given constraints and

preferences, thus assuring valid and highly ﬁtted indi-

viduals since beginning. For selection, we adopted

a tournament operator in order to reduce the effect

of ﬁtness scaling, since each individual is evaluated

according to a ﬁtness function deﬁned on logical ba-

sis, as described below. Crossover and mutation have

been implemented using a bid strategy, i.e. attempt-

ing to make a valid solution within a given number of

trials. Elitism replaced random individuals with best

individuals in order to improve performances, as this

strategy does not require to sort the population before

being applied. The algorithm was setup with standard

parameters

as follows: Crossover0.8, Mutation 0.02,

Elitism 3.

In GP menu hierarchies can be represented di-

rectly by tree based chromosomes. Therefore each in-

dividuals represent one possible menu hierarchy. The

ﬁtness function of an individual x is aimed at model-

ing the trade-off between accessibility and preference

compliance. Thus it is deﬁned as convex combination

fitness(x) = σ · H(x) + (1− σ) ·C(x) (2)

where σ ∈ [0, 1], H(x) is the degree of accessibility,

and C(x) is the degree of preference compliance. In

particular, H(x) is deﬁned as

H(x) = e

k(1−H

HAI

(x))

(3)

where H

HAI

(x) is deﬁned by Eq.(1). The constant k

controls the exponential decay.

Parameter have been chosen by a simple qualitative

analysis, according to common values adopted for them,

without any in-depth quantitative analysis for their opti-

mization.

Instead the degree of preference compliance is de-

ﬁned as the weighted mean

C(x) =

∑

i=1

¯p

(x)

∑

i=1

¯p

(4)

where m is the number of preferences, ¯p

= 1− p

the constraint importance, and c

(x) is the compliance

of x to the preference c

. Therefore, we assumed a

compensation between optimization criteria.

The problem of ﬁnding an optimal menu layout

consists in placing all action items by maximizing ac-

cessibility and preference compliance. Preferences

can be of different kinds. In our experimentation we

considered the following types:

• Path ordering (ancestor , successor): deﬁnes a

ordering relation between ancestor and successor

along a path

• Menu ordering (predecessor, follower): deﬁnes

a ordering relation between predecessor and fol-

lower whenever they coexist within the same

• Number of menu items (menu, min, max): de-

ﬁnes the min and max number of items present in

• Occurrence (item, min, max): deﬁnes the min and

max number of occurrences of item

• Level (item, min, max): deﬁnes the min and max

level for item

• Menu belonging (item, menu): item should be-

long to menu

Each preference has a priority p

∈ [1, 5], where 1 is

the highest priority (i.e. very important), 5 the lowest

(i.e. not very important). The degree of compliance

of x to each preference is computed as

(x) = 1−

(x)

(5)

with v

(x) giving the number of criterion violations of

x, and mv

(x) the maximum number of possible vio-

lations.

4 EXPERIMENTATION

As an example of application let us compose a menu

layout made of 25 action items (terminals) and 12

submenus (non terminals). Experimentation was

aimed at searching an optimal solution able to satisfy

a set of 60 preferences with a different priority and

ICEIS 2010 - 12th International Conference on Enterprise Information Systems

250

0.90

0.91

0.92

0.93

0.94

0.95

0.96

0.97

0.98

0.99

1.00

1 10 100

generations

fitness

P1000

P500

P200

P100

0.70

0.75

0.80

0.85

0.90

0.95

1.00

1 10 100

generations

fitness

P1000

P500

P200

P100

Figure 1: GP (top) and GA (bottom) ﬁtness evolution.

Figure 2: A possible solution given the set of preferences.

to score a good value of accessibility index deﬁned

in Eq. (1). Optimization was implemented using the

framework Jenes (Troiano and De Pasquale, 2009),

in order to make a direct comparison between GP and

GA convergenceas both algorithms are supported and

implementation does not affect experimental results.

We run the algorithm 5 times with different popu-

lation size (100, 200, 500 and 1000 individuals) in or-

der to limit the effect of randomness in studying and

comparing convergence. From Figure 1 we can out-

line some preliminary conclusions: (i) GP starts with

better ﬁtted individuals; (ii) GP convergence towards

optimal solutions is faster in GP; (iii) population size

is less relevant in GP than in GA. Figure 2 presents a

possible solution.

5 CONCLUSIONS

In this paper we preliminarily presented a GP algo-

rithm aimed at searching optimal trade-off between

usability and semantic preferences. This approach

seems to be promising and worth to be further in-

vestigated. In the future we wish to extend the ap-

proach presented here in order to ﬁnd experimental

evidence that solutions produced by machine are at

least as good as those made by humans, at lower ef-

fort in time and resources, even considering a larger

set of constraints. To reach this goal we plan to val-

idate this approach by means of real application to

Poste Italiane business case, and by blind test with fo-

cus groups where solutions provided by machine face

solutions provided by humans.

ACKNOWLEDGEMENTS

Special thanks to Marco Merola

(marco.merola@ciselab.org) for his technical

contribution.

REFERENCES

Bernard, M. L. (2002). Examining a metric for predicting

the accessibility of information within hypertext struc-

tures. PhD thesis, Wichita State University, Wichita,

KS, USA. Adviser-Charles G. Halcomb.

Cockburn, A., Gutwin, C., and Greenberg, S. (2007). A

predictive model of menu performance. In CHI ’07:

Proc. of Int. Conf. on Human factors in computing sys-

tems, pages 627–636, New York, NY, USA. ACM.

Fitts, P. M. (1954). The information capacity of the human

motor system in controlling the amplitude of move-

ment. J Exp Psychol, 47(6):381–391.

Hick, W. E. (1952). On the rate of gain of information.

Quarterly J. of Experimental Psychology, 4:11–26.

Hollink, V., Someren, M., and Wielinga, B. J. (2007). Nav-

igation behavior models for link structure optimiza-

tion. User Modeling and User-Adapted Interaction,

17(4):339–377.

Matsui, S. and Yamada, S. (2008). Genetic algorithm can

optimize hierarchical menus. In CHI ’08: Proc. of Int.

Conf. on Human factors in computing systems, pages

1385–1388, New York, NY, USA. ACM.

Troiano, L., Birtolo, C., Armenise, R., and Cirillo, G.

(2008). Optimization of menu layouts by means of ge-

netic algorithms. In EvoCOP, volume 4972 of LNCS,

pages 242–253. Springer.

Troiano, L. and De Pasquale, D. (2009). A java library for

genetic algorithms addressing memory and time is-

sues. In Proc. of NaBIC 2009, pages 642 –647. IEEE.

Zhang, X.-M., Shan, W., Xu, Q., Yang, B., and Zhang, Y.-

F. (2007). An ergonomics study of menu-operation

on mobile phone interface. In Intelligent Informa-

tion Technology Application, Workshop on, pages 247

–251.

SUPPORTING MENU LAYOUT DESIGN BY GENETIC PROGRAMMING

251