Spacewalker: Rapid UI Design Exploration Using Lightweight Markup Enhancement and Crowd Genetic Programming

1. Spacewalker: Rapid UI Design Exploration Using Light
weight Markup Enhancement and Crowd Genetic
Programming
Mingyuan Zhong, Gang Li, Yang Li
CHI 2021
Jaeyeop Oh
2021.10.13

2. Contents
• Introduction
• Related Work
• System Design
• Experiments
• Discussion & Future Work

3. 2
Introduction
• Motivation
▪ UI design often requires designers to explore a wide range of options
▪ Although some tools already exist, it remains challenging to examine a large space
▪ Some existing tools require a designer to learn a new language
• Challenges
▪ Designing a markup annotation that is easy to use
▪ Developing an algorithm to allow efficient exploration of a large design space
▪ Creating a tool that can provide integrated support for design exploration

4. 3
Related Work
• Traditional UI Evaluation Methods
- A/B testing
- GoodUI1, Optimizely2 and VWO3
1https://goodui.org/
2https://www.optimizely.com/ involved in human-in-the-loop design search
3https://vwo.com/testing/ab-testing/
GoodUI

5. 4
Related Work
• Crowd-Powered UI Design & Evaluation
- Perception-oriented feedback from a non-expert crowd [26]
- Large-scale design evaluations [17]
- Collect and visualize interaction patterns for Android apps [3]
• Interactive UI Design Optimization
- Genetic algorithm

6. 5
System Design
• The Spacewalker system consists of three main components
▪ HTML specification parser ▪ Genetic algorithm backend ▪ Crowdsourcing frontend

7. 6
System Design – Markup Syntax
▪ To explore a property of an individual element, a designer follows a simple syntax
by prefixing “explore-” to the property.
▪ A designer can combine multiple properties for exploration by joining their names using
“-and” and optional values using a semicolon.

8. 7
System Design – Markup Syntax
▪ A designer can use the explore-child-id tag in a parent node with the id of each child that
corresponds a design candidate as options.
▪ Instead of exploring a design space based on elements, a designer can explore style options
with CSS selectors using the same format as a regular CSS file.

9. 8
System Design - Parsing
▪ Looks specifically for the explore-* tags, and records the options.
▪ Adds a unique HTML id to elements in order to link the attribute and option.
▪ Maintains the hierarchical layout of the elements to be explored in a separate tree structure.

10. 9
System Design – Genetic Algorithms
• Genetic representation
▪ Consider a specification that explores three attributes (A, B, C).
▪ If one configuration selected option 3 for attribute A, option 1 for attribute B, and
option 6 for attribute C => [3, 1, 6]
▪ A specific genetic sequence indicates a UI configuration.
• Fitness function
▪ 1 for the preferred design and 0 for the less preferred one.

11. 10
System Design – Genetic Algorithms
• Problems
▪ The score that a design receives is more with respect to the differences between
two designs being compared, instead of every aspect of the design.
▪ When the options shared by the pair of designs in comparison happen to be
desirable, GA yields good results. However, when these shared options are less
desirable
▪ Options that are not compared also receive positive responses

12. 11
System Design – Enhancing Genetic Algorithms
• Feedback mask
▪ bit mask
▪ same length as a genetic sequence
▪ 1 when the corresponding option is compared and favored by a crowd worker or 0
when it is not
• Diff mask
▪ represents where we would likely gain knowledge by comparing tow designs
▪ to capture the differences between their genetic sequences where the correspond-
ing bits for the differences are set to 1.

13. 12
System Design – Enhancing Genetic Algorithms
2 4 1 6 4 3
2 1 1 5 3 2
1 1 0 0 0 1
1 0 0 0 0 1
diff mask : 010111
feedback
mask
feedback
mask
2 4 1 6 4 3
1 1 0 1 1 1
fitness: 1
fitness: 0

14. 13
System Design – Enhancing Genetic Algorithms
• Initialization
▪ Generate design variations randomly
▪ The feedback mask for each genetic sequence is all zeros
• Crossover
▪ Assigning random option values to positions in the
sequence where the feedback mask is 0 in the descendants.
▪ The feedback masks also crossover
• Mutation
▪ mask is set to 0 (0.03 mutation rate)

15. 14
System Design – Architectures

16. 15
System Design – Architectures

17. 16
Experiments
• User study
▪ Two graduate students and three professional developers
▪ Four of them were trained in HCI and had experience with conducting user studies
▪ All the participants indicated at least three years of experience with web design and
development.
▪ Verbally walked them through the code snippets and demoed the usage, which
took 10-15 minutes.

18. 17
Experiments
• Exploration Performance Evaluation
▪ Compare Spacewalker against a baseline method that uniformly samples the design
space for crowd evaluation
▪ 70 raters for each methods
▪ 10 iterations with 50 design samples for Spacewalker, 500 samples for uniform sampling
▪ Select the five designs
▪ Experiment #1: Effects of Search Space Sizes
▪ Experiment #2: Effects of Web Page Designs

19. 18
Experiments
▪ Crowd raters showed significant preference for the designs generated by Spacewalker
▪ The larger the search space is the more benefit there is for using Spacewalker

20. 19
Experiments

21. 20
Experiments

22. 21
Discussion & Future Work
▪ The Spacewalker markup extension is easy to understand.
▪ Spacewalker provides integrated support to enable designers to rapidly explore a large design s
pace to improve their web UI design.
▪ Spacewalker’s genetic search algorithm significantly outperformed a uniform sampling baseline
under different search space sizes and web design types.
▪ Designers want to immediately see the effect of a design when adding an option value, instead
of examining them on a separate screen in the Preview (see Figure 2).
▪ With multiple dependencies and the resulting hierarchical design spaces, the search space for a
design grows combinatorially. Therefore, even enhanced genetic algorithm may not converge to
an optimal solution.

23. Thank you
Any questions?