Professional Documents
Culture Documents
VS.
INTRODUCTION:
This white paper details findings from a usability test evaluating two website development
platforms: Doodlekit and Weebly. Both are websites offering free webpage customization and
publishing. The test determined the ease of use to the average person. The test was constructed
by me, an average university student. The user demographic would be university students in their
mid-20s, designing a website as part of a class project. The users have basic knowledge of word
processing, operating system and internet use, but no experience creating websites.
METHODS:
The test was conducted at my apartment on 11 October, 2014. I used an Asus laptop with basic
computing specifications including: a 2.16 gigahertz processor, 4 gigabytes of random access
memory (RAM), and one 500 gigabyte hard drive. The laptop was running the Windows 8.1
operating system and Internet Explore was the web browser used. I employed a Likert scale to
help detail my findings. The scale ranges from one to three. One means a given task was
difficult to accomplish. Three means the task was easy to accomplish. A total Likert scale rating
will appear in the recommendations section to determine which platform was easier to use. The
test criteria and Likert scale are shown below.
Test Criteria:
1. Account creation
2. Choosing a template
3. Navigating the toolbar
4. Adding a second page
5. Changing website font
6. Adding an image
7. Choosing a domain name
8. Publishing the website
9. Accessing code
10. Deleting the website
Likert Scale:
This simple Likert scale allows the user to rank their experience performing each task. Users are
asked to take two things into account when performing a task: Ease of use of the platform and
how intuitive the design is. The score of each task is a combination of these two factors.
1
Difficult
2
Average
3
Easy
RESULTS
Task 1: Account Creation
Doodlekit: Score: 3
To create a website users navigate to the homepage
and scroll down to find a button labeled Sign up
free now. After clicking the button the user is
confronted with a box asking for the users full
name, email, and a password. After clicking Create
my website now the user is directed to the editor
page. A sample of the sign up button and create
account box is shown in Figure 1.
Fig. 1
Weebly: Score: 3
Weebly asks for a full name, email, and password. After clicking Get Started Weebly asks
what package the user wants to sign up for. There are options for 0, 4, 10, & 25 dollar per month
packages. Each package adds certain tools and features the previous option lacked. It then asks
if the site will be a personal website, a blog, or a store webpage. After this the user is directed to
the theme page. Figures 2 and 2-1 show the sign up and website focus boxes
Fig. 2-1
Fig. 2
Fig. 3
Weebly: Score: 3
A template in Weebly is also
called a theme. Theme
selection happens during
account creation. A window is
shown asking the user to
choose a theme. There are
multiple pages showing
different styles and colors. To
choose a theme the user clicks
the choose button located at the
bottom of the template. Figure
4 shows an example of theme selection.
Fig. 4
Fig. 5
Fig. 5-1
Weebly: Score: 3
Toolbars are fairly intuitive. There are five tabs at the top of the editing page providing tools to
enhance the website. The tabs include Build, Design, Page, Store, and Settings. These
tabs each open a different page that contain a sidebars. These sidebars display tools users will
use to customize their website. Different tools are located on a single page within the sidebar
with a slider to scroll through the different sections. The arrows in Figure 6 show the location of
tabs and toolbars.
Fig. 6
Fig. 7
Weebly: Score: 2
To add a page the user navigates to the Pages section of the editor. In
this section the user clicks an orange button labeled Add page. A box
opens asking the user what type of page they are adding. If a standard page
is selected, a new page appears on the list of pages. The user then chooses
the page name, page layout, or chooses to edit more advanced settings of
the page. The add page options are illustrated in Figure 8.
Fig. 8
Fig. 9
Fig. 9-1
Weebly: Score: 2
To change the font of any text on the website, the user navigates to the design section of the
editing page. The user clicks on a Change Font button on the tool bar and is shown all text
options displayed on the website. After choosing which text the user would like to change
another tool bar opens displaying font, size, line weight, color, and line height. Changes selected
by the user are immediately implemented and can be seen in the white space to the left of the
toolbar. Figure 10 shows a walkthrough of the toolbars.
Fig. 10
Fig. 11
Weebly: Score:
3
The user drags
the picture tool
on the sidebar to
the website
section at the
right of the
Fig. 11-1
toolbar. The user clicks the resulting image box and chooses the source of the picture. Options
include selecting a photo from their personal computer, searching the internet, favorite pictures,
and adding the URL of a picture. To remove the photo the user clicks the delete button at the top
right of the picture box. An example of the image selection box is shown in Figure 12.
Fig. 12
is
Fig. 13
Weebly: Score 3
Choosing a domain name is part of account creation but
is verified when publishing the website. Three options
are given on both occasions: Use a subdomain of
Weebly, register a new domain name, or connect to a
domain the user already owns. The user clicks the dot
next to their choice (shown in Figure 14) and clicks the
continue box. The only place the domain can be seen is
on this page or the settings tab on the website builder
page.
Fig. 14
Doodlekit: Score: 3
A green Publish Site button is
located right of center on the
example website page. After the user clicks this button a box appears offering two options for
publishing the website: Free and Upgrade. The free option requires the website to be a
subdomain of Doodlekit and a credit card is required to verify you are a real person. It also
shows the URL of the users website. The upgraded version allows for a new domain name
separate from Doodlekit and will allow the user to add new options to their website.
Fig. 16: Weebly publishing button
Weebly: Score 3
An orange Publish button is located
in the upper right hand corner of the
editor page. The user clicks on this
and Weebly verifies the domain selected at startup. The user is asked if they would like to
change the domain. After clicking Continue the user is asked to type words or numbers into a
box for security purposes. After correctly entering the text the user clicks the Publish My Site
button. Weebly verifies the domain once more and the website is posted online.
Weebly: Score: 2
Fig. 17: Doodlekit coding box
There are two ways to access and implement code: Adding a code box to the website and editing
the entire websites code. Adding a code box to the website is similar to adding an image. On
the side toolbar the user drags an embed code box to the webpage example to the right of the tool
bar. The use clicks the box and adds hypertext markup language (HTML) style code to their
liking (shown in Figure 18). To access the entire websites code the user clicks the Design
Tab and selects Edit HTML/CSS at the bottom of the tool bar. The screen for editing code is
shown in figure 19.
Fig. 18
Fig. 19
Weebly: Score: 3
On the Weebly account page the user must click the More button found next to the Edit
button. A drop down menu appears with several options, including a Delete Site option. After
10
the option is selected, Weebly informs the user that this action is permanent and their website
will be deleted. The user clicks the Delete Site button and the website is taken offline. A
menu walkthrough is shown in Figure 21.
Fig. 21
Average Score:
Doodlekit:
19 of 30 points
Weebly:
26 of 30 points
Recommendations
For the average user, Weebly is a better platform than Doodlekit. Weebly is easier to use
overall, as illustrated by the Likert scores above. Weeblys webpage editor is intuitive and the
tools work flawlessly. Doodlekit is harder to navigate and the tools are not as easy to find or use.
Doodlekit is thus more intimidating and the learning curve is steep. I would suggest using
Weebly to any university aged student with little to no experience creating websites. Weebly
would allow students to create a website quickly and efficiently without any hassle.