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 Citation (Scopus)

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

Other

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

Fingerprint

Inspection
Testing

Keywords

  • Authentic learning
  • CSS
  • Developer tools
  • Web inspection

ASJC Scopus subject areas

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

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). Association for Computing Machinery, Inc. https://doi.org/10.1145/3242587.3242660
Lim, Sarah ; Hibschman, Joshua ; Zhang, Haoqi ; O'Rourke, Eleanor Mary. / Ply : A visual web inspector for learning from professional webpages. UIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. Association for Computing Machinery, Inc, 2018. pp. 991-1002
@inproceedings{862a8139a70245c0a5ec08a3272a6850,
title = "Ply: A visual web inspector for learning from professional webpages",
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.",
keywords = "Authentic learning, CSS, Developer tools, Web inspection",
author = "Sarah Lim and Joshua Hibschman and Haoqi Zhang and O'Rourke, {Eleanor Mary}",
year = "2018",
month = "10",
day = "11",
doi = "10.1145/3242587.3242660",
language = "English (US)",
pages = "991--1002",
booktitle = "UIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology",
publisher = "Association for Computing Machinery, Inc",

}

Lim, S, Hibschman, J, Zhang, H & O'Rourke, EM 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. Association for Computing Machinery, Inc, pp. 991-1002, 31st Annual ACM Symposium on User Interface Software and Technology, UIST 2018, Berlin, Germany, 10/14/18. https://doi.org/10.1145/3242587.3242660

Ply : A visual web inspector for learning from professional webpages. / Lim, Sarah; Hibschman, Joshua; Zhang, Haoqi; O'Rourke, Eleanor Mary.

UIST 2018 - Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. Association for Computing Machinery, Inc, 2018. p. 991-1002.

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

TY - GEN

T1 - Ply

T2 - A visual web inspector for learning from professional webpages

AU - Lim, Sarah

AU - Hibschman, Joshua

AU - Zhang, Haoqi

AU - O'Rourke, Eleanor Mary

PY - 2018/10/11

Y1 - 2018/10/11

N2 - 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.

AB - 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.

KW - Authentic learning

KW - CSS

KW - Developer tools

KW - Web inspection

UR - http://www.scopus.com/inward/record.url?scp=85056812904&partnerID=8YFLogxK

UR - http://www.scopus.com/inward/citedby.url?scp=85056812904&partnerID=8YFLogxK

U2 - 10.1145/3242587.3242660

DO - 10.1145/3242587.3242660

M3 - Conference contribution

SP - 991

EP - 1002

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

PB - Association for Computing Machinery, Inc

ER -

Lim S, Hibschman J, Zhang H, O'Rourke EM. 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. Association for Computing Machinery, Inc. 2018. p. 991-1002 https://doi.org/10.1145/3242587.3242660