Vous êtes sur la page 1sur 42

Aaron Mefferd

Usability Analysis
Intro to Web Publishing
Usability Test for UnionStation.org

Test Preparation

Usability is an essential part in any service interaction, but it is especially important in


websites. Competition online is fierce because it is instantly available and constantly open. It is
important that your websites meet certain criteria for the user that allows them to get in,
complete their task, and get out in an efficient and effective manner. There are several sources for
these user experience guidelines, but in this analysis I will be using Jakob Nielsens 10 Usability
Heuristics for User Interface Design, the guidelines provided in the textbook Above the Fold, and
Googles 7 Usability Principles.
This usability test consists of four tasks for the user to complete on the UnionStation.org
website. I ran through the test myself before asking my testers to do so. I completed the task at
school in the lounge of Wells Hall. This is a common place for me to browse the web and use the
internet. The lighting of the environment was standard fluorescent lighting. There were no
distractions as the test was performed after business hours at Wells Hall, so there was nobody
around. There were no distractions such as music, television, background noise, or anything
related. I used my Northwest Missouri State University issued laptop. It is an HP EliteBook 840
running Windows 7 Service Pack 1. The computer has an Intel Core i5-4200 CPU running at
1.60 GHz and has 4 GB of RAM. The screen size of the laptop is 14 at a resolution of
1366x768.

My initial thoughts of the UnionStation.org website was that it feels very crowded on a
small screen size. The feature area did not fit entirely on my screen with the toolbar, bookmarks,
and other browser additions.

Above- Screenshot of home page on my HP laptop

The navigation at the top seemed very simple and easy to follow. The top navigation
includes Events Calendar, Plan Your Visit, About Us, Contact, Follow Us, and Visit
Science City. I felt I had access to all of the areas of the site from these six simple navigation
sections. The page features a very minimalist design which allowed for the information to be
scannable and quick to sort through. I especially liked the Explore The Station section of the
site that featured four ribbons: Attractions, Restaurants and Shops, Screens and Stages, and
Facility Rental. This seems like a great way to break down the attractions and events within
Union Station. The above the fold section site loaded very quickly, almost instantaneously, even
though my computer was connected to Wi-Fi. I ran UnionStation.org through a speed test on
WebPageTest.org. The results show that the first view time for the site is 5.991 seconds, with
2.392 seconds on repeat views. The site loading within almost 6 seconds is fantastic as it will

keep the user from losing complete interest and leaving the site. After 10 seconds, users lose
complete attention and usually leave the site.

Above- Load time for UnionStation.org according to WebPageTest.org

Task 1, which asks the tester to look into wheelchair accessibility was a fairly simple task
to complete. I scrolled all the way to the bottom of the page to the footer, where I have learned
over time that sites will include detailed lists of the pages on the site. I scanned the footer and
quickly found a link labeled Guest Amenities and clicked on the link. The page loaded almost
instantly. The text on the page was in chunks and allowed for a great amount of scanability. I
quickly found the section labeled Wheelchair. This section contained all of the necessary
information asked in the task. I completed this task very easily and have no recommendations for
how to improve this section.
Task 2 caused a bit more grief asking the user to find the movies playing at Extreme
Screen on the day of November 25. First I click on the Plan Your Visit button on the top
navigation of the page. At first was confused by the layout as there is a lot of info in the first
block listing all of the admissions information. I found the Extreme Screen sections and moved
over to the right of the screen to an arrow that I assumed was a link to navigate to that page of
the website. The page took longer to load than previous pages. The page shows a list of the
movies currently being shown including Robots 3D, Jerusalem, the Martian 2D, and The
Martian 3D. I noticed that on the lower right side of each movie it gives a time span of how long

the movie will be playing. This section of the site was very straightforward, but I am used to
operating other movie theater sites, such as Fandango, where you select your date, then it lists
the movies playing.

Task 3 is
where I began
having trouble
navigating the
website. The task
asks the user to
try and secure
wheelchaircompatible
seating for a
movie. I selected
the button Add to
Basket on the movie Robots 3D. I selected November 25 from the dropdown menu. There was
Above- A screenshot of the Extreme Screen page showing the movie dates

only one time


offered so I selected the Add to Basket button on the 10:30 am showing. I selected 2 general
admissions tickets and clicked on the Add to Basket button again. Next I clicked the Proceed
to Checkout button, assuming that the seat selection would come at some point before filling
out my payment information. I filled out the form for name and address and clicked Next. I
selected the Print At Home radio button and selected the Next button. I was prompted to
enter my payment information and have not been presented with the ability to select seat. I
assume that there is no way for users to select their own seats.
Task 4 asked the user to contact someone at Union Station about the availability of
wheelchair access in the station. I was still on the box office site and it lacks any navigation from

the homepage. I clicked on the Union Station logo at the top of the page, but it didnt do
anything. I had to type the UnionStation.org URL in the toolbar again and go back to the
homepage. I clicked on the Contact Us button at the top of the page in the main navigation
section. I scanned through the list and assumed the person I would want to contact would be the
person in charge of Visitor Relations. I clicked the email link to the right of the name and it
didnt do anything. In order to use the email I will have to copy it and paste it into the email. The
fact that clicking on the Union Station logo on the box office page does nothing is a problem. I
find it common to expect clicking on the website logo to take you back to the homepage.
Clicking on the email link with nothing happening is also an issue as it is formatted link a
clickable link. Other than these two issues the task was very easy to complete.

Above-A screenshot of the "Contact" page showing the email links that appear clickable

Choosing Participants
Tester 1: Jacob Hayworth
Jacob Hayworth is a student at Northwest Missouri State University studying Broadcast
Production. Mr. Hayworth is a 21 year old male working as a full-time student, as well as a
Multimedia Lab assistant in Wells Hall on the Northwest Missouri State University campus. Mr.
Hayworth is not familiar with the sites content, but claims to spend roughly 15 hours a week on
the internet between social media and web browsing. 70% of this time is spent on social media,
while 30% of this time is spent on web browsing. Mr. Hayworth is being considered as my highexperience user for this usability test.
The test was performed at Wells Hall on the Northwest Missouri State University
campus. Mr. Hayworth spends an extensive amount of time in Wells Hall, with a significant
amount of that time being spent online either on social media or surfing the internet. This was
chosen as the test area because it is organic and convenient for the tester. It is a realistic setting
for them to be performing these tasks and I believe acts as an adequate testing location.
The physical environment for the test was very desirable. The lighting of the test area was
bright fluorescent lighting and the temperature of the room was slightly cold for the testers
preferences. There were very few sensory distractions during the test other than other students
being in the same room and occasionally asking a question or making a comment.
The technology environment of the test included the use of a 27 Retina Display iMac
with a monitor resolution of 5120x2880. The iMac was running Mac OS X 10.10.4 Yosemite.
The computer was connected to the Internet via a wired Ethernet connection. The browser used
for the test was Google Chrome version 46.0.2490.71 m. The browser was not using any plug-ins
at the time of the test.

Tester 2: Amy Mefferd


Amy Mefferd is a 45 year old women who does clerical work for Woodmen Life. Ms.
Mefferd is not familiar with this sites content, but claims to spend roughly 60 hours a week
online between work and personal use. Ms. Mefferd separates her time on the internet as 75%
browsing and 25% social media. Ms. Mefferd is acting as my low-experience user, even though
she spend over three times as much time online as my high-experience user. This is due to the
face that the majority Ms. Mefferd time spent using the internet is spent using email and
accessing work documents thorough the web. She does not spend as much time simply browsing
the internet.
The test was performed in Ms. Mefferd home, in her office. This area was chosen out of
convenience for the tester, but also because this is a location she would likely be using to use a
site like UnionStation.org. It is for this reason that I believe this is an adequate testing area.
The physical environment of the test was ideal. Ms. Mefferd was in a room isolated from
distractions, other than the television in the living room roughly 10 feet away, but this never
became a distraction during the test. No other sensory distractions existed during the testing. The
temperature of the room was ideal for the testee and the lighting conditions were normal CFL
light bulbs.
The technical environment was comprised of a HP Pavilion desktop computer running
Windows 8.1 with a 25 inch HP 2511x monitor. The resolution of the monitor is 1920x1080. The
connection to the internet was made through Wi-Fi. The browser being using the test was Google
Chrome version 46.0.2490.71 m. The browser was not using any plug-ins at the time of the test.

Test Results

Initial Site Thoughts: First, Im going to ask you to go to UnionStation.org and tell me what
you make of it: What strikes you about it, what do you think you can do here? Just look
around and do a little narrative.

Tester 1 Report:
Mr. Hayworth navigated to the website using the actual URL of the site, as opposed to
navigating to the site using a search engine such as Google. Mr. Hayworths initial thoughts of
the sites content was that it looked like a website for a vacation destination. He also mentioned
that it looked like a visitor center website, so if you were wanting to visit the Kansas City area
you could visit the UnionStation.org website to learn about local attractions and tourist
destinations. Mr. Hayworth mentioned that the design of the site looked clean. He was a big
fan of the ribbon categories at the bottom of the page in the section labeled Explore the Station.
Mr. Hayworth also commented on how the content of the site is laid out well.
Mr. Hayworth did have some negative comments about his initial experience with the
site. He commented on a few design aspects such as the tan colors used in the Visitor Info section
at the bottom of the homepage clashing with the footer of the page. He also noticed that the
social media button at the bottom of the page actually hangover onto the Become A Member
button. This seems to be a symptom of the technological environment he was using as this is not
the case when using my HP EliteBook running Windows 7 and Google Chrome. Mr. Hayworth
also noted that it was odd to have the Become A Member at the bottom of the page, as opposed
to it being in the top right of the page where he is used to seeing such buttons. I went ahead and

informed Mr. Hayworth that while Union Station does act as a tourist attraction, it is also an
active train station. Mr. Hayworth stated that he had no idea this was an actual train station and
that the site seems focused far more on entertainment then transportation.

Tester 2 Report:

Ms.

Above- Red bar at the bottom of the home page

Mefferd navigated to the website


using the actual UnionStation.org
URL, as opposed to searching it on
a search engine such as Google. Ms.
Mefferds initial thoughts of the site
Above- The Newsletter Sign-Up at the bottom of the home
page

where it seemed like a site for

tourism and learning about the different activities that take place in Union Station. Ms. Mefferd
liked the navigation at the top of the screen, featuring nice big buttons for Events Calendar, Plan
Your Visit, About Us, Contact, Follow Us, and Visit Science. She was a fan of the slideshow in
the feature area of the homepage, which showcases various events and exhibits currently going
on at Union Station. She also noted the large red bar at the bottom of the screen advertising for
their upcoming Spookfest event. Ms. Mefferd commented on the color scheme of the website
and stated that it feels old, but it works for this site. I would think that a place like Union Station
would feel old.

Ms. Mefferd had only one negative comments during her first visit to the site. She noted
that the newsletter sign-up at the bottom left of the page was hard to read with its current color
scheme of white on beige.

Task 1: Scenario: You are bringing your grandmother to Union Station for a Sunday
afternoon outing. She cant 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:

Above- UnionStation.org main navigation

Mr. Hayworths first step in this task was to scroll, using the wheel on the mouse, towards
the bottom of the home page to the section labeled Visitor Info. This section of the home page
includes the hours of operation for the station as well as exhibits, direction to Union Station,
parking information, as well as ticket and admissions information. After realizing that there is
nothing here in relation to the task Mr. Hayworth scrolled back up to the top of the home page
and clicked on the Visit Science City button on the main navigation at the top of the page. He
realized very quickly that this is not the right area to find the information and clicked back in the
browser. Mr. Hayworth then clicked on the Plan Your Visit button on the main navigation at
the top of the page. He began looking through the webpage, noting the admission information.
Mr. Hayworth noticed that there are special tickets for Senior Citizens, leading him to assume
there will be accommodations for those needing wheelchairs. Mr. Hayworth continued to scroll

down the page to almost the complete bottom of the page and noticed the section labeled
Amenities and Transportation. Mr. Hayworth read through the information in this section and
realized that Union Station does in fact offer wheelchairs to guests that need them. Mr. Hayworth
then hovered his mouse of the Guest Amenities link and clicked it. The page loaded and he
began to search through the Guest Amenities until he came to the bottom of the page, where he
found the sections labeled Wheelchairs. He read through the information and learned the
processes and procedures for acquiring a wheelchair to complete the scenario. The testee was
able to find that wheelchairs are offered at Union Station and was able to complete the task as
required.

Tester 2:
Ms. Mefferds first step at completing this task was to first look thought the main
navigation located at the top of the home page. This navigation lists Events Calendar, Plan You
Visit, About Us, Contact, Follow Us, and Visit Science City. Ms. Mefferd clicked on the button
Contact on the main navigation area. Her reasoning behind this was that she could contact
someone at Union Station about possible wheelchair rentals. Ms. Mefferd browsed the page for a
minute and did not find anything that she thought would work for wheelchair rentals. She then
scrolled all the way to the bottom of the page and began browsing through the footer of the page.
Ms. Mefferd focused on the About Us section of the footer and noted the button Guest
Amenities Ms. Mefferd clicked the button and was taken to the Guest Amenities page. There
she read through the information and found the section for wheelchair rentals, completing the
task as asked.

Above- Footer of the UnionStation.org home page

Recommendations to improve UX for this task:


Out of the 10 Usability Heuristics for User Interface Design there is only
one heuristic that can be applied to this first task. This first task was
completed by both tester very easily, even though each tester reached the
result in a different way. The heuristic that would help this task the most
would be Match between system and the real world. This heuristic basically
means that you need to have the dialogue and content of your website
match how users in the real world would convey that content. This strictly
just applies to the use of the word Guest Amenities on the website. Both
testers were able to complete the task fairly quickly, however I think it would
allow people to find the information even faster if another term was used,
such as Guest Services or Additional Services. While most visitors would
be able to determine what is meant by Guest Amenities, simpler
terminology would increase its usability.
The second heuristic that can apply to this task is the concept of
Flexibility and efficiency of use. This task basically means that your site
should offer what are called accelerators, devices that will speed up

experienced users interactions. This would most likely be introduced in the


form of a search bar across this site. This would allow for a user to simply
search a keyword such as wheelchair and be brought to the Guest
Amenities page with the wheelchair rental information.
Task 2: (Linked to Task 3): Scenario: 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, Nov. 25.

Tester 1:
To complete the next task Mr. Hayworth remained on the Guest Amenities page from the
last task. Mr. Hayworth navigated to the top of the page and clicked the button Events
Calendar on the main navigation. Mr. Hayworths reasoning for this was because I had
mentioned a specific date in the scenario. Mr. Hayworth then clicked on the right arrow of the
calendar to move from the month of October to the month of November. He then clicked on the
date November 25. Mr. Hayworth noticed right away that there were only two movies being
offered on that date. He noticed the text above the movie titled indicating Regnier Extreme
Screen Theatre. Mr. Hayworth was able to find what movies were playing on the day of
November 25 and was able to complete the task required.

Tester 2:
Ms. Mefferd began this task by remaining on the Guest Amenities page from the last task.
She scrolled up the very top of the page and clicked on the Event Calendar button on the main

navigation at the top of the page. Ms. Mefferd reasoning for approaching the task the way was
because the scenario mentioned a specific date. She believed that she would be able to find the
information quickly by finding what would be offered on that date all across Union Station. Ms.
Mefferd noted the calendar on the page and clicked the right navigation button to change the
month from October to November. She then clicked the 25th and the page loaded all of the events
going on at Union Station for the date of November 25. Ms. Mefferd found the movies
Jerusalem and Robots 3D are playing on that day, completing the task.

Recommendations to improve UX for this task:

Task 2 has 2 of the 10 Usability Heuristics for User Interface Design that would help the
user complete this task easier and quicker. The first heuristic is Aesthetics and Minimalist
Design. The main purpose of this heuristics is that you essentially want to only include the most
relevant information for your user, and lose all other unnecessary information. This practice will
make your content easier for the user to scan, and understand, leading to quicker, more
successful interaction. This heuristic specifically applies to the amount of information on the
Plan Your Visit page. Both of my testers approached this task by using the Events Calendar,
avoiding this issue. However, when I approached the task I used the Plan Your Visit page and
was brought to what I felt was a much cluttered page, especially at the top of the page showing
admissions information. I believe it would help users taking the same route as me if the page was
structured in a neater fashion. I would recommend sorting the admission info different, such as
clustering the theaters together in a separate group, putting science exhibits into a separate group,

and finally putting exhibits into a separate group. This will prevent the user from having to read
through a long list of admissions info.

Above- Mockup of the redesigned Admissions Info section showing the information in groups

The second heuristic that could improve the users experience during a task such as this
would be the heuristic of Error Prevention. This basis of this heuristic is that you work to
carefully design your website to prevent users from making an error from the start, as opposed to
just simply providing help when the users makes an error. This heuristic specifically applies to
when the user has reached the Union Station box office page. The user is presented with a list of

film that are currently being shown or soon to be shown. The only way of knowing how long the
movie will be airing at that theater is to look at the bottom right corner of each movie, which
shows a date span. I believe it would be better to have a dropdown menu at the top of the page
where a user may select a future date and only the movies playing on that date would be listed.
When going through this task, I mistakenly thought that the movie The Martian would be
playing on November 25. I believe that this simple change would prevent errors like this from
occurring and cause confusion for the user.

Above- Screenshot of the movies playing on the Extreme Screen Theatre with a dropdown menu to
select dates

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 stop only when asked to enter credit card information.]

Tester 1:
Mr. Hayworths first step in completing this next
task was to select which movie he wanted to see
with his grandmother. At first Mr. Hayworth
selected the movie Robots 3D, but decided that
his grandmother would most likely rather see the
movie Jerusalem. When Mr. Hayworth selected
the back arrow in the browser he noted that

Above- Screenshot of movies and the movie


thumbnails

the calendar on the page had reset to todays date as opposed to staying on November 25, the
date he originally had chosen. He noted that this wasnt a huge issue, but it was irritating. Mr.
Hayworth selected the movie by clicking the picture of the movie, as opposed to using the More
Info button.
On the page for the movie Mr. Hayworth noted that it was odd that the showtimes and the
Buy Tickets button overlapped. Mr. Hayworth clicked on the Buy Tickets button and was
brought to another page giving another description of the movie. He stated I feel like I missed
something because he hasnt selected the quantity or seating and the only options listed are
Back and Add To Basket. Mr. Hayworth adamantly selected Add To Basket hoping he will
be able to move on to selecting quantity and seating. Next Mr. Hayworth is brought to a page
where he must select the date he wishes to see the movie. He found this odd as he already went
through the Event Calendar, selected the date, and selected the movie. He also noted that if

youre not paying attention you may accidentally purchase a ticket for today as opposed to the
day youre wishing to see the film.

Above- This picture shows the overlap between showtimes and the "Buy Tickets" button

Mr. Hayworth selects November 25 and there is only one showing listed. He clicks the
Add To Basket button next to the 11:30 am showing. Mr. Hayworth is then prompted to select
the number of tickets. He clicks on the up arrow twice and selects 2 tickets. He then proceeds to

Above-My Tickets section with the Select Seats

click on the Add To


Basket button on the
bottom right of the screen.
Mr. Hayworth began
Above- Screenshot showing date selection

reviewing the page

labeled My Tickets and noticed the Select Seats button towards the top of the page.

He selected the button assuming it would allow him to select his specific seat, but was
brought back to the page to select the number of tickets. Mr. Hayworth then selected the back
button on the browser and clicked on the Select Seats button again fearing he may have made a

mistake. He noticed that he was brought to the page again to select the number of tickets he
wanted to purchase. He then selected the back arrow again in the browser and was brought to the
page labeled My Tickets. Mr. Hayworth then clicked on the Proceed To Checkout button on
the bottom right of the My Tickets page. He was prompted to fill out an information form, which
he assumed was going to force him to create an account, which he disliked. He navigated
through the fields of the form using the tab button. When he was done filling out the form he
selected the Next button in the bottom right of the page. Mr. Hayworth was prompted to select
his delivery method and was confused by the term Will Call. He believe that this meant that
they would call him with his ticket information. And he was confused by the fact that they
needed he address in the information form on the previous page if theyre not mailing his tickets.
Mr. Hayworth selected the radio button for Print At Home and then clicked the Next button.
The next screen is for credit card information. Mr. Hayworth determined there is not a way to
select his specific seats and gave up on the task. Mr. Hayworth was not able to complete the task
because he could not find out how to select his seats.

Tester 2:
Ms. Mefferd began this this task by staying on the webpage from the previous task where
she found what movies were playing on the day of November 25. Ms. Mefferd decided to pick
the movie Jerusalem and clicked on the More Info button. This brought her to the info page for
the movie Jerusalem. She noted that the large slideshow of features caught her eye when the
page loaded. Ms. Mefferd began reading through all of the information on the page. She then
clicked on the Buy Tickets button on the page. This brought Ms. Mefferd to another info page
about the movie where she noticed the repeated description at the top and bottom of the page.

Ms. Mefferd
scrolled to
the top of the

Above- Movie navigation bar with more button on the right

page and
clicked the
button
Tickets in
Above- Duplicate descriptions on Jerusalem

the main

navigation for the box office page. This navigation includes buttons for Tickets, Bundles, Gift
Vouchers, Merchandise, Membership, and Donate. Clicking the button Tickets brought her to a
page showing all of the movies being played and created a bit of confusion when she did not see
the movie Jerusalem being offered. Ms. Mefferd read through the navigation at the top of the
screen and noticed the button More on the right side of the screen.
Ms. Mefferd hovered over the button and clicked it, revealing a drop down menu
containing two buttons: Exhibit and Extreme Screen. Ms. Mefferd recalled that in the
instructions she is supposed to see and Extreme Screen movie and clicked on that button. Ms.
Mefferd was brought to a screen that showed four movies available for the Extreme Screen
theatre: Robots 3D, Jerusalem, the Martian 2D, and The Martian 3D. Ms. Mefferd navigated to
the movie Jerusalem and clicked the Add To Basket button. Ms. Mefferd was now brought to a
page to decide the date for her movie. She clicked the dropdown menu and selected November
25. There was only one showtime listed so she simply clicked Add To Basket on that

showtime. Next Ms. Mefferd was brought to a page to select the number of tickets. She noted the
dropdown menu for Area and noted that it only listed the option of 3D movies.

Ms. Mefferd used the up arrow to select 2 tickets. She found it pleasant that as you
clicked the arrows, adding and subtracting tickets, the total changed automatically without any
reloading. Ms. Mefferd then clicked the button Add To Basket. Ms. Mefferd was now at the
order summary page. She read through her summary as a whole and noted that the grand total at

Above- Screenshot of the Grand Total at the bottom of the screen

Above- Showing the "Area" dropdown menu

the bottom was very small and insignificant. She worried that some may think the amount under
the To Pay section is the actual amount due.
Ms. Mefferd noticed the button for Select Seats and clicked on it. Ms. Mefferd was
brought back to the page to select her number of tickets and was confused by this. Ms. Mefferd
simply clicked the Add To Basket button again and moved on. She scrolled to the bottom of
the page and clicked the Proceed To Checkout button. Ms. Mefferd was brought to a page
asking for her to fill out a form for personal information. Ms. Mefferd assumed she would have
to create an account in order to purchase her ticket. She noted that the text explanation was
incorrect as it said Click New User if you do not have an account yet., however there is no
button on the page for New User. The closest button to this would be the Create New
Account button at the top of the page. I informed Ms. Mefferd that this is in fact not true, and
that she can simply fill out the information form. Ms. Mefferd filled out the personal information

form and clicked the button Next. Ms. Mefferd was brought to a page to select her delivery
method for her tickets and found the option of Will Call to be confusing. She selected the
option Print At Home and clicked the button Next. Ms. Mefferd was brought to a screen to
enter her credit card information and was not able to find an option to select her seats. Ms.
Mefferd gave up on the task and the task was left incomplete.
Recommendations to improve UX for this task:
Task 3 was very troublesome for both of my testers, as well as for myself. Out of the 10
Heuristics available from Jakob Nielsen, I would recommend that the website needs to
implement five of them in order to improve user experience. The first heuristic that I would
recommend the site implement would be Error Prevention. The point of this heuristic is to design
your site in such a way that users are able to prevent themselves from making an error, as
opposed to just helping your user recover from an error. This heuristic applies directly to the site
in five different instances. The first instance occurred when my tester Mr. Hayworth was
attempting to navigate through the Events Calendar. Mr. Hayworth selected a movie for the task
and decided that he would prefer a different movie. Mr. Hayworth used the back navigation in
the browser, and he noticed that calendar had moved from November, back to October. If a user
didnt notice that change it may cause them to find the wrong information. I would recommend
using some sort of cache to have the browser remember the date previously selected.
The second instance where the Error Prevention heurist would apply is the Select Seats
button on the order confirmation page of the Union Station box office. Both of my testers, as
well as myself, thought that this button would allow us to select our specific seats for the movie.
The button actually leads you back a page to select the quantity of tickets you wish to purchase.

It would be much better to rename the button to something like Change quantity or Change
number of tickets.

Above- Modified screenshot shows the change to the "Select Seats" button, which was a Select Seats
button

It would also be better if a user could simply change the ticket quantity on this same
page. A perfect example of a site that allows you to change item quantity while in the checkout
process is Amazon.com.

Above- This screenshot shows that users are able to change the quantity of an item in the cart of
Amazon.com

The third area of the site that would improve user experience is when the user comes to
the ticket delivery method. Both of my testers were confused by the term Will Call as an
option for ticket delivery. One of my testers had no idea what will call is, wondering if Union
Station was going to call him with ticket information. And my second tester thought that you had
to call the box office to pick up your tickets. Will Call refers to the act of pre-ordering tickets,
and then picking them up from the box office. It would be better for user experience to change
this term from Will Call to something along the lines of Pick-Up at Box Office or simply
Pick-Up. Even an explanation of the word next to the option would be of benefit to the user.

Above- This screenshot shows the "Will Call" button changed to "Pick-Up"

Above- Screenshot shows an explanation of each delivery option

The fourth area of the site where the Error Prevention heuristic would help is implying
that you need to have a user account when checking out with your tickets. Tester 2, Ms. Mefferd,
thought that you were required to sign up for a user account in order to purchase your tickets
because the top of the page says To complete this transaction, please log into your account using
your e-mail address and password. Click New User if you do not have an account yet. In reality
the user can simply fill out the personal information form below this login area and purchase
their tickets as a guest user. Users can be wary about signing up for user accounts, especially
with sites that they dont use very often. It would be better to make it more apparent that you can
either checkout as a registered user, or as a guest.

Above- Mockup showing the option for Account Login or Guest Checkout when purchasing tickets

The final area of the site that would benefit from Error Prevention is the small grand total
at the bottom of the order summary page. Tester 2, Ms. Mefferd, actually pointed out the fact that
some users may be confused about the amount they have to pay due to the fact that the grand
total is very small and in the bottom left corner of the page, whereas the To Pay section is very
bold and in the center of the page.

Above- Screenshot shows a modified version of the order summary screen with an emphasis on the
grand total

The second heuristic that would help improve the user experience of the site is Match
Between System and Real World. The basis of this heuristic is to design your site in such a way
that your users completely understand the content. The content is presented in a real-world,
lowest common denominator format to allow everyone to comprehend it. There are two areas of
the website where this heuristic applies. The first area is the previously mentioned Select Seats
button on the order summary page of the Union Station box office. There was confusion between
both of my testers as to the meaning of this button. Both of them believed the button would allow
them to select their seats for the movie, however it took them to the previous page, which
allowed them to select the quantity of tickets to the movie. It would be better to change the name
of this button to something like Change quantity or Change number of tickets. This will help
prevent users from assuming they are able to select their actual seats for the movie.

The second area that the Match Between System and Real World heuristic applies to is
the Will Call button for the delivery method of your tickets. Both of my testers were confused
about the term Will Call and what sort of delivery method that would be. My recommendation
for improving this area the site would be to either add an explanation of the method, or simply
change the name of the method to Pick-Up or Pick-Up at Box Office.
The third heuristic that would improve this task is the heuristic Consistency and
Standards. The basis of this heuristic is to design your site so that it follows common
conventions that already exist in the internet. This could be using certain buttons, menus, or
content areas that online users are already conditioned to know. Breaking this internet
conventions can lead to your user being confused and ruining their experience on your site.
There are three areas of the site that would benefit from the implementation of the Consistency
and Standards heuristic. The first area of the site is the use of the button Add To Basket when
the user is presented with a list of movies for that theatre. Tester 1, Mr. Hayworth, stated that he
was very weary about clicking the button because he felt as though he had missed something. Up
to this point he had not been given the option of selected his ticket quantity, seats, date or time.
Typically a site would use a button labeled Next or Select Tickets. This would let the user
know what the next step of the process is, as the actual act of adding the order to the basket does
not come up for another 2 pages.
The second area of the site that would benefit from the Consistency and Standard
heuristic is the navigation of the box office section of the site. When the user goes to the box
office, they are actually brought to a completely different section within the website. This is
apparent in the URL changing from UnionStation.org to BoxOffice.UnionStation.org. This
change to the box office page also bring with it a serious change in layout and navigation. All of

the familiar navigation from the home page is gone and replaced with navigation specific to the
box office. This may cause confusion to the user with such an abrupt change. I would
recommend keeping the box office section of the site within the main site. It would be best to add
a Box Office button to the main navigation and implement the box office navigation as sub
navigation on the site. This would allow users to purchase tickets while still having access to the
main site and all off its familiar design elements.

Above- Mockup showing the addition of a "Box Office" button to the homepage navigation

The final section of the site that will be improved by the implementation of the
Standards and Consistency is the infamous Select Seats button. As previously mentioned,
this button resides on the order summary page of the Union Station box office site. Both of my
testers assumed this button would allow them to select their seats for the movie, however it
simply took them back to the previous page and allowed them to select the quantity of tickets. It
is commonplace for movie theaters nowadays to allow users to select their seats for a movie
through services like Fandango. Users have been conditioned to expect the ability to select their
seat. Using a button like Select Seats is very misleading to these users as it has nothing to do
with selecting your actual seat for the show.

Above- Screenshot showing the seat selection screen on Fandango.com

The fourth heuristic that would improve the user experience of the site is the heuristic of
Aesthetic and Minimalist Design. The point of this heuristic is to design your site in a very
clean, clear way that only includes the most necessary information to the user. This heuristic can
be applied throughout the whole Union Station box office website by eliminating the excessive
amount of buttons used throughout the purchasing process. Users must go through nine different
button sets and six different pages just to get to the point where they can enter their credit card

information. First the user select the movie, then the date and time you wish to see it, then you
select your ticket number, review your order, either login or fill out information form, select your
delivery method, then youve reached the point of entering in your credit card information. There
is a lot of opportunity to take a few of these steps out of the process and combine them to the
same page. For example Fandango has the date selection, time, and theatre selection all on one
page. Fandango also implements a progress bar showing where you are in the purchasing
process, highlighting three simple steps. I would recommend combining the date selection, time
selection, and ticket quantity selection into one page. I would also recommend combining the
login/guest checkout section and the credit card information section with the order summary
page. This would cut the number of pages in half for the user, dramatically increasing the
simplicity of the task.

Above- A screenshot of the progress bar on Fandango.com

The final heuristic that would improve the user experience of the site would be User
Control and Freedom The basis of this heuristic is to provide your users with ways to go back if
an error occurs. During the task, Tester 2, Mr. Hayworth, attempted to go back and select a
different movie. When he used the back arrow on the browser the calendar on the Events
Calendar page had reset from November 25 to the current day. This heuristic would best be
implemented through the inclusion of breadcrumb navigation throughout the purchasing process
on the box office website. This would allow users to go back at any point in the purchasing
process and would hopefully eliminate any serious errors from occurring. There could be a

specific breadcrumb in the navigation that would allow you to go back to the calendar of the day
you already selected.

Task 4: Scenario: Youd 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 email to the appropriate person/department to inquire about
wheelchair access throughout all areas of Union Station. [Take this step all the way through
the process, and stop only when the actual email could be written and sent]

Tester 1:
To start this task Mr. Hayworth navigated to the top of the page, still on the credit card
info page, and clicked on the Union Station logo. He thought this would take him back to the
homepage, as this is a traditional website function. Mr. Hayworth said he was confused and
frustrated by the lack of this feature. Mr. Hayworth re-entered the URL into the browser and
navigated back to the home page of the Union Station website. He noticed the button Contact
on the main navigation at the top of the page. Mr. Hayworth is presented with a list labeled
Department Contacts. He began scanning through the list and within 30 seconds found the
department Visitor Relations. He was guessing that this would be the closest department to find
out the wheelchair accessibility of Union Station. Mr. Hayworth then proceeded to use the cursor
to highlight the email address, using the keyboard command to copy the address, open up his
personal Gmail account, and use the keyboard command to paste the email. He stated his
reasoning for copying and pasting the address was that he hates clicking email links because it
opens up an email program on your computer that you usually dont have set up. Mr. Hayworth

was able to successfully complete the task, as he was able to find an email for who he thought
would be the best contact for wheelchair accessibility, and he was able to find their email address
to contact them.

Tester 2:
The start this test Ms. Mefferd stayed on the last page from the previous task. She first
clicked on the Union Station logo at the top of the page. Her reasoning for this is that websites
traditional use their logos as buttons to take you back to the home page of the site. After
numerous attempts at this, Ms. Mefferd simply re-entered the URL UnionStation.org into the
browser. This took Ms. Mefferd back to the home page of the site. Ms. Mefferd clicked on the
button Contact in the main navigation at the top of the home page. Ms. Mefferd began reading
through all of the departments and noticed the one labeled Visitor Relations. Ms. Mefferd
believed this would department would most likely be able to help with visitor questions and
concerns. Ms. Mefferd moved her cursor to the right of the page where the email link was
shown, she clicked the email link visitor@unionstation.org, but nothing happened. Ms.
Mefferd repeated this step two more times before finally right-clicking the email address and
selecting the option Copy Email Address in the browser. Ms. Mefferd then proceeded to open
another tab in the browser and log into her personal email account. Ms. Mefferd pasted the email
address into the email, completing the task as asked.

Recommendations to improve UX for this task:


Task 4 had a rough start for both of my users, but they ended up getting on track. Out of
the 10 heuristics recommended by Jakob Nielsen I would only recommend implementing the

Consistency and Standards heuristics. The purpose of the Consistency and Standards
heuristic is to design your site so that it follows common conventions that already exist in the
internet. This heuristic applies to two sections of the websites for improving the usability of this
task. The first section that the Consistency and Standards would apply to is the Union Station
logo at the top of box office page. Both of my tester attempted to click the logo when finished
with Task 3 in order to go back to the home page to work on Task 4. When the testers clicked on
the logo nothing happened. It is a common practice across the internet that when a user clicks on
the logo of a site, they are taken back to the home page. The lack of a link on the logo lead to
both of my testers having to re-enter the UnionStation.org URL into the browser again. My
recommendation would be to simply add a link to the Union Station logo that would lead users
back to the home page.
The second area of the site that could be improved with the implementation of the
Consistency and Standards heuristics would be the use of email links on the contact page. The
page features a series of email addresses that are all underlined, insinuating that they are clickable links, however when Tester 2, Ms. Mefferd, clicked on the link nothing happened. Tester 1,
Mr. Hayworth, stated that he doesnt like using click-able email links because it usually launches
an email program on the computer. My recommendation would be to implement a message form
where users can leave their name, email address, subject, and a message and contact various
facilities at Union Station that way.

Above- Mockup showing a potential message system for the "Contact" page

Testing Conclusions
Completion Rate
My first tester, Mr. Hayworth, had a completion rate of 75%. He was able to complete
task 1, 2, and 4, with Task 3 proving to be too difficult. My second tester, Ms. Mefferd, also had
a completion rate of 75%. She was able to complete tasks 1, 2, and 4, also having trouble with
Task 3. Overall, between both of my testers their completion rate is 75%, which is 3% under the
standard completion rate of 78%. This standard completion rate came from testing thousands of
testers on websites all across the internet. This means that users typically are able to complete
78% of the tasks they set out to accomplish when using the internet.

Similarities and differences


When users set out to accomplish a task online there are usually multiple ways to
accomplish that task. For Task 1, which asked the users to find out whether Union Station will
have wheelchairs accessible to the guests, my testers were able to complete the task in separate
ways. Tester 1, Mr. Hayworth, went to the Plan You Visit page and found the Guest Amenities
sections, which contains information about wheelchairs. Tester 2, Ms. Mefferd, scrolled to the
bottom of the page to the footer.

Right- Guest Amenities


information on the Plan
Your Visit page

There she found a


link to Guest
Amenities, which
she clicked, and found the information about the wheelchairs.

Above-Wheelchair information on the Guest Amenities page

Task 2, which asked the testers to find what movies are playing on the Extreme Screen on
November 25, was completed the same way by both of my testers. They both went to the Events
Calendar and selected the date of November 25 and were able to complete the task very easily.
When I attempted complete the task myself I actually approached it different by going to the
Plan Your Visit page, finding the Extreme Screen theater under admissions info, then using the
arrow link on the right to go to the box office website.

Above- The arrow button is circled that leads to the Extreme Screen Theatre page

For both of my testers Task 3 was not able to be completed, and for the most part they
approached the task similarly, but there were a few subtle differences. Both of my testers
selected the movie Jerusalem and they were both on the description page for the movie.

Above- Information page for the movie Jerusalem. Tester 1 selcted Add To Basket, while Tester 2
selected Tickets.

Tester 1, Mr. Hayworth, clicked on the Add To Basket button on the page to move forward into
purchasing tickets for the film. Tester 2, Ms. Mefferd, instead clicked the button Tickets in the
navigation at the top of the page. Tester 2, then had to reselect the Extreme Screen, and selected
Add To Basket on the new page. From here both of my testers attempted to complete the task
in the same way except for when it came time to fill out personal information for the purchase of
the tickets. Tester 1, Mr. Hayworth, assumed that he could simply checkout as a guest. Tester 2,
Ms. Mefferd, assumed that she had to sign-up for a user account in order to purchase tickets

because the dialogue screen insinuated it. After this both of the testers continued the task in the
same manner, and they were both unable to complete the task.
Both of my testers approached the final task in the same way. Task 4 asked the testers to
find the contact information for someone at Union Station that would know the how wheelchair
accessible the station is. Both of my testers attempted to head back to the home page of the
website by clicking the Union Station logo at the top of the box office home page. When this
didnt work they both re-entered the UnionStation.org URL into the browser. They both
navigated to the Contact page using the button in the navigation at the top of the page. They
found the contact information for Visitor Relations. Tester 1, Mr. Hayworth, highlighted the
email address and opened up his Gmail to complete the task. Tester 2, Ms. Mefferd, clicked the
link. When nothing happened she right clicked the link and selected the Copy Email Address
button in her. She then opened her personal email to complete the task.

Heuristic done well:


While it is easy to criticize a site on what it doesnt do well, it is equally important to
inform a site of what is doing well so that it can keep focusing on maintaining good user
experience in these areas.
Jakob Nielsen lists 10 heuristics to focus on at the core of your user experience. Out of
these 10, Union Station performs strongly in 2 of these heuristics: visibility of system status, and
recognition rather than recall.
The heuristic Visibility of System Status pertains to showing your user the progress of
loading the page. Without showing the progress of a page load, users will feel as though theyre
done something wrong or that the page simply is not working. To prevent this confusion it is

important to build something into your website, such as a progress bar, that will demonstrate the
loading process. While Union Station does not implement a progress bar, the site loads within a
reasonable amount of time. As mentioned previously, it is important to have your page load
within 10 seconds, or else youll begin losing users. The average site load time for Union Station
was around 6 seconds, well within the necessary time limit. This in itself counts as a component
of Visibility of System Status because it provides the user with timely feedback of the sites
progress.
The second heuristic that the site does well is Recognition Rather Than Recall. The
basis of this heuristic is to build your site in such a way that users can recognize how to
accomplish a task, rather than having to learn it and recall it from memory. This heuristic comes
down to designing your site in such a way that you use common functions throughout your
website that users will recognize. Examples of how this is implemented well in the Union Station
site come from the completion of tasks such as finding wheelchairs, and contacting staff about
wheelchair accessibility. In both cases, both of my testers were able to recognize the use of terms
such as Guest Amenities and Contact, and know that they would be able to accomplish their
task by using these tools.
As with every business, including websites, the most important part is the customer. And
the most important part of being successful is to focus on the customer and their needs.
Competition on the internet is fierce and instant, there is always someone else out there looking
to take your users. And on the other side, the user is always looking for the next best thing.
Having a focus on user experience and the way your customers interact with your site is
absolutely essential to bringing in new customers and to keep them coming back. Without
customers, theres no ad revenue, and with no revenue, theres no site.

Vous aimerez peut-être aussi