April 4, 2016

College of Liberal Arts and Sciences Office of Academic Technology

Barnard 237
University of North Carolina at Charlotte
9201 University City Blvd
Charlotte, NC 28223-0001
Re: Usability Tests of UNC Charlotte Pages: Profiles, Projects, Research, Blogs help web page
I would first like to express my gratitude to the College of Liberal Arts and Science
Office of Academic Technology for allowing me to use their WordPress system to complete my
tests. This assignment was given to me by Associate English Professor Dr. Gregory Wickliff in
my ENGL 4181, Writing User Documents class. The main goal of this assignment was to
perform usability tests on the WordPress user interface with the help web page, so that I may
analyze the results (successes and difficulties) and present my findings to the CLAS team.

Deleted:

My analysis produced several key findings. For the most part, my participants were able
to follow the help pages effectively and successfully. I believe that my testing and analysis has
given me some valuable insight into some of the deficiencies of the interface. Due to this, I feel
that I can provide the library team with a few recommendations that will further improve the
interface. My findings include:
- Users that were used to other design programs struggled at first with tasks.
- As these first-time users completed each task, the amount of problems quickly became
less frequent.
- Users wanted graphics to better explain where they should be looking for different
options.
- Users felt they would benefit more through online video tutorials with better visuals.
As these findings indicate, there are some opportunities for improvement that would help
streamline the user experience and lessen the amount of frustration they experience when
utilizing the help page for WordPress.
Sincerely,
Stephanie Lee
Author
cc:
-
-
-
-

Alex Chapin, Executive Director, CLAS Office of Academic Technologies

Ceily Hamilton, CLAS Director of Information Technology
Laurie Parker, Humanities Consultant, CLAS Office of Academic Technologies
Gregory Wickliff, Assoc. Professor of English

Deleted: pictures
Deleted: have better help
Deleted: by finding
Deleted: online
Deleted: that had

UNC Charlotte Pages: Profiles, Projects, Research, Blogs

Help Web Page:
Usability Testing Report

ENGL 4181
April 6, 2016



By: Stephanie Lee

Submitted to:
- Gregory Wickliff, Assoc. Professor of English

Executive Summary
The purpose of this study was to test
users ability to edit their webpages
with the UNC Charlotte Pages:
Profiles, Projects, Research, Blogs
help web page as their guide. I
learned a lot from this report and
hopefully my findings will help to
improve the usability of the page
itself.

find what they were looking for.

Another finding was that users turned
to searching the web for other
tutorials with better visual aids to help
them complete their tasks.
After some discussion with each of
the participants, they all seemed to
agree that, while they were ultimately
able to find what they needed, they
think it could have been much easier
to do so with better visual aids. There
were a lot of vague steps in the
process and at times they became
frustrated. Just about every participant
regularly used Google to further their
searches
for
better
tutorials.
Specifically, they were searching for
more screenshots.

I asked multiple faculty members

with varying levels of experience with
WordPress to complete three tasks for
my usability test. These tasks
included adding an image to their
webpage, editing or adding a widget
to their webpage, and attempting to
add a user to their webpage. After
each test was over, I asked the
participants a series of questions to
get them to discuss the problems they
were having during the actual test. I
also monitored their actions during
the test so I could see the exact parts
they were struggling with.

It is clear that the help page has the

right idea as to what users need help
with. However, it doesnt quite
describe the whole picture needed to
fully understand the steps it takes to
complete a task. The biggest
suggestion I would make after
completing this report would be to
add an image with every step
provided and possibly a video that
shows the exact process. I believe this
would benefit users so they are
provided with the information
necessary to make changes to their
web pages.

Some of the test participants

struggled more than others with
certain tasks, but they were all
ultimately able to complete them.
Some of the main issues I discovered
were that users preferred more visual
aids to help them with the tasks
because there was a lot going on in
WordPress. This caused some
uncertainty about where to look to

Deleted: a
Deleted:
Deleted: of mine
Deleted: to give them a

Deleted: different
Deleted: 3
Deleted: it got
Deleted: ing
Deleted: one
Deleted: directions
Deleted: . More screenshots were specifically what they
were looking for
Deleted: myself as
Deleted: : all using the help page provided by the CLAS
Deleted: faculty
Deleted: ,
Deleted: but
Deleted: ipt
Deleted: that users may
Deleted: that
Deleted: subjects
Deleted: ultimately
Deleted: these changes
Deleted: a
Deleted: the
Deleted: can be
Deleted: fully
Deleted: they need
Deleted: that they werent
Deleted: sure
Deleted: find

ii

Table of Contents

Executive Summary . i
Introduction and Procedure ... 1
Key Findings 1
1. Users struggled to find what they were looking for................. 1
2. Needs more visual aids. ............................................. 2

Conclusions and Recommendations .. 3

Appendices ... 4
1. A: Usability Tests . 4
2. B: Follow up Questions ..... 5

References 6

List of Tables and Figures

Figure 1: Adding Images Help Page .. 2

Table 1: Task Times and Averages 2
Figure 2: Suggested Reference Guide......3
Figure 3: Editing Widgets ... 3

iii

UNC Charlotte Pages: Profiles, Projects, Research, Blogs Help

Web Page:
Usability Testing Report

Introduction

UNC Charlotte Pages is an instance of Word

Press available to faculty and staff in a
number of colleges at UNC Charlotte,
including the College of Liberal Arts and
Sciences (CLAS), the College of Health and
Human Services (CHHS), and the Belk
College of Business.

Procedure
I reached out to colleagues and professors
to find participants for my study.
The usability tests I created allowed me to
observe faculty performing specific actions
using the web help page as a reference. I
created specific tasks that I tested
beforehand to ensure that the user would
have a decent chance of completing them.

These help pages were originally created for

CLAS faculty and staff, but could also be
helpful to faculty and staff in other colleges.
Most of these instructions are accurate, but
the current version of WordPress has more
efficient ways of doing common tasks.

I planned for each test session to take no

more than thirty minutes to allow me time
to communicate and discuss the tasks with
the users before, during, and after the tests.
The sessions were recorded on camera and
I recorded the screen and audio, which was
my main source of material to gather data.

My assignment was to test how much help

the web help page actually was to users. We
were also asked to provide some sort of
guide or reference that we think would be a
helpful addition to the webpage.

After the tasks were completed, I asked

each user follow-up questions to gauge
how their experiences went. I reviewed the
recordings of each session in order to
collect and evaluate data to write this
report, which was written and designed in
Google Documents.

Two Computer Science professors, one

professional web developer on campus, and
one permanent staff of SUAR IT all
participated in this study.
Only two
participants were familiar with WordPress,
so the results varied.

Deleted: c
Deleted: to
Deleted: e

Deleted: use

Deleted: then

Key Findings

The findings specified in the following report

detail each unique user experience, including
when they struggled and succeeded with
using the help page. The evidence I provide
will help CLAS to offer more useful
information for the faculty and staff of the
University of North Carolina at Charlotte.

1. Users struggled to find what

they were looking for

Deleted:

Deleted: My
Deleted: show
Deleted: s of

When I asked the users to add an image to

their page using the help page, many were
confused about the difference between the
steps in the video

Deleted: provide
Deleted: with how the help page directs them

and the written steps below it. They seemed

to contradict each other or one was missing
steps that the other didnt have.

Three of the four users ended up trying to

use Google to get a better understanding of
how to complete the tasks because they
wanted something more thorough.
They also mentioned that the help page was
hard to follow, not visually appealing, and
that they had an easier time completing the
tasks by looking at other videos or
reference guides.

Deleted: out
Deleted: or vice versa
Deleted: as if they were dummies.

Deleted: and

2. Vague, if not absent, visual aid

When asking the users if they were
uncomfortable with any of the tasks, they
all agreed that each task made them
uncomfortable only because they didnt
like the guides that were provided for them
on the web help page.

Figure 1: Adding Images Help Page

The most common response I got from

participants while they were attempting the
tasks was that they wished there were
images for them to look at to understand
exactly where they were supposed to click.

When adding widgets, users mentioned they

would have liked an image for each step
provided in the written portion so they could
know exactly what it meant by the title of
their site.

Because of the lack of images, which

caused most users to use Google as an
alternative, it took quite a few of the
participants more time to complete the
tasks. The table below shows the data I
collected on the times each task took to
complete per participant.

Users also thought the video was more

helpful than the written steps, as the written
steps and images didnt seem to go together.
One user stated, I dont understand what
exactly they mean by chose from the
available widgets. Why didnt they first tell
me where to find the widgets that are
available?

Deleted: For
Deleted: that was

Formatted: Font:Italic

Deleted: provided

Deleted: That seems silly.

Task 1

Task 2

Task 3

Min. Time

01:00

00:45

01:44

Max. Time

02:15

01:50

03:15

Avg. Time

01:31

01:12

02:24

Table 1: Task Times and Averages

Deleted: as

Conclusions and Recommendations

In conclusion, the web help page for the CLAS WordPress has the right idea of including a video
and written steps. However, there are adjustments that should be made. The majority of our
participants agreed that each step provided should have a visual aid to be more thorough. Below,
I have provided a snippet of an example of what I think would be a good layout for the reference
guide for adding images.

Adding Images
1. Chose + New option

2. Put your cursor where you want the image to be attached

3. Click on the Add Media button

4. Upload an image or chose an image from your Media Library

5. Specify how to align the image to your text (right, left, center or none)

6. Type in alt tag text that describes your image (this is important for accessibility)

Figure 2: Suggested Reference Guide

Deleted: Yet
Deleted: M
Deleted: below

Appendix A: Usability Tests

User

Task

Add an image 01:00

Yes

Participant read through instructions first, then

watched the video before completing the task.
Referred back to the video many times.

Add or Edit a 00:59

Widget

Yes

Participant read through instructions first, then

watched the video before completing the task.

Add Myself
as a User on
Their Web
Page

02:01

Yes

Participant read through instructions before completing

the task. Referred back to the instructions many times.

Add an image 02:15

Yes

Participant watched the video then read through

instructions before completing the task. Googled other
instructions to get through the task.

Add or Edit a 00:45

Widget

Yes

Participant watched the video then read through

instructions before completing the task.

Add Myself
as a User on
Their Web
Page

01:44

Yes

Participant read through instructions before completing

the task. Googled other instructions to get through the
task.

Add an image 01:35

Yes

Participant read through instructions and didnt watch

the video before completing the task.

Add or Edit a 01:50

Widget

Yes

Participant read through instructions and didnt watch

the video before completing the task.

Add Myself
as a User on
Their Web
Page

02:36

Yes

Participant read through instructions before completing

the task. Googled other instructions to get through the
task.

Add an image 01:15

Yes

Participant read through instructions first, then

watched the video before completing the task.
Referred back to the video many times.

Add or Edit a 01:12

Widget

Yes

Participant watched the video then read through

instructions before completing the task. Googled other
instructions to get through the task.

Add Myself
as a User on
Their Web
Page

Yes

Participant read through instructions before completing

the task. Googled other instructions to get through the
task.

Time

03:15

Success Summary / Issues

Appendix B: Follow Up Questions

User 1

The third task was the hardest for them. Had to switch back and forth between
the instructions and WordPress many times.
The second task was the easiest for them. Only had to read the instructions
once.
Felt moderately comfortable with the tasks.
They finished all of the tasks.
They suggest adding images and rewording written portion.

User 2

The first task was the hardest for them. Went to Google to find different
instructions.
The second task was the easiest for them. Only had to look at instructions once
They felt it necessary to use Google to find different instructions on two out of
three tasks.
They finished all of the tasks
They suggest that more thorough videos be made that includes every step
necessary.

User 3

The third task was hardest for them. Went to Google to find different
instructions.
The first task was the easiest for them. Only had to read the instructions once.
Only went to Google once.
They finished all of the tasks.
They suggested more pictures.

User4

The third task was the hardest for them. Went to Google to find different
instructions.
The second task was the easiest for them even though they still used Google for
it.
They used Google for two out of three tasks.
They finished all of the tasks.
Their suggestion is to add more pictures to the steps and change the format of
the help page to be more appealing.

References
Usability Test Participants:
College of Computing and Informatics Professor, UNC Charlotte, 3/25/2016
College of Computing and Informatics Professor, UNC Charlotte, 3/26/2016
SUAR IT Permanent Staff Member, UNC Charlotte, 3/30/2016
SUAR Web Developer, UNC Charlotte, 3/31/2016

Supporting Website:
https://pages.uncc.edu/help/adding-images/