1. Vers des interfaces
graphiques flexibles de
configuration
Simon Urli, Guillaume Perez, Heytem Zitoun, Mireille Blay-Fornarino,
Philippe Collet, Philippe Renevier-Gonin
urli@i3s.unice.fr
Laboratoire I3S
Université Nice Sophia Antipolis

2. 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
Journée Lignes de Produits 2012 2 / 34 S. Urli

3. Exemple d’interfaces ad-hoc
Journée Lignes de Produits 2012 3 / 34 S. Urli

4. Exemple d’interfaces ad-hoc
Journée Lignes de Produits 2012 3 / 34 S. Urli

5. Configuration à partir
d’un FM
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 4 / 34 S. Urli

6. Configurateur Associé
(FeatureIDE)
Journée Lignes de Produits 2012 5 / 34 S. Urli

7. Configurateur Associé
(FeatureIDE)
Sélection : double clic
Journée Lignes de Produits 2012 6 / 34 S. Urli

8. Configurateur Associé
(FeatureIDE)
Sélection : double clic
Déselection : quatre clics
Journée Lignes de Produits 2012 7 / 34 S. Urli

9. Configurateur Associé
(FeatureIDE)
Sélection : double clic
Déselection : quatre clics
Impossible de changer le
type d’information ?
Journée Lignes de Produits 2012 8 / 34 S. Urli

10. Configurateur Associé
(FeatureIDE)
Sélection : double clic
Déselection : quatre clics
Impossible de changer le
type d’information ?
Que signifie ce filtre ?
Journée Lignes de Produits 2012 9 / 34 S. Urli

11. Perspectives
et
discussions
Journée Lignes de Produits 2012
Journée Lignes de Produits 2012 10 / 34 S. Urli

12. Cas d’étude :YourCast
Perspectives
et
discussions
Journée Lignes de Produits 2012
Journée Lignes de Produits 2012 10 / 34 S. Urli

13. Cas d’étude :YourCast
Besoins
Perspectives
et
discussions
Journée Lignes de Produits 2012
Journée Lignes de Produits 2012 10 / 34 S. Urli

14. Cas d’étude :YourCast
Besoins
Première solution
Perspectives
et
discussions
Journée Lignes de Produits 2012
Journée Lignes de Produits 2012 10 / 34 S. Urli

15. Cas d’étude :YourCast
Besoins
Première solution
Perspectives
et
discussions
Journée Lignes de Produits 2012
Journée Lignes de Produits 2012 10 / 34 S. Urli

16. Cas d’étude
Imaginez votre diffuseur d’informations personnalisé
Journée Lignes de Produits 2012 11 / 34 S. Urli

17. Cas d’étude :YourCast
Journée Lignes de Produits 2012 12 / 34 S. Urli

18. Cas d’étude :YourCast
Journée Lignes de Produits 2012 13 / 34 S. Urli

19. Cas d’étude :YourCast
Journée Lignes de Produits 2012 13 / 34 S. Urli

20. Différentes Lignes de Produits
Journée Lignes de Produits 2012 14 / 34 S. Urli

21. Différentes Lignes de Produits
Sources
Journée Lignes de Produits 2012 14 / 34 S. Urli

22. Différentes Lignes de Produits
Sources
Layouts
Journée Lignes de Produits 2012 14 / 34 S. Urli

23. Différentes Lignes de Produits
Sources
Renderers
Layouts
Journée Lignes de Produits 2012 14 / 34 S. Urli

24. 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
Journée Lignes de Produits 2012 15 / 34 S. Urli

25. Source
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 16 / 34 S. Urli

26. Solution : interface ad-hoc
Feature : AlbumPhoto
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
Journée Lignes de Produits 2012 17 / 34 S. Urli

27. Solution : interface ad-hoc
Principaux
critères de
discrimination
Feature : AlbumPhoto
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
Journée Lignes de Produits 2012 17 / 34 S. Urli

28. Solution : interface ad-hoc
Principaux
critères de
discrimination
Critères
supplémentaires
(arborescents)
Feature : AlbumPhoto
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
Journée Lignes de Produits 2012 17 / 34 S. Urli

29. Solution : interface ad-hoc
Principaux
critères de
discrimination
Critères
supplémentaires
(arborescents)
Feature : AlbumPhoto
Zone
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
d’explications
Journée Lignes de Produits 2012 17 / 34 S. Urli

30. Solution : interface ad-hoc
Principaux
Utilisation critères de
d’images discrimination
Critères
supplémentaires
(arborescents)
Feature : AlbumPhoto
Zone
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
d’explications
Journée Lignes de Produits 2012 17 / 34 S. Urli

31. Solution : interface ad-hoc
Principaux
Utilisation critères de
d’images discrimination
Critères
supplémentaires
(arborescents)
Utilisation
d’explications
Feature : AlbumPhoto
Zone
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
d’explications
Journée Lignes de Produits 2012 17 / 34 S. Urli

32. Gérer l’évolution de la
ligne ?
Source
TypeInfo Criteria
Forecast Tweets Calendar PictureAlbum Filter Sort
Weather2 Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 18 / 34 S. Urli

33. Gérer l’évolution de la
ligne ?
Source
Services TypeInfo Criteria
Twitter IcalReader HyperCal FlickR Picasa Tweets Calendar PictureAlbum Filter Sort
TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 19 / 34 S. Urli

34. Conserver la même interface pour les
différentes lignes ?
Layout
Property Design Product Zones
Usage Target CA EPU IRSAM N2I Noel LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom
Academic Disabilities Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo
Visual
Journée Lignes de Produits 2012 20 / 34 S. Urli

35. Changer l’interface sans
modifier la ligne ?
Journée Lignes de Produits 2012 21 / 34 S. Urli

36. Solution : annoter les FMs pour
adapter automatique l’interface
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 22 / 34 S. Urli

37. Solution : annoter les FMs pour
adapter automatique l’interface
1er niveau de
sélection Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 22 / 34 S. Urli

38. Solution : annoter les FMs pour
adapter automatique l’interface
1er niveau de
sélection Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Feature :
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums
Journée Lignes de Produits 2012 22 / 34 S. Urli

39. Solution : annoter les FMs pour
adapter automatique l’interface
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 23 / 34 S. Urli

40. Solution : annoter les FMs pour
adapter automatique l’interface
2ème niveau
de sélection Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 23 / 34 S. Urli

41. Solution : annoter les FMs pour
adapter automatique l’interface
2ème niveau
de sélection Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Feature :
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums
Journée Lignes de Produits 2012 23 / 34 S. Urli

42. Solution : annoter les FMs pour
adapter automatique l’interface
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 24 / 34 S. Urli

43. Solution : annoter les FMs pour
adapter automatique l’interface
Définition des
Source «critères»
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Journée Lignes de Produits 2012 24 / 34 S. Urli

44. Solution : annoter les FMs pour
adapter automatique l’interface
Définition des
Source «critères»
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Feature :
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums
Journée Lignes de Produits 2012 24 / 34 S. Urli

45. 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
Journée Lignes de Produits 2012 25 / 34 S. Urli

46. Exemple de fichier d’annotation
Source
TypeInfo Criteria
Tweets Calendar PictureAlbum Filter Sort
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Tweets logo=logoTwitter.png : first ; Description
Calendar logo=logoCalendar.png : first ; ... 3 niveaux :
PictureAlbum logo=logoAlbum.png : first ; ...
Twitter : second
first, second et criteria
ICalReader : second ; ...
HyperCal : second ; ...
FlickR logo=FlickR.png : second
Utilisation de l’héritage dans
Picasa logo=Picasa.png : second les critères et dans les images
Criteria : criteria pour Twitter et les calendriers
Period : criteria ; Filtre sur une période de temps
Journée Lignes de Produits 2012 26 / 34 S. Urli

47. Interface obtenue
Feature : AlbumPhoto
Sélectionnez cette feature si vous souhaitez diffuser un ou plusieurs albums photos.
Journée Lignes de Produits 2012 27 / 34 S. Urli

48. Architecture globale du
système
SpineFM
Feature
Moteur de
Models
FAMILIAR raisonnement
feature
sélections
models
Tocsin notifications
Annotations Interface de
Configuration
IHM
Journée Lignes de Produits 2012 28 / 34 S. Urli

49. 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
Journée Lignes de Produits 2012 29 / 34 S. Urli

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

51. Perspectives
• Redéfinition de l’interface avec des
ergonomes
Journée Lignes de Produits 2012 30 / 34 S. Urli

52. Perspectives
• Redéfinition de l’interface avec des
ergonomes
• Enrichissement de la grammaire en fonction
des besoins (ex: modularité de l’héritage...)
Journée Lignes de Produits 2012 30 / 34 S. Urli

53. 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
Journée Lignes de Produits 2012 30 / 34 S. Urli

54. Principe d’une MSPL
Source Layout
Property Design Product Zones
TypeInfo Criteria
Usage Target CA EPU IRSAM N2I Noel LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom
Tweets Calendar PictureAlbum Filter Sort
Academic Disabilities Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo
Visual
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Renderer
TypeInfo Format
Tweets Calendar PictureAlbum Ligne Cadre
ContentOnly FullTweet Day Week Month Mosaic Slide Content Logo Text Picture Title
Journée Lignes de Produits 2012 31 / 34 S. Urli

55. Principe d’une MSPL
Source Layout
Property Design Product Zones
TypeInfo Criteria
Usage Target CA EPU IRSAM N2I Noel LayoutIRSAM LayoutEPU LayoutCA BigSquareCenter ThinBarBottom
Tweets Calendar PictureAlbum Filter Sort
Academic Disabilities Students Children AnyPeople ThinBarBottomNoLogo ThinBarBottomLogo
Visual
Twitter ICalReader HyperCal FlickR Picasa TimeLine Album Period Popularity Date Name
Renderer
TypeInfo Format
Tweets Calendar PictureAlbum Ligne Cadre
ContentOnly FullTweet Day Week Month Mosaic Slide Content Logo Text Picture Title
Journée Lignes de Produits 2012 31 / 34 S. Urli

56. Interface de configuration
d’une MSPL
Journée Lignes de Produits 2012 32 / 34 S. Urli

57. Interface de configuration
d’une MSPL
Journée Lignes de Produits 2012 32 / 34 S. Urli

58. Interface de configuration d’une
MSPL : de nouveaux besoins
Journée Lignes de Produits 2012 33 / 34 S. Urli

59. Interface de configuration d’une
MSPL : de nouveaux besoins
• Configuration de différents composants
Journée Lignes de Produits 2012 33 / 34 S. Urli

60. Interface de configuration d’une
MSPL : de nouveaux besoins
• Configuration de différents composants
‣ Besoin d’homogénéité dans l’interface
Journée Lignes de Produits 2012 33 / 34 S. Urli

61. Interface de configuration d’une
MSPL : de nouveaux besoins
• Configuration de différents composants
‣ Besoin d’homogénéité dans l’interface
• Absence d’ordre dans les configurations
Journée Lignes de Produits 2012 33 / 34 S. Urli

62. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

63. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

64. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

65. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

66. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

67. Interface de configuration d’une
MSPL : de nouveaux besoins
• 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
Journée Lignes de Produits 2012 33 / 34 S. Urli

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

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