skip to main content
US FlagAn official website of the United States government
dot gov icon
Official websites use .gov
A .gov website belongs to an official government organization in the United States.
https lock icon
Secure .gov websites use HTTPS
A lock ( lock ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.


Title: Ply: A Visual Web Inspector for Learning from Professional Webpages
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 fea- tures. 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 relation- ships 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.  more » « less
Award ID(s):
1735977
PAR ID:
10073061
Author(s) / Creator(s):
; ; ;
Date Published:
Journal Name:
Symposium on User Interface Software and Technology
Format(s):
Medium: X
Sponsoring Org:
National Science Foundation
More Like this
  1. Generative AI has enabled novice designers to quickly create professional-looking visual representations for product concepts. However, novices have limited domain knowledge that could constrain their ability to write prompts that effectively explore a product design space. To understand how experts explore and communicate about design spaces, we conducted a formative study with 12 experienced product designers and found that experts — and their less-versed clients — often use visual references to guide co-design discussions rather than written descriptions. These insights inspired DesignWeaver, an interface that helps novices generate prompts for a text-to-image model by surfacing key product design dimensions from generated images into a palette for quick selection. In a study with 52 novices, DesignWeaver enabled participants to craft longer prompts with more domain-specific vocabularies, resulting in more diverse, innovative product designs. However, the nuanced prompts heightened participants’ expectations beyond what current text-to-image models could deliver. We discuss implications for AI-based product design support tools. 
    more » « less
  2. Novice programming students frequently engage in help-seeking to find information and learn about programming concepts. Among the available resources, generative AI (GenAI) chatbots appear resourceful, widely accessible, and less intimidating than human tutors. Programming instructors are actively integrating these tools into classrooms. However, our understanding of how novice programming students trust GenAI chatbots-and the factors influencing their usage-remains limited. To address this gap, we investigated the learning resource selection process of 20 novice programming students tasked with studying a programming topic. We split our participants into two groups: one using ChatGPT (n=10) and the other using a human tutor via Discord (n=10). We found that participants held strong positive perceptions of ChatGPT's speed and convenience but were wary of its inconsistent accuracy, making them reluctant to rely on it for learning entirely new topics. Accordingly, they generally preferred more trustworthy resources for learning (e.g., instructors, tutors), preferring ChatGPT for low-stakes situations or more introductory and common topics. We conclude by offering guidance to instructors on integrating LLM-based chatbots into their curricula-emphasizing verification and situational use-and to developers on designing chatbots that better address novices' trust and reliability concerns. 
    more » « less
  3. The rising frequency of natural disasters demands efficient and accurate structural damage assessments to ensure public safety and expedite recovery. Human error, inconsistent standards, and safety risks limit traditional visual inspections by engineers. Although UAVs and AI have advanced post-disaster assessments, they still lack the expert knowledge and decision-making judgment of human inspectors. This study explores how expertise shapes human–building interaction during disaster inspections by using eye tracking technology to capture the gaze patterns of expert and novice inspectors. A controlled, screen-based inspection method was employed to safely gather data, which was then used to train a machine learning model for saliency map prediction. The results highlight significant differences in visual attention between experts and novices, providing valuable insights for future inspection strategies and training novice inspectors. By integrating human expertise with automated systems, this research aims to improve the accuracy and reliability of post-disaster structural assessments, fostering more effective human–machine collaboration in disaster response efforts. 
    more » « less
  4. Existing approaches to teaching artificial intelligence and machine learning often focus on the use of pre-trained models or fine-tuning an existing black-box architecture. We believe advanced ML topics, such as optimization and adversarial examples, can be learned by early high school age students given appropriate support. Our approach focuses on enabling students to develop deep intuition about these complex concepts by first making them accessible to novices through interactive tools, pre-programmed games, and carefully designed programming activities. Then, students are able to engage with the concepts via meaningful, hands-on experiences that span the entire ML process from data collection to model optimization and inspection. 
    more » « less
  5. While much computing education research focuses on formal K-12 and undergraduate CS education, a growing body of work is exploring alternative pathways to computing careers [7, 16], alternative outcomes for computing education [15], and adult learning in workplace communities [9, 13]. Within this context, we are studying novice-friendly computational work as a pathway to computing careers. Novice-friendly computational work is a phrase we use to describe computing activities that have a low barrier to entry, are used in authentic contexts outside formal CS spaces, and are legitimate computational activities, e.g., data work [13], web design [5], and Salesforce CRM [9]. Learning through authentic work practices is a promising pathway to computing careers because it poses lower financial and findability barriers than coding bootcamps [14] and online courses [4]. However, gatekeeping culture in computing deems novice-friendly tools like Excel, HTML/CSS, and JSON distinct from “real” programming [12]. Further, novice workers may not be considered legitimate peripheral members of computing communities of practice despite engaging in legitimate computational work [6, 11]. 
    more » « less