Mavo Create: A WYSIWYG Editor for Mavo by Francesca Rose Cicileo Submitted to the Department of Electrical Engineering and Computer Science in partial fulfillment of the requirements for the degree of Master of Engineering in Electrical Engineering and Computer Science at the MASSACHUSETTS INSTITUTE OF TECHNOLOGY June 2018 ○c Massachusetts Institute of Technology 2018. All rights reserved.
Author...... Department of Electrical Engineering and Computer Science May 25, 2018
Certified by...... David Karger Professor Thesis Supervisor
Accepted by ...... Katrina LaCurts Chair, Master of Engineering Thesis Committee 2 Mavo Create: A WYSIWYG Editor for Mavo by Francesca Rose Cicileo
Submitted to the Department of Electrical Engineering and Computer Science on May 25, 2018, in partial fulfillment of the requirements for the degree of Master of Engineering in Electrical Engineering and Computer Science
Abstract Mavo Create provides the data storage and computation abilities of Mavo through the interface of a WYSIWYG (What-You-See-Is-What-You-Get) editor. Mavo extends HTML, providing attributes that one can use to set up data storage for a web applica- tion. This data can be created, amended, and populated into the web application use Mavo attributes. Further, Mavo provides expressions for performing computations on the data and visualizing the results of those computations in the Mavo application. One limitation of Mavo is that a user must know or become familiar with HTML in order to use Mavo. Mavo Create attempts to abstract away the programming part of using Mavo by providing a visual website editor that can be used to create Mavo applications. Mavo Create was built using GrapesJS, a WYSIWYG website tem- plate creation application. Mavo Create uses drag-and-drop HTML elements with WYSIWYG editing for styling and for adding Mavo capabilities. After creating the template of a Mavo application in Mavo Create, one can download source code and begin using his application. The goal of Mavo Create is to make the creation of Mavo applications accessible to people who do not know HTML or programming.
Thesis Supervisor: David Karger Title: Professor
3 4 Acknowledgments
I would like to thank my thesis supervisor, Professor David Karger, for his guidance and support with this thesis. I would also like to thank Ph.D. student Lea Verou for all of her support and technical help with this project. Thank you both for continuously meeting with me, brainstorming ideas, and guiding the development of this thesis. I thank the MIT EECS Department, Professor Patrick Henry Winston, and Pro- fessor Randall Davis for providing me with the Teaching Assistant positions that supported my work.
5 6 Contents
1 Introduction 11 1.1 Motivation ...... 11 1.2 Objective ...... 12 1.3 Target Users ...... 12
2 Background 13 2.1 Mavo ...... 13 2.1.1 Creating and Manipulating Data ...... 14 2.1.2 Computations with Data ...... 14 2.1.3 Data Storage ...... 15 2.2 Previous Work ...... 15 2.3 Research into Existing WYSIWYG Editors ...... 17 2.3.1 GrapesJS ...... 18
3 Interface Design 19 3.1 Creating Elements ...... 20 3.2 Navigating the Canvas ...... 21 3.3 Styling and Editing Elements ...... 22 3.4 Command Toolbar ...... 23
4 Implementation 27 4.1 Mavo Create Application ...... 27 4.2 Blocks ...... 28
7 4.3 Components and Traits ...... 28 4.4 Expressions ...... 30 4.5 Data Storage ...... 32 4.6 Completing the Mavo App ...... 33
5 User Study 35 5.1 Study Design ...... 35 5.1.1 Introduction ...... 36 5.1.2 Tutorial ...... 37 5.1.3 Timed Tasks ...... 37 5.1.4 Post-Study Interview ...... 38 5.2 Pilot Study ...... 40 5.3 Experiment and Results ...... 40 5.3.1 Participants ...... 41 5.3.2 Results and Interesting Findings ...... 41 5.4 Discussion ...... 43
6 Conclusion 45 6.1 Future Work ...... 45
8 List of Figures and Tables
2-1 Initial prototype of Mavo Create ...... 16 2-2 Interacting with the prototype Template display ...... 17
3-1 Mavo Create Editor ...... 19 3-2 Components of Mavo Create ...... 20 3-3 Editing Toolbar Views ...... 21 3-4 Mavo Storage Settings Modal ...... 23 3-5 Mavo Expressions Creation Modal with Popover Open ...... 24 3-6 Mavo Expressions Popover Opened from the Canvas ...... 24
5-1 Static Template for Tutorial Webpage ...... 36 5-2 Static Template for Timed Tasks Webpage ...... 38 5-3 User Study Tasks and Average Time to Task Completion (in minutes and seconds) ...... 39
9 10 Chapter 1
Introduction
1.1 Motivation
There are many people who have no experience with programming or web develop- ment, but who have a need or desire to create a website. WYSIWYG (What-You- See-Is-What-You-Get) website-building tools are available that people can use freely or for purchase. Several such tools exist in the form of online or desktop applications. These tools allow users to visually create a website with their desired appearance. However, the capabilities of these WYSIWYG tools are usually limited to static web- sites without any database services. As a result, creating a website that allows the user to create, store, and manipulate data is not feasible with currently available tools. Mavo is an extension of HTML. It is a tool that allows users to create websites that store and manipulate data simply by adding attributes and text with certain syntax to standard HTML. Mavo allows people who do not know how to program in JavaScript, but are able to learn HTML, to create more interactive websites. There is no need to learn JavaScript to create a backend for the website; Mavo builds the data storage system for the user. For a person who cannot program in JavaScript and who does not want to take the time to learn HTML, current WYSIWYG editors cannot provide the same website functionalities that someone with HTML experience would be able to create using
11 Mavo. This thesis is focused on building and testing Mavo Create, a WYSIWYG tool for people with limited or no programming abilities to use in order to create Mavo applications. Mavo Create will extend an existing WYSIWYG editor, GrapesJS, to incorporate Mavo capabilities, allowing users to create Mavo applications. Traditional WYSI- WYG editors provide an interface between the user and HTML. Since Mavo is an extension to HTML, it is sensible and feasible to extend a WYSIWYG editor to also recognize Mavo syntax. Thus, Mavo Create will enable users to create Mavo applications using a WYSIWYG interface.
1.2 Objective
The primary objective of Mavo Create is to allow users to create dynamic web ap- plications where they can add, manipulate, and perform calculations on data. Mavo Create aims to make this easy for users with little to no web development experience through a WYISIWYG editor interface.
1.3 Target Users
Mavo Create is specifically targeted toward people with little to no web development background. The Mavo Create editor was build with the goal of having an intuitive interface to build web applications without the user being exposed to any code. The capabilities that Mavo provides are exposed in the editor in the form of various WYSIWYG tools, making Mavo Create a usable tool for web development novices.
12 Chapter 2
Background
Mavo Create presents some of the core capabilities of Mavo to users in the form of a WYSIWYG editor. This section describes the Mavo language, research into existing WYSIWYG editors, and a description of a precursor prototype to this thesis.
2.1 Mavo
Mavo[4] is a project currently being developed in the Haystack group at CSAIL (Computer Science and Artificial Intelligence Laboratory). One of the main goals of Mavo is to make it easier for people without JavaScript knowledge to create websites that can store and manipulate data. Currently, if a person wants to store, display, and manipulate data on his website, he must build some sort of backend service to correspond to the HTML front end of his website. This is an obstacle to the many people who can write HTML and CSS, but have no other programming experience in languages such as JavaScript. Mavo is a tool that extends HTML with certain attributes. These attributes allow users to implement data schemas simply by adding the attributes to their HTML code. Thus, Mavo makes building complex websites possible for people who do not know programming languages, but are able to learn HTML.
13 2.1.1 Creating and Manipulating Data
One core component of Mavo is the property attribute. If an HTML element is given a property attribute, then, when in the editing mode of his Mavo app, a user can edit that element. The content of the element is stored. Another core piece of Mavo is the mv-multiple attribute. The mv-multiple attribute allows an element in a Mavo application to be repeatable. If an element has this attribute, and also has a property name, then when the user is editing his Mavo app through the Mavo app editing mode, he can click a button that will duplicate the element. The duplicate has the same HTML structure as the original element, but has no data in it. The user is left to fill in the data of the new element. Withthe mv-multiple attribute, the element assigned the attribute can be repeated as many times as desired by the user, each time producing a new empty template. Thus, the mv-multiple attribute allows for the creation of data collections that are then stored and can be later manipulated. Editable elements in a Mavo app each have some default component that is edited when in editing mode of the Mavo app. For text elements, such as a
element, the default is the content of the text element. For links ( elements), the default is the link. However, what Mavo edits in editing mode can be changed using mv-attribute. The mv-attribute attribute allows users to specify what attribute of an HTML element will be edited in the Mavo app.
2.1.2 Computations with Data
A powerful part of Mavo is the ability to create expressions. Expressions allow users to reference the values of other elements on the page. In ordered to be referenced, an element must have a property name. Expressions also allow users to perform computations using arithmetic operators as well as predefined Mavo functions (such as “sum” or “count”) and special keywords. If a Mavo expression is typed in HTML, the expression is evaluated by Mavo and the result is displayed in the Mavo app when it is opened in a browser. An expression is marked in Mavo by surrounding the
14 expression with square brackets.
2.1.3 Data Storage
Where the data is stored in a Mavo application is controlled by the mv-app and mv-storage Mavo attributes. The mv-app attribute names the Mavo app. The mv-storage attribute details where Mavo should store all the data in the Mavo app. Options for this are: local storage in the browser (mv-storage=’local’); storage using Github, in which case the mv-storage attribute is set to the link to the user’s Github page (and optionally to a specific repository or branch that the user owns in Github); or storage using Dropbox, in which case the mv-storage at- tribute is set to the sharing link of an empty file in Dropbox. The user can also set mv-storage=’none’, which will result in the data not being stored anywhere.
2.2 Previous Work
Before beginning this thesis, I began an initial prototype implementation of a Mavo WYSIWYG editor. The goal of this project was to create the initial prototype for a WYSIWYG editor that would make creating Mavo applications easier. The editor achieved this by allowing users to add a limited set of Mavo capabilities to existing HTML. The editor had no WYSIWYG features for creating or editing HTML. The editor had three display panels: an HTML display, the corresponding rendered template, and the corresponding Mavo app, as seen in Figure 2-1. A user can change which displays are visible using checkboxes at the bottom of the page. In the HTML panel, the user can upload an HTML file. The contents of that file will be imported into the editor, with a few modifications. The JavaScript and CSS files needed to run Mavo will be added to the head of the HTML. In addition, Mavo’s mv-app and mv-storage attributes are added to the body of the HTML. The user is able to see the HTML (with the modifications described) in the HTML panel. The user is also able to edit the HTML directly by typing in the panel to make further desired modifications. The user may also start from scratch by typing HTMLinto
15 Figure 2-1: Initial prototype of Mavo Create the panel instead of uploading a file. As the user creates the HTML, the Template and Mavo displays will populate. The Template display is a rendering of the user’s HTML without any Mavo capabilities (that is, it is rendered as plain static HTML). The Mavo display shows the user what his Mavo app will look like with the current HTML code in the HTML panel. As a user hovers his mouse over elements in the Template view, the elements are framed with a black border, as seen in Figure 2-2a. If the user clicks on one of these highlighted elements, a modal will appear, as shown in Figure 2-2b. The modal is the tool through which the user applies the Mavo property and mv-multiple attributes to a given element. The modal describes to the user what these two attributes are and what affect they would have on the user’s Mavo app. Forthe property attribute, the user can add a property name of his choosing to the selected element. If the element is already assigned a property name, the modal tells the user what that name is, and allows the user to change or remove the property name. For the mv-multiple attribute, the editor only allows the user to apply this attribute if the element already has a property name. If the element does not have a property name, the modal
16 (a) Hovering the mouse over an element in (b) Modal for modifying the property and the Template display will outline that ele- mv-multiple attributes of the clicked ele- ment. ment.
Figure 2-2: Interacting with the prototype Template display shows the user a message saying that a property name is needed before adding the mv-multiple attribute. If the element already has the mv-multiple attribute, the editor tells this to the user and gives the user the option to remove the mv-multiple attribute from the element. Through these interactions, a user is able to access two core Mavo capabilities that allow him to create a Mavo app that stores data. A Mavo app created with this tool can also add, edit, and remove saved data. However, this encompasses only the basic functional capabilities exposed by Mavo. Another important part of Mavo apps is the ability to do computations on data using Mavo expressions. While the user can type expressions into the HTML panel of this editor, there is no WYSIWYG way to add expressions to the HTML. This editor also requires the user to have knowledge of HTML, which makes the tool unhelpful to a person in the target user group with no web development experience.
2.3 Research into Existing WYSIWYG Editors
WYSIWYG (what-you-see-is-what-you-get) editors are tools that can be used by peo- ple with limited HTML and programming skills to create static websites. Some exam- ples of existing WYSIWYG editors for creating websites are WordPress, TinyMCE, CKEditor, and Wix.com. WYSIWYG editors create the HTML and CSS of a website
17 for a user so that that user does not actually have to do any programming; the user never has to see the code if he chooses not to. The user only needs to represent vi- sually what he wants his website to look like using the editor’s tools, and the desired code is consequentially generated for him. Some WYSIWYG editors also allow the users to modify the code created by the system, which is useful for users with knowl- edge of programming. Existing WYSIWYG editors served as a source of inspiration as well as a starting point for my own project.
2.3.1 GrapesJS
Mavo Create was built on top of GrapesJS[1], a website templating WYSIWYG editor. I chose this editor as a starting point because of its well-documented and easy to understand API, its active community, and its maturity. Many WYSIWYG editors that I explored were similar to rich text editors; they did not allow the user to create advanced structure while creating his website. GrapesJS was different because it gives the user full control over how HTML elements are displayed in the webpage; meanwhile, it abstracts away much of the technical terminology of HTML. Another benefit of GrapesJS was that it allows the user full control of how the webpagehe creates looks with clear styling tools. In many other WYSIWYG editors, such as WordPress, it was difficult to figure out how to modify preset templates that users needed to start with. In GrapesJS, users can start their webpages from a blank canvas. Finally, because GrapesJS is a templating tool, it distinctly shows where different elements on the page are and allows for easy selection of elements.
18 Chapter 3
Interface Design
Mavo Create was designed with the concepts of WYSIWYG editing and direct ma- nipulation in mind. This chapter describes the design of the interface of Mavo Create, including how users would interact with the editor to produce their Mavo apps.
Figure 3-1: Mavo Create Editor
The Mavo Create editor has three main components: the canvas, the editing toolbar, and the commands toolbar. These three features are highlighted in Figures 3-2a, 3-2b, and 3-2c, respectively. The canvas is where the user creates his web
19 (a) Canvas (b) Editing Toolbar (c) Command Toolbar
Figure 3-2: Components of Mavo Create application. It is the plane where users organize their HTML elements into their desired layouts. The editing toolbar provides an interface where users can see available HTML elements, add them to the canvas, and then style the elements. The editing toolbar also allows the user to visualize the structure of the elements on the canvas. The commands toolbar provides the user with different commands and capabilities intended to help him create his webpage. This chapter describes in further detail the interface of the editor and what it is capable of.
3.1 Creating Elements
When creating a webpage (with or without using the Mavo language), one usually creates the structure and styling using the HTML language. With Mavo Create, instead of creating code that corresponds to various elements on a webpage, the user can drag and drop visual representations of HTML elements from the editing toolbar onto the canvas. These drag and drop elements are called blocks. Blocks are shown to the user in the editing toolbar when the user clicks on the Blocks icon (see Figure 3-3d). Blocks present the user with a group of elements that can be placed on the canvas for certain effect. Blocks can contain a single HTML element, or multiple elements structured together. For example, an 퐼푚푎푔푒 block contains only an image HTML element, but an 푂푟푑푒푟푒푑퐿푖푠푡 block contains an ordered list containing 3 list items, each of which contain a text box. Instead of having HTML names, blocks have more intuitive human-readable names, making it easier for people with no HTML experience to understand the purpose of each block.
20 (a) Style Manager (b) Traits Manager (c) Layers (d) Blocks
Figure 3-3: Editing Toolbar Views
Besides dragging and dropping elements onto the canvas, users can also import a template into the canvas. In the commands toolbar, there is an “Import Template” button that opens up a modal where the user can paste existing HTML. The editor then parses the HTML into the canvas. This creates elements in the canvas with the same properties that those elements would have had if they were dragged and dropped from the editing toolbar onto the canvas.
3.2 Navigating the Canvas
Selecting the elements in the canvas will cause them to appear highlighted. The blue highlight contains a tab showing a human-readable title for the HTML element that
21 was selected, such as “Text” for a
3.3 Styling and Editing Elements
After an element has been added to the canvas, a user can modify the styling of the element. Upon double-clicking on an element in the canvas, the user can directly edit the content of that element if there is any content to be manipulated. For example, double-clicking on a text element allows the user to edit the text. However, not all elements, such as empty HTML sections, have content in them. If the user clicks once on any element in the canvas, the Style Manager will open in the editing toolbar, which can be seen in Figure 3-3a. The Style Manager provides the user with styling options specific to the selected element. It is a WYSIWYG way of editing the CSS of the given element. After clicking on an element, the user can also access the Trait Manager for that element in the editing toolbar. An example of the Trait Manager is pictured in Figure 3-3b. The Trait Manager allows the user to change non-visual attributes of the selected element. Because many Mavo capabilities are expressed by adding attributes to an HTML element, the Traits Manager is home to certain Mavo capabilities in the editor. In order to make an element an editable Mavo element, the user can give the element a “Mavo Name” in the Traits Manager. This translates to the property attribute in Mavo. Giving an element a Mavo Name will also change the text in the tag shown when highlighting an element in the canvas; instead of just showing the element name, the tag will now also show the Mavo Name. The Traits Manager also contains a “Repeatable” checkbox, which the user can check to make the element repeatable.
22 Figure 3-4: Mavo Storage Settings Modal
This corresponds to the mv-multiple attribute in Mavo. Finally, there is a “Mavo Target” dropdown selector for each element in the Trait Manager. The contents of the dropdown changes based on the element. The item selected by this dropdown menu will be the target of edits while in editing mode of the Mavo app. This corresponds to the mv-attribute attribute.
3.4 Command Toolbar
The command toolbar provides commands that can help the user control the creation of his website. The command toolbar contains undo and redo buttons, and a button for clearing everything from the canvas. There is a “Show Borders” button that outlines each element on the page in a dotted line, so that users can better see where each element is on the canvas. An “Import Template” button allows the user to upload existing HTML into the canvas. The “Mavo Preview” button allows the user to see what his current webpage would
23 Figure 3-5: Mavo Expressions Creation Modal with Popover Open
Figure 3-6: Mavo Expressions Popover Opened from the Canvas
24 look like as a Mavo App. This opens the Mavo app in a new tab, where the user can edit the data on the page. A download button allows the users to download the HTML file containing the Mavo app they have created on the canvas. Two more buttons in the toolbar help the user create Mavo expressions and modify Mavo storage settings. The “Mavo Storage Settings” button opens a modal (pictured in Figure 3-4) that includes a text box where the user can name his Mavo app, and a dropdown of available storage locations for his Mavo app’s data. Upon selecting an item in the dropdown menu, the user is given a description of what using that data storage location implies, and what other information he needs to supply to use that data storage location, if applicable. For example, if the user selects “Dropbox” as his storage location, he will be instructed to create an empty file in Dropbox and provide the sharing link for that file. The “Create Expressions” button opens a modal to help users create Mavo ex- pressions. The modal is pictured in Figure 3-5. When typing an expression in this modal, a popover will appear, telling the user what possible operators, special key- words, and functions he can use in his expression. The popover also includes the Mavo Names that a user has given to elements in the canvas. When a user clicks on an operator, function, or keyword from the popover, the expressions text box in the modal is populated with that clicked element. There is a “Copy Expression” button in the modal that the user can use to copy the expression to his clipboard once he has finished creating it, surrounding the expression on either side with square brackets. If the user had previously selected a text element on the canvas, an “Insert Expression” button will also appear in the modal. Clicking this button will surround the user’s expression with square brackets and insert the created expression into the canvas in the previously selected text element. Users can also create expressions directly in the canvas. If the user is typing in a text element on the canvas and types an opening square bracket, a popover will appear on the text element with the same information as the popover in the “Create Expressions” modal (see Figure 3-6). The popover disappears if the user clicks away from the text element, or if the user types the closing square bracket.
25 26 Chapter 4
Implementation
This chapter describes the implementation of Mavo Create. Mavo Create was built using GrapesJS, a WYSIWYG templating tool. Mavo Create is hosted by Github in Github Pages, located at https://mavoweb.github.io/create/.
4.1 Mavo Create Application
Mavo Create is an application built using a plugin for GrapesJS. I created this plugin to handle the basic changes to the GrapesJS interface. Then, I added additional changes in the Mavo Create application to handle more complex interactions, such as the modals used for creating Mavo expressions and managing the Mavo data storage location. The plugin adds various components to GrapesJS in order to incorporate Mavo data editing capabilities to the HTML generated by GrapesJS. The plugin also enhances the base HTML editing capabilities provided by GrapesJS.
The Mavo Create plugin for GrapesJS was structured based on other official GrapesJS plugins. I used npm to organize dependencies and build the plugin, and used webpack to bundle all source code before building. The main plugin controller file contains many default parameters that can be changed when loading the plugin. These parameters control what blocks are available to the user in the editing toolbar and how labels in the editor are presented to the user, among other things.
27 4.2 Blocks
As discussed previously, the blocks in the editing toolbar presented to the user allow him to create his website by dragging and dropping blocks onto the canvas. These blocks are not built-in to GrapesJS, but instead needed to be programmed in. As part of the plugin I created for Mavo Create, I implemented several types of blocks in three categories: “Content”, which includes basic content elements (text, links, images, videos, maps, lists, sections, and dividers); “Interactive”, which includes form elements (inputs, checkboxes, text areas, labels, dropdowns); and “Tables”, which contains table elements with varying numbers of columns and rows. The category that a given block belongs to, as well as the name of a block, is set using the parameters of the plugin. In order to add each block to the plugin, I used the GrapesJS API to specify the HTML content of each block as well as the block’s label, category, and icon. While GrapesJS did have official plugins for adding pre-built blocks, these plugins didnot offer enough flexibility to be used in Mavo Create because the blocks could notbe categorized and their content could not be edited without changing the source code of the pre-built plugins.
4.3 Components and Traits
In order for GrapesJS to correctly display an element in the canvas, that type of HTML element must be specified as a 푐표푚푝표푛푒푛푡 in GrapesJS. A component for an HTML element defines how that element appears in the canvas, where theele- ment can be added to the canvas, how the user can interact with the element, and what properties the element can have. There are several built-in component types in GrapesJS. One example is the text component. Any text HTML element (
,
, etc) is considered to be a text component. The text component specifies that these elements should have the label “Text” when being hovered. Their content can be edited by double-clicking on them. They can be dragged anywhere onto the canvas, but cannot be nested inside one another. They have id and title attributes that
28 should be displayed in the Trait Manager. All of these behaviors are specified by the component for text elements. Several component types important to creating Mavo applications, such as the input, ordered and unordered lists, and checkbox components, were not defined by GrapesJS. While there was an official GrapesJS plugin available for adding form cat- egory components (including inputs and checkboxes), these components were limited and difficult to use. In addition, this plugin did not allow the addition ofanyform category elements to the canvas unless those elements were contained in a form, so I decided not to use this plugin. I created the necessary components in my own plu- gin using the GrapesJS API. Adding a new component type included extending the default component type by changing its parameters, specifying the attributes of the new component, and creating a function that could identify an element as a member of that component type or not. In order to have the desired Mavo attributes available to the user in the Mavo Create editor, I needed to add the property, mv-multiple, and mv-attribute at- tributes to each component. I did this by defining a 푡푟푎푖푡 for each of these three attributes, and adding the traits to each component. When a user clicks on an ele- ment in the canvas of the editor, they can view the traits of that element through the Trait Manager in the editing toolbar.
I defined two new global Traits: an input trait for property, labeled “Mavo Name”, that would allow the user to enter in his desired property name; and a checkbox trait for mv-multiple, labeled “Repeatable”, which allows the user to designate an element as repeatable by checking the checkbox. The Mavo property attribute cannot contain spaces, and is not case sensitive. In order to prevent users from inserting spaces into the “Mavo Name” field, I automatically remove spaces once the user finishes typing. I also make the Mavo Name all lower case once the user has finished typing, to make the user aware that the property name is case insensitive.
The mv-attribute trait for each component was labeled as the “Mavo Target”, since it specifies what Mavo will be editing when the given component is being edited in the Mavo app. The trait is a dropdown menu, where the user can select the “Mavo
29 Target”, which is a human-readable name for the attribute of the component that can be edited by Mavo. The default target of mv-attribute was labeled in the dropdown by having the word “(default)” inserted after the attribute that would edited by mv-attribute. I was unable to define a global trait for the mv-attribute attribute, because the contents of this trait presented to the user would change based on the component that the trait was attached to. For example, for the image component, the “Mavo Target” dropdown would include the item “Source (default)”, because the src attribute is a possible editable target of mv-attribute (and the default attribute that Mavo edits). However, a text component would not have this item in its dropdown, since text components do not have src attributes. For the components that were already supported by GrapesJS, I looped through each of these components. For each component, I added the defined property and mv-multiple attributes to their list of traits. Then, I created the mv-attribute trait for each component. In order to establish what should be in the dropdown menu for each component, I read the other traits of the component and established those traits as possible targets for mv-attribute. For most components, the default for mv-attribute is none, and the contents of the element are the default editable item. For these components, the dropdown menu would list “Text Content (default)” as one of the options for the Mavo Target. To set these Mavo traits in components that were not already supported by GrapesJS, I simply coded these traits into the new components as I created them.
4.4 Expressions
Users can add expressions into their Mavo app in two ways: using the “Create Ex- pressions” modal, or simply typing expressions directly into the canvas. When the user clicks on the “Create Expressions” button, a modal opens with a “Copy Expression” button and a text box that prompts the user to start writing his expression. Upon clicking on the text box, a popover appears. The popover contains information about all of the operations, special keywords, and functions that can be
30 used in Mavo expressions. This information comes from a JSON file from Mavo, which I parse for the relevant information and display in the popover. The popover also contains a list of the Mavo Names (the property attributes) that the user has added to elements in his editor already. This information is retrieved by looking at all elements on the canvas, and recording the values of the property attributes for all elements that have a property attribute. As the user types his expression in the text box of the expression modal, the items in the popover will filter, showing only the items that contain the string in the text box. If no items in the popover contain the string in the text box, or if the user has typed a space, the popover will reset to contain all of the operations, special keywords, functions, and property names available.
If the user clicks the “Copy Expression” button, the expression in the text box will be copied to his clipboard, so that he can paste it into the editor wherever he wishes. The text box is surrounded by square brackets, which are a necessary part of a Mavo expression, but are not part of the text in the text box where the user is writing his expression. For security reasons, many popular web browsers only allow programs to copy something to the clipboard if the text exists in some selectable element on the page, such as an input or textarea. Therefore, in order to copy to the clipboard the complete expression with the square brackets surrounding it, I create a textarea element at a large offset to the left, such that it would not be seen on any computer screen. I then populate this textarea with the contents of the user’s expression, plus the square brackets on either side. I select the textarea programmatically, copy the contents to the clipboard, and then delete the textarea element.
Another button, “Insert Expression”, also appears in the modal if the user had selected a text element in the canvas before clicking the “Create Expressions” button. When the user clicks the “Create Expressions” button, I first check to see if the user has selected an element from the canvas, and check that the element is a text element (since one cannot type expressions in, for example, an image). If he has, I know that he likely would want to insert whatever expression he creates into that text element. In this case, I make the ‘Insert Expression” button appear in the modal. When the
31 button is clicked, I take the the expression that the user has typed in the expressions text box, surround the expression in square brackets, and insert it into the selected text element on the canvas by appending the expression to the existing content in the text element. As mentioned above, users can also simply type expressions directly into text elements on the canvas. I created a listener event to listen for all character entries in text elements on the canvas. If the typed character is an opening square bracket, and the user is typing in a text element, then I add a popover to that text element and show it to the user. The popover is the same popover as the popover in the “Create Expressions” modal, so it contains the same information. Once this occurs, I add two more listeners to the text element with the popover: one that closes the popover when the user types the ending square bracket, and one that closes the popover when the user is no longer focused on the text element.
4.5 Data Storage
If the user clicks the “Mavo Storage Settings” button in the command toolbar, he is able to change two attributes that affect the storage of his Mavo app’s data. The first is the Mavo app’s name, which represents the mv-app attribute. The default is having no name for the Mavo app. If the user edits the app name text box and saves, I set the content of the text box to be the new mv-app attribute for the user’s Mavo app. When the user reopens the storage modal, the app name text box is populated with the current value for mv-app. The modal also provides a dropdown showing the user what his different storage options are. If the user changes the selected item in the dropdown, the helper text in the modal will be updated. This text is specific to each storage type. Ifthe user selects the Browser or None options for storage, the mv-storage attribute will be updated to “local” or “none”, respectfully. For the Github and Dropbox storage options, more information is needed from the user. For the Dropbox storage option, the user is presented with an input box, and asked to insert the sharing link to his
32 file in Dropbox where the data should be stored. This link becomes the valueofthe mv-storage attribute. If Github is selected, the user is prompted with a text box asking for his Github username. Using this username, I craft the Github URL for the location where Mavo will create a file to store the app data. This URL becomes the value of mv-storage. When the user reopens the modal, I set the dropdown menu to select the correct option, and, if there was a text box prompting the user for more information, I populate this text box with the user’s information (either the Dropbox URL or the Github username). The modal contains a “Save Changes” button. If the user clicks this button, I save the changes he has made by storing his new values for mv-app and/or mv-storage as variables in code. Otherwise, if the user closes the modal, I discard his changes.
4.6 Completing the Mavo App
As mentioned previously, the user has the ability to preview his Mavo app in a new tab of the browser and to download the HTML for his Mavo app. In order to accomplish this, I created a new command in the Mavo plugin for GrapesJS. GrapesJS produces HTML and CSS as different files, and creates classes for HTML elements thathave corresponding styling in the CSS file. I created a command that gets the HTML and CSS from the canvas of the editor and outputs a string containing the HTML object with all CSS inline in the style attributes of the corresponding HTML elements. The command uses the Juice package[2], which inlines CSS. With all the styling in the HTML, I can then export the HTML for the Mavo preview or the download as needed. When the user clicks the “Mavo Preview button”, I get the inlined HTML from the canvas using the command just described. I then create a new window in JavaScript. Because I have a reference to that window, I am then able to write changes to the window. I add the Mavo JavaScript and CSS files to the head of the HTML document of the new window. I then add the mv-app and mv-storage attributes to the body of the new window’s document. The values for these attributes come from the user
33 setting the name and storage location of his Mavo app in the editor using the “Mavo Storage Settings” modal. If the user had never set these values, defaults of no app name and local storage are used. Finally, I add the inlined HTML to the body of the new window’s document. The result is that the user sees a working version of his Mavo app created from his canvas. From here, the user can use his Mavo app. A similar process happens when the user clicks the “Download Your Webpage” button. Instead of creating a new window, I use my custom HTML command to get the inlined HTML as a string. I insert the HTML string, the user defined Mavo app name, and the user defined storage location into a preset HTML head and body, giving me a larger string containing all the contents that should be downloaded in the download file. I then create a new hidden link element on the Mavo Create page, and link the element to the contents that should be downloaded. I simulate a click on this element to trigger the download, and the contents of the hidden element are downloaded as a file to the user’s computer. I then remove the hidden link element from the Mavo Create page. This produces an HTML file of the Mavo app that the user can open in his browser and start using.
34 Chapter 5
User Study
A study with five users was conducted in order to evaluate the usability and learn- ability of Mavo Create as well as the editor’s effectiveness as a WYSIWYG editor for Mavo apps. The study specifically tested the Mavo capabilities exposed by Mavo Create, and not the ability to create templates for webpages using the editor’s HTML- building functionalities.
5.1 Study Design
The user study had four parts: an introduction to Mavo Create, a tutorial, timed tasks, and a post-test interview. Each study took about one hour to conduct.
Because the target user group for Mavo Create is people with little to no web development experience, this study was conducted with participants that are in the target user group.
The goal of the user study is too determine how usable and learnable Mavo Create is, specifically with respect to transforming static webpages into dynamic Mavoapps. Each test user’s behavior while using the editor as well as their direct answers to questions were recorded in order to evaluate the editor. The user study also provides a form of feedback for how to improve the editor.
35 Figure 5-1: Static Template for Tutorial Webpage
5.1.1 Introduction
After having each test user read and sign a consent form, the user is asked about his web development experience, whether he had ever used a WYSIWYG website creation tool before, and what obstacles he may have faced in the past when trying to put something on the web. I introduced each user to Mavo Create by first setting up the situation. I showed the user a static webpage, pictured in Figure 5-1. I told the user what steps usually need to be taken in order to edit the static webpage or add more information; the user would have to either edit HTML code or use an existing WYSIWYG editor. I then showed the user the same template, but in the form of a Mavo app. I showed the user that in editing mode of the Mavo app, the data on the page could be changed and amended. I demonstrated to the user how certain elements of the app can be manipulated and edited directly in the browser. I told the user that any element on the page can be made into an editable data item. I also showed the user that some elements are repeatable, and showed the user how to create new data using this feature. Finally, I showed the user the results of expressions on the page, and how the value of the expressions change as the data on the page changes. I explained
36 that Mavo allowed for the manipulation of data and for calculations to be performed over the data. I warned the user that usually creating a Mavo app requires knowledge of HTML and CSS. I then introduced the user to Mavo Create. I told the user the purpose of Mavo Create, and that the user would be using Mavo Create to transform the static template of the webpage in Figure 5-1 into a Mavo app.
5.1.2 Tutorial
In the tutorial phase of the user study, I taught the user how to use Mavo Create by walking through several steps to transform the static webpage in Figure 5-1 into a Mavo app. I worked with the user to make these changes. On average, this phase took about 35 minutes. I first showed the user how to import existing HTML into the Mavo Create editor, and we imported the static webpage template. The first few tasks had to do with making elements editable. I showed the user how to make elements editable, and then showed the user the result in the Mavo app using the “Mavo Preview” button in the editor. I then asked the user if he could make other elements on the page editable as well. I followed this same process for teaching the user about making elements repeatable and using expressions. With expressions, I also pointed out the “Create Expressions” modal to the user and showed him how it worked. As the user and I went through tasks, I asked him if he had any questions and encouraged him to speak up if anything was confusing. Finally, I introduced the idea of data storage to the user. I told the user that Mavo stores the data he creates in his Mavo app, and that he can change the location of where that data is stored using the “Mavo Storage Settings” button in the editor.
5.1.3 Timed Tasks
In the timed task phase, the users were given a number of tasks to complete by themselves, without my aid. I first showed the user a static webpage used for making
37 Figure 5-2: Static Template for Timed Tasks Webpage decisions (seen in Figure 5-2). I then showed the user the same webpage but in the form of the Mavo app. I demonstrated how this Mavo app worked, and told the user that he would be modifying the static template using Mavo Create in order to create the Mavo app version of the webpage. The user could ask for help in cases where he was struggling or had questions, but in general he would complete the timed tasks alone. These timed tasks tested the same Mavo Create abilities exposed to the user in the tutorial phase. The tasks are listed in Table 5-3. This table also contains a description of what each task was testing, and how long on average a user took to complete the task. As the users completed the tasks, I recorded their different attempts and ap- proaches to the various tasks. I asked questions about their thought processes and ideas.
5.1.4 Post-Study Interview
After the users completed the timed tasks, I asked them questions about their expe- riences with the editor. This included their frustrations with the editor, what they
38 # Task Capability Tested Avg. Time 0 Import the provided HTML into Importing existing 0:42 Mavo Create. HTML 1 Make it possible to edit the deci- Adding Mavo Name 1:03 sion question, the reason for each (property) pro and con, and the weights of each pro and con. 2 Make it possible to add more pros Making ele- 0:53 and cons. ments repeatable (mv-multiple) 3 Make the count of pros and cons Using simple expres- 0:38 dynamically update as more pros sions (one function, and cons are added. one reference to a Mavo element) 4 Make the score dynamically up- Using expressions that 1:27 date. The score is the sum of use multiple functions weights of pros minus the sum of and reference multiple weights of cons. Mavo elements 5 Make the answer dynamic based Use nested expres- 3:02 on the score. Show “Yes” if the sions score is positive, “No” if it’s neg- ative and “Maybe” if it’s 0. 6 Make it possible to add more de- Making elements re- 0:25 cisions. peatable 7 Make the count of “yes” and “no” Recognizing different 5:32 decisions at the bottom of the scope of Mavo data; page dynamic. using simple expres- sions 8 Change the name of your Mavo Setting data storage 0:52 app, and store your Mavo app preferences data using Dropbox. 9 Download and open your Mavo Completing the Mavo 0:12 app. app
Table 5-3: User Study Tasks and Average Time to Task Completion (in minutes and seconds)
39 liked about the editor, and how they may use the editor themselves if at all.
5.2 Pilot Study
A pilot user study was conducted in a group setting with 8 users, all of whom did not belong to the target user group. The pilot study revealed issues with Mavo Create and with the study itself. Changes were made to adjust for these issues before the user testing continued.
One major change made to the study itself was the template for the timed tasks static webpage that the users were meant to transform into a Mavo app. Originally, the template was very complicated and contained many nested tables. This made it difficult for the pilot users to figure out which elements should be given whichMavo properties. Responding to this, I added support to Mavo Create for new types of blocks such as empty sections and unordered lists. This allowed me to then create a simpler template with the same appearance (but with fewer nested elements). In the following user studies, I used the simplified template.
Users in the pilot study also indicated surprise that expressions created in the “Create Expressions” modal did not automatically insert themselves into text elements on the canvas. In response, I added buttons to this modal that allow users to copy expressions they created in the modal, or insert the expression they created in the modal into the last text element that was selected in the canvas.
5.3 Experiment and Results
This section details the user study experiment and the results of the experiment. These experiments were performed after the pilot user study, and after the changes informed by the pilot study were made to Mavo Create and to the study itself.
40 5.3.1 Participants
Five participants were selected. All were current students or recent graduates of a university where they study/studied a technical field in engineering, but specifically not Computer Science or Electrical Engineering. One participant was male, and four were female.
5.3.2 Results and Interesting Findings
During the tutorial phase, almost all users asked about how the data on the page was structured. Many were confused by how the value of a Mavo Name in an expression might change depending on where in the page the expression was. This issue of scope occurred with all users, and difficulty understanding the scope of property name variables made it difficult for the users to get more complex expressions correct. Additionally, four of the five users asked during the tutorial phase for clarification about how the “sum” and “count” functions were different. Even after explaining the difference, two of the users went on to use “sum” where they should have used “count” in the tutorial. The average times needed to complete the timed tasks from the study can be found in Table 5-3. It seems that tasks that tested making elements editable and repeatable (utilizing the Mavo property and mv-multiple attributes) were easy and quick for users to perform. These tasks seem to be highly learnable, and Mavo Create provides a usable interface for adding these Mavo attributes. All users were successful in these tasks. Tasks having to do with changing the Mavo storage settings, importing HTML, and downloading the Mavo app were also easy for the users; all users were able to complete these tasks with little difficulty. Two users commented that they did not like how many clicks it took to modify the Mavo Name of an element. Selecting an element in the canvas opens the Style Manager, and then the user has to click over to the Traits Manager to add the Mavo Name to the element. I believe that this is an artifact of the study; none of the tasks required the use of the Style Manager, because the user test was not geared toward
41 testing the templating or styling abilities of the editor. However, styling would likely be more common in regular use of the editor.
One interesting case with making elements editable occurred: a user thought that Mavo Names (property names) would be case sensitive, so the user marked two different editable elements with the same Mavo Name, but with one capitalized, thinking that the capitalization would set the two editable elements apart. A different user attempted to use spaces in his Mavo Name, but immediately asked if he were allowed to do so.
Almost all users used the “Mavo Preview” button to check their work after each task, without being told to do so.
Tasks involving expressions were less straightforward to the users than other tasks. All users were able to complete tasks involving simple expressions. Two users com- mented that they thought the expressions were similar to Excel expressions, which made them easier to learn. Many users struggled when they needed to create nested if() expressions in Task 5. Two users were able to figure out that they needed mul- tiple if() statements to accomplish the task, but they were unable to figure out the syntax of the nested expression. For more complicated expressions, such as the one in Task 7, only two of the users were able to complete the task without help. One user figured out the syntax through trial and error: he attempted an expression, and then checked the result using the “Mavo Preview” button until he came to the correct result. However, the other three users simply stared at the screen for an extended period of time, or searched through the expressions modal looking for an appropriate function.
Interestingly, all users except for one used the “Create Expressions” modal to see what expressions were available, but did not use it to create their expression. Most users would only open the modal, find the information they were looking for, and then continue to type their expression directly into the canvas.
42 5.4 Discussion
The user study raised several interesting questions about how to teach users about Mavo expressions and the structure of data in a Mavo app. The users’ uses of the ex- pressions creation modal shows that the information about available functions would provide the most help to the user if it were presented inline instead of in a modal. However, this does not address how to better teach users about how to create more complex expressions. I think one way to improve this experience would be to provide the user a way to see what data is stored in a given Mavo Name at different points in the webpage. This would make the scope of certain data elements more apparent to the user. Having this information proved useful to the one user described above who used trial and error to figure out a complex expression, using the “Mavo Preview” to see the result to his expression and the data stored in the Mavo Names in his expression with every iteration of his attempts. Having the information about the stored data in the Mavo app allowed the user to figure out the correct expression. One change I made to Mavo Create after performing the user study was to make the expressions popover from the “Create Expressions” modal appear inline on text elements in the canvas when the user is typing an expression directly in the canvas. The goal of this change was to make it easier for users to understand what they can add to an expression without needing to click away to a modal. Another change I made to Mavo Create confronted the issue of valid property names. To avoid confusion about whether spaces were allowed in Mavo Names, or if Mavo Names were case sensitive, I added functionality to the editor that checks the Mavo Name on an element after the user types the name in the editor. I remove any spaces, and convert the name to lowercase. Overall, users enjoyed using Mavo Create. Four of the five users said they would probably use Mavo Create to make a website if they ever needed to do so. Two users compared Mavo Create to WordPress, saying that Mavo Create provided flexibility and functionality that they struggled to achieve with WordPress. One user described Mavo Create as very straightforward to use.
43 44 Chapter 6
Conclusion
Mavo Create is a WYSIWYG editor used to build dynamic Mavo applications. The goal of Mavo Create is to allow uses with little to no web programming experience to create Mavo applications (which usually require knowledge of HTML to create), using a visual editor that does not expose any code to the user. Mavo Create builds upon an existing editor, GrapesJS, to create a WYSIWYG editor for Mavo. User testing with Mavo Create resulted in generally positive reception.
6.1 Future Work
Mavo Create currently encompasses the basic data creation and manipulation capa- bilities provided by Mavo. However, there are many more capabilities that allow for the creation of more advanced Mavo apps. It would surely be useful to expand Mavo Create by incorporating other more advanced Mavo capabilities into the editor. Browser compatibility is another area for future development for Mavo Create. Currently, Mavo Create works best with Chrome. While the editor is still usable on other browsers, some parts of the editor display odd behaviors in other browsers. Finally, Mavo Create could be improved in the way it teaches users about expres- sions and data scope. These proved to be two confusing points in the user study. Mavo Create would empower users to create more complex Mavo apps if the users could better understand how to perform more complex computations on their data.
45 46 Bibliography
[1] Artur Arseniev. GrapesJS Github. https://github.com/artf/grapesjs. Version: 0.14.11. Accessed: 2018-05-01.
[2] Automattic. Juice Github. https://github.com/Automattic/juice. Version: 4.1.1. Accessed: 2018-05-01.
[3] Francesca Cicileo. Mavo Create Github. https://github.com/mavoweb/create. Version: 0.1.97. Accessed: 2018-05-01.
[4] Lea Verou. Mavo: A new, approachable way to create Web applications. http://http://mavo.io/. Accessed: 2018-05-01.
[5] Lea Verou. Mavo Github. https://github.com/mavoweb/mavo. Version: 0.1.4. Accessed: 2018-05-01.
[6] Lea Verou, Amy X Zhang, and David R Karger. Mavo: Creating interactive data- driven web applications by authoring html. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology, pages 483–496, 2016.
47