Ply

A Visual Web Inspector for Learning from Professional Webpages

Sarah Lim, Josh Hibschman, Haoqi Zhang, Nell O’Rourke

Northwestern University

UIST 2018, Berlin

Modern web design is complex and hard to learn

Source: Airbnb homepage

“How do I make a form like this?”

Airbnb booking bar component

Tutorials may be hard to find

Source: Codrops.com

Tutorials aren’t quite right

Airbnb booking bar component

vs.

Source: Codepen

Production webpages embed best practices

Tabular display
.container {
  display: table;
}

vs.

Floats
.container {
  float: left;
}

Any webpage can be inspected…

Inspecting the Airbnb homepage in CDT

But tools are overwhelming for novices

Focusing on Airbnb CSS

Contributions

  • Needfinding: inspection pain points
  • Ply: a visually-aware web inspector
  • Two user studies
    • Users replicate CSS 50% more quickly
    • Learn new concepts

Needfinding

  • Surveyed undergraduate web developers (n = 20)

    • Experiences with tutorials, inspecting examples
  • In-person follow-up study (n = 10)

    • Replicating features from professional webpages using Chrome DevTools (CDT)

Novices rely on visual intuition, but existing inspection tools do not support reasoning visually about unfamiliar code.

In line with Gross and Kelleher (2010), Brandt et al. (2010), Ko, Myers, and Aung (2004)

Problem 1: Visually ineffective properties

Effective properties

Toggling properties with effects

Ineffective properties

Toggling is a no-op

Ineffective properties are common

✗ = ineffective

  • Style guides, component libraries
  • Responsive breakpoints (@media queries)
  • Interaction states

Problem 2: Missing conceptual knowledge

Implicit dependencies

Hello

.blue {
  z-index: 300;
}

Hello

.blue {
  z-index: 300;
  position: relative;
}

z-index depends upon position

Designing a learner-friendly web inspector

  1. Hide visually-irrelevant code to minimize information overload and support novices’ visual intuition

  2. Embed contextual guidance into inspector output to explain how properties coordinate

Building from Quintana et al. (2004)

Ply: a DOM and CSS inspector

Ply teaser screenshot

1. Pruning ineffective properties

Before

1. Pruning ineffective properties

Before

1. Pruning ineffective properties

Before
After

2. Computing dependencies

Show dependencies

2. Computing dependencies

Hide dependencies

2. Computing dependencies

Hover dependencies

Visual subtypes

Indiegogo Visual subtypes

Using annotations to surface design patterns (see paper)

Visual Relevance Testing

Inspiration: Visual regression testing

  1. Capture original screenshots
  2. Make changes to codebase
  3. Test for differences (visual regressions) in output

Key idea

A property is visually effective if and only if its deletion causes a regression

Original
Disable width: 100%;
Visual regression

⟹  width: 100%; is effective

Original
Disable display: block;

⟹  display: block; is ineffective

Dependency satisfied

Dependency satisfied

Dependency missing

Dependency missing

Evaluation

Study 1: Replication speed

Does pruning ineffective properties help developers replicate features more quickly?

Setup

  • n = 12, between-subjects, CDT as control
  • 40 minutes, three milestones
Ideo

Learners were faster with Ply

  • 50% faster overall (n.s., p = .06)
  • 3.5 times faster to first milestone (p = .01)
    • 2.5 vs. 8.9 minutes
Milestones

Study 2: Conceptual learning

How does embedded guidance help novice developers learn new CSS concepts?

Setup

  • n = 5 inexperienced users
  • Pre- and post-tests
  • Implicit dependencies and visual subtypes (see paper)
Oscar

Novices could identify dependencies

.header {
  position: fixed;
  z-index: 300;
}
  • Before: 0 out of 5 identified dependency between z-index and position
  • After: 5 out of 5

“Something about z-index would change as a result of position not being fixed. position: fixed; is doing something beyond pinning in place while you scroll.”

Takeaways

  • Production webpages can support authentic learning

  • CSS is nontrivial to understand – need semantic tools that support visual intuition

Learner-centered developer tools

Ply: Visual Web Inspection

NSF Delta Northwestern