unionstation.org ux design analysis

7/24/2019 UnionStation.org UX Design Analysis

1/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 tas, and get out in an efficient and effective manner. !here are several sources for

these user e"perience guidelines, but in this analysis I will be using #aob $ielsen%s &' Usability

(euristics for User Interface )esign, the guidelines provided in the te"tbooAbove the Fold,and

*oogle%s + Usability Principles.

!his usability test consists of four tass for the user to complete on the Uniontation.org

website. I ran through the test myself before asing my testers to do so. I completed the tas at

school in the lounge of Wells (all. !his is a common place for me to browse the web and use the

internet. !he lighting of the environment was standard fluorescent lighting. !here were no

distractions as the test was performed after business hours at Wells (all, so there was nobody

around. !here were no distractions such as music, television, bacground noise, or anything

related. I used my $orthwest Missouri tate University issued laptop. It is an (P -liteoo /0'

running Windows + ervice Pac &. !he computer has an Intel Core i1203'' CPU running at

&.4' *(5 and has 0 * of 6AM. !he screen si5e of the laptop is &07 at a resolution of

&844"+4/.


2/42

My initial thoughts of the Uniontation.org website was that it feels very crowded on a

small screen si5e. !he feature area did not fit entirely on my screen with the toolbar, boomars,

and other browser additions.

Above- Screenshot of home page on my HP laptop

!he navigation at the top seemed very simple and easy to follow. !he top navigation

includes 9-vents Calendar7, 9Plan :our ;isit7, 9About Us7, 9Contact7, 9 Attractions, 6estaurants and hops, creens and tages, and


3/42

eep the user from losing complete interest and leaving the site. After &' seconds, users lose

complete attention and usually leave the site.

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

!as &, which ass the tester to loo into wheelchair accessibility was a fairly simple tas

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

=uicly found a lin labeled 9*uest Amenities7 and cliced on the lin. !he page loaded almost

instantly. !he te"t on the page was in chuns and allowed for a great amount of scanability. I

=uicly found the section labeled Wheelchair. !his section contained all of the necessary

information ased in the tas. I completed this tas very easily and have no recommendations for

how to improve this section.

!as 3 caused a bit more grief asing the user to find the movies playing at -"treme

creen on the day of $ovember 31.


4/42

the movie will be playing. !his section of the site was very straightforward, but I am used to

operating other movie theater sites, such as


5/42

!as 8 is

where I began

having trouble

navigating the

website. !he tas

ass the user to

try and secure

wheelchair2

compatible

seating for a

movie. I selected

the button 9Add to

aset7 on the movieRobots 3D. I selected $ovember 31 from the dropdown menu. !here was

only one time

offered so I selected the 9Add to aset7 button on the &'>8' am showing. I selected 3 general

admissions ticets and cliced on the 9Add to aset7 button again. $e"t I cliced the 9Proceed

to Checout7 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 cliced 9$e"t7. I

selected the 9Print At (ome7 radio button and selected the 9$e"t7 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.

!as 0 ased the user to contact someone at Union tation about the availability of

wheelchair access in the station. I was still on the bo" office site and it lacs any navigation from

Above- A screenshot of the Etreme Screen page sho!ing the movie dates


6/42

the homepage. I cliced on the Union tation logo at the top of the page, but it didn%t do

anything. I had to type the Uniontation.org U6@ in the toolbar again and go bac to the

homepage. I cliced on the 9Contact Us7 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 ;isitor 6elations. I cliced the email lin to the right of the name and it

didn%t do anything. In order to use the email I will have to copy it and paste it into the email. !he

fact that clicing on the Union tation logo on the bo" office page does nothing is a problem. I

find it common to e"pect clicing on the website logo to tae you bac to the homepage.

Clicing on the email lin with nothing happening is also an issue as it is formatted lin a

clicable lin. ther than these two issues the tas was very easy to complete.

Above-A screenshot of the "#ontact" page sho!ing the email lin$s that appear clic$able


7/42

Choosing Participants

Tester 1: Jacob Hayworth

#acob (ayworth is a student at $orthwest Missouri tate University studying roadcast

Production. Mr. (ayworth is a 3& year old male woring as a full2time student, as well as a

Multimedia @ab assistant in Wells (all on the $orthwest Missouri tate University campus. Mr.

(ayworth is not familiar with the site%s content, but claims to spend roughly &1 hours a wee on

the internet between social media and web browsing. +'B of this time is spent on social media,

while 8'B of this time is spent on web browsing. Mr. (ayworth is being considered as my high2

e"perience user for this usability test.

!he test was performed at Wells (all on the $orthwest Missouri tate University

campus. Mr. (ayworth spends an e"tensive amount of time in Wells (all, with a significant

amount of that time being spent online either on social media or surfing the internet. !his 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 tass and I believe acts as an ade=uate testing location.

!he physical environment for the test was very desirable. !he lighting of the test area was

bright fluorescent lighting and the temperature of the room was slightly cold for the tester%s

preferences. !here were very few sensory distractions during the test other than other students

being in the same room and occasionally asing a =uestion or maing a comment.

!he technology environment of the test included the use of a 3+7 6etina )isplay iMac

with a monitor resolution of 1&3'"3//'. !he iMac was running Mac &'.&'.0 :osemite.

!he computer was connected to the Internet via a wired -thernet connection. !he browser used

for the test was *oogle Chrome version 04.'.30?'.+& m. !he browser was not using any plug2ins

at the time of the test.


8/42

Tester 2: Amy effer!

Amy Mefferd is a 01 year old women who does clerical wor for Woodmen @ife. Ms.

Mefferd is not familiar with this sites content, but claims to spend roughly 4' hours a wee

online between wor and personal use. Ms. Mefferd separates her time on the internet as +1B

browsing and 31B social media. Ms. Mefferd is acting as my low2e"perience user, even though

she spend over three times as much time online as my high2e"perience user. !his is due to the

face that the maDority Ms. Mefferd time spent using the internet is spent using email and

accessing wor documents thorough the web. he does not spend as much time simply browsing

the internet.

!he test was performed in Ms. Mefferd home, in her office. !his area was chosen out of

convenience for the tester, but also because this is a location she would liely be using to use a

site lie Uniontation.org. It is for this reason that I believe this is an ade=uate testing area.

!he 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 &' feet away, but this never

became a distraction during the test. $o other sensory distractions e"isted during the testing. !he

temperature of the room was ideal for the testee and the lighting conditions were normal C


9/42

Test "es#lts

$nitial Site Tho#ghts: %irst& $'m going to as( yo# to go to UnionStation.org an! tell me what

yo# ma(e of it: )hat stri(es yo# abo#t it& what !o yo# thin( yo# can !o here* J#st loo(

aro#n! an! !o a little narrati+e.

Tester 1 "eport:

Mr. (ayworth navigated to the website using the actual U6@ of the site, as opposed to

navigating to the site using a search engine such as *oogle. Mr. (ayworth%s initial thoughts of

the sites content was that it looed lie a website for a vacation destination. (e also mentioned

that it looed lie a visitor center website, so if you were wanting to visit the Eansas City area

you could visit the Uniontation.org website to learn about local attractions and tourist

destinations. Mr. (ayworth mentioned that the design of the site 9looed clean7. (e was a big

fan of the ribbon categories at the bottom of the page in the section labeled -"plore the tation.

Mr. (ayworth also commented on how the content of the site is 9laid out well7.

Mr. (ayworth did have some negative comments about his initial e"perience with the

site. (e commented on a few design aspects such as the tan colors used in the ;isitor Info section

at the bottom of the homepage clashing with the footer of the page. (e also noticed that the

social media button at the bottom of the page actually hangover onto the 9ecome A Member7

button. !his seems to be a symptom of the technological environment he was using as this is not

the case when using my (P -liteoo running Windows + and *oogle Chrome. Mr. (ayworth

also noted that it was odd to have the 9ecome A Member7 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


10/42

informed Mr. (ayworth that while Union tation does act as a tourist attraction, it is also an

active train station. Mr. (ayworth 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 "eport:

Ms.

Mefferd navigated to the website

using the actual Uniontation.org

U6@, as opposed to searching it on

a search engine such as *oogle. Ms.

Mefferd%s initial thoughts of the site

where it seemed lie a site for

tourism and learning about the different activities that tae place in Union tation. Ms. Mefferd

lied the navigation at the top of the screen, featuring nice big buttons for -vents Calendar, Plan

:our ;isit, About Us, Contact,


11/42

Ms. Mefferd had only one negative comments during her first visit to the site. he noted

that the newsletter sign2up at the bottom left of the page was hard to read with its current color

scheme of white on beige.

Tas( 1: Scenario: ,o# are bringing yo#r gran!mother to Union Station for a S#n!ay

afternoon o#ting. She can't wal( more than abo#t - steps at a time. /etermine whether or

not there will be a wheelchair a+ailable for her to #se !#ring the +isit.

Tester 1:

Mr. (ayworth%s first step in this tas was to scroll, using the wheel on the mouse, towards

the bottom of the home page to the section labeled ;isitor Info. !his section of the home page

includes the hours of operation for the station as well as e"hibits, direction to Union tation,

paring information, as well as ticet and admissions information. After reali5ing that there is

nothing here in relation to the tas Mr. (ayworth scrolled bac up to the top of the home page

and cliced on the 9;isit cience City7 button on the main navigation at the top of the page. (e

reali5ed very =uicly that this is not the right area to find the information and cliced bac in the

browser. Mr. (ayworth then cliced on the 9Plan :our ;isit7 button on the main navigation at

the top of the page. (e began looing through the webpage, noting the admission information.

Mr. (ayworth noticed that there are special ticets for enior Citi5ens, leading him to assume

there will be accommodations for those needing wheelchairs. Mr. (ayworth continued to scroll

Above- UnionStation.org main navigation


12/42

down the page to almost the complete bottom of the page and noticed the section labeled

Amenities and !ransportation. Mr. (ayworth read through the information in this section and

reali5ed that Union tation does in fact offer wheelchairs to guests that need them. Mr. (ayworth

then hovered his mouse of the 9*uest Amenities7 lin and cliced it. !he page loaded and he

began to search through the *uest Amenities until he came to the bottom of the page, where he

found the sections labeled Wheelchairs. (e read through the information and learned the

processes and procedures for ac=uiring a wheelchair to complete the scenario. !he testee was

able to find that wheelchairs are offered at Union tation and was able to complete the tas as

re=uired.

Tester 2:

Ms. Mefferd%s first step at completing this tas was to first loo thought the main

navigation located at the top of the home page. !his navigation lists -vents Calendar, Plan :ou

;isit, About Us, Contact,


13/42

"ecommen!ations to impro+e U0 for this tas(:

Out of the 10 Usability Heuristics for User Interface Design there is only

one heuristic that can be applied to this rst task. This rst task was

copleted by both tester !ery easily" e!en though each tester reached the

result in a di#erent way. The heuristic that would help this task the ost

would be $%atch between syste and the real world&. This heuristic basically

eans that you need to ha!e the dialogue and content of your website

atch how users in the real world would con!ey that content. This strictly

'ust applies to the use of the word $(uest )enities& on the website. *oth

testers were able to coplete the task fairly +uickly" howe!er I think it would

allow people to nd the inforation e!en faster if another ter was used"

such as $(uest ,er!ices& or $)dditional ,er!ices&. -hile ost !isitors would

be able to deterine what is eant by $(uest )enities&" sipler

terinology would increase its usability.

The second heuristic that can apply to this task is the concept of

$le/ibility and eciency of use&. This task basically eans that your site

should o#er what are called accelerators" de!ices that will speed up

Above- 'ooter of the UnionStation.org home page


14/42

e/perienced users interactions. This would ost likely be introduced in the

for of a search bar across this site. This would allow for a user to siply

search a keyword such as $wheelchair& and be brought to the (uest

)enities page with the wheelchair rental inforation.

Task 23 45inked to Task 673 ,cenario3 8ou want to plan to see an 9/tree

,creen o!ie during your !isit" so you want to secure tickets in ad!ance.

Deterine what is playing on -ednesday" :o!. 2;.

Tester 1:

!o complete the ne"t tas Mr. (ayworth remained on the *uest Amenities page from the

last tas. Mr. (ayworth navigated to the top of the page and cliced the button 9-vents

Calendar7 on the main navigation. Mr. (ayworth%s reasoning for this was because I had

mentioned a specific date in the scenario. Mr. (ayworth then cliced on the right arrow of the

calendar to move from the month of ctober to the month of $ovember. (e then cliced on the

date $ovember 31. Mr. (ayworth noticed right away that there were only two movies being

offered on that date. (e noticed the te"t above the movie titled indicating 96egnier -"treme

creen !heatre7. Mr. (ayworth was able to find what movies were playing on the day of

$ovember 31 and was able to complete the tas re=uired.

Tester 2:

Ms. Mefferd began this tas by remaining on the *uest Amenities page from the last tas.

he scrolled up the very top of the page and cliced on the 9-vent Calendar7 button on the main


15/42

navigation at the top of the page. Ms. Mefferd reasoning for approaching the tas the way was

because the scenario mentioned a specific date. he believed that she would be able to find the

information =uicly by finding what would be offered on that date all across Union tation. Ms.

Mefferd noted the calendar on the page and cliced the right navigation button to change the

month from ctober to $ovember. he then cliced the 31 thand the page loaded all of the events

going on at Union tation for the date of $ovember 31. Ms. Mefferd found the movies

JerusalemandRobots 3Dare playing on that day, completing the tas.


!as 3 has 3 of the &' Usability (euristics for User Interface )esign that would help the

user complete this tas easier and =uicer. !he first heuristic is Aesthetics and Minimalist

)esign. !he 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. !his practice will

mae your content easier for the user to scan, and understand, leading to =uicer, more

successful interaction. !his heuristic specifically applies to the amount of information on the

9Plan :our ;isit7 page. oth of my testers approached this tas by using the 9-vents Calendar7,

avoiding this issue. (owever, when I approached the tas I used the 9Plan :our ;isit7 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 taing 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 e"hibits into a separate group,


16/42

and finally putting e"hibits into a separate group. !his will prevent the user from having to read

through a long list of admissions info.

Above- (oc$)p of the redesigned Admissions *nfo section sho!ing the information in gro)ps

!he second heuristic that could improve the user%s e"perience during a tas such as this

would be the heuristic of -rror Prevention. !his basis of this heuristic is that you wor to

carefully design your website to prevent users from maing an error from the start, as opposed to

Dust simply providing help when the users maes an error. !his heuristic specifically applies to

when the user has reached the Union tation bo" office page. !he user is presented with a list of


17/42

film that are currently being shown or soon to be shown. !he only way of nowing how long the

movie will be airing at that theater is to loo 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 tas, I mistaenly thought that the movie 9!he Martian7 would be

playing on $ovember 31. I believe that this simple change would prevent errors lie this from

occurring and cause confusion for the user.

Above- Screenshot of the movies playing on the Etreme Screen Theatre !ith a dropdo!n men) toselect dates

Tas( : o thro#gh the steps of b#ying two tic(ets for an 34treme Screen mo+ie on that

!ay. /etermine whether or not yo# can choose the act#al seats so that yo# an! yo#r


18/42

gran!mother will ha+e wheelchair5compatible seating. 6Ta(e this step all the way thro#gh

the process& an! stop only when as(e! to enter cre!it car! information.7

Tester 1:

Mr. (ayworth%s first step in completing this ne"t

tas was to select which movie he wanted to see

with his grandmother. At first Mr. (ayworth

selected the movieRobots 3D, but decided that

his grandmother would most liely rather see the

movieJerusalem. When Mr. (ayworth selected

the bac arrow in the browser he noted that

the calendar on the page had reset to today%s date as opposed to staying on $ovember 31, the

date he originally had chosen. (e noted that this wasn%t a huge issue, but it was 9irritating7. Mr.

(ayworth selected the movie by clicing the picture of the movie, as opposed to using the 9More

Info7 button.

n the page for the movie Mr. (ayworth noted that it was odd that the showtimes and the

9uy !icets7 button overlapped. Mr. (ayworth cliced on the 9uy !icets7 button and was

brought to another page giving another description of the movie. (e stated 9I feel lie I missed

something7 because he hasn%t selected the =uantity or seating and the only options listed are

9ac7 and 9Add !o aset7. Mr. (ayworth adamantly selected 9Add !o aset7 hoping he will

be able to move on to selecting =uantity and seating. $e"t Mr. (ayworth is brought to a page

where he must select the date he wishes to see the movie. (e found this odd as he already went

through the -vent Calendar, selected the date, and selected the movie. (e also noted that if

Above- Screenshot of movies and the movieth)mbnails


19/42

you%re not paying attention you may accidentally purchase a ticet for today as opposed to the

day you%re wishing to see the film.

Mr. (ayworth selects $ovember 31 and there is only one showing listed. (e clics the

9Add !o aset7 button ne"t to the &&>8' am showing. Mr. (ayworth is then prompted to select

the number of ticets. (e clics on the up arrow twice and selects 3 ticets. (e then proceeds to

clic on the 9Add !o

aset7 button on the

bottom right of the screen.

Mr. (ayworth began

reviewing the page

labeled My !icets and noticed the 9elect eats7 button towards the top of the page.

(e selected the button assuming it would allow him to select his specific seat, but was

brought bac to the page to select the number of ticets. Mr. (ayworth then selected the bac

button on the browser and cliced on the 9elect eats7 button again fearing he may have made a

Above- Screenshot sho!ing date selection

Above- This pict)re sho!s the overlap bet!een sho!times and the "+)y Tic$ets" b)tton

Above-(y Tic$ets section !ith the Select Seats


20/42

mistae. (e noticed that he was brought to the page again to select the number of ticets he

wanted to purchase. (e then selected the bac arrow again in the browser and was brought to the

page labeled My !icets. Mr. (ayworth then cliced on the 9Proceed !o Checout7 button on

the bottom right of the My !icets page. (e was prompted to fill out an information form, which

he assumed was going to force him to create an account, which he dislied. (e navigated

through the fields of the form using the tab button. When he was done filling out the form he

selected the 9$e"t7 button in the bottom right of the page. Mr. (ayworth was prompted to select

his delivery method and was confused by the term 9Will Call7. (e believe that this meant that

they would call him with his ticet information. And he was confused by the fact that they

needed he address in the information form on the previous page if they%re not mailing his ticets.

Mr. (ayworth selected the radio button for 9Print At (ome7 and then cliced the 9$e"t7 button.

!he ne"t screen is for credit card information. Mr. (ayworth determined there is not a way to

select his specific seats and gave up on the tas. Mr. (ayworth was not able to complete the tas

because he could not find out how to select his seats.

Tester 2:

Ms. Mefferd began this this tas by staying on the webpage from the previous tas where

she found what movies were playing on the day of $ovember 31. Ms. Mefferd decided to pic

the movieJerusalemand cliced on the 9More Info7 button. !his brought her to the info page for

the movieJerusalem. he 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. he then

cliced on the 9uy !icets7 button on the page. !his brought Ms. Mefferd to another info page

about the movie where she noticed the repeated description at the top and bottom of the page.


21/42

Ms. Mefferd

scrolled to

the top of the

page and

cliced the

button

9!icets7 in

the main

navigation for the bo" office page. !his navigation includes buttons for !icets, undles, *ift

;ouchers, Merchandise, Membership, and )onate. Clicing the button 9!icets7 brought her to a

page showing all of the movies being played and created a bit of confusion when she did not see

the movieJerusalembeing offered. Ms. Mefferd read through the navigation at the top of the

screen and noticed the button 9More7 on the right side of the screen.

Ms. Mefferd hovered over the button and cliced it, revealing a drop down menu

containing two buttons> 9-"hibit7 and 9-"treme creen7. Ms. Mefferd recalled that in the

instructions she is supposed to see and 9-"treme creen7 movie and cliced on that button. Ms.

Mefferd was brought to a screen that showed four movies available for the -"treme creen

theatre>Robots 3D, Jerusalem, the Martian 2D, and The Martian 3D. Ms. Mefferd navigated to

the movieJerusalemand cliced the 9Add !o aset7 button. Ms. Mefferd was now brought to a

page to decide the date for her movie. he cliced the dropdown menu and selected $ovember

31. !here was only one showtime listed so she simply cliced 9Add !o aset7 on that

Above- ,)plicate descriptions on er)salem

Above- (ovie navigation bar !ith more b)tton on the right


22/42

showtime. $e"t Ms. Mefferd was brought to a page to select the number of ticets. he noted the

dropdown menu for 9Area7 and noted that it only listed the option of 8) movies.

Ms. Mefferd used the up arrow to select 3 ticets. he found it pleasant that as you

cliced the arrows, adding and subtracting ticets, the total changed automatically without any

reloading. Ms. Mefferd then cliced the button 9Add !o aset7. Ms. Mefferd was now at the

order summary page. he read through her summary as a whole and noted that the grand total at

the bottom was very small and insignificant. he worried that some may thin the amount under

the 9!o Pay7 section is the actual amount due.

Ms. Mefferd noticed the button for 9elect eats7 and cliced on it. Ms. Mefferd was

brought bac to the page to select her number of ticets and was confused by this. Ms. Mefferd

simply cliced the 9Add !o aset7 button again and moved on. he scrolled to the bottom of

the page and cliced the 9Proceed !o Checout7 button. Ms. Mefferd was brought to a page

asing 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 ticet. he noted that the te"t e"planation was

incorrect as it said 9Clic $ew User if you do not have an account yet.7, however there is no

button on the page for 9$ew User7. !he closest button to this would be the 9Create $ew

Account7 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

Above- Sho!ing the "Area" dropdo!n men)

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


23/42

form and cliced the button 9$e"t7. Ms. Mefferd was brought to a page to select her delivery

method for her ticets and found the option of 9Will Call7 to be confusing. he selected the

option 9Print At (ome7 and cliced the button 9$e"t7. 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 tas and the tas was left incomplete.


!as 8 was very troublesome for both of my testers, as well as for myself. ut of the &'

(euristics available from #aob $ielsen, I would recommend that the website needs to

implement five of them in order to improve user e"perience. !he first heuristic that I would

recommend the site implement would be -rror Prevention. !he point of this heuristic is to design

your site in such a way that users are able to prevent themselves from maing an error, as

opposed to Dust helping your user recover from an error. !his heuristic applies directly to the site

in five different instances. !he first instance occurred when my tester Mr. (ayworth was

attempting to navigate through the -vents Calendar. Mr. (ayworth selected a movie for the tas

and decided that he would prefer a different movie. Mr. (ayworth used the bac navigation in

the browser, and he noticed that calendar had moved from $ovember, bac to ctober. If a user

didn%t 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.

!he second instance where the -rror Prevention heurist would apply is the 9elect eats7

button on the order confirmation page of the Union tation bo" office. oth of my testers, as

well as myself, thought that this button would allow us to select our specific seats for the movie.

!he button actually leads you bac a page to select the =uantity of ticets you wish to purchase.


24/42

It would be much better to rename the button to something lie 9Change =uantity7 or 9Change

number of ticets7.

Above- (odi/ed screenshot sho!s the change to the "Select Seats" b)tton0 !hich !as a 1Select Seats2b)tton

It would also be better if a user could simply change the ticet =uantity on this same

page. A perfect e"ample of a site that allows you to change item =uantity while in the checout

process is Ama5on.com.

Above- This screenshot sho!s that )sers are able to change the 3)antity of an item in the cart ofAma4on.com


25/42

!he third area of the site that would improve user e"perience is when the user comes to

the ticet delivery method. oth of my testers were confused by the term 9Will Call7 as an

option for ticet delivery. ne of my testers had no idea what will call is, wondering if Union

tation was going to call him with ticet information. And my second tester thought that you had

to call the bo" office to pic up your ticets. Will Call refers to the act of pre2ordering ticets,

and then picing them up from the bo" office. It would be better for user e"perience to change

this term from 9Will Call7 to something along the lines of 9Pic2Up at o" ffice7 or simply

9Pic2Up7. -ven an e"planation of the word ne"t to the option would be of benefit to the user.

Above- This screenshot sho!s the "Will #all" b)tton changed to "Pic$-Up"

Above- Screenshot sho!s an eplanation of each delivery option


26/42

!he fourth area of the site where the -rror Prevention heuristic would help is implying

that you need to have a user account when checing out with your ticets. !ester 3, Ms. Mefferd,

thought that you were re=uired to sign up for a user account in order to purchase your ticets

because the top of the page says 9!o complete this transaction, please log into your account using

your e2mail address and password. Clic $ew User if you do not have an account yet.7 In reality

the user can simply fill out the personal information form below this login area and purchase

their ticets as a guest user. Users can be wary about signing up for user accounts, especially

with sites that they don%t use very often. It would be better to mae it more apparent that you can

either checout as a registered user, or as a guest.


27/42

Above- (oc$)p sho!ing the option for Acco)nt Login or )est #hec$o)t !hen p)rchasing tic$ets

!he final area of the site that would benefit from -rror Prevention is the small grand total

at the bottom of the order summary page. !ester 3, 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 9!o Pay7 section is very

bold and in the center of the page.


28/42

Above- Screenshot sho!s a modi/ed version of the order s)mmary screen !ith an emphasis on thegrand total

!he second heuristic that would help improve the user e"perience of the site is 9Match

etween ystem and 6eal World7. !he basis of this heuristic is to design your site in such a way

that your users completely understand the content. !he content is presented in a real2world,

lowest common denominator format to allow everyone to comprehend it. !here are two areas of

the website where this heuristic applies. !he first area is the previously mentioned 9elect eats7

button on the order summary page of the Union tation bo" office. !here was confusion between

both of my testers as to the meaning of this button. oth of them believed the button would allow

them to select their seats for the movie, however it too them to the previous page, which

allowed them to select the =uantity of ticets to the movie. It would be better to change the name

of this button to something lie 9Change =uantity7 or 9Change number of ticets7. !his will help

prevent users from assuming they are able to select their actual seats for the movie.


29/42

!he second area that the 9Match etween ystem and 6eal World7 heuristic applies to is

the 9Will Call7 button for the delivery method of your ticets. oth of my testers were confused

about the term 9Will Call7 and what sort of delivery method that would be. My recommendation

for improving this area the site would be to either add an e"planation of the method, or simply

change the name of the method to 9Pic2Up7 or 9Pic2Up at o" ffice7.

!he third heuristic that would improve this tas is the heuristic 9Consistency and

tandards7. !he basis of this heuristic is to design your site so that it follows common

conventions that already e"ist in the internet. !his could be using certain buttons, menus, or

content areas that online users are already conditioned to now. reaing this internet

conventions can lead to your user being confused and ruining their e"perience on your site.

!here are three areas of the site that would benefit from the implementation of the 9Consistency

and tandards7 heuristic. !he first area of the site is the use of the button 9Add !o aset7 when

the user is presented with a list of movies for that theatre. !ester &, Mr. (ayworth, stated that he

was very weary about clicing 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 ticet =uantity, seats, date or time.

!ypically a site would use a button labeled 9$e"t7 or 9elect !icets7. !his would let the user

now what the ne"t step of the process is, as the actual act of adding the order to the baset does

not come up for another 3 pages.

!he second area of the site that would benefit from the 9Consistency and tandard7

heuristic is the navigation of the bo" office section of the site. When the user goes to the bo"

office, they are actually brought to a completely different section within the website. !his is

apparent in the U6@ changing from Uniontation.org to o"ffice.Uniontation.org. !his

change to the bo" office page also bring with it a serious change in layout and navigation. All of


30/42

the familiar navigation from the home page is gone and replaced with navigation specific to the

bo" office. !his may cause confusion to the user with such an abrupt change. I would

recommend eeping the bo" office section of the site within the main site. It would be best to add

a 9o" ffice7 button to the main navigation and implement the bo" office navigation as sub

navigation on the site. !his would allow users to purchase ticets while still having access to the

main site and all off its familiar design elements.

Above- (oc$)p sho!ing the addition of a "+o 56ce" b)tton to the homepage navigation


31/42

!he final section of the site that will be improved by the implementation of the

9tandards and Consistency7 is the infamous 9elect eats7 button. As previously mentioned,

this button resides on the order summary page of the Union tation bo" office site. oth of my

testers assumed this button would allow them to select their seats for the movie, however it

simply too them bac to the previous page and allowed them to select the =uantity of ticets. It

is commonplace for movie theaters nowadays to allow users to select their seats for a movie

through services lie


32/42

Above- Screenshot sho!ing the seat selection screen on 'andango.com

!he fourth heuristic that would improve the user e"perience of the site is the heuristic of

9Aesthetic and Minimalist )esign7. !he 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. !his heuristic can

be applied throughout the whole Union tation bo" office website by eliminating the e"cessive

amount of buttons used throughout the purchasing process. Users must go through nine different

button sets and si" different pages Dust to get to the point where they can enter their credit card


33/42

information.


34/42

specific breadcrumb in the navigation that would allow you to go bac to the calendar of the day

you already selected.

Tas( 8: Scenario: ,o#'! li(e to spen! time wal(ing aro#n! Union Station !#ring yo#r +isit&

b#t yo# want to be s#re eno#gh areas of the station will be wheelchair5frien!ly. o thro#gh

the steps to sen! an email to the appropriate person9!epartment to in#ire abo#t

wheelchair access thro#gho#t all areas of Union Station. 6Ta(e this step all the way thro#gh

the process& an! stop only when the act#al email co#l! be written an! sent7

Tester 1:

!o start this tas Mr. (ayworth navigated to the top of the page, still on the credit card

info page, and cliced on the Union tation logo. (e thought this would tae him bac to the

homepage, as this is a traditional website function. Mr. (ayworth said he was 9confused and

frustrated7 by the lac of this feature. Mr. (ayworth re2entered the U6@ into the browser and

navigated bac to the home page of the Union tation website. (e noticed the button 9Contact7

on the main navigation at the top of the page. Mr. (ayworth is presented with a list labeled

)epartment Contacts. (e began scanning through the list and within 8' seconds found the

department ;isitor 6elations. (e was guessing that this would be the closest department to find

out the wheelchair accessibility of Union tation. Mr. (ayworth then proceeded to use the cursor

to highlight the email address, using the eyboard command to copy the address, open up his

personal *mail account, and use the eyboard command to paste the email. (e stated his

reasoning for copying and pasting the address was that he hates clicing email lins because it

opens up an email program on your computer that you usually don%t have set up. Mr. (ayworth


35/42

was able to successfully complete the tas, 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:

!he start this test Ms. Mefferd stayed on the last page from the previous tas. he first

cliced on the Union tation logo at the top of the page. (er reasoning for this is that websites

traditional use their logos as buttons to tae you bac to the home page of the site. After

numerous attempts at this, Ms. Mefferd simply re2entered the U6@ Uniontation.org into the

browser. !his too Ms. Mefferd bac to the home page of the site. Ms. Mefferd cliced on the

button 9Contact7 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 9;isitor 6elations7. Ms. Mefferd

believed this would department would most liely be able to help with visitor =uestions and

concerns. Ms. Mefferd moved her cursor to the right of the page where the email lin was

shown, she cliced the email lin 9visitorGunionstation.org7, but nothing happened. Ms.

Mefferd repeated this step two more times before finally right2clicing the email address and

selecting the option 9Copy -mail Address7 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 tas as ased.


!as 0 had a rough start for both of my users, but they ended up getting on trac. ut of

the &' heuristics recommended by #aob $ielsen I would only recommend implementing the


36/42

9Consistency and tandards7 heuristics. !he purpose of the 9Consistency and tandards7

heuristic is to design your site so that it follows common conventions that already e"ist in the

internet. !his heuristic applies to two sections of the websites for improving the usability of this

tas. !he first section that the 9Consistency and tandards7 would apply to is the Union tation

logo at the top of bo" office page. oth of my tester attempted to clic the logo when finished

with !as 8 in order to go bac to the home page to wor on !as 0. When the testers cliced on

the logo nothing happened. It is a common practice across the internet that when a user clics on

the logo of a site, they are taen bac to the home page. !he lac of a lin on the logo lead to

both of my testers having to re2enter the Uniontation.org U6@ into the browser again. My

recommendation would be to simply add a lin to the Union tation logo that would lead users

bac to the home page.

!he second area of the site that could be improved with the implementation of the

9Consistency and tandards7 heuristics would be the use of email lins on the contact page. !he

page features a series of email addresses that are all underlined, insinuating that they are clic2

able lins, however when !ester 3, Ms. Mefferd, cliced on the lin nothing happened. !ester &,

Mr. (ayworth, stated that he doesn%t lie using clic2able email lins 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, subDect, and a message and contact various

facilities at Union tation that way.


37/42

Above- (oc$)p sho!ing a potential message system for the "#ontact" page


38/42

Testing Concl#sions

Completion "ate

My first tester, Mr. (ayworth, had a completion rate of +1B. (e was able to complete

tas &, 3, and 0, with !as 8 proving to be too difficult. My second tester, Ms. Mefferd, also had

a completion rate of +1B. he was able to complete tass &, 3, and 0, also having trouble with

!as 8. verall, between both of my testers their completion rate is +1B, which is 8B under the

standard completion rate of +/B. !his standard completion rate came from testing thousands of

testers on websites all across the internet. !his means that users typically are able to complete

+/B of the tass they set out to accomplish when using the internet.

Similarities an! !ifferences

When users set out to accomplish a tas online there are usually multiple ways to

accomplish that tas.


39/42

Above-Wheelchair information on the )est Amenities page

!as 3, which ased the testers to find what movies are playing on the -"treme creen on

$ovember 31, was completed the same way by both of my testers. !hey both went to the 9-vents

Calendar7 and selected the date of $ovember 31 and were able to complete the tas very easily.

When I attempted complete the tas myself I actually approached it different by going to the

9Plan :our ;isit7 page, finding the -"treme creen theater under admissions info, then using the

arrow lin on the right to go to the bo" office website.

Above- The arro! b)tton is circled that leads to the Etreme Screen Theatre page


40/42

Above- *nformation page for the movie er)salem. Tester 9 selcted 1Add To +as$et20 !hile Tester :selected 1Tic$ets2.

!ester &, Mr. (ayworth, cliced on the 9Add !o aset7 button on the page to move forward into

purchasing ticets for the film. !ester 3, Ms. Mefferd, instead cliced the button 9!icets7 in the

navigation at the top of the page. !ester 3, then had to reselect the -"treme creen, and selected

9Add !o aset7 on the new page.


41/42

because the dialogue screen insinuated it. After this both of the testers continued the tas in the

same manner, and they were both unable to complete the tas.

oth of my testers approached the final tas in the same way. !as 0 ased the testers to

find the contact information for someone at Union tation that would now the how wheelchair

accessible the station is. oth of my testers attempted to head bac to the home page of the

website by clicing the Union tation logo at the top of the bo" office home page. When this

didn%t wor they both re2entered the Uniontation.org U6@ into the browser. !hey both

navigated to the 9Contact7 page using the button in the navigation at the top of the page. !hey

found the contact information for ;isitor 6elations. !ester &, Mr. (ayworth, highlighted the

email address and opened up his *mail to complete the tas. !ester 3, Ms. Mefferd, cliced the

lin. When nothing happened she right cliced the lin and selected the 9Copy -mail Address7

button in her. he then opened her personal email to complete the tas.

He#ristic !one well:

While it is easy to critici5e a site on what it doesn%t do well, it is e=ually important to

inform a site of what is doing well so that it can eep focusing on maintaining good user

e"perience in these areas.

#aob $ielsen lists &' heuristics to focus on at the core of your user e"perience. ut of

these &', Union tation performs strongly in 3 of these heuristics> visibility of system status, and

recognition rather than recall.

!he heuristic 9;isibility of ystem tatus7 pertains to showing your user the progress of

loading the page. Without showing the progress of a page load, users will feel as though they%re

done something wrong or that the page simply is not woring. !o prevent this confusion it is


42/42

important to build something into your website, such as a progress bar, that will demonstrate the

loading process. While Union tation 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 &' seconds, or else you%ll begin losing users. !he average site load time for Union tation

was around 4 seconds, well within the necessary time limit. !his in itself counts as a component

of 9;isibility of ystem tatus7 because it provides the user with timely feedbac of the sites

progress.

!he second heuristic that the site does well is 96ecognition 6ather !han 6ecall7. !he

basis of this heuristic is to build your site in such a way that users can recogni5e how to

accomplish a tas, rather than having to learn it and recall it from memory. !his heuristic comes

down to designing your site in such a way that you use common functions throughout your

website that users will recogni5e. -"amples of how this is implemented well in the Union tation

site come from the completion of tass such as finding wheelchairs, and contacting staff about

wheelchair accessibility. In both cases, both of my testers were able to recogni5e the use of terms

such as 9*uest Amenities7 and 9Contact7, and now that they would be able to accomplish their

tas 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 looing

to tae your users. And on the other side, the user is always looing for the ne"t best thing.

(aving a focus on user e"perience and the way your customers interact with your site is

absolutely essential to bringing in new customers and to eep them coming bac. Without

customers, there%s no ad revenue, and with no revenue, there%s no site.

unionstation.org ux design analysis

Documents