Web Publishing

Shelby Mustain

October 22nd, 2015

Usability Testing for UnionStation.org

Test Preparation

To prepare for the test I was to give my users, I walked through the test myself. I began

by typing in unionstation.com first into my address bar and immediately hit my first problem.

Unionstation.com and unionstation.org are two completely different sites, because I ignored

the .org I was taken to website that sold bridesmaid dresses and groomsmen tuxes. After I fixed

my mistake and types in unionstation.org I was taken to the correct site. This problem that I

encountered made me wander if my testers would have the same problem, and if users

everywhere often confuse the two sites.

The next step I took was to look through the homepage like instructed in the directions

for the tester. I first noticed that the site is a responsive design because when I maximized my

page the navigation bar expanded across the page instead of being the hamburger icon. The next

think I noticed was huge window for the feature. The whole thing is above the fold and is really

the only thing you see when you open the page because it is so much bigger than anything else.

There was nothing in the upper left corner of the page, but the logo was centered at the top of the

page above the navigation. The next thing I noticed was the information bar at the bottom of the

page that was constantly at the bottom of the screen no matter where you scrolled (using my

track pad for all scrolling). This information bar informed visitors that the science city would be

closing on October 24th at 3pm and that the KC Rail Experience would be closed for October 22-

24 due to spookfest.

Next I attempted task one. I scrolled to the bottom of the page and read through

categories provided in the footer. The read through the “About Us” section and then clicked

(pressed down on my track pad) once I found the link named “Guest Amenities”. From there is

took me to a page with a list of amenities, the last one being wheelchairs. This told me that I

could acquire a wheelchair at the Grand Hall at no charge, but at a first come first serve basis and

they would hold my valid drivers license for a deposit.

To complete task two I scrolled up to the top of the page and looked trough the

navigation. I then clicked on the tab “Plan Your Visit”, because I figured this would lead me to a

page with the options of what to do at Union Station. I was wrong. This tab gave me

information on different admission prices, hours of the Union Station, maps and directions to

Union Station, parking information and prices, discounts, and amenities and transportation.

After I realized this wasn’t what I was looking for I moved back up the page to the navigation

and clicked on the first tab called “Events Calendar”. I did this because I figured there would be

a list of things to do on certain days of the upcoming months. This is were I found the calendar

and clicked the over arrow to move the month to November then clicked the day labeled 25.

Once I did the things to the left of the calendar changed, showing me the list of events happening

that day, the first two being and extreme movie. The movies were labeled at the top as “Regnier

Extreme Movie Theater” so I knew that was one of the movies the task was asking me to find.

Next I clicked “More Information” under the Jerusalem movie option to start task three.

This took me to a page giving me more information about the movie and its showings. I then

clicked “Buy Tickets” then “Add to Basket”. This took me to a page to specify what date I

wanted my tickets for so I clicked the drop down menu and selected November 25th. Next I

clicked “Add to Basket” again. This took me to a page to specify how many tickets I wanted. I

clicked the up arrow twice and then clicked “Add to Basket” again. This took me to a screen that

reviewed what I was about to buy and allowed me to remove an item if I wanted and also had the

option to “Select Seats”. But when I clicked on “Select Seats” it took me to a page that showed

the tickets I had chosen again but no way to choose the seats. Then I read the banner under the

navigation that read “Members must be logged in to see discounts shown in shopping cart” and

then had links next to it to “Create New Account”, “My Account”, or “My Basket”. This didn’t

make sense to me, because I didn’t want to view I discount, I wanted to select seats so I went

back to my basket and tried again, but got the same result. This is very confusing. If they are

saying that only members get to choose their seats they need to be clearer.

Next I started on task four, but I ran into a problem. When buying the tickets the site

took me to pages with different navigation than the home page. I tried to click the button they

offered called “Back” but it would only take me as far as a list of the movies then I couldn’t find

a button to access the actual home page. I tried to hit the logo, because most sites link the

homepage to the logo but that didn’t work. So I had to use my back button on my browser to get

back to the homepage (this took me 9 clicks of the back button). Once I finally got to the

homepage I had to reread my task because all that clicking distracted me from what I was doing.

Once I reread the task I looked through the navigation and clicked on “Contact Us”. This took

me to a page with a list of different departments and scrolled through until I read “Visitor

Relations” which was second to the bottom. I then clicked on the email link provided to the right

of the department name and this opened up my email icon to send an email.

Choosing Participants

Tester 1: Ashley Guenther

Ashley is my neighbor. She and I know each other, but are not great friends. She is 20 years old

and a psychology major here at Northwest. Before conducting the test she had never visited the

site or knew anything about the site. Ashley often uses her laptop to do school work, browse on

Pinterest, and uses the search engine Google the most. She says she does most of her browsing

for pleasure on her smart phone, but still spends around 15 hours a week using the internet. She

considers herself a high-experienced user of the Internet. I thought Ashley would be a good

tester, because I knew she would follow the directions of talking to me constantly through the

test because she is not shy. She also takes her schoolwork seriously so I know she would respect

the fact that this was something that I was taking seriously.

Environment for Tester 1

Location of test: When I asked Ashley to be one of my testers she said she would come

over and do the test, but I told her that the test should be conducted where she feels most

comfortable using her laptop and where she finds herself using the Internet the most. So

she decided that her apartment was the best location. She says she does all of her

homework at home rather than the library, because all the people at the library distract

her.

Physical environment: We conducted the test in her living room. She sat in a chair that

was behind a table up against the wall facing out a window. The living room is

connected to the kitchen and her roommate was making diner during the test and we

could hear everything she did, but Ashley didn’t seem distracted. The lighting was bright

in the kitchen and duller in the actual living room but the kitchen light helped brighten up

the living room. Her phone was on the table charging and I told her that she could get up

at any time she needed and interrupt the test at any time, no problem. Along with the

roommate cooking and cleaning in the kitchen, it sounded like the downstairs neighbors

were watching the Royals game, because there was a lot of shouting.

Technical environment: Ashley used the school issued computer –HP Elite Book-that

was connected to the charger. She used her personal Wi-Fi . I am unsure about the

screen resolution, but the screen was maximized to full capacity, taking up the whole

computer screen. She opened her usual browser to start the test and Google appeared, but

she didn’t type union station into the Google search bar, she typed unionstaion.org into

the address bar directly and hit enter on her keyboard. She did not having any other tabs

open, but she did have her favorites saved to the tool bar at the top.

Tester 2: Michael Smith

Michael Smith is my basketball coach. He is a 38-year-old Division II women’s basketball

coach who spends his days watching basketball film, recruiting players, and scheduling/leading

basketball practices. He says he spends 20 hours during the workweek using the Internet, but

hardly at all on the weekends. The majority of his time is spent on browsing, not social media.

He considers himself a low-experience user of the Internet. He spends most of his time on a

film-editing site that requires Internet called Huddle. He also browses sites that offer stats for

future and current college athletes. I asked Michael to be a tester, because I had a hunch that he

would be a low-experience user and I knew he would take it seriously and do what I asked

because he wants me to make good grades.

Environment for tester 2:

Location of test: The test was conducted in Michael’s work office in Lamkin on campus.

This is the place where he does the majority of his Internet browsing and work. We

picked this location because it is where he said he is most comfortable and he wanted to

use his computer because he is very familiar with it.

Physical Environment: The lights in the room were not on, but the office has a ton of

natural light that lit up the room. The door to the office was open, but it was in the

morning when we conducted the test so not many people walked by and no one popped

their head in to say anything. Michael had his phone on the desk in front of him, but

when it vibrated notifying him he had a text he didn’t even look down, he ignored it

completely. The office was quiet with no real background noise.

Technical environment: Michael used a HP desktop computer with two screens, but

only used the left screen when conducting the test. He used a mouse to click and used the

scroll wheel on top of the mouse to scroll through the page. The computer was connected

to the Internet by a cable, not Wi-fi. When I told him to open his browser to its typical

page he opened it and the home page was Google. He did not use Google to find Union

Station though, he just typed in unionstiaon.org into the address bar and hit enter on his

keyboard. Michael didn’t have any other tabs open and there were no other add-ons on

his homepage or toolbar.

Test Results

Initial Site Thoughts:

Tester 1 Report: Ashley’s initial thoughts on the site were that the site had good visuals

and when I asked her what she meant she clarified by saying the pictures were good sizes

and clear. She said the homepage gave visitors information about everything the Union

Station offers, the exhibits offered, and said there was a lot of information of Science

City. She thought that Union Station was really trying to advertise for Science City,

because of all the information presented on the home page about it.

Tester 2 Report: Michael said that the site looked simple with not too many buttons to

click. He thought the main picture (the feature), as he called it, was too big and took up

the whole site. He said he doesn’t like how he had to scroll up and down. He would

rather have the whole page in front of him rather than scroll.

Task 1: Scenario: You are bringing your grandmother to Union Station for a Sunday afternoon

outing. She can’t walk more than about 50 steps at a time. Determine whether or not there will

be a wheelchair available for her to use during the visit.

Tester 1:

Ashley begins this task by scrolling with her track pad on the homepage. She stops when

she reaches the section entitled “Visitor Info” which is located just above the footer. She

explains that she is stopping here because she thinks wheelchair accessibility is

something that visitors would want to know. She doesn’t find anything here so scrolls to

the top of the page and reads through the navigation. She then decided that the tab “Visit

Science City” might have this information. She clicks (using the buttons under her track

pad) on the tab in the navigation then quickly decides that was a mistake and clicks the

back button on her tool bar. Once she is back on the home page she scrolls down slowly

reading through different headers until she reaches the section “Visitor Info” again. She

then decides to click the button “more info” under the section called “Hours”. Ashley

says she is doing this, because “more information” sounds promising. Once she clicks

the button, this takes her to a screen that gives her prices of tickets and hours of the

Union Station. She scrolls to the bottom of the page and reads the header “Amenities and

Transportation” then says, “This has to be it”. She then proceeds to tell me that yes there

are wheelchairs available. This is where she stops. She doesn’t click the link below that

says “Guest Amenities” that would lead her to more information about the wheelchairs.

o Answer: Yes, there are wheelchairs available

o Completed: Yes

Tester 2:

Michael begins the task by reading all of the navigation buttons out loud then says, “It

might be under “Plan your visit, but I’m going to look more”. Michael scrolls with his

scroll wheel throughout the whole page, then stops when he reaches the “Visitor Info”

area of the page. He reads each header and decides to click on “More Info” located under

the header “Parking”. He explains that this might give information about handicap

parking which might include information about wheelchairs. He clicks on the “More

Info” button and this takes him to a page entitled “Visit Union Station”. He scrolls down

the page reading the different headers as he goes. He then reads through the section

called “Parking”, but doesn’t find any wheelchair information. He keeps scrolling until

he stops and says aloud, “Ah, amenities, this might have something”. He reads the

amenities section and tells me, “Yes, there are wheelchairs accessible”. Michael doesn’t

stop here. He then proceeded to click on the bolded words under the short paragraph

labeled “Guest Amenities”. I asked him why he did this and he replied, “I think this

might give us even more information on the wheelchairs”. This took Michael to a page

that indeed gave him more information on the accessibility of wheelchairs. He scrolled

down the page until he reached the header “Wheelchairs” and read to me the short

sentence below.

o Answer: Yes, on a first come first serve basis, in the Grand Hall.

o Completed: Yes

Recommendations to Improve UX for Task 1:

Having the wheelchair accessibility and other guest amenities in the Visitor Info section

is a good idea, but it being hidden behind the “More Info” button makes it harder for users to

find. The label “More Info” doesn’t really describe to readers that guest amenities can be found

if they click “More Info”. Ashley initially went to the spot where she could find the information,

but left the area when she didn’t see an area or tab that correlated with guest amenities. If the

“Visitors Info” section on the homepage had a button labeled “Guest Amenities” I think users

would be able to find the information they are looking for much faster.

The Nielsen usability heuristic that lines up with this problem is consistency and

standards, keeping words, situations, or actions meaning the same thing. Although “More Info”

is known by users as something to click when they want to learn more, it is not specific enough

for this site and for the information that they are giving on the “More Info” page. I would

recommend having a button within the “Visitors Info” area called “Guest Amenities” that link

you to the page with guest amenities on it.

Another problem I saw was the consistency of the information. There are multiple places

on the website to find out about the wheelchairs but the different pages offer different

information. Ashley was able to find out that wheelchairs were available, but where she looked

did not give the specifics. Michael found the same area Ashley did but clicked further to find

more information and the specifics of accessing wheelchairs. To keep consistency and standards

the same information should be kept consistent throughout the site.

Task 2: You want to plan to see an Extreme Screen movie during your visit, so you want to

secure tickets in advance. Determine what is playing on Wednesday, November 25th.

Tester 1:

Ashley began this task by scrolling to the top of the page from where she was at and

began to read the buttons on the navigation. After she read the first header (Events

Calendar) she stopped and proceeded to click on that tab. She said she did this because

she assumed that it would have a list of the events on the day she needed to find. After

she clicked on the tab, it took her to a page with a calendar on the right side of the page.

She then used the over arrows at the top of the calendar to change the month, “because it

was on October, and she wanted to see the month of November”. Ashley then clicked on

the box within the calendar marked at “25”. After she did this, to the left side of the

calendar, a list of events happening that day appeared. Ashley read the first event in the

list and immediately recognized that it was an extreme movie, because the header above

the picture is labeled “Regnier Extreme Movie Theater”, she explained. Ashley then told

me that the two movies playing on that date were Jerusalem and Robots 3D.

o Answer: Jerusalem and Robots 3D

o Completion: Yes

Tester 2:

Michael began this task by scrolling back up with his wheel on his mouse to the top of

the page. He then read through the headers stopping with “Plan Your Visit”. He told me

he was going to click on this, because it probably had a list of things to do including

movies. Michael clicked on “Plan Your Visit” and it took him to a page that offered rates

and a lot of other important information. He started reading and moving his mouse over

the options listed under “Admission Information” and stopped once he got to “Regnier

Extreme Movie Theater”. Michael then moved his mouse over to the right until he

hovered over an arrow that was in the buy tickets area. He then told me that if this were

the place to buy tickets then they must have when the movies are showing so he clicked

the arrow that took him to a list of all the movies showing. He read through the first

listing to see if there was any information on when the movie played and he did not come

across this information until he reached the lower right hand corner of the listing. Here

he found a date range, which wasn’t labeled, but he assumed was the dates it was playing.

Michael then went through the list of movies and decided that only two of the six movies

shown were playing on November 25th and those movies were Jerusalem and Robots 3D.

o Answer: Jerusalem and Robots 3D

o Completion: Yes

Recommendations to Improve UX for Task 2:

A recommendation I would make for task 2 is to keep the navigation consistent

(Consistency and standards) throughout the site. Ashley’s journey through task two kept her on

pages that had consistent navigation, but the way Michael approached the task left him on a page

without the same navigation. Luckily for the next task it was not required to go to the home

page, but we will have issues with that in later tasks. If the web site keeps the navigation

consistent this will help the user navigate quicker and not become confused.

Another recommendation I have for task 2 is a recommendation from the class blog,

reduce the change you visitor makes an error. The recommendation I would make for this

instance is listing the dates of movies in a more efficient way. Michael took a different approach

when finding the dates of movies and the only way he was able to figure out dates was because

of a small range of dates listed underneath the description of the movie. He almost missed this.

I would recommend using the calendar that is provided on the “Events Calendar” page on this

page as well instead of the confusing date range.

Task 3: Go through the steps of buying two tickets for an Extreme Screen movie on that day.

Determine whether or not you can choose the actual seats so that you and your grandmother will

have wheelchair-compatible seating. (Take this step all the way through the process, and only

stop when asked to enter credit card information.)

Tester 1:

To begin this task Ashley stayed on the page that she was on from task 2. After she

realized that the first event was a movie, she clicked on the picture provided for the

movie Jerusalem, not the button labeled “More Info”. I asked her why she chose this

method and she explained that the button “More Info” told her that it would be offering a

description of the movie rather than a chance to buy tickets. After Ashley clicked on the

picture, this took her to a page where the feature was a slideshow of pictures of Jerusalem

that took up the whole above the fold. Ashley ignored the picture slideshow (didn’t use

arrows to browse trough the photos) and scrolled down to where the text began. She then

found the button labeled “Buy Tickets”. I asked how she found that button so fast and

she said, “Because it stands out. It is a different color than the rest of the words”. Ashley

immediately clicked “Buy Tickets”, ignoring any text surrounding the button. This

action took her to a screen with a description of the movie and the options to either go

“Back” or to “Add to Basket”. Ashley did not have to scroll on this page, because all the

information given was fit to one screen. Ashley proceeded to click the “Add to Basket”

button that matched the style from the button “Buy Tickets”. This took her to a very

similar screen, but with a drop down menu for her to select the date she wanted to see the

movie. Ashley realized that the date shown was not the date she needed so she clicked on

the drop down menu and moved her track pad mouse down until it highlighted the date

10/25/2015. Once it highlighted the date, she clicked down on that date. After this was

accomplished she clicked the button “Add to Basket” again. This took her to a similar

page, but with the option of how many tickets she wanted to purchase. She recognized

this and clicked the up arrows next to the amount of tickets twice so the number read “2”.

After this she clicked “Add to Basket” again. This action took her to the screen that

reviewed her order. She started to look for a button to select specific seats and succeeded

when she found a button labeled “Select Seats” in between two other buttons. Ashley

clicked this button and it took her to a screen that looked familiar. She said “I think I’ve

seen this before, but I don’t seen any options to select specific seats”. Ashley proceeded

to go back, using her back button, and try clicking the “Select Seats” again. This took her

to the same page, but this time she read the message under the navigation (not the same

as the home page navigation) that read, “Members must be logged in to see discounts

shown in shopping cart”. Ashley then commented, “I guess I have to be a member to

select my actual seats” and then pressed the “Add to Basket” button to return to the

checkout review page. Ashley then scrolled to the bottom of the page immediately after

the page loaded and hovered over the “Proceed to Check Out” button. I asked her why

she scrolled so quickly without looking through the page and she responded with “I am

used to seeing the “Checkout” button at the bottom of pages when I buy stuff”. By

clicking this button, this takes Ashley to the page where you enter all your personal

information. Ashley went through and filled out all the mandatory blanks (things with

red stars by them) she ignored the non-mandatory blanks. The next screen offered the

option to print your tickets at home or pick them up at the will call. Ashley used her

track pad to click the fill in bubble next to the “Print at Home” option. She then pressed

the “Next” button, which took her to the credit card info page where she stopped.

o Answer: Can only choose seats when you are a member

o Completion: Yes

Tester 2:

After Michael figured out that the two movies that were showing on November 25th were

Robots 3D and Jerusalem, he clicked on the button “Add to Basket” under the description

box of Robots 3D. By clicking this button, it took Michael to a description page that also

gave him the option to pick what day he wanted to see the movie. Michael used his

mouse to go over to the drop down menu that allowed him to change the date he wanted

to see the movie then clicked on the menu, making the menu drop down and show the

different date options. Michael then moved his mouse down to the date he wanted to see

the movie and clicked, selecting the movie date and closing the drop down menu. Then

Michael pressed the button “Add to Basket” again. This took him to page where he was

able to select how many tickets he wanted by pushing up or down arrows. Michael

moved his mouse over to the up arrow and clicked twice to show the number “2”. After

this was completed he moved his mouse down and to the right, over the “Add to Basket”

button and clicked. This action took him to a summary of his reservations. At this point

Michael was looking for a way to select specific seats, but voiced, “I don’t see anything

about choosing your seats. It just says I have general admission, but no way to change

that”. After Michael came to this conclusion he scrolled down the page and pressed the

“Proceed to Checkout” button. I asked him if that button was easy to find and understand

and he said, “Yes, proceed to checkout is something I recognize”. This action took him

to the area where he was to fill out personal information. Once we got to this spot he

concluded his task saying, “I got the tickets in advance, but there isn’t a way to select

your seats”.

o Answer: Cannot choose specific seats

o Completion: No

Recommendations to improve UX for task 3

For this task I refer to the class blogs recommendation of reduce the amount of clicks.

Both Ashley and Michael had to click “Add to Basket” three different times just to get to the

checkout page. If the website could get all the information they needed on one page instead of

each different piece of information needing its own page, things would run smoother and be

quicker.

Another recommendation I have for this task is to be clearer about the rules on selecting

seats. Both my testers were very confused after they clicked a button that they recognized as a

button to choose their seats and then they were brought to a page that didn’t let them actually

pick seats. The message on the page was also confusing and didn’t make much sense.

According to the 5 Copywriting Tips That Can Dramatically Improve You UX, writers should be

communicating benefits, not features. So instead of the message reading “Members must be

logged in to see discounts shown in shopping cart”, the message should read “Become and

member and receive discounts” or something along those lines.

The last recommendation I have for this task is to improve on user control and freedom.

When both my testers were done with this task and wanted to go back to the home page they

couldn’t find a way out. They both tried multiple options either settled for clicking the back

button multiple times or re-entering the URL for the site.

Task 4: You’d like to spend time walking around Union Station during your visit, but you want

to be sure enough areas of the station will be wheelchair-friendly. Go through the steps to send

an e-mail to the appropriate person/department to inquire about wheelchair access throughout all

areas of Union Station.

Tester 1:

After Ashley completed task 3, I read her task for and she began looking for a way back

to the home page from the checkout page. First she voiced that she was looking for a

back button offered from the site, but couldn’t find one. She then proceeded to click on

the logo at the top of the page in hopes to return to the main page. Instead this took her

back to a list of movies. She voiced that she was once again looking for any sort of back

button, but couldn’t find one. After a few seconds of clicking on to other pages in search

of a back button, Ashley just went up to address bar and typed in Unionstation.org and

pressed enter, taking her back to the home page. After she retuned to the home page, she

ran through the navigation until she got to “Contact”. She then clicked contact and told

me she was doing this because she assumed that a list of people would be provided and

those people could help her out. After she clicked “Contact” this action took her to a

page with a list of departments and then to the right of the departments were email

addresses to contact them at. Ashley then went through each department until she read

the title “Visitor Relations”. She then moved her mouse to the right and clicked on the e-

mail of the visitor relation’s department. When I asked her why she picked this one

rather than the rest she replied with “The visitor relations departments jobs is to help

visitors and I’m a potential visitor who needs help”.

o Answer: Yes

o Completion: Yes

Tester 2:

Once Michael finished task 3 and I read him the next task he began to look for a way

back to the home page. He read through the navigation but found nothing so he decided

to use his back button on his tool bar. It took him five clicks of the back button to return

to a page with the original navigation. Once he was back on a page with the original

navigation, he read through the navigation and stopped and clicked on “Contact”. This

took him to a page with a list of all the departments and their email addresses. He used

his mouse to roll over every department until he came to “Visitor Relations”. He then

moved his mouse to the right and clicked on the email and this opened up his personal

email on his desktop. After he finished the asked him why he choose visitor relations and

he replied by saying, “Seemed like my best bet to get help”.

o Answer: Yes

o Completion: Yes

Recommendations to improve UX for this task

I don’t have any huge improvement recommendations for this task. The navigation

clearly shows that to contact us, this is where you need to go, and the listings of the departments

are clear and easy to use. The email link is also fast and efficient. There is also multiple ways to

get to this page so that is also a good thing. One small recommendation I would make for this

area of the web site would be to maybe include another way to contact these departments. While

some people prefer email, there could be someone who needs answers now and phone numbers

would be best for this. Otherwise the page is good.

Testing Conclusions

Completion Rate: My first tester, Ashley had a completion rate of 100%. This by passes

the average completion rate of 78%. My second tester had a completion rate of 75%

completing 3 of the 4 tasks given. The reason he did not complete task 3 was because he

did not take it all the way through, he stopped prematurely. His completion rate was less

than the average by 3% but I think if we had more tasks to factor into that percentage that

he would exceed the average.

Similarities and Differences: My testers were very different when it came to

approaching each task. A majority of the time they came to the same conclusion, but

rarely ever took the same path. Ashley seemed to try and find the quickest route while

Michael seemed to use logic to help him through tasks. This makes sense, because

Ashley is a 20 year old girl who was brought up understanding that things should be fast

and easy to find while Michael is much older and doesn’t expect speed the same as

Ashley, he is more focused on accuracy.

Some similarities of my testers were their knowledge of common phrases and practices

on a web site. For example they both thought that clicking the logo at the top of the page

would bring them back to the home page and they both new what phrases such as “More

Info” and “Proceed to check out” meant and what they would do when clicked on. I

think this is true because for the most part, websites try to keep web jargon consistent.

Heuristic done well: I think this site did a good job at matching between system and the

real world. My testers were not confused and often knew exactly what the site meant

when it said something. The language was easy for visitors to comprehend.

Another Heuristic done well was error prevention. My testers never ran into a error page

or found themselves helpless. I think the site had spots were it could have been more

efficient, but errors were never a problem.