NORTHWEST MISSOURI STATE UNIVERSITY

UNION STATION INTRO TO WEB PUBLISHING

USABILITY ANALYSIS

C a l a n d r a 0 | 21
TEST PREPARATION

To prepare this test for the participants I have selected I visited the Union Station

website myself to see how quickly I could advance through each of the tasks and to

track issues I came across. I would categorize myself as a user with high experience as

I have been using computers since about the time I could walk thanks to my Dad. Id

estimate that I spend around 30-40 hours a week on the PC working on personal

projects and homework, which involves a lot of browsing the internet.

The first task asks you to find out if a wheelchair will be available at Union Station for

your grandfather to use during your visit. Upon visiting the Union Station website, I

immediately looked to the navigation bar which is placed near the top of the page where

your eyes would normally look at when you first enter a website.

I clicked on the Plan Your Visit tab since thats where Id assume youd find the

information youre looking for in task 1. To find the information about wheelchairs I had

to scroll all the way to the bottom of the Plan Your Visit page which then takes you to

another page called Guest Amenities where you will finally find the information you need

about wheelchairs, and yes, they do provide them free of charge on a first come first

serve basis.

It was a little harder than I expected to find this information, and the fact that it made me

go to another page all together was a little bit annoying since its important information

and should probably be located in a more prominent position on the website.

The second task asks the user to determine what movies are playing on the Extreme

Screen on Wednesday, November 23rd and the playing times for each option. To do this
I went to the events calendar and used the handy calendar widget on the right side of

the screen to navigate to November and clicked on Wednesday the 23 rd.

At first I missed the listings for the Extreme Screen theatre due to rather hard to see text

above the title of the event which indicates where the event is located. But, I did find the

listings and clicked on the Extreme Weather listings More Info button as the times

were not shown on the items description. The information regarding showtimes can be

found on the page that opens after clicking more info.

The final task asks the user to go through the steps of buying a ticket for yourself and

your grandfather, as well as determining whether or not you can select specific seats for

wheelchair-compatible seating. To do this, I added the ticket I wanted to my basket

which took me to a screen that allowed me to see the price and select the quantity of

tickets I wanted. After clicking through that, I had to click add to basket again, which

took me to yet another screen that essentially acted as an invoice page.

Theres a little icon to the right of the screen that allows you to select your seating. I

clicked on that and it took me back to the initial screen I hit after selecting add to

basket on the tickets, which was slightly confusing for a moment. Theres no

explanation as to why you cannot select your own seats, but Im assuming since its

general admission you can choose your seating. However, this does not answer

whether or not theres wheelchair accessible seating which is an issue.

CHOOSING PARTICIPAINTS

TESTER 1: Connor Heitman (High Experience)

I chose Connor Heitman for the first test as we are in the same fraternity on campus

and he works in the Student Affairs office so he uses computers on a daily basis. This

led me to believe he would be a good choice for a high experience tester and indeed,

he spends around 15-20 hours per week on a computer. 50% of that is browsing and

50% of that time is spent on social media, according to Heitman. Connor is 21 years of

age and from Maryville, MO.

ENVIRONMENT FOR TESTER 1

Location of test: This test was conducted in Connors bedroom at his

apartment. This was chosen as this is where his desk was located and where he does

most of his homework and computer related activities.

Physical environment: The room is pretty small with one window in the

back providing some light in the room, but since we conducted the test in the evening

he used a desk lamp as well to provide some extra lighting. Other than that, there was

not much else in the room save for a bed and a closet, so distractions were minimal.

Technical environment: The computer used was a custom desktop

computer from Cyberpower utilizing Windows 10. The computer was running on a wired

Ethernet connection to a router in the living room for internet connection. The browser

used was Google Chrome with the only add-on I noticed being for Spotify. A widescreen

LED monitor was used with a resolution of 1920x1080.

TESTER 2: Cassie Loran

I chose Cassie as my second tester as she has a very different work environment than

Connor as she works as a bartender at The Pub. She classified herself as a low-
experience user of the internet, even though she browses and uses social media quite

often throughout the week, totaling her total usage at around 30-50 hours a week.

However, a good portion of that time is spent on social media as she indicated around

60% of her time included browsing Facebook, Twitter or Pinterest. Cassie is 22 years

old and from Parkville, MO.

ENVIRONMENT FOR TESTER 2

Location of test: Test was conducted at Cassies apartment in her living room.

This area was chosen due to being where she spends the most time in her apartment

as she works on homework and watches a lot of TV.

Physical environment: The room was pretty large with a lot of furniture and

decoration. The test was taken late at night so the only light in the room was provided

by a lamp and the overhead kitchen light. The TV was also on in the background as her

boyfriend was watching Sunday Night Football, which potentially distracted me a lot

more than her. She also has a cat, but she wasnt around very much during the test

thankfully.

Technical environment: The test was taken on an HP laptop supplied by

Northwest Missouri State University. The computer was running on Windows 7 and

used a resolution of 1366x768. The computer utilized a wireless internet connection and

Cassie used Google Chrome for her web browser with no additional add-ons.

TEST RESULTS

INITIAL SITE THOUGHTS

 Connor Heitman: Connors initial thought on the site was that it was science

based due to the main feature image displaying an event for one of Union Stations

Body Worlds showcases. After looking over the site a bit more he realized there was a

number of different events being showcased, but you had to scroll down the page to see

more of them.

He also noted the sites navigation saying it clearly labeled the different sections of the

site and what they offer. Other than that though, he wasnt entirely sure about the focus

of the site and everything you could do on it due to the homepage not having very much

information.

He concluded that the site was obviously about Union Station, but as for what specific

content the site offered, he wasnt entirely sure.

Cassie Loran: Cassies initial thoughts were very similar to that of Connors as

both noted right away that the site was about Union Station, however she did note that

the site is very busy and thought the featured events on the homepage could be a bit

smaller. She also thought the navigation was well laid out and made it pretty clear what

the site allowed you to do.

Her initial thought on what the site offered was that it was a guide / information based

website about the different events and exhibits that Union Station offered.

Cassie also concluded that she was aware that the site was focused on Union Station,

but wasnt sure as to what all she could do on the site in general, other than looking at

or getting information about the various events / showcases on offer at Union Station.
TASK 1: You are bringing your grandfather to Union Station for a Sunday

afternoon outing. He cant walk more than about 50 steps at a time. Determine

whether or not there will be a wheelchair available for him to use during the visit.

SUMMARY TESTER 1 TESTER 2 AVERAGE

TASK TIME 1:00 1:43 1:21
SATISFACTION 4 4 4
SUCCESS RATE 100% 100% 100%

HIGHLIGHTS

Tester was surprised by lack of prominent information

o The information regarding guest amenities for those participating in Union

Station events wasnt prominently displayed on the page and forced you to

scroll all the way to the bottom of the page, just to find a link to another

page.
The navigation did not include any submenu items
o To easily find more information on the website there could be submenu

items on each of the navigation tabs to get to specific information more

quickly.
Lack of clearly identifiable subheadings on information pages
o When looking for information on the page it was at times easy to overlook

information due to the lack of clearly identifiable subheadings.

RECOMMENDATIONS TO IMPROVE UX FOR THIS TASK

ALIGNMENT TO HEURISITIC: Help and documentation Even though it is

better if the system can be used without documentation, it may be necessary to provide
help and documentation. Any such information should be easy to search, focused on

the users task, list concrete steps to be carried out, and not be too large.

PROBLEM: Important information that should be easily locatable on the page

isnt, and could easily be missed by the average user. Theres a lot of information on the

Plan Your Visit page which could deter users from bothering to scroll down through the

rest of the page to find the information they need, which in this case, is about finding a

wheelchair for your grandfather.

The subheadings for the different topics on the page are not used to their full potential

to clearly identify different sections of information, in my opinion. Even though they host

larger font sizes than the rest of the text on the page, they should be bolded and maybe

even be a different color to clearly highlight different sections on the page.

Another issue is the lack of submenu items in the navigation which could make

navigating to specific pages, such as the Guest Amenities or Transportation pages,

much easier and faster than having to scroll down to the bottom of the page just to get

to those pages.

PROBLEM IMPROVEMENT: The best way to improve the situation in Task 1

would be to update the navigation to include submenu items to make finding specific

information more easily. Theres really no reason you should force users to scroll all the

way through the page just to get to another page with the information youre looking for.

Or, if you dont want to clutter up the navigation bar, you could also include links at the

top of the page to take you to specific sections of the page where the information you

need is located.
TASK 2: You want to plan to see an Extreme Screen movie during your visit, and

you want to secure tickets in advance. Determine what is playing on the Extreme

Screen on Wendesday, Nov. 23, and the playing times for each option.
SUMMARY TESTER 1 TESTER 2 AVERAGE
TASK TIME 1:34 2:12 1:53
SATISFACTION 2 4 3
SUCCESS RATE 100% 100% 100%

HIGHLIGHTS

Tester wasnt able to categorize specific events they were looking for
o To find Extreme Screen movies on the page the user had to scroll through

the page and multiple unrelated events to find what they were looking for.
Tester thought there was a lack of information regarding each event
o When the tester found the event they were looking for on the page, they

have to click the More Info button to see the showtimes for the event,

rather than just having the info included with the initial description.
Items on the page werent clearly labeled
o As with the first task, some of the items on the page were not clearly

labeled making it hard to distinguish the different events on offer.

RECOMMENDATIONS TO IMPROVE UX FOR THIS TASK

ALIGNMENT TO HEURISITIC: Aesthetic and minimalist design Dialogues

should not contain information which is irrelevant or rarely needed. Every extra unit of

information in a dialogue competes with the relevant units of information and diminishes

their relative visibility.

 PROBLEM: Theres an issue with the lack of organization on the event calendar

page that makes it difficult to easily distinguish different events from one another. You

are able to specify which day youd like to look at events for, however, which is a nice

touch, but if youre just looking for Extreme Screen, the user should be able to filter or

categorize the page so they only see the specific events theyre looking for.

Similar to Task 1s issues, however, is the lack of clearly identifiable labels on each of

the event items listed on the page. The label for the type of event is not clearly identified

and makes it easy for users to scroll over the event without noticing what type of event

is actually being displayed.

When Connor scrolled through the page, he clicked on what he thought was the first

Extreme Screen listing, but it was actually the second one as I found out when I went

back and checked it out again, proving those listings are easily missed due to the

categories not being labeled well.

This also ties into the lack of information thats presented to the user, forcing them to

click through different pages to find showtimes and other information. With how quickly

we expect information, it can be frustrating to not have important information

prominently displayed to make your event selections easier.

PROBLEM IMPROVEMENT: Fixing the type hierarchy and providing a better

layout for the content on the page would make finding events and information about

them much easier and result in having to click through less pages to get the information.

To do this, Ive included before and after screenshots of the page after making some

changes to how the events are shown on the page. The venue of the event should be
displayed prominent, followed by the title and extra information about the event such as

showtimes.

I would also include a short description of the event to the right to provide the user with

more information about the event to avoid having them to click through the next page

just to find out they have no interest in the event. Including showtimes front and center

is also helpful the user to help specify which events they are able to attend, again,

without having to click through the next page.

Finally including an option to filter the events by the specific category or venue also will

reduce the amount of events on the page and allow users the option to specifically look

at the events theyre interested in finding more about.

TASK 3: Go through the steps of buying a ticket for yourself and your grandfather

to an Extreme Screen movie on that day. Determine whether or not you can

choose the actual seats so that you and your grandfather will have wheelchair-

compatible seating.

SUMMARY TESTER 1 TESTER 2 AVERAGE

TASK TIME 4:15 5:13 4:16
SATISFACTION 3 2 2.5
SUCCESS RATE 75% 75% 75%
HIGHLIGHTS

Tester taken to too many screens to just purchase tickets

o To purchase tickets for the event, the tester is taken through way too many

screens to get to the checkout page. Five in total to be exact.

Testers confused by the seat selection button
o When testers clicked on the seat selection button, they were taken back to

the first Add to Basket page which made them think they were doing it

wrong, or adding even more tickets to their basket.

Tester frustrated by calendar for selecting dates
o When using the calendar to find an event, the user would click on the

event and then be asked to reenter the date they wanted for that event to

purchase tickets for.

RECOMMENDATIONS TO IMPROVE UX FOR THIS TASK

ALIGNMENT TO HEURISITIC: Consistency and Standards Users should not

have to wonder whether different words, situations, or actions mean the same thing.

Follow platform conventions.

Also

Error Prevention Even better than good error messages is a careful design which

prevents a problem from occurring in the first place. Either eliminate error-prone

conditions or check for them and present users with a confirmation option before they

commit to the action.

PROBLEM: The main issue with Task 3 is the over-complication of allowing

users to purchase tickets for the event they have chosen. For users to purchase tickets
in the websites current format, they have to go through five different pages, which

marginally asks them to do the same thing three different times.

When you add a product to the basket, you should be able to select all the different

variations such as quantity of tickets, seat location, event times and whatever else all on

one page, but Union Station asks users to do this over the course of five different

pages.

First you have to go to the Event Calendar page to find your event. Both of my testers

used the calendar widget on that page to find an Extreme Screen event on the 23 rd of

November. After finding their event they click on More Information, assuming this would

take them to where they can buy tickets.

Once you find the Buy Tickets button, you are then forced to find the event you wanted

to buy tickets for again, and then click Add to Basket. But the fun doesnt stop there.

Once you find the event again, you have to reselect the date for that event, rendering

the calendar on the first page almost useless, and then Add to Basket again.

Finally you get to select the amount of tickets you want, and click Add to Basket again.

See where the problem is? The user has clicked the Add to Basket button three different

times now, leading one of my testers to believe she had added the same event to her

basket three different times. Not to mention that if the event is General Admission, if you

try to select your seats the button will take you back to the ticket selection screen

without any notification of an error.

This leads to confusion for the users as they arent sure of their progress as they

proceed to the checkout page after selecting their tickets as they have been returned to
a page they have already visited with no clear explanation as for what went wrong with

the checkout process. A simple message telling users that seat selection isnt available

for general admission showings would mitigate that issue.

PROBLEM IMPROVEMENT: To improve this issue, Union Station needs to

streamline the process of purchasing tickets. Instead of having five different screens for

users to go through to purchase a set of tickets, the user should be able to click the

More Info button to see a more detailed view of the event, click the Buy Tickets button

and immediately be taken to a screen that allows them to identify how many tickets they

want, where they want to sit (maybe a pop-up window) and what time theyd like to

attend the showing. From that screen they should be able to add the event to the

basket, and immediately proceed to the checkout screen to finish their purchase.

Having some sort of visual identification of the users progress would also be helpful to

give users a sense of completion as they enter information in to purchase a ticket. Most

modern websites that allow you to purchase items provide users with this, and with

Union Stations current format for having people purchase tickets, this would be very

helpful.

Finally for seat selection there should be an indicator on the information page for the

event before purchasing tickets if theres wheelchair accessible seating, especially if the

event is general admission and does not require visitors to select their seating. If the

event is general admission and theres no need to select specific seating, a message

should pop-up when users try to select their seats that lets them know theres no seat

selection for the event.

Clicking on that button should not take the user all the way back to the ticket quantity

selection screen as its highly confusing and makes users believe they have added the

same event to their basket multiple times.

This flow chart shows how the pages are currently set up, and how I would streamline

them to highly reduce the amount of pages the user would have to go through to

purchase tickets for events.

Fandango does a much better job of streamlining the process to purchase tickets for a

movie / event. They also include a visual representation at the top of the page to show

your progress as you click through different pages to purchase a ticket, something

Union Station would highly benefit from.

TESTING CONCLUSIONS

Following the completion of each of the tests the users were instructed to do, it can be

determined that the website worked mostly as intended. Most of the complaints my
testers had was centered around the lack of submenu items in the navigation and the

frustrating process of buying tickets for events.

If the website had included some submenu items in its navigation to take users directly

to some of the sites more important information, most of the usability issues in the first

two tasks would have been solved, save for some choice aesthetic changes to make

identifying different content sections of pages easier.

Task number three obviously showcased some of the sites biggest issues with the

process of buying tickets pushing users through way too many pages and didnt include

any visual cues to show users the progress that was being made while making a

purchase. This also includes the seat selection button which didnt provide users with

any error notifications to let them know they werent able to select seats, but instead

took them back to a previous page with no explanation.

Both of my testers were able to complete all of the tasks that they were asked to do and

didnt provide really any major complaints. If Union Station could add the suggested

submenu items and update their ticket purchasing system, there wouldnt be much to

complain about on a usability level.