420 likes | 610 Views
Interactive Genetic Algorithms for Creative Enhancement in UI design. Dimitri Masson Alexandre Demeure Gaelle Calvary. 25 juin 2010. Problem statement. User Interface (UI) design is a creative process General question: How to support designers’ exploration of the design space?.
E N D
Interactive Genetic Algorithmsfor Creative Enhancement in UI design Dimitri Masson Alexandre Demeure Gaelle Calvary 25 juin 2010
Problem statement User Interface (UI) design is a creative process General question: How to support designers’ exploration of the design space? Instantmessenger Design spaceof possible UIs … …
My research proposal • Presentation of generated design solutions for theapplication under study • Motivation • Compliance with designers’ practice: samples browsing • Sources of inspiration
Outline State of the art Approach Prototype Early evaluation Conclusion and future work
State of the art • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process • Design process • Tools • Model Based UI
State of the art • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process • Design process • Tools • Model Based UI
State of the art • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process • Design process • Tools • Model Based UI
State of the art: Creative process • A Darwinian process Variation & recombination Selective retention
State of the art: Creative process • A Darwinian process Variation & recombination Selective retention
State of the art: Creative process A Darwinian process Variation & recombination Selective retention
State of the art • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process and places of creativity • Design process • Tools • Model Based UI
State of the art: IGA Interactive Genetic Algorithms: Suitable for large problem space for which • no analytical method can be applied • but candidate solutions can be evaluated Variation & recombination Selective retention Performed by the system Performed by the designer
State of the art: IGA 0.1 0.2 0.2 0.22 Design space Evaluate candidate solutions Init a population of candidate solutions Select promising candidate solutions Apply mutation and crossbreedings
State of the art • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process • Design process • Tools • Model Based UI
State of the art: IGA & HCI • Three contributions: [Monmarché 1999 & Oliver 2002] [Quiroz 2007] [Plessi 2008] • Input: one UI sample • Dimensions of the design space: fonts, colors, layout • Output: definitive UIs for the end-user not for the designer
State of the art: IGA & HCI The exploration of the design space is limited • Evolution is limited to predefined elements • The UI remains basically the same Absence of high level description of the UI.
State of the art: IGA & HCI Absence of high level description of the UI. As a result: • Evolution is limited to predefined elements • The UI remains basically the same • No widget substitution dd/mm/yy
State of the art: IGA & HCI Absence of high level description of the UI. As a result: • Evolution is limited to predefined elements • The UI remains basically the same • No widget substitution • No UI enrichment dd/mm/yy Select a date: dd/mm/yy
State of the art: coverage • Creativity • Creative person • Creative product • Creative process • Creative evolutionary systems • Interactive Genetic Algorithms (IGA) • IGA & HCI • UI design process • Design process • Tools • Model Based UI
State of the art: Model based UI • High level description of the UI: concept & task model • Transformations Transformation 1 Transformation 2 … Transformation N
Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works
My approach • Three key points: #1 Combination of IGA and Model Based UI at C&T. #2 Evolution of transformations from C&T UI #3 Support from a knowledge database uses IGA Concept and task (C&T) Transformations (C&T UI) Evolve Transformations (C&T UI)
My approach: #2 transformation • Transformation = one tree • Edges: Select C&T elements • Nodes: Translate C&T elements into UI elements Root of the task Root of transformation Select choices Select abstract tasks Translate into windows Translate into radiobuttons Select descendants abstract tasks Translate into frames with a red background
My approach: #2 Genetic operations • Mutation • Edge: changing selector • Node: Changing translation • Add/remove nodes Select choices Select abstract tasks Translate into windows Translate into radiobuttons Select descendants abstract tasks Select children abstract tasks Translate into comboboxes Translate into frames 24
My approach: #2 Genetic operations Crossbreeding
My approach: #3 Knowledge database Widget representations for each task Attributes for each widget and manipulation function Choice of date Entry text Calendar Width Height Format Background color Foreground color 23/11/08
Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works
Prototype: Implementation • TCL • COMET: a widget toolkit [Demeure 2008] • Task level interactors supporting multiple presentations • Database storing design knowledge
Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works
Early evaluation • The purpose is to • assess the effectiveness of the approach by collecting as many ideas and practices as possible • identify new areas for improvement • The purpose is not to • assess the creativity improvement • evaluate the usability of the prototype
Early evaluation: Protocol • Protocol defined with N. Mandran, sociologist • Face-to-face semi-structured interviews • Questionnaire about design activity • Personal activity, Design practices, tools, etc. • Sketch design of an Instant Messenger • e.g.: Sketches done by E1, Appendix C • Manipulation of Magellan • Thinking aloud technique • 11 participants: Designers, HCI experts, Students • 2h/interview + 4h/post-analysis (> 2 weeks)
Early evaluation: Results I conducted an experiment to test 3 hypothesis • Designers find benefits from the IGA approach. • “Not perfect but interesting”. • The process enable to reject bad UIs. • Designers find the evolution of widgets valuable. • Presentation of elements in the actual UI. • Designers find the UI enrichment valuable. • Few even notice the enrichment process. As well as eliciting unforeseen needs about such approach. • Need for layout support. • Need for User Interaction.
Outline State of the art Approach Prototype Early evaluation Conclusion and future work
Conclusion: My contributions • Increment on previous approaches: IGA & MBUI • Transformation as individual representation • Widget substitution • UI enrichment • Early inquiry of designers’ needs • Previous work focus more on the IGA than on the HCI • Magellan • [Masson 2010]: ACM EICS, Berlin, June 20-23
Conclusion: Difficulties • Large scope of the state of the art • Automatic generation of UI is complex • Conducting experiment is complex • Very long to set up • Require experience • IGA requires a good modeling of individuals and fine tuning of the process
Conclusion: Future work • Direct edition of the samples presented • Integration of user sketches • Support several level of fidelity • Partial UI evaluation and evolution • New evaluation
Research direction Presentation of generated design options.
Early evaluation: findings • Purpose 1: Assess the effectiveness of the approach by collecting as many ideas and practices as possible • H1: Designers find benefits from the IGA approach • “Not perfect but interesting”. • The process enable to reject bad UIs • H2 • H3 • identify new areas for improvement