White Paper

UsAbility Test

Usability Study

Free Web Authoring Tools

Kelsey Rayborn

April 19, 2015

Introduction

In recent times an online portfolio has become a convenient way to present information to a future employer or client. This white paper presents a usability study concerning the ability of two free web authoring tools to create a well-presented portfolio. These two tools, Weebly.com and Wix.com, were tested to compare both their functionality and usability. A typical user of these products would be a standard professional who is well versed in using web based applications and technology to create documents. I would expect this user to also have a solid foundation of web-based knowledge.

Methods

This test was performed using a desktop PC with a Windows 7 operating system, and Google Chrome was selected to be the browser used to access the websites. This desktop PC was located on the fourth floor of the University of Idaho library, which was chosen because it is a quiet floor and thus a good distraction-free working environment. Testing was performed over several days over the week of 4/13/2015 - 4/17/2015. Several tasks were performed with each tool in order to rate their usability, and these tasks are as follows:

1. Creating an account

2. Choosing a theme

3. Changing the background

4. Changing the font

5. Incorporating pictures

6. Incorporating videos

7. Adding buttons

8. Uploading documents

9. Publishing the site

Web authoring tools were judged based on the followting three criteria: I was quickly able to locate the function needed, the function did what I expected from it, and I was satisfied with the amount of time it took me to complete the task. These criterion were judged based on the following Likert scale:

Strongly Agree

Agree

Neutral

Disagree

Strongly Disagree

5

4

3

2

1

Results

1 Creating an account

Weebly The welcoming page of Weebly prompted me to enter my name, email, and desired password. I did just that and created an account.

Wix Wix took me through a few steps in order to create an account. It first prompted me to enter my desired email and password once, but upon entering it prompted me to re-enter both of these things. It may have been better to have all of the inputs on one step. This is seen in figure 1.1

Figure 1.1

1

I was quickly able to locate the function

The function did what I expected

I was satisfied with the amount of time it took

Weebly

5

5

5

Wix

5

5

4

2 Choosing a Theme

Weebly After creating an account, Weebly prompted me to choose the focus of my webpage, and I chose the site option. It then gave me several options for a startup theme that matched my focus. Each of these themes gave you the ability to customize the color scheme. This option is seen in figure 2.1. After choosing a theme I was also given the ability to choose my web domain name.

Figure 2.1

Wix Wix also gave me the option to choose a focus for my site, but it provided many more options. I chose to create a personal portfolio. It then gave me several theme template options related to my choice. I could view the template, but not edit it until I had chosen one to use. Options are seen in figure 2.2.

Figure 2.2

2




Weebly

5

5

5

Wix

5

5

5

3 Changing the Background

Weebly Changing the background on Weebly was not a provided feature. It required me to go in and edit the html5 code to insert my own background image. I was able to figure out how to do this through a Google search, but not having this option being automatically available is a bit of a downfall of Weebly. It required changing one line of code wherein I included the name of the jpg for my desired background. I then had to upload the jpg to the site.

Wix Wix was significantly easier. They was a background option in the design tab which allowed me to choose from preset background or upload one of my own from my computer. The initial option button is seen in figure 3.1

Figure 3.1

3




Weebly

1

4

1

Wix

5

5

5

4 Changing the Font

Weebly There was a fonts options in the design tab where I could change any layer of font, i.e. headers, footers, captions, etc. to any font they had preloaded in there website. I could also change the font size in this menu.

Wix Wix also had a separate menu for fonts, but it also had an option for a font theme. It had several preloaded font packages that worked together cohesively. You could also choose each font separately if so desired. I chose a font package because that seemed simpler.

4




Weebly

5

4

5

Wix

5

5

5

5 Incorporating Pictures

Weebly Adding an image on Weebly required one of two things. Either I replace an old picture already used in the theme with one of my choosing, or I drag an image into a customizable block that was already incorporated into the website. Dragging the image is seen in figure 5.1. After this I uploaded the photo of my choosing into the block from my computer.

Figure 5.1

Wix The process is very similar on Wix. You can either replace an existing photo with one of your own, or add an image box to the page where you want an image. Uploading from your computer is once again the process to do this. One difference is that you do not need a preset box to place the image in, you can put it wherever you like.

5




Weebly

5

3

5

Wix

5

5

5

6 Incorporating Videos

Weebly Video additions were similar to pictures, but the addition of video files not uploaded to YouTube is not included in the free version of Weebly. It does allow you to add a video to try out the feature, but you cannot publish your website with the video on it. To add a YouTube video to the site, I dragged the YouTube icon over to a customizable block and clicked on the video that came up. I then pasted the link to my video in the provided box, seen in figure 6.1.

Figure 6.1

Wix Wix also only provided a YouTube video option. The process was very similar; I added a video option from the Add menu and pasted the link for my video in. This can be seen in figure 6.2.

Figure 6.2

6




Weebly

5

3

5

Wix

5

3

5

7 Adding Buttons

Weebly The method for adding a button the page is similar to pictures and videos. I dragged the button into the customizable frame, changed the text within, and added a link would be accessed by pressing the button. The font of the button text can be changed in the font menu.

Wix After going to the Add menu, I clicked button and one popped up on the screen. If I clicked on the button I could change the text, link, size, and many other things.

7




Weebly

5

4

5

Wix

5

5

5

8 Uploading Documents

Weebly On the side menu there is a document option that I dragged to a customizable block. After this, I could click on the document and upload one of my choosing. It a while to upload a simple PDF document. The entire document displayed on the page.

Wix on the side menu a clicked on Add->Media->document to create a document button on my site. I clicked on the document and was able to upload the document of my choosing. The default icon for this document was a PDF symbol, but that could be changed by clinking on the link and choosing new picture.

8




Weebly

5

5

4

Wix

5

5

5

9 Publishing the Site

Weebly To publish the Weebly site, I clicked the publish button in the upper right hand corner of the screen. I was then prompted to choose a domain name, and then I published my site.

Wix After my site was completed, I published by pressing the publish button in the upper right hand corner of the screen. It then gave me several options to customize that can be seen in figure 9.1.

Figure 9.1

9




Weebly

5

5

5

Wix

5

5

5

Recommendations

After going through and testing several different basic features of each free web authoring tool, my final recommendation would be Wix. While both application had many of the same features, Weebly limited its user to a single customizable block space for each page, which severely limited the creativity of the user. Wix allowed the user to really make their own website instead of relying solely on a template. Both websites would be able to create a functioning portfolio, but it would be easier to really make something of your own in Wix. I also complied an average Likert scale score for both of the websites. This score is seen in the table below.

Application




Weebly

4.56

4.22

4.44

Wix

5

4.78

4.89

6 | Page

White Paper

Documents

Transcript of White Paper