ux usability testing

18
1 Marguerite Job Intro to Web Publishing October 22 Usability Test For unionstation.org Test Preparation To prepare for the tests, I first looked through the website myself. After looking around the home page to get a feel for the website, I went through each of the four tasks to find out the solutions for each one. First, I gave the homepage a look-over. I expected a dropdown menu when I hovered over category on the navigation bar, since I’m used to sites doing performing that action. It did not happen. I clicked a category thinking maybe a dropdown menu would appear if I did that, but I was directed to a different page, instead. The layout of the site is well done. Content isn’t cluttered and it’s easy to navigate what the site is about from below the fold. I saw Science City was heavily promoted by the website. This was true for both the feature content area, the navigation bar, and the content above the fold. Since I have been to Union Station before, I know that there are other things besides Science City. Visitors to the site who are not familiar with Union Station from out-of-state, or not from the area might not know this, however. I didn't have any issues with any of the tasks, except for task three. There were some misleading terms used, but this is explained further with the testers.

Upload: marguerite-job

Post on 08-Apr-2016

30 views

Category:

Documents


0 download

DESCRIPTION

For unionstation.org

TRANSCRIPT

�1

Marguerite Job

Intro to Web Publishing

October 22

Usability Test For unionstation.org

Test Preparation

To prepare for the tests, I first looked through the website myself. After looking around

the home page to get a feel for the website, I went through each of the four tasks to find out the

solutions for each one.

First, I gave the homepage a look-over. I expected a dropdown menu when I hovered

over category on the navigation bar, since I’m used to sites doing performing that action. It did

not happen. I clicked a category thinking maybe a dropdown menu would appear if I did that, but

I was directed to a different page, instead.

The layout of the site is well done. Content isn’t cluttered and it’s easy to navigate what

the site is about from below the fold.

I saw Science City was heavily promoted by the website. This was true for both the

feature content area, the navigation bar, and the content above the fold. Since I have been to

Union Station before, I know that there are other things besides Science City. Visitors to the site

who are not familiar with Union Station from out-of-state, or not from the area might not know

this, however.

I didn't have any issues with any of the tasks, except for task three. There were some

misleading terms used, but this is explained further with the testers.

�2

Choosing Participants

Tester 1: Jacob

For tester 1, I choose Jacob. He easily played along with the tasks given to him and gave

a detailed analysis of his experience on the site.

Jacob’s a 21-year-old man currently working a part-time job at Sam’s Club while going to

college. He regularly uses the internet on his phone, computer, and platforming device. Jacob

mostly uses the internet to go onto online forums, social media, and streaming services/YouTube.

Currently, he uses the internet frequently to complete homework assignments. He also shops

online from time to time.

He is a “high experience” tester. Jacob has used sites to do things similar to what tasks he

performed (i.e. seeing what movies are playing and ordering tickets from fandango.com).

Environment for Tester 1:

• Location of test: The test was conducted at Jacob’s house. He mostly uses the

internet at his home. This makes it so that it’s close to how he would use the site if he

wasn’t being tested.

• Physical Environment: His home is relatively clean with some clutter and there was

very little lighting. The only distractions was his cat and the television, which was

streaming a movie.

• Technical Environment: Jacob uses an HP Pavillon G6, which has a screen

resolution of 1366 x 768 pixels. He regularly uses Google Chrome as a browser. The

only plug-in he uses is an ad-blocker.

�3

Tester 2: Gail

Gail was chosen because she explained what she did while she performed the tasks. She

also gave adequate feedback, so usability issues with the site can be identified and corrected.

Gail’s a 45-year-old woman working part-time at a retail store. She mostly uses the

internet for online shopping and social media. She’s my “low-experience” user. However, she,

too, has used sites like fandango.com to find out movie times and to purchase tickets in advance.

Environment for tester 2:

• Location of test: The test for Gail was taken in her house. She mostly uses the

internet at her home.

• Physical Environment: Her home is cluttered and kind of messy. The lighting in the

living room, where the test was conducted, was very well lit.

• Technical Environment: Gail uses an 15” MacBook Pro with retina display, which

has a resolution of 2560x1600 pixels. She uses Google Chrome as her browser. She

does not use any plug-ins for her browser.

Test Results

Initial Site Thoughts:

Tester 1:

Jacob noticed right away that the web site heavily advertised for Science City. He

mentioned that it looked like that was the only thing there when he first went to the homepage. It

�4

wasn’t until he scrolled down the page that there would be other exhibits and activities to visit at

Union Station.

He also mentioned the layout of the site didn't look too cluttered. The site, initially might

be easy to navigate.

Tester 2:

Gail also noticed that the website heavily advertised Science City. Until she scrolled

further on the homepage, she thought Science City was the only thing at Union Station. She

mentioned “plan your visit” might be for teachers to set up visit days for their students, not the

everyday visitor. Overall, she liked the layout of the site since it didn't “bombard” her with

information.

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

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

there will be a wheelchair available for her to use.

Tester 1:

Jacob assumed he would find “Guest Amentities” under “Plan Your Visit.” He wasn't sure

if he would find it there since he expected a hover-down menu. He clicked on “Plan Your Visit”

and scrolled through the page with the laptop’s trackpad until he found “Guest Amenities.”

Since “Guest Amenities” looked like a link, Jacob clicked on it. He found out more

information about accommodations he could receive, and where/how to get those.

�5

This is where Jacob clicked to find out more information.

Answer: Yes

Completed: Yes

Tester 2:

Gail was confused as to where to go to find “Guest Amenities.” After a while of trying to

figure out where to go, she mentioned she was frustrated because she felt as though the

navigation bar of the site wasn't clear enough and wanted to see a hover-down menu from the

navigation.

She decided to go to “Plan Your Visit” since that “makes the most sense” to her. She used

the scroll bar on the side of her browser until she found “Accommodations and Transportation”

on the page.

Answer: Yes

Completed: Yes

�6

Recommendations to improve UX for this task:

Changing the phrasing “Plan Your Visit” to something like “Guest Information” on the

navigation bar might be a good idea. A lot of websites still use that phrasing “Plan Your Visit” or

“Visit.” (The websites I looked at where sites for the Omaha Zoo, the Kansas City Zoo, and the

St. Louis Science Center.) Despite the convention, it’ll save the confusion for users who don’t

frequently use the site or sites similar to it.

Another recommendation includes having a dropdown on hover menu for the navigation.

This will save any users from confusion. Plus it will match the platform conventions users expect

to see since similar sites do this, too.

St. Louis Science Center uses the term “visit” and has a drop down menu. The site uses an FAQ for visitors to find out information for guest amenities.

�7

Example of how to implement a dropdown menu on unionstation.org:

Task 2: 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 Wednesday, Nov. 25.

Tester 1:

Since Jacob went to the separate page for “Guest Amenities,” he clicked on the back

button to return to the previous page for “Plan Your Visit.” He looked at the table for “Admission

Information.”

�8

From there, he clicked on the button in the “Buy Tickets” column for the Regnier

Extreme Screen Theatre. He found the listings of upcoming shows for the theatre. Since each

listing displayed the dates/time period each show was going to be at the theatre, he found out

what films would be playing.

Answer: Jerusalem and Robots 3D

Completed: Yes

�9

Tester 2:

Gail clicked on the “Events Calendar” tab on the navigation bar. The page already

displayed the events going on that day.

From there, she clicked the arrows located on the calendar until she got to the month of

November. She clicked on the date (November 25) and the events listed changed. She scrolled

through the list to see what would be playing at the Regnier Extreme Screen Theatre.

Answer: Jerusalem and Robots 3D

Completed: Yes

�10

Recommendations to improve UX for this task:

While both testers found movies that were playing on November 25 very easily, there is

one way to improve UX for this particular task. Similarly to the previous task, Union Station can

implement a dropdown menu for events. The landing page could stay the same when a user

clicks on “events calendar,” but the dropdown menu can feature each exhibit/theatre at Union

Station.

Here’s how to implement a dropdown menu for “events calendar”:

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 for you and your grandmother

�11

will have wheelchair compatible seating. [Take this step all the way through the process, and

only stop when asked to enter credit card information].

Tester 1:

From the page he already was on, Jacob clicked on “add to basket” for one of the films he

knew played on the day he needed tickets. He knew this because Union Station dates in the

bottom right corner in the information “box” of each film. He assumed that the dates were when

the films played at the theater.

He successfully went up to the point where he could purchase the tickets, but forgot to

check to see if he could reserve a spot near handicap seating for wheelchairs. After reminding

him to see if he can, Jacob went back a page.

He clicked on “Select Seats,” but it sent him back to the page where he selected how

many tickets he will purchase.

�12

“What the f*ck?” was his immediate response. He clicked on “add to basket” and looked

at the next page for awhile to figure out if there was somewhere else he could go. Then he

proceeded to the check out to see if he could select seats from there. He did not find anything

where he could possibly figure out the information.

“I literally don’t know what to do,” he said before asking me for the next task.

Completed: No

Tester 2:

From the page she was on, Gail clicked “more info” to see if she could buy tickets that

way. She mentioned that the text for the information about the dates the movie played overlapped

the “buy tickets” and it annoyed her.

She clicked on it and proceeded to select how many tickets she needed. Before checking

out, Gail clicked on “select seats” hoping to be able to pick out the seats near seating for

wheelchairs. She got the same results as Jacob.

She opened another tab and went to unionstation.org. She went to the “Plan Your Visit”

page. Gail did not find what she needed on that page either. She gave up and closed the tab. She

proceeded to check out on the page where she was in the process of buying tickets.

Completed: No

�13

Recommendations to improve UX for this task:

My first recommendation is to fix whatever is causing the problem of text overlapping

the “buy tickets” button. If it caused an annoyance for Tester 2, then it will cause annoyances for

other users. Plus, it makes the site look more credible when it doesn’t have design mistakes and

people will be more trusting to buy tickets directly from the site.

My second recommendation is to add information about wheelchair compatible seating

for Union Station’s theaters to the “Guest Amenities” and/or “Plan Your Visit” pages. Since

Tester 2 went to that page to “Plan Your Visit,” it would be helpful to provide that information

there since other users might go to that page, as well, to find answers to the same question.

It would be helpful to visitors to find an FAQ on the box office website’s navigation.

Also, condensing tickets and other things to purchase into one category would be

extremely helpful, too, in order to reduce clutter in the navigation bar.

�14

My last recommendation is to add an FAQ page to the ticket purchasing site for Union

Station. This page should include information about wheelchair compatible seating. There should

be a link to it in the navigation. This will save visitors time from having to open another tab.

Task 4: Scenario: You’d like to spend some time walking around Union Station during

your visit, but you want to be sure enough areas 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:

Jacob went back to the Union Station homepage. From there, he clicked on contact.

Scrolling through the information, he was unsure of who exactly to contact. He assumed that

[email protected] might be the right department to contact.

He clicked on the email address expecting it to open up his gmail account and pop-up a

“compose email” window. However, it did not do that. So, he copied and pasted the address into

the “send to” bar for when he would compose a message and stopped there.

Answer: [email protected]

Completed: Yes

Tester 2:

�15

Gail siad that she should probably go back to the homepage to figure out who to contact.

She clicked on the Union Station logo above the website for purchasing tickets from Union

Station. However, it took her back to the landing page for boxoffice.unionstation.org.

Gail went back to the homepage by typing in the URL. She clicked on “Contact” in the

navigation bar. She assumed that [email protected] was her “best bet” for who to

contact. She clicked on the email address since it looked like a link. For her, clicking on the link

opened up a “compose message” window on her gmail account.

Answer: [email protected]

Completed: Yes

Recommendations to improve UX for this task:

My first recommendation is to have the Union Station logo on the purchasing site to link

back to union unionstation.org. Visitors will expect to be able to do that and will save them the

frustration of clicking on the logo only to go to the landing page of the purchasing site My

second recommendation is to have information about each department contact. This will help

visitors know exactly what each department does, so that they know exactly where to direct their

questions. Here’s an example of how to implement that: (on the next page)

�16

My last recommendation is to find out how to make links for email addresses to work on

all browsers and laptops. It may have been an error with Tester 1’s system, but it doesn’t hurt to

check.

Testing Conclusions:

Completion rate:

Both testers had a completion rate of 75%, making that the average completion rate, as

well. While the typical task completion rate is 78%, being at 75% isn't too terrible since testers

only performed four tasks.

�17

Similarities and differences:

Both testers used Google Chrome as there browser. Further testing on different browsers

might be need since Google Chrome is more than likely not used by every visitor.

Both testers, however, did not try to complete Task 2 the same way. (Tester 1 went

through the “Admissions” table on the “Plan Your Visit” page. Tester 2 went to the “Events

Calendar” page). This is good since the task could be completed in different ways to get the same

answer. Not all visitors to the site will do the same thing to get the same answers, too.

Tester 1, unlike Tester 2, clicked on the link “Guest Amenities” on the “Plan Your Visit”

page to find out more information. Which is great that the site offers that, since visitors might be

wanting to find out more information, too.

Heuristic done well:

One heuristic Union Station does well is “consistency and standards.” Like other sites

similar to Union Station (i.e. St. Louis Science Center), Union Station uses terms like “plan your

visit” and “events calendar.”

Another is “aesthetic and minimalist design.” The site is rather simplistic in design. It

also doesn't overload visitors with information on its pages.

“Match between system and real world” is a heuristic that was done well, to an extent.

There was no language on the site that confused the testers. However, there is some misleading

phrases, such as “select seats.” The site does well with “user control and freedom” and

“flexibility and efficiency of use,” too. The site gives visitors multiple ways to solve problems.

�18

The last heuristic done well is “error prevention.” It’s hard for a visitor to make a mistake

on the website. Despite the wording on “select seats” on Task 3 being misleading, no errors were

made on the testers end of thing. However, feedback for knowing if they did anything wrong

would be a good thing.