WebCrystal: Understanding and Reusing Examples in Web Authoring

Download PDF
2 downloads 99 Views 3MB Size Report
Comment
Examples have been widely used in the area of web design to help web authors create ..... In a study of online code example usage [1], re- searchers found that ...
WebCrystal: Understanding and Reusing Examples in Web Authoring Kerry Shih-Ping Chang Human-Computer Interaction Institute Carnegie Mellon University Pittsburgh, PA 15213 [email protected]

Brad A. Myers Human-Computer Interaction Institute Carnegie Mellon University Pittsburgh, PA 15213 [email protected]

ABSTRACT

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. Author Keywords

Web Authoring, Examples. ACM Classification Keywords

H.5.2 [Information interfaces and presentation]: User Interfaces - Interaction styles; D.2.6 [Software Engineering]: Programming Environments - Graphical Environments; Design Tools and Techniques - User interfaces. General Terms

Design, Human Factors. INTRODUCTION

Increasingly, Internet users with minimal technical training are creating their own web pages. This involves not only authoring the content, but also designing the appearance and behaviors of the web pages. Good design is important to improve the readability and usability of the pages, and also to reflect the unique personality of their creator. Using templates or a “wizard” interface to build a web site are Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. CHI’12, May 5–10, 2012, Austin, Texas, USA. Copyright 2012 ACM 978-1-4503-1015-4/12/05...$10.00.

2

1

Figure 1: A WebCrystal user finds out how to lay out a list structure by inspecting an example web page, by (1) asking a position question of the selected list element in WebCrystal, and (2) inspecting the black area around the element on the web page.

common ways to create a well-designed web page without writing any actual code [7]. However, these techniques cannot fully satisfy every user’s needs since people have different requirements and aesthetic preferences for their web pages [13]. Previous research has shown that one popular way for users to build a customized web page is through the use of examples, and that this results in pages with higher ratings [14]. It has also been reported that web designers in the real world often look at other people’s websites, pick the pieces they like, and combine these pieces in their own designs [10]. In general, a popular way for developers to learn how to create code for any task is to look at examples [1]. One of the participants in our user study mentioned his own web design experience: “The best thing about web design is that all the code is open source… you can always go to the websites you like and see how they work.” Potentially, every web page can serve as a design example for people who like some aspect of its design or want to learn how it achieved some effect. Assisting reuse of desired design elements from a web page could thus be very beneficial to many web designers.

Even after deciding on a design for a web page element, a person must know how to achieve that design. Thus, people must serve as both the designers for the style of a web page, as well as the developers, who write the code to implement the design. Reproducing a complex design from an example requires a person to have a decent knowledge about web development languages, even when using modern tools like Adobe Dreamweaver or Microsoft Expression Web. Furthermore, people often just want part of the design [10] and thus must identify which part of the code actually is responsible for the design aspect that is wanted. Consequently, to create a high-quality result, the ability to develop a web page to achieve the desired design can be as important as the ability to come up with a good design in the first place. Design examples are not useful if people cannot realize them in their own final work. To help address this problem, we built WebCrystal (Figure 1), a tool that assists in the low-level programming tasks required to learn from and reuse examples as part of the web authoring process. “Examples” here can be anything built in HTML and CSS, the two most common languages used to create the static style of a web page. Currently, WebCrystal does not handle JavaScript, Flash, AJAX or other scripting languages. WebCrystal allows users to select any web element of a page that was created with HTML and CSS, and then choose from a set of “how” questions about how to recreate the different aspects of the selected element. The tool then answers the questions by (1) providing an automatically generated human-readable textual explanation using the element’s HTML and CSS information, and (2) generating a customized code snippet for the users to recreate the design using the selected attributes. WebCrystal makes the following contributions: • A novel example-based web design tool for extracting and combining styling information from existing websites, and for helping designers understand how existing sites use HTML and CSS to create desired appearances. This includes how to achieve the positioning of elements. • The novel use of automatically generated hierarchical questions and explanations about existing website styling information, in combination with element selection techniques to facilitate the extraction, combination, and understanding of existing website styling code. The explanations included generated code in a variety of userselected formats (rather than code extracted from the source examples) that will reproduce the element. • A between-subjects evaluation of the prototype system compared to standard tools for copying desired HTML and CSS from existing websites. This evaluation showed that WebCrystal users had significantly higher task completion rate and faster task completion time in reproducing web elements from a given web page, compared with people using Firebug [5], a state-of-the-art web development tool.

WebCrystal is inspired by previous systems Crystal [17] (which focused on desktop applications) and FireCrystal [19] (which focused on JavaScript). In WebCrystal, the goal is to make the construction of the HTML and CSS parts of web design “crystal clear” to the user, so that the user would be able to easily reuse them in their own pages. The tool was originally intended for novice and intermediate HTML and CSS developers, which we believe are the majority of the web authors today (and blog posts seem to indicate that even many “professional web designers” may not have particularly advanced coding skills—e.g., [8]). In fact, in our user study, we found that even advanced developers also benefited from and liked using WebCrystal. RELATED WORK

WebCrystal was inspired by several previous systems that allow users to ask questions about a program’s execution, as a way to provide more focused answers. Crystal [17] explains a word processor’s behaviors by letting users ask about why elements look the way they do. Crystal not only provides a textual explanation, but also highlights the user operations that affect the element, so the user can more easily fix problems and control the operations. The Java Whyline [12] is a debugging tool that allows developers to ask “why” and “why not” questions about a Java program’s output and leads developers backward to its causes. In WebCrystal, we adapted this idea of letting users ask questions in the different domain of web authoring. WebCrystal allows its users to select the element they want from a rendered web page, and presents a code snippet that can recreate that element. Some prior systems have used a related approach in helping people make use of an example more efficiently by interacting with the output and displaying the corresponding source code. FireCrystal [19], for example, lets users record the interactive behavior of a web page and shows the JavaScript code that might be responsible for that behavior. Rehearse [2] is an extension for the Processing IDE that highlights each line of code in an example as it is executed to help programmers quickly identify which line of the code is relevant. Many systems help with finding and presenting examples. Some systems allow users to specify layout information through sketches to retrieve desired designs [9], while others [14][15][20] support retrieving and browsing related designs from example galleries. WebCrystal helps after the examples have already been found, and assists users to incorporate desired examples into their own work. Some prior systems have focused on reusing examples without requiring users to look at or understand any code. CopyStyler [6] copies the style of text elements from one page to another. Adaptive Ideas [14] pre-annotates examples with metadata about properties and ranges of values, and then it can combine the user-selected attributes into a new page. Bricolage [13] maps some aspects of the style of one web page onto the content of another using an AI algorithm to rapidly generate a new web page. In contrast to these systems,

1 2

3

5

4

Figure 2: (1) is the web page under investigation, showing the purple highlight and the dotted box around the selected element. (2) is a list of questions the user can ask about recreating the selected element, with the selected question highlighted with a yellow background. (3) shows the textual response that answers the question selected in (2). Here, it explains the text properties. (4) is a sub-menu of commands that the user can pick to generate a code example using the selected properties. (5) shows the generated code.

WebCrystal gives users complete control of the results, since it does not use heuristic algorithms..It also exposes the underlying code to users, which might help them learn it. THE WEBCRYSTAL USER INTERFACE

The main goal of WebCrystal is to enable the users to quickly reuse one or more aspects of an example in their own work. Ideally, WebCrystal would be integrated with a code editor, so the code extracted from the example could be directly inserted into the user’s code. For now, in order to explore the appropriate user interface for discovering the appropriate code, WebCrystal instead runs as a plugin for the Firefox browser, and the user can copy-and-paste the code into a separate editor window. WebCrystal is a Firefox extension written in XUL [16] and JavaScript, using the jQuery [11] library. WebCrystal accesses the document object model (DOM) of the web page, and treats every DOM node in the web page as a web element. WebCrystal is activated by clicking on the magnifying glass icon button in the browser’s status bar (Figure 1, bottom left). When activated, it tracks the current element under the mouse cursor as users move their mouse around the web page. The current element is highlighted using a semi-transparent box, with a small label showing the element’s tag name (Figure 2 at 1). At the same time, a set of questions about how to recreate the various aspects of the underlying element are dynamically generated and displayed in the left of the WebCrystal window (Figure 2 at 2). The user can “freeze” a selection by left clicking on the desired element and then can start to inspect that element by browsing questions from the tool interface. A selection is “unfrozen” by left clicking anywhere on the web page.

Browsing the Elements Hierarchically

HTML is a hierarchical language. An element’s position on the web page is related to its parents (containers) and siblings. For example, in Figure 1 the selected
  • is positioned relative to the position of its parent