The Web Page as a WYSIWYG End-User Customizable Database-Backed Information Management Application David R. Karger∗ Scott Ostler Ryan Lee [email protected] [email protected] [email protected] MIT CSAIL 32 Vassar St. Cambridge, MA 02139 ABSTRACT erwise manipulate the information being presented, updating Dido is an application (and application development envi- the document on the fly to reflect the manipulation. Data ronment) in a web page. It is a single web page containing edits in the document can change data stored on the server. rich structured data, an AJAXy interactive visualizer/editor for that data, and a “metaeditor” for WYSIWYG editing of The active document is a pervasive and well-understood the visualizer/editor. Historically, users have been limited metaphor on today’s web. But these documents’ dynamic to the data schemas, visualizations, and interactions offered UIs, server-side databases, and AJAX connections are gen- by a small number of heavyweight applications. In contrast, erally programmed by professionals. In contrast, Dido doc- Dido encourages and enables the end user to edit (not code) uments, including all their active elements, are authored by in his or her web browser a distinct ephemeral interaction end users in a WYSIWYG document-editing interface simi- “wrapper” for each data collection that is specifically suited lar to those used for authoring static HTML documents. to its intended use. Dido’s active document metaphor has Dido’s active document is not just an interface metaphor. The been explored before but we show how, given today’s web data being managed, the UI for interacting with it, and the infrastructure, it can be deployed in a small self-contained “metaeditor” for authoring the interaction UI are all stored HTML document without touching a web client or server. in one HTML document. No deployment or installation ACM Classification: H5.2 [Information interfaces and pre- is needed—the document “just works” in any modern web sentation]: User Interfaces. - Graphical user interfaces. browser. Authors can share their active documents freely without worrying who has the right application installed. The General terms: Design, Documentation, Human Factors in-document data store eliminates the server and encourages users to treat the entire “application” as a document that can Introduction be copied, edited, emailed, placed in a version control sys- This note describes Dido, a Data-Interactive DOcument that tem, or published to the web. With Dido, an application is lets end users author (not program) web-page “applications” not a heavyweight object that owns data; rather, each data set specifically suited to their own information management comes wrapped in a light and flexible application “skin.” needs. Instead of forcing their data into a partially-suitable application (the first author uses a music manager to run a Obviously there are limits to the complexity of applications folk dancing session, shoving choreographer into the artist typical users can author. We focus on so-called CRUD ap- field, dance type into genre, and difficulty into the com- plications that let users (C)reate, (R)ead/Visualize, (U)pdate, ments), or settling for a spreadsheet’s generic tabular inter- and (D)elete items. Contact managers, todo lists, recipe man- face, users can wrap any data collection in a data- and task- agers, and photo albums fit this class. CRUD is the core of specific interface. widely deployed Content Management Systems such as Dru- pal, Nuke, Sharepoint, Django, and Semantic Mediawiki. Dido is an active document [7] with a look and feel sim- ilar to those delivered by typical content-management web This note combines two theses. First, that there is a common sites such as Flickr (photos), Amazon (products), CNET (re- set of CRUD interactions that can and should be stripped of views), LinkedIn (people), and Epicurious (recipes). An ac- their programmer-oriented complexity and made part of the tive document incorporates elements that sort, filter, or oth- common vocabulary of document authoring, allowing end- users to customize or create their own task-specific “appli- ∗This work was supported by a grant from the National Science Foundation. cations.” Second, that the ubiquitous web browser contains Permission to make digital or hard copies of all or part of this work for all the machinery needed to support these commonplace data personal or classroom use is granted without fee provided that copies are management tasks, making them trivial to implement and not made or distributed for profit or commercial advantage and that copies deploy in standard web documents. We elaborate on these bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific ideas and discuss their relation to previous work after a walk permission and/or a fee. through the Dido system. UIST’09, October 4-7, 2008, Victoria, BC, Canada. Copyright 2009 ACM 978-1-60558-745-5/09/10...$10.00. Easy authoring and universal compatibility resolve the two Exhibits are described by a data file holding the items and an HTML file with special tags added where Exhibit widgets should appear. Exhibit’s Javascript fetches the data file, then interprets the Exhibit tags to provide data interaction when the page is viewed. The explicit properties-and-values data model means each widget can be configured without pro- gramming, by specifying which properties play which roles in the widget, much as one specifies which columns of a spreadsheet should be used as data for a particular chart. For example, the Map view specifies which properties contain the latitude and longitude needed to plot each item, while the list view specifies the initial sorting property. Exhibit has been adopted by several hundred users, includ- ing a few newspapers, to publish interactive visualizations such as a Vegan guide to Glasgow restaurants, caves in Italy, a history of classical music composers, a list of cases at Figure 1: Visualizing data in Dido. Three disciplines the European Court of Human Rights, conference proceed- and four visible years have been selected as filters. ings and programs, and many others (a list can be found at http://simile.mit.edu/wiki/Exhibit/Examples). biggest concerns with active documents. So consider broad This suggests that Exhibit’s interaction vocabulary suffices adoption. Instead of publishing a user study as a (noninterac- for some data presentation tasks. Exhibit suffers from two tive, opaque) PDF document referring to a (raw, mysterious) limitations, however. First, it offers read-only visualization data file, we could publish one active document containing of data stored on the author’s web site; the reader is a passive both text and data in a meaningful interactive visualization. consumer. Second, the author is expected to be comfortable Had this paper been published as HTML, its static figures editing both the raw data file and raw Exhibit XML tags. could have been interactive demonstrations of Dido. Dido packages Exhibit’s data and presentation vocabulary Walk-through into a single file and delivers it to the reader with an editing framework that helps the reader become the (WYSIWYG) A user opens a Dido document in his or her browser, down- author as well. If the user clicks the “Edit Data” button on loading it from a web site or opening a local copy. Figure 1 the top right, the editable values of any items being shown shows a typical example: a list of MIT Nobel prize winners, are highlighted. The user can click on any such value; it will grouped by discipline and sorted by last name. The user can convert to a text box for editing. Clicking outside the textbox change the sort by clicking in the “sorted-by” description. A completes the edit and returns the textbox to its original for- line above allows the user to switch from the detailed List mat. There are also buttons for creating and deleting whole currently selected to a grid of photo-only Thumbnails. On items. The user can continue to filter and otherwise interact the right are three different styles of facets used to filter the with the data while it is in editable form. list by year, discipline, and whether the prize was shared. This form of direct editing is simple to implement because of This kind of interactive document is typical of today’s content- Exhibit’s lens-based architecture. Since items are rendered bearing web sites. It presents a collection of items (Nobelists) via HTML lens templates that specify how content should with properties (name, Nobel-year, or discipline) that have fill in the blanks, we invert those templates to infer the edit values for each item. Examples include photos on Flickr target “blank” from a user’s click. (creator and date), books on Amazon (genre and price), and recipes on Epicurious.com (cuisine and ingredients). These A user can change the visualization by clicking “edit display” sites use their items’ properties to fill templates showing indi- on the top right. This shifts Dido to meta-editing mode. We vidual items, to compute aggregate views of item collections, invoke a WYSIWYG editor on the entire Exhibit. Individual and to support sorting and filtering via faceted navigation [9]. data items are no longer editable; rather, the page is. The author can click anywhere in the document to add static con- The Dido visualization uses our Exhibit framework [5] which tent, or use the editor toolbar to change the layout (adding abstracts interactions commonly found on today’s web sites. tables, marking paragraphs, etc.) and the formatting (choos- A lens is a template for rendering an item—an HTML frag- ing fonts and sizes, etc.).