WebCrystal: understanding and reusing examples in web authoring

Examples have been widely used in the area of web design to help web authors create web pages. However, without actually understanding how an example is constructed, people often have trouble extracting the elements they want and incorporating them into their own design. This paper introduces WebCrystal, a web development tool that helps users understand how a web page is built. WebCrystal contributes novel interaction techniques that let the user quickly access HTML and CSS information by selecting questions regarding how a selected element is designed. It provides answers using a textual description and a customized code snippet that can be copied-and-pasted to recreate the desired properties. WebCrystal also supports combining the styles and structures from multiple elements into the generated code snippet, and provides visualizations on the web page itself to explain layout relationships. Our user study shows that WebCrystal helped both novice and experienced developers complete more tasks successfully using significantly less time.

[1]  Scott R. Klemmer,et al.  Rehearse : Helping Programmers Adapt Examples by Visualizing Execution and Highlighting Related Code , 2010 .

[2]  Brian P. Bailey,et al.  Getting inspired!: understanding how and why examples are used in creative design practice , 2009, CHI.

[3]  Takeo Igarashi,et al.  Retrieving Web Page Layouts using Sketches to Support Example-based Web Design , 2005, SBM.

[4]  Bonnie A. Nardi,et al.  A Small Matter of Programming: Perspectives on End User Computing , 1993 .

[5]  Ronen I. Brafman,et al.  Designing with interactive example galleries , 2010, CHI.

[6]  Brad A. Myers,et al.  Answering why and why not questions in user interfaces , 2006, CHI.

[7]  Paul A. Beardsley,et al.  Design galleries: a general approach to setting parameters for computer graphics and animation , 1997, SIGGRAPH.

[8]  Philip J. Guo,et al.  Two studies of opportunistic programming: interleaving web foraging, learning, and writing code , 2009, CHI.

[9]  Bonnie A. Nardi,et al.  A small matter of programming , 1993 .

[10]  Brad A. Myers,et al.  FireCrystal: Understanding interactive behaviors in dynamic web pages , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[11]  Sheelagh Carpendale,et al.  Sketching user experiences , 2012 .

[12]  Scott R. Klemmer,et al.  d.tour: style-based exploration of design example galleries , 2011, UIST.

[13]  Andrew Tomkins,et al.  The volume and evolution of web page templates , 2005, WWW '05.

[14]  Ranjitha Kumar,et al.  Bricolage: example-based retargeting for web design , 2011, CHI.

[15]  Brad A. Myers,et al.  Finding causes of program output with the Java Whyline , 2009, CHI.