Benchmarking d`algorithmes pour la génération

Universit´e Catholique de Louvain-la-Neuve
Ecole Polytechnique de Louvain
Travail de fin d’´etudes - Ann´ee acad´emique 2010-2011
Promoteur : Jean Vanderdonckt
Copromoteur : Jean-Charles Delvenne
Lecteur : Adrien Coyette
Benchmarking d’algorithmes pour la
g´ en´ eration automatique de layout
d’interfaces graphiques
Olivier Ang´ ely
Waterloo, le 29 aoˆut 2011

R´esum´e
De nombreux travaux ont ´et´e effectu´es pour trouver des mani`eres d’aider les
d´eveloppeurs d’interfaces graphiques dans leur tˆache. Les outils les plus ´evolu´es
parmi ceux cr´ees au cours de telles ´etudes allient les deux aspects principaux
du design d’interfaces graphiques, la s´election des ’widgets’ et leur placement
dans les diff´erentes fenˆetres de l’interface. Certains fournissent un environne-
ment d’´edition plus facile `a utiliser, ou encore permettent d’´evaluer la qualit´e
des r´esultats. Mais ces outils ne sont pas parfaits, et mˆeme les plus aboutis
d’entre eux ont encore des d´efauts. Le probl`eme de l’optimisation du layout des
interfaces graphiques et complexe et vaste, et de nombreuses pistes n’ont pas
´et´e explor´ees.
Dans ce contexte, nous avons r´ealis´e une ´etude comparative de plusieurs
m´ethodes de placement des ´el´ements. Nous avons ´egalement abord´e le probl`eme
d’un autre angle, en essayant d’appliquer une nouvelle m´ethode de placement,
les forces dirig´ees, d´ej`a utilis´ees en th´eorie des graphes. Nous avons rassembl´e
des informations sur les diff´erentes m´ethodes et leur impl´ementation, afin de
fournir au lecteur une bonne vue d’ensemble de chacune, et de permettre une
utilisation facile des m´ethodes, voire mˆeme une r´eimpl´ementation future sur
d’autres plates-formes. Une comparaison sur base de tests a aussi ´et´e r´ealis´ee,
afin de mettre en ´evidence les forces et faiblesses de chacune des m´ethodes
´etudi´ees, permettant d’envisager des solutions pour rem´edier aux points n´egatifs.
2

Table des mati`eres
Introduction 5
1 Le probl`eme 8
1.1 Hypoth`eses et r´e´ecriture . . . . . . . . . . . . . . . . . . . . . . . 8
1.2 Objectif recherch´e . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2 Etat de l’art 10
2.1 Processus d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 SUPPLE................................ 10
2.2.1 Motivation .......................... 10
2.2.2 L’algorithme ......................... 11
2.2.3 Exemples ........................... 13
2.2.4 Avantages, inconv´enients et analyse . . . . . . . . . . . . 14
2.3 ARNAULD .............................. 15
2.3.1 Motivation .......................... 15
2.3.2 L’algorithme ......................... 15
2.3.3 Exemples ........................... 16
2.3.4 Analyse ............................ 18
2.4 AIDE ................................. 18
2.4.1 Motivation .......................... 19
2.4.2 L’algorithme ......................... 19
2.4.3 Exemples ........................... 20
2.4.4 Analyse ............................ 22
2.5 Conclusion .............................. 22
3 Algorithme `a forces dirig´ees (SPRING) 24
3.1 Lesbases ............................... 24
3.2 Application au probl`eme donn´e . . . . . . . . . . . . . . . . . . . 25
3.2.1 Les champs d’attraction et de r´epulsion . . . . . . . . . . 26
3.2.2 La fenˆetre d’affichage . . . . . . . . . . . . . . . . . . . . 28
3.2.3 Pseudocode de l’algorithme modifi´e . . . . . . . . . . . . . 29
3.3 Probl`emes rencontr´es et am´eliorations . . . . . . . . . . . . . . . 29
3.3.1 Croisement des ´el´ements . . . . . . . . . . . . . . . . . . . 30
3.3.2 Gestion du nombre d’´el´ements . . . . . . . . . . . . . . . 32
3.3.3 R´eduction du nombre d’it´erations . . . . . . . . . . . . . . 33
3.3.4 Evaluation des solutions . . . . . . . . . . . . . . . . . . . 33
3.4 Pseudocodefinal ........................... 35
4 La m´ethode Bottom-Right 36
4.1 La m´ethode de base . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.1.1 Probl`emes rencontr´es et am´eliorations . . . . . . . . . . . 36
4.1.1.1 D´es´equilibre dans la balance . . . . . . . . . . . 37
4.1.1.2 Relations d’adjacence et de groupe . . . . . . . . 37
4.1.2 Pseudocode final . . . . . . . . . . . . . . . . . . . . . . . 38
3

4.2 Algorithme Bottom-Right par groupe . . . . . . . . . . . . . . . 40
4.2.1 Lesbases ........................... 40
4.2.2 Probl`emes et am´eliorations . . . . . . . . . . . . . . . . . 40
4.2.2.1 D´es´equilibre dans la balance . . . . . . . . . . . 41
4.2.2.2 Relations d’adjacence . . . . . . . . . . . . . . . 41
4.2.3 Pseudocode final . . . . . . . . . . . . . . . . . . . . . . . 41
5 Layout appropriateness (LA) 45
5.1 Lamesure............................... 45
5.2 L’algorithme ............................. 46
5.3 Application au probl`eme donn´e . . . . . . . . . . . . . . . . . . . 47
5.4 Probl`emes et am´eliorations . . . . . . . . . . . . . . . . . . . . . 47
5.4.1 Contraintes d’adjacence et de groupement . . . . . . . . . 47
5.4.2 Espacement des ´el´ements . . . . . . . . . . . . . . . . . . 49
5.5 Pseudocodefinal ........................... 49
6 Tests et analyse 52
6.1 Crit`eres de comparaison . . . . . . . . . . . . . . . . . . . . . . . 52
6.1.1 Complexit´es temporelle et spatiales . . . . . . . . . . . . . 52
6.1.2 Temps d’ex´ecution et ressources processeur . . . . . . . . 52
6.1.3 Qualit´e de l’interface . . . . . . . . . . . . . . . . . . . . . 53
6.2 Complexit´e .............................. 53
6.2.1 Bottom-Right......................... 53
6.2.2 Bottom-Right par groupe . . . . . . . . . . . . . . . . . . 53
6.2.3 Layout Appropriateness . . . . . . . . . . . . . . . . . . . 54
6.2.4 Forces dirig´ees . . . . . . . . . . . . . . . . . . . . . . . . 54
6.3 Interface `a 6 ´el´ements . . . . . . . . . . . . . . . . . . . . . . . . 55
6.3.1 Bottom-Right......................... 56
6.3.2 Bottom-Right par groupe . . . . . . . . . . . . . . . . . . 56
6.3.3 Layout Appropriateness . . . . . . . . . . . . . . . . . . . 57
6.3.4 Forces dirig´ees . . . . . . . . . . . . . . . . . . . . . . . . 58
6.3.5 Sensibilit´e du mod`ele . . . . . . . . . . . . . . . . . . . . . 58
6.4 Interface `a 13 ´el´ements . . . . . . . . . . . . . . . . . . . . . . . . 59
6.5 R´ecapitulatif ............................. 61
Conclusion 62
R´ef´erences 65
A Illustrations du fonctionnement des m´ethodes 66
A.1 M´ethodeSpring............................ 66
A.2 M´ethodeBR ............................. 66
A.3 M´ethodeBRG ............................ 67
A.4 M´ethodeLA ............................. 69
B Fichiers MATLAB 72
4

Introduction
De nos jours, les interfaces graphiques sont utilis´ees partout : que ce soit
dans nos t´el´ephones portables, les pages internet, les applications diverses,...
Tous les domaines sont concern´es, mˆeme ceux n’ayant pas trait `a premi`ere vue
`a l’informatique.
Le d´eveloppement d’une bonne interface n´ecessite beaucoup de temps et
de travail de la part de ses d´eveloppeurs. Mais comment caract´erise-t-on une
’bonne’ interface ?
Fig. 1: Illustration de la norme ISO 9126
La norme ISO/CEI 9126 d´efinit un langage commun pour mod´eliser les qua-
lit´es d’un logiciel, ce qui peut ˆetre ´etendu dans ce cas-ci `a une interface. Comme
le montre la Fig. 1, cette norme s´epare cette ´evaluation de qualit´e en 6 diff´erents
aspects. Une interface id´eale devrait prendre en compte tous ces aspects. Ce-
pendant, on s’aper¸coit vite que les interfaces actuelles n’en sont pas encore `a ce
stade : une interface d´evelopp´ee avec soin sera con¸cue pour ˆetre fonctionnelle,
reliable et efficiente. La portabilit´e et la facilit´e de maintenance de l’interface
sont des domaines plus ardus, car d´ependants du langage de programmation, de
la m´ethode employ´ee pour le layout, et caetera. Ainsi, une interface programm´ee
en Java Swing ne pourra pas ˆetre ais´ement transf´er´ee dans un syst`eme fonction-
nant dans un autre langage. De mˆeme, la modification de l’interface n´ecessitera
de se plonger dans le code mˆeme, et la modification de la taille d’un ´el´ement
peut contraindre le d´eveloppeur `a d’autres modifications, par effet ’boule de
neige’.
Nous allons, dans ce travail, nous int´eresser de plus pr`es au dernier de ces
aspects, l’usabilit´e.
5