1 / 41

Interactive Genetic Algorithms for Creative Enhancement in UI design

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?.

aleda
Télécharger la présentation

Interactive Genetic Algorithms for Creative Enhancement in UI design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interactive Genetic Algorithmsfor Creative Enhancement in UI design Dimitri Masson Alexandre Demeure Gaelle Calvary 25 juin 2010

  2. 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 … …

  3. My research proposal • Presentation of generated design solutions for theapplication under study • Motivation • Compliance with designers’ practice: samples browsing • Sources of inspiration

  4. Outline State of the art Approach Prototype Early evaluation Conclusion and future work

  5. 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

  6. 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

  7. 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

  8. State of the art: Creative process • A Darwinian process Variation & recombination Selective retention

  9. State of the art: Creative process • A Darwinian process Variation & recombination Selective retention

  10. State of the art: Creative process A Darwinian process Variation & recombination Selective retention

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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.

  17. 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

  18. 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

  19. 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

  20. State of the art: Model based UI • High level description of the UI: concept & task model • Transformations Transformation 1 Transformation 2 … Transformation N

  21. Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works

  22. 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)

  23. 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

  24. 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

  25. My approach: #2 Genetic operations Crossbreeding

  26. 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

  27. Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works

  28. VIDEO

  29. Prototype: Implementation • TCL • COMET: a widget toolkit [Demeure 2008] • Task level interactors supporting multiple presentations • Database storing design knowledge

  30. Outline • State of the art • Approach • Prototype • Early evaluation • Conclusion and future works

  31. 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

  32. 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)

  33. 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.

  34. Outline State of the art Approach Prototype Early evaluation Conclusion and future work

  35. 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

  36. 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

  37. 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

  38. Questions

  39. Research direction Presentation of generated design options.

  40. A faire nb de ligne de code.

  41. 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

More Related