openHTML: Designing a Transitional

Web Editor for Novices

Thomas H. Park Susan Wiedenbeck Abstract

College of Info. Science & Tech. College of Info. Science & Tech. We describe the initial design rationale and early
Drexel University Drexel University findings from studies of a web editor for beginners
3141 Chestnut Street 3141 Chestnut Street called openHTML. We explain our strategy of
Philadelphia, PA 19104 USA Philadelphia, PA 19104 USA transitional design that views web editors as a part of a
thomas.park@drexel.edu susan.wiedenbeck@drexel.edu complex socio-technical system that spans multiple
tools, practices, and actors. Our goal is to create a
Ankur Saxena Andrea Forte toolkit that can engage beginners in meaningful
College of Info. Science & Tech. College of Info. Science & Tech. activities now and prepare them for more sophisticated
Drexel University Drexel University activities in the future.
3141 Chestnut Street 3141 Chestnut Street
Philadelphia, PA 19104 USA Philadelphia, PA 19104 USA Author Keywords
ankur.saxena@drexel.edu andrea.forte@drexel.edu Learner-Centered Design; Web Development; Code
Editors.
Swathi Jagannath
College of Info. Science & Tech. ACM Classification Keywords
Drexel University H.5.2. Information interfaces and presentation (e.g.,
3141 Chestnut Street HCI): User Interfaces: User-centered design.
Philadelphia, PA 19104 USA
swathi.jagannath@drexel.edu General Terms
Design, Human Factors.

Copyright is held by the author/owner(s).

CHI 2013 Extended Abstracts, April 27 – May 2, 2013, Paris, France.
ACM 978-1-4503-1952-2/13/04.
Introduction Transitional Design
HCI as a field has long been concerned with designing Our approach to designing the openHTML environment
technologies for novice users. Diverse approaches to takes inspiration from the instructional design
“learnable” interface design have been explored; for literature. Educational technologists are deeply
example, advanced features can be hidden and concerned with supporting novices, and scaffolding is a
complexity can be simplified to help new users ease commonly cited approach. Scaffolding has two goals:
into sophisticated software and tasks [4]. We are “(1) to enable learners to achieve a process or goal
exploring the effectiveness of a transitional design to which would not be possible without the support and
support novice web developers. Our web editor, (2) to facilitate learning to achieve without the support”
openHTML, allows users to author web pages with [6]. Examples of scaffolded environments include
minimal setup and training but without shielding them intelligent tools that track students’ activities and
from the code, allowing them to become familiar with intervene with feedback when needed and tools that
the syntax and semantics of HTML and CSS. structure processes and elicit articulation. These are
examples of “within-tool” scaffolding—temporary
The web is a ubiquitous computational environment, support for activities that is carefully designed into a
where people from non-technical backgrounds often tool. We are exploring within-tool scaffolding that could
develop technical skills and knowledge [5] to meet help novice web developers.
varied needs—from a student customizing their blog, to
a business owner requiring an online presence [12]. It is also important to recognize “between-tool”
Basic web development tasks can cause anxiety and scaffolding as a design strategy for supporting novices.
frustration for newcomers. Blackwell notes that markup Puntambekar and Kolodner note that scaffolding is not
languages share many pitfalls of programming: “As necessarily a feature of a single tool; rather, it can be
with the use of JavaScript, even the abstractions of distributed throughout a socio-technical system [11].
HTML provide the opportunity for syntax errors, We view openHTML as one part of a larger system of
runtime errors, or bugs in the form of unintended or tools and practice that includes not only the immediate
exceptional behaviors” [2]. Beginners in our preliminary development context, but also the tools and practices
studies often found HTML and CSS challenging. that learners may have access to as their skills become
Misconceptions about basic concepts such as markup more advanced. In other words, openHTML itself can be
tags and hyperlinks were common, and quickly stymied thought of as a transitional design—support that fades
their progress in learning to build websites [10]. In through disuse when the learner no longer needs it or
order to transition from these basic tasks to wants to accomplish tasks that require a more
sophisticated ones, beginners need support in making sophisticated tool.
sense of early experiences with web development. This
calls for improved understanding of the difficulties they We are using an iterative, learner-centered process
experience and how they might successfully be [13] to design a web editor that supports novices in
overcome. creative exploration of web building and prepares them
to use more sophisticated editors should they choose to interesting creations is central to the learning
do so. In the next sections, we describe early design experience. In the design of openHTML, we want to
iterations and three rounds of evaluation. support people in not only making and displaying web
creations, but also in sharing, discussing, and reusing
Initial Design of a Web Editor their source code with one another.
In this section, we provide a rationale for the design of
openHTML. Our aim for the initial prototype was to openHTML is a browser-based editor, meaning no
provide support for novice web developers as they installation is needed to start using it. We built it by
became familiar with HTML and CSS syntax. Our design modifying an open-source tool used for JavaScript
was guided by the following principles. debugging called JS Bin [7].

1. Coding is a priority. This provided a useful design The main edit screen presents three panes: editing
constraint by helping us decide where complexity could CSS, editing HTML, and previewing the rendered page
be hidden and where it should be exposed. Web (Figure 1). The edit panes provide basic syntax
development encompasses diverse activities, including highlighting and line numbering. By juxtaposing CSS
non-coding activities like setup of the development with HTML and giving them equal visual prominence,
environment and server management, which can be users are encouraged to experiment with CSS and use
perceived by novices as barriers to making web pages it in concert with HTML to style their pages. The
[10]. We integrate web hosting with the editor, preview updates instantaneously as the user edits code
reducing the steps between delving into the code and in the other panes.
deploying it online.
openHTML eliminates the need to organize files locally
2. Iterative learner-centered design. We are interested and upload them to a remote server. Once a page has
in exploring how a web editor can be designed to been saved, it is immediately accessible to others
support learning and teaching; consequently, we online. The code of a web page can also be shared with
consider factors like motivation and understanding. other users, who can then make their own copy and
These considerations not only underscore the add edits to it. This feature makes it possible to remix
importance of providing the low barrier to coding others’ work and for instructors to seed a webpage for
activities described above, but also compelled us to an assignment or tutorial.
avoid a WYSIWYG interface that conceals syntax. We
started with a basic code editor and are studying it in Clicking the “Page List” button takes users to a list of
multiple contexts to discover what kinds of support previously created web pages (Figure 2). All revisions
beginners need to use such an environment effectively. of a web page are saved and can be accessed here; as
in a wiki system, saving revisions reduces the risk
3. Sharing and audience are critical. Education associated with experimentation because previous
literature suggests that sharing and discussing versions can always be restored. Users can also join a
group, giving another user like an instructor an Finally, openHTML has been instrumented with fine-
organized overview of the group’s pages. grained logging for research purposes. Keystroke-level
edits are recorded and can be used to reconstruct and
play back coding sessions.

Evaluations
We have conducted three rounds of evaluation: a pilot
test with children at a community center, a lab study
with adult users of different skill levels, and a field
study of novices in a university course. In this extended
abstract, we briefly describe the lab study.

We conducted the lab study to investigate the errors

people make while coding with HTML and CSS, and the
role played by the web editor and other resources in
making and resolving these errors. We recruited 20
Figure 1: Editing a page in openHTML with all three panes participants via paper fliers, Craigslist ads, and postings
open, from left to right: CSS, HTML, and preview. on public mailing lists, and gave them twenty dollars
for their time. Participants had diverse backgrounds,
with 5 females and 15 males ranging from 18 to 47
years of age (M=24.4, SD=7.9). All had experience
with HTML, and all but one CSS; additionally, 18 of the
participants had some experience with a programming
language such as JavaScript or PHP.

Participants were invited to the Drexel University

iSchool usability lab and asked to complete five HTML
and CSS coding tasks that resemble assignments in
introductory web development courses. Tasks were
presented in order of increasing difficulty. For instance,
participants were asked to create an ordered list and
sub-list in the first task, a hyperlink and embedded
image in the second task, and a content area and
Figure 2: openHTML “page list” view where users can select a sidebar in the final task. For each task, participants
page to edit or expand a time-stamped list of all revisions for were given a set of instructions and a screenshot
each page. showing how the final web page should appear.
The participants were asked to follow a think-aloud “bricolage” [1] or aimless “thrashing” was informed by
protocol articulating their thought process as they the context in which it occurred. For example, tinkering
completed the tasks. They were instructed to complete between multiple valid CSS values demonstrated design
the tasks to the best of their ability, using web exploration; a web editor might facilitate this through
searches if necessary. As participants completed the direct manipulation of a range of values, rather than
tasks, audio, video, and actions on the screen were repeatedly typing in values. In contrast, tinkering with
captured using the software Morae Recorder. The task CSS property names was often symptomatic of a
study was followed with a brief interview about breakdown in understanding the semantics of CSS; a
participants’ experiences using openHTML. Sessions web editor in this case might discourage tinkering and
lasted between 32 and 91 minutes (M=60.0, SD=15.9) offer a different form of support.

To understand the challenges that beginner web coders Web Searches

face and how the web editor supported or failed to Participants regularly turned to web searches when
support their efforts, we are using thematic analysis [3] trying to resolve coding errors. Web searches were
to identify common errors and recovery activities extremely code-centric and action-oriented.
across participants. Thematic analysis is an inductive Participants frequently ignored explanatory text when
and iterative process of identifying meaningful patterns using web resources to understand and correct an
in data that is well suited for making sense of rich, error, instead preferring to navigate directly to code
semi-structured data. We have begun the coding snippets, paste them into their own code, and
process by examining all the data and identifying manipulate them within the code editor. These findings
conceptual themes. Through successive rounds of suggest an opportunity to integrate explanations more
analysis, we will classify coding errors and their closely with code in these resources, or even further,
underlying causes, as well as recovery strategies and integrate explanations within the web editor itself.
their effectiveness. This will help us determine where
our next iteration of design efforts will have the Latent and Active Errors
greatest impact. Active errors are errors that can be immediately
perceived by the user, while latent errors give no
Preliminary Findings immediate cue, only manifesting later due to
In this section, we present themes and some design interaction with other conditions [8]. In our analysis,
implications based on our first round of analysis. we have found it useful to consider the coding errors
made by participants in these terms, as well as when
Tinkering the participant recognized an error has been made and
When attempting to debug coding errors, participants which part of the interface provided cues.
often engaged in tinkering — making repeated
modifications to a piece of code in quick succession. With the first iteration of openHTML, active errors
Whether the tinkering indicated playful and productive expressed primarily in the live preview (e.g., a syntax
error causing a broken image), although some [2] Blackwell, A. First steps in programming: A
participants also relied on the syntax highlighting (e.g., rationale for attention investment models. In Proc. HCC
2002, 2–10.
unclosed tags). On the other hand, latent errors, which
did not express in openHTML’s interface, occurred often [3] Braun, V. & Clarke, V. Using thematic analysis in
psychology. Qualitative Research in Psychology, 3, 2
and would sometimes cascade into a series of
(2006), 77–101.
additional errors. While some are syntax errors that can
be detected through validation, others require [4] Carroll, J. & Carrithers, C. Training wheels in a user
interface. CACM, 27, 8 (1984), 800-806.
techniques such as the uniqueness heuristic, where a
class or ID used only once throughout a project may [5] Dorn, B. & Guzdial, M. Discovering computing:
Perspectives of web designers. In Proc. ICER 2010, 23-
indicate an error [9]. Through the design of openHTML,
29.
we are finding new ways of bringing these latent errors
to the surface. [6] Guzdial, M. Software-realized scaffolding to
facilitate programming for science learning. Interactive
Learning Environments, 4, 1 (1995), 1-44.
Conclusion
[7] JS Bin. http://jsbin.com/
This work describes our initial design of openHTML and
preliminary findings from our evaluation. openHTML [8] Ko, A. & Myers, B. A framework and methodology
for studying the causes of software errors in
acts as a “between-tools” scaffold, allowing beginners
programming systems. Journal of Visual Languages and
to quickly build web pages and develop coding skills in Computing, 16 (2005), 41–84.
before transitioning to more sophisticated and complex
[9] Ko, A. & Wobbrock, J. Cleanroom: Edit-time error
tools. It also serves as a platform for introducing
detection with the uniqueness heuristic. In Proc.
“within-tools scaffolding”, through features that support VL/HCC 2010, 7-14.
their learning as novices. Our findings highlight a
[10] Park, T. & Wiedenbeck, S. Learning web
number of these design opportunities. Through ongoing development: Challenges at an earlier stage of
research, we will continue exploring the role that a computing education. In Proc. ICER 2011, 125-132.
transitional web editor can play in giving beginners
[11] Puntambekar, S. & Kolodner, J. Toward
positive, productive learning experiences. implementing distributed scaffolding: Helping students
learn science from design. Journal of Research in
Acknowledgements Science Teaching, 42, 2 (2005), 185–217.
This work is supported by NSF grant 1152094. We are [12] Rosson, M., Ballin, J., & Nash, H. Everyday
grateful for their support. programming: Challenges and opportunities for
informal web development. In Proc. VL/HCC 2004, 123-
References 130.
[1] Beckwith, L., Kissinger, C., Burnett, M., [13] Soloway, E., Guzdial, M., & Hay, K. Learner-
Wiedenbeck, S., Lawrance, J., Blackwell, A., & Cook, C. centered design: The challenge for HCI in the 21st
Tinkering and gender in end-user programmers’ century. Interactions, 1, 2 (1994), 36–48.
debugging. In Proc. CHI 2006, 231-240.