Ply: A visual web inspector for learning from professional webpages

Sarah Lim, Joshua Hibschman, Haoqi Zhang, Eleanor Mary O'Rourke

Research output: Chapter in Book/Report/Conference proceedingConference contribution

1 Scopus citations

Abstract

While many online resources teach basic web development, few are designed to help novices learn the CSS concepts and design patterns experts use to implement complex visual features. Professional webpages embed these design patterns and could serve as rich learning materials, but their stylesheets are complex and difficult for novices to understand. This paper presents Ply, a CSS inspection tool that helps novices use their visual intuition to make sense of professional webpages. We introduce a new visual relevance testing technique to identify properties that have visual effects on the page, which Ply uses to hide visually irrelevant code and surface unintuitive relationships between properties. In user studies, Ply helped novice developers replicate complex web features 50% faster than those using Chrome Developer Tools, and allowed novices to recognize and explain unfamiliar concepts. These results show that visual inspection tools can support learning from complex professional webpages, even for novice developers.

Original languageEnglish (US)
Title of host publicationUIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology
PublisherAssociation for Computing Machinery, Inc
Pages991-1002
Number of pages12
ISBN (Electronic)9781450359481
DOIs
StatePublished - Oct 11 2018
Event31st Annual ACM Symposium on User Interface Software and Technology, UIST 2018 - Berlin, Germany
Duration: Oct 14 2018Oct 17 2018

Publication series

NameUIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology

Other

Other31st Annual ACM Symposium on User Interface Software and Technology, UIST 2018
CountryGermany
CityBerlin
Period10/14/1810/17/18

Keywords

  • Authentic learning
  • CSS
  • Developer tools
  • Web inspection

ASJC Scopus subject areas

  • Human-Computer Interaction
  • Computer Graphics and Computer-Aided Design
  • Software

Fingerprint Dive into the research topics of 'Ply: A visual web inspector for learning from professional webpages'. Together they form a unique fingerprint.

  • Cite this

    Lim, S., Hibschman, J., Zhang, H., & O'Rourke, E. M. (2018). Ply: A visual web inspector for learning from professional webpages. In UIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology (pp. 991-1002). (UIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology). Association for Computing Machinery, Inc. https://doi.org/10.1145/3242587.3242660