Mavo Create: A WYSIWYG Editor for Mavo. Francesca Rose Cicileo

Transcription

1 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 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 2

3 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 application. 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 template 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 4

5 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 Professor Randall Davis for providing me with the Teaching Assistant positions that supported my work. 5

6 6

7 Contents 1 Introduction Motivation Objective Target Users Background Mavo Creating and Manipulating Data Computations with Data Data Storage Previous Work Research into Existing WYSIWYG Editors GrapesJS Interface Design Creating Elements Navigating the Canvas Styling and Editing Elements Command Toolbar Implementation Mavo Create Application Blocks

8 4.3 Components and Traits Expressions Data Storage Completing the Mavo App User Study Study Design Introduction Tutorial Timed Tasks Post-Study Interview Pilot Study Experiment and Results Participants Results and Interesting Findings Discussion Conclusion Future Work

9 List of Figures and Tables 2-1 Initial prototype of Mavo Create Interacting with the prototype Template display Mavo Create Editor Components of Mavo Create Editing Toolbar Views Mavo Storage Settings Modal Mavo Expressions Creation Modal with Popover Open Mavo Expressions Popover Opened from the Canvas Static Template for Tutorial Webpage Static Template for Timed Tasks Webpage User Study Tasks and Average Time to Task Completion (in minutes and seconds)

10 10

11 Chapter 1 Introduction 1.1 Motivation There are many people who have no experience with programming or web development, 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 websites 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

12 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 applications 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

13 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

14 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. With the 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 <p> element, the default is the content of the text element. For links (<a> 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 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

15 expression with square brackets 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 attribute 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 HTML into 15

16 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. For the 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

17 (a) Hovering the mouse over an element in the Template display will outline that element. (b) Modal for modifying the property and mv-multiple attributes of the clicked element. 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 people with limited HTML and programming skills to create static websites. Some examples 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

18 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 visually 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 knowledge of programming. Existing WYSIWYG editors served as a source of inspiration as well as a starting point for my own project 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 webpage he 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

19 Chapter 3 Interface Design Mavo Create was designed with the concepts of WYSIWYG editing and direct manipulation 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

20 (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 Image block contains only an image HTML element, but an OrderedList 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

21 (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

22 was selected, such as Text for a <p> element or Link for an <a> element. Occasionally, two elements on the canvas may be overlapping with one another. If the user if having trouble selecting the desired element, he can access the Layers tab in the editing toolbar, pictured in Figure 3-3c. This view shows the hierarchical structure of the HTML elements on the canvas. If the user selects an item in the Layers view, then that item will be highlighted in the canvas. 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

23 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

24 Figure 3-5: Mavo Expressions Creation Modal with Popover Open Figure 3-6: Mavo Expressions Popover Opened from the Canvas 24

25 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 expressions. 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 keywords, 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 26

27 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 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

28 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 did not offer enough flexibility to be used in Mavo Create because the blocks could not be 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 component in GrapesJS. A component for an HTML element defines how that element appears in the canvas, where the element 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 (<p>, <h1>, 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

29 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 category components (including inputs and checkboxes), these components were limited and difficult to use. In addition, this plugin did not allow the addition of any form 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 plugin 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 attributes to each component. I did this by defining a trait for each of these three attributes, and adding the traits to each component. When a user clicks on an element 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

30 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 Expressions 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

31 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

32 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. If the 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

33 file in Dropbox where the data should be stored. This link becomes the value of the 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 that have 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

34 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

35 Chapter 5 User Study A study with five users was conducted in order to evaluate the usability and learnability 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 HTMLbuilding 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 Mavo apps. 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

36 Figure 5-1: Static Template for Tutorial Webpage 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

37 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 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 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

38 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 approaches to the various tasks. I asked questions about their thought processes and ideas Post-Study Interview After the users completed the timed tasks, I asked them questions about their experiences with the editor. This included their frustrations with the editor, what they 38

39 # 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 decision Adding Mavo Name 1:03 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 elements 0:53 and cons. repeatable 3 Make the count of pros and cons dynamically update as more pros and cons are added. 4 Make the score dynamically update. The score is the sum of weights of pros minus the sum of weights of cons. 5 Make the answer dynamic based on the score. Show Yes if the score is positive, No if it s negative and Maybe if it s 0. 6 Make it possible to add more decisions. 7 Make the count of yes and no decisions at the bottom of the page dynamic. 8 Change the name of your Mavo app, and store your Mavo app data using Dropbox. 9 Download and open your Mavo app. (mv-multiple) Using simple expressions (one function, one reference to a Mavo element) Using expressions that use multiple functions and reference multiple Mavo elements Use nested expressions Making elements repeatable Recognizing different scope of Mavo data; using simple expressions Setting data storage preferences Completing the Mavo app Table 5-3: User Study Tasks and Average Time to Task Completion (in minutes and seconds) 0:38 1:27 3:02 0:25 5:32 0:52 0:12 39

40 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 which Mavo 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