Genetic Programming for User Interface Optimization at EICS 2017
Proposal by Paulo Salem at EICS 2017 introduces Genetic Programming for optimizing user interfaces, addressing limitations of existing solutions. The approach utilizes programmatic specifications, structured representations, and non-deterministic choices to evolve UIs efficiently.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
User Interface Optimization using Genetic Programming with an Application to Landing Pages Paulo Salem The 9th ACM SIGCHI Symposium on Engineering Interactive Computing Systems June 26-29, 2017 - Lisbon, Portugal
The Problem Given some basic UI elements, generate UIs based on a specification that are optimal w.r.t. some performance metric. UI elements: texts, images, colors, components, etc. Working example: landing pages Users are directed to a special page Users are motivated to take some action (e.g., subscribe to a newsletter) Acquiring users is costly, therefore we want to maximize conversion rates ?????????? ???? =??????? ????? ????? ????? 2 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Existing Solutions using Genetic Algorithms UIs are individuals in a population Feature 4 Feature 1 Feature 2 Feature 3 Each UI s genome is a sequence of features Color of components Images Texts Combines with Feature 4 Feature 1 Feature 2 Feature 3 By recombining and mutating features, new UIs evolve Users can select their prefered Uis Empirical, require actual user behavior to be measured Feature 4 Feature 1 Feature 2 Feature 3 Main problem: not general, cannot express arbitrary UIs 3 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Limitations of Existing Solutions Can express superficial variations. Cannot express intrincate UI structural possibilities. Lists of features (color, size, etc.) No hierarchical composition (no reuse of subdesigns). No arbitrary programming of possibilities. 4 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Genetic Programming Programmatic specifications Program expressions instead of features. Structured representations Sections, subsections, components, subcomponents, etc. Mimics the structure of the UIs themselves. Non-deterministic choices Fitness determined by the actions of many concurrent users (i.e., crowdsourcing ) A general way to specify UIs suitable to evolutionary optimization possibilities can grow exponentially 6 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
UI Specification Content elements + + + User actions Form submission Clicks Page scroll Etc. Components Buttons Input boxes HTML blocks Etc. Hierarchical structure This is some headline This is a better headline Some other headline Etc. 7 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Programmatic UI Specification Specification given programmatically Include(LeadGenBlock, variation = 1, Sequence( Choice( Define("opacity", "0.2"), Define("opacity", "0.4") ), ParameterValue("title" -> Reference("title")), ParameterValue("tagline" -> Reference("tagline")), // (...) )) Clear definition of hierarchies and non- deterministic choices Domain-Specific Language in Scala Can also load content elements from XML: Text variations Image URLs variations Arbitrary HTML variations <multi-value name="title"> <text>Recycled furniture and home accessories</text> <text>Lovely and recycled furniture</text> <text>Taste, recycled</text> <text>Learn more about recycling with taste</text> </multi-value> 8 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Programmatic UI Specification Program statement Meaning The sequential composition of two program statements. Sequence(a, b) The non-deterministic choice among two program statements. Choice(a, b) Defines a variable named name with content value. Define(name, value) A reference to the value of the variable named name. Reference(name) The rendering of a template named blockName. Include(blockName, variation, init) Defines that a parameter named name has the value specified by reference. This must be used within an Include's init. ParameterValue(name -> reference) Primitive rendering operations, which allow the writing of the actual HTML that will be displayed later to the user. Div, B, Span, etc 9 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
UI Recombination Crossover crossover with Mutation mutate 10 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Complete Process Population of possible UIs UI specification Present some UI from population Initial random concrete UIs Users A UI specification captures a whole family of UIs. Evolve UI population Wait user interaction Users are recruited (e.g., using online advertisements) Record user actions (or timeout) Update UI fitness 11 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Evaluation Control 50 % Conversions 50 % Optimization Users Control page Random initial page Best page found 13 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Evaluation ~ 610possible concrete UIs Combinatorial explosion Regular A/B test would not work 5,462 users were recruited for the experiment 20% performance increase Conversion rate (optimized) = 12% Conversion rate (control) = 9.9% Non-numerical insights: 8 out of 10 best UIs mentions discounts or monetary savings However, it is not always clear why performance improves Efficiency ratio > 1.0 optimization performs better than control UI Seasonal effects (i.e., weekends seem to change user behavior). 14 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Future Work More experiments, in different domains More independent controls, by professional designers More programming primitives for UI specification Constraints of various kinds More basic UI elements to be composed Variations of crossover and mutation operators Find commercial customers to apply all this and more 16 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
Summary Designers must think in terms of UI families instead of unique UIs Thousands or millions of possible concrete designs Structured: hierarchical, detailed, UIs Programmatic: allows for the specification of arbitrary UI families Helps to automate part of the creative work Foundation for general UI optimization based on Genetic Programming and similar techniques Example uses Web pages, but the approach is general to any UI which: Can be built out of simpler elements Can be instrumented in order to record user actions Has a clear performance metric to be optimized Aims at making designers more productive, not at substituting them 17 Paulo Salem | User Interface Optimization using Genetic Programming with an Application to Landing Pages @ EICS 2017 - Lisbon, Portugal
