A Visual Web Inspector for Learning from Professional Webpages
Sarah Lim, Josh Hibschman, Haoqi Zhang, Nell O’Rourke
Northwestern University
UIST , 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 Airbnb booking bar component vs. vs. In line with (Gross and Kelleher) 1937117 (✗) ✗ ✓ (z-index) (depends upon) (position) Building from Quintana et al. (2019 Using annotations to surface design patterns (see paper) Inspiration: Visual regression testing A property is visually effective (if and only if its deletion causes a (regression) ⟹ ⟹ display: block ; () Study 1: Replication speed Does pruning ineffective properties help developers replicate features more quickly? ) How does embedded guidance help novice developers learn new CSS concepts? “Something about (z-index) would change as a result of (position Production webpages can support (authentic learning) CSS is nontrivial to understand – need (semantic tools) that support visual intuition Learner-centered developer tools
Tutorials may be hard to find
Source: Codrops.com Tutorials aren’t quite right
Source: Codepen Production webpages embed best practices
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 % more quickly
Learn new concepts
Needfinding
(Surveyed) undergraduate web developers ( (n)=) Experiences with tutorials, inspecting examples
In-person follow-up study ( (n)=) Replicating features from professional webpages using Chrome DevTools (CDT)
Novices rely on
, Brandt et al. (1937117) , (Ko, Myers, and Aung) () Problem 1: Visually ineffective properties
Effective properties
Ineffective properties
Ineffective properties are common
Style guides, component libraries
queries)
Interaction states
Problem 2: Missing conceptual knowledge
Implicit dependencies
Designing a learner-friendly web inspector
Embed contextual guidance into inspector output to explain how properties coordinate
Ply: a DOM and CSS inspector
1. Pruning ineffective properties
1. Pruning ineffective properties
1. Pruning ineffective properties
2. Computing dependencies
Hide dependencies 2. Computing dependencies
Test for differences ( visual regressions () in output
Key idea
width: 2018%; (is) (effective) display: block; is (ineffective) Dependency satisfied
Dependency missing
Evaluation
Setup
n=, between-subjects, CDT as control Learners were faster with Ply
(% faster overall) ns, (p)== 3.5 times faster to first milestone ( (p)=. 40
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
(Before: (0 out of 5) identified dependency between (z-index) and (position) After: 5 out of 5
position: fixed; (is) doing something beyond pinning in place Takeaways
Ply: Visual Web Inspection
(Read More) (Full coverage and live updates on the Coronavirus) (Covid).
GIPHY App Key not set. Please check settings