69
Vers des interfaces graphiques flexibles de configuration Simon Urli, Guillaume Perez, Heytem Zitoun, Mireille Blay-Fornarino, Philippe Collet, Philippe Renevier-Gonin [email protected] Laboratoire I3S Université Nice Sophia Antipolis

Vers des interfaces graphiques flexibles de configurations

Embed Size (px)

Citation preview

Page 1: Vers des interfaces graphiques flexibles de configurations

Vers des interfaces graphiques flexibles de

configurationSimon Urli, Guillaume Perez, Heytem Zitoun, Mireille Blay-Fornarino,

Philippe Collet, Philippe Renevier-Gonin

[email protected] I3S

Université Nice Sophia Antipolis

Page 2: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Introduction

• Importante complexité des configurations dans les SPL

• Existence d’IHM de configurations très esthétiques mais fortement ad-hoc

• Existence d’outils de configurations directement générés à partir de FMs mais difficilement utilisables

2

Page 3: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Exemple d’interfaces ad-hoc

3

Page 4: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Exemple d’interfaces ad-hoc

3

Page 5: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configuration à partir d’un FM

4

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Page 6: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configurateur Associé (FeatureIDE)

5

Page 7: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configurateur Associé (FeatureIDE)

Sélection : double clic

6

Page 8: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configurateur Associé (FeatureIDE)

Sélection : double clicDéselection : quatre clics

7

Page 9: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configurateur Associé (FeatureIDE)

Sélection : double clicDéselection : quatre clics

Impossible de changer le type d’information ?

8

Page 10: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Configurateur Associé (FeatureIDE)

Sélection : double clicDéselection : quatre clics

Impossible de changer le type d’information ?

Que signifie ce filtre ?

9

Page 11: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Perspectives et

discussions

10Journée Lignes de Produits 2012

Page 12: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude :YourCast

Perspectives et

discussions

10Journée Lignes de Produits 2012

Page 13: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude :YourCastBesoins

Perspectives et

discussions

10Journée Lignes de Produits 2012

Page 14: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude :YourCastBesoins

Première solution

Perspectives et

discussions

10Journée Lignes de Produits 2012

Page 15: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude :YourCastBesoins

Première solution

Perspectives et

discussions

10Journée Lignes de Produits 2012

Page 16: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude

Imaginez votre diffuseur d’informations personnalisé

11

Page 17: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude : YourCast

12

Page 18: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude : YourCast

13

Page 19: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Cas d’étude : YourCast

13

Page 20: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Différentes Lignes de Produits

14

Page 21: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Différentes Lignes de ProduitsSources

14

Page 22: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Différentes Lignes de Produits

Layouts

Sources

14

Page 23: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Différentes Lignes de Produits

Layouts

Renderers

Sources

14

Page 24: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Ce que l’on souhaiterait montrer

• Des niveaux de sélection

• Une sémantique intuitive sur la signification des features

• Des explications dans le cas où on ne peut expliquer simplement le rôle d’une feature

15

Page 25: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Source

16

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Page 26: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Page 27: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Principaux critères de

discrimination

Page 28: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Principaux critères de

discrimination

Critères supplémentaires (arborescents)

Page 29: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Principaux critères de

discrimination

Critères supplémentaires (arborescents)

Zone d’explications

Page 30: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Principaux critères de

discrimination

Critères supplémentaires (arborescents)

Zone d’explications

Utilisation d’images

Page 31: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Feature : AlbumPhotoSélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Solution : interface ad-hoc

17

Principaux critères de

discrimination

Critères supplémentaires (arborescents)

Zone d’explications

Utilisation d’images

Utilisation d’explications

Page 32: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Gérer l’évolution de la ligne ?

18

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Forecast

Weather2

Page 33: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Gérer l’évolution de la ligne ?

19

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

TimeLine Album Period Popularity Date Name

Services

Twitter IcalReader HyperCal FlickR Picasa

Page 34: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Conserver la même interface pour les différentes lignes ?

20

Layout

Property Design Product Zones

Usage Target EPU NoelCA N2IIRSAM LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom

Academic Disabilities

Visual

Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo

Page 35: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Changer l’interface sans modifier la ligne ?

21

Page 36: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Solution : annoter les FMs pour adapter automatique l’interface

22

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Page 37: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Solution : annoter les FMs pour adapter automatique l’interface

22

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

1er niveau de sélection

Page 38: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Solution : annoter les FMs pour adapter automatique l’interface

22

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Feature : Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums

1er niveau de sélection

Page 39: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3423

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Solution : annoter les FMs pour adapter automatique l’interface

Page 40: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3423

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

2ème niveau de sélection

Solution : annoter les FMs pour adapter automatique l’interface

Page 41: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3423

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Feature : Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums

2ème niveau de sélection

Solution : annoter les FMs pour adapter automatique l’interface

Page 42: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3424

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Solution : annoter les FMs pour adapter automatique l’interface

Page 43: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3424

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Définition des «critères»

Solution : annoter les FMs pour adapter automatique l’interface

Page 44: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 3424

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Feature : Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums

Définition des «critères»

Solution : annoter les FMs pour adapter automatique l’interface

Page 45: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Annotations

• 1 fichier d’annotation par FM

• 1 règle par feature

• 3 niveaux possibles + 1 niveau «caché»

• 1 image possible

• 1 description (explication) possible

• + héritage des niveaux et des images

25

Page 46: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Exemple de fichier d’annotation

26

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Tweets logo=logoTwitter.png : first ; DescriptionCalendar logo=logoCalendar.png : first ; ...PictureAlbum logo=logoAlbum.png : first ; ...Twitter : secondICalReader : second ; ...HyperCal : second ; ...FlickR logo=FlickR.png : secondPicasa logo=Picasa.png : secondCriteria : criteriaPeriod : criteria ; Filtre sur une période de temps

3 niveaux : first, second et criteria

Utilisation de l’héritage dans les critères et dans les images pour Twitter et les calendriers

Page 47: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface obtenue

27

Feature : AlbumPhoto

Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.

Page 48: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Architecture globale du système

28

SpineFMMoteur de

raisonnement

TocsinInterface de

Configuration

featuremodelssélections

Feature Models

FAMILIAR

Annotationsnotifications

IHM

Page 49: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Etat des lieux

• Possibilité d’annoter des FMs

• Adaptation automatique d’une interface à partir des FMs

• Séparation nette des préoccupations entre les FMs et les annotations

29

Page 50: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Perspectives

30

Page 51: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Perspectives

• Redéfinition de l’interface avec des ergonomes

30

Page 52: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Perspectives

• Redéfinition de l’interface avec des ergonomes

• Enrichissement de la grammaire en fonction des besoins (ex: modularité de l’héritage...)

30

Page 53: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Perspectives

• Redéfinition de l’interface avec des ergonomes

• Enrichissement de la grammaire en fonction des besoins (ex: modularité de l’héritage...)

• Apparition de nouveaux problèmes et besoins : définition d’une interface pour gérer une MSPL

30

Page 54: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Principe d’une MSPL

31

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Layout

Property Design Product Zones

Usage Target EPU NoelCA N2IIRSAM LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom

Academic Disabilities

Visual

Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo

Renderer

TypeInfo Format

Tweets Calendar PictureAlbum Ligne Cadre

ContentOnly Day Mosaic Slide Content Logo Text PictureWeek MonthFullTweet Title

Page 55: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Principe d’une MSPL

31

Source

TypeInfo Criteria

Tweets Calendar PictureAlbum Filter Sort

Twitter ICalReader FlickR Picasa TimeLine Album Period Popularity Date NameHyperCal

Layout

Property Design Product Zones

Usage Target EPU NoelCA N2IIRSAM LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom

Academic Disabilities

Visual

Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo

Renderer

TypeInfo Format

Tweets Calendar PictureAlbum Ligne Cadre

ContentOnly Day Mosaic Slide Content Logo Text PictureWeek MonthFullTweet Title

Page 56: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL

32

Page 57: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL

32

Page 58: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

Page 59: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

Page 60: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

Page 61: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

Page 62: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

Page 63: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

• Contraintes inter-SPLs

Page 64: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

• Contraintes inter-SPLs

‣ Besoin de réduire les choix de l’utilisateur sans le perdre

Page 65: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

• Contraintes inter-SPLs

‣ Besoin de réduire les choix de l’utilisateur sans le perdre

• Création d’un produit global conforme à la MSPL

Page 66: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

• Contraintes inter-SPLs

‣ Besoin de réduire les choix de l’utilisateur sans le perdre

• Création d’un produit global conforme à la MSPL

‣ Besoin de voir et créer les relations entre les composants

Page 67: Vers des interfaces graphiques flexibles de configurations

Journée Lignes de Produits 2012 S. Urli/ 34

Interface de configuration d’une MSPL : de nouveaux besoins

33

• Configuration de différents composants

‣ Besoin d’homogénéité dans l’interface

• Absence d’ordre dans les configurations

‣ Besoin de pouvoir accéder à n’importe quel SPL à tout moment

• Contraintes inter-SPLs

‣ Besoin de réduire les choix de l’utilisateur sans le perdre

• Création d’un produit global conforme à la MSPL

‣ Besoin de voir et créer les relations entre les composants

‣ Besoin d’avoir une vue synthétique du produit

Page 68: Vers des interfaces graphiques flexibles de configurations

S. UrliJournée Lignes de Produits 2012 / 34

Merci !

34

Page 69: Vers des interfaces graphiques flexibles de configurations

S. UrliJournée Lignes de Produits 2012 / 34

Merci !

34