Modern web design is complex and hard to learn

“How do I make a form like this?”

Tutorials may be hard to find

Tutorials aren’t quite right

vs.

Production webpages embed best practices

.container {
  display: table;
}

vs.

.container {
  float: left;
}

Any webpage can be inspected…

But tools are overwhelming for novices

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.

Problem 1: Visually ineffective properties

Effective properties

Ineffective properties

Ineffective properties are common

✗

✗

✓

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

Problem 2: Missing conceptual knowledge

Implicit dependencies

.blue {
  z-index: 300;
}

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

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

1. Pruning ineffective properties

1. Pruning ineffective properties

1. Pruning ineffective properties

2. Computing dependencies

2. Computing dependencies

2. Computing dependencies

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

Dependency satisfied

Dependency missing

Evaluation

Study 1: Replication speed

Setup

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

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

Study 2: Conceptual learning

Setup

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

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

Ply: Visual Web Inspection

• slim@sarahlim.com
• @sliminality
• http://github.com/sliminality/ply