the full powerpoint report

advertisement
Google Flights
Usability Assessment
William Benson
Google Flights Usability Assessment


Goal: To assess the current state of the
Google Flight search tool in regard to the
following:

Usability of site functions

Findability of links and assets

Accessibility of content
Recommended Methods

Heuristic Evaluation

Web Analytics

Traditional Usability Test
Heuristic Evaluation

Goal: Identify key issues in the interface and highlight potential areas of confusion

Method: Heuristic Evaluation:

Nielsen’s 10 heuristics for user interface design (source)

http://www.usability.gov/

Severities (Low, Medium, High)

Tested on a 13’’ laptop with Windows 7. Laptop has a 1366x768 display. A Targus mouse was
used for interaction. The browser used was Mozilla Firefox version 31.0. Coffee was
consumed.
Heuristic Evaluation

Scenario: Daniel is logging in today to compare flights out of New York that go to San
Francisco, CA.

He is interested in bringing his wife and two children on a vacation during the month of
December.

Daniel has a lot of paid time off left with his company that he needs to use. Also, his
Decembers are usually quite slow. For these reasons, he has a lot of flexibility in choosing a
flight.

The current date is August 29th, 2014.
Landing Page Findings

Daniel starts by loading the Google Flights
landing page.

Positive: The call to action to search for
flights is clear and readily apparent.

Low: The “Popular destinations” feature
detracts from the minimalist design and may
be distracting to site visitors.

Medium: The font color for the filters (Stops,
Price, Airline, Times) all have a low contrast
ratio.

Recommendations: Observe web traffic and
task completion metrics to evaluate usage of
the “Popular destinations” section

Recommendation: Consider using a darker
font color for the filters.
Search Function

Daniel then starts to fill out the proper search fields.

Positive: Type-ahead feature is responsive and accurate for the two location text boxes.
Also, if there are multiple airports in a city (such as New York), the user may select an option
for “All Airports (NYC)” to look for the cheapest option.

Positive: (Not shown here) Multi-city search easy to use
Class/Passenger Dropdown

Daniel sees the dropdown for passengers.
He clicks and modifies the values to best fit
his scenario.

Positive: The interaction to edit
passengers is clear and easy to use. Results
update in real time with each modification.

Low: The search function does not allow
users to select more than 6 passengers.

Recommendations: Add functionality so
the tool can handle larger families.
Calendar Findings I

Since Daniel has a slow month for work in December, he looks for the best dates to go based
on cost.

Positives: Lowest fares on the calendar are
highlighted in green

Positive: The filters stay present when the
calendar is open so users can still edit their
filter settings and see the changes in real time.

Low: Fare graph below the calendar may be
missed by users who don’t scroll.

Recommendation: Consider including a
“Fare Graph” call to action in the top right of
the calendar. Ensure it is high contrast.
Calendar Findings II

Daniel tries to type in some dates and encounters a few issues...

Low: User cannot include suffixes when typing
the date in the text field (e.g. 3rd, 4th). Users
are also unable to type in a year after the date
of choice.

Recommendation: Track web analytics to
examine usage of the text boxes. Ensure that
the tool is built out to handle various user
inputs.
Calendar Findings III

Daniel decides to pick December 2nd as his departure date.

Low: After the user selects their
departure date, the calendar state
changes to allow users to pick their
returning date. While this is a helpful
feature, there is a lack of feedback that
this occurs. Users might notice the
message on the left calendar, “next,
choose a return date,” but they also
might miss it or not see it right away.

Recommendation: ensure that the
“Next, choose a return date” message
appears over the date that was selected
so users are more likely to notice it.
Selecting an Outbound Flight

Daniel is looking for the cheapest flight out of
LaGuardia. Since he is looking for a nonstop flight,
he decides to click the tip below the blue box.

Positive: “Tip” message at the top provides the
user with money saving options if they are willing
make adjustments to their plans. In this case, the
system asks if the user would like to select a
different airport.

Medium: Text color for the “sort by price” filter
in the blue box has poor contrast to the
background.

Medium: Text color for the airline names on
each of the list items below also have poor
contrast.

Recommendation: Ensure good text to
background contrast.
Filters

Daniel also want to ensure that he arrives
in SFO between 12PM and 6PM. He looks
for filters. While he doesn’t notice them
right away, he eventually finds the filter for
“Times”.

Positive: The filters are also easy to use,
as they use simple checkbox or slider
interactions.

Positive: The filter title changes color to
red after a selection has been made to
indicate a status change to the user.

Medium: The filter text is not very dark
against the light background, and thus not
easy to see.

Recommendation: Use a darker font
for the filters.
Selecting a Returning Flight I

Daniel waits a second for the page
to change, then realizes he needs
to scroll down to choose a
returning flight.

Low: When a user select a
outbound flight with one or more
connecting flights, the return flight
list might fall below the fold. This
may cause some to miss it,
especially those adverse to
scrolling.

Recommendation: After users
select an outbound flight, either
hide the section or bring users
directly to the return flight section.
Selecting a Returning Flight II

Daniel then begins to choose a flight
back.

Medium: Text color for the “sort by
price” filter in the blue box has poor
contrast to the background.

Recommendation: Ensure good text
to background contrast.
Final Steps

Daniel reviews his selected flights.

Low: Time changes are not immediately apparent
as there is no time zone information provided to
the user. This issue is more prominent for flights
overseas.

Recommendation: Consider some type of visual
cue or time zone abbreviation to provide user with
additional context.
Final Steps II

Daniel needs to leave his computer for a while,
so he decides to save his flight for later.

Positive: There is a clear call to action to save
the flights near the bottom of the page.

Low: In other cases… it is possible that users
may forget to add a passenger.

Recommendation: Perhaps include a call to
action/reminder at the bottom to assist users
(e.g. “Do you need to add a passenger?). Have
this link bring them to an anchor at the top of
the page and automatically open the passenger
dropdown.
Returning to the Landing Page Findings 2

At a later date, Daniel returns to the landing
page to book one of his saved flights.

Low: Previous searches looks very similar to
destinations for you – users might miss this
section because of this.

Low: The alternative “saved flights” location is
not a salient button. Users need to click the
grey star on the right side of the filters bar.

Recommendation: Consider using a novel
element on this page – a hyperlink to each of
the previously searched locations instead of a
picture would stand out from the
“Destinations for you.” Consider a text
hyperlink near the star icon as well.
Final Steps

Daniel decides to purchase the flights.

Positive: There is a clear call to action to book the
flights and it is apparent that you are being sent to
an external page.

Low: The flight details that users select is not
transmitted to the external website – this forces
users to rely on memory and increase cognitive
load.

Recommendation: This may not be possible
given technical constraints, but consider allowing
the site to transmit data into other site’s form
fields to create a seamless experience for the
customer.
Other Findings

Low: The fare calculator graph to the left of the filters is hard to see and not easily
noticeable (see screenshot below).

Recommendation: Consider using text or a call to action button to show users that
something there.

Low: During my review, I encountered a bug with the map in the top right of your
destination – my destination would often be in the upper right corner of the box, out of
focus (no screenshot).

Recommendation: Ensure the map default consistently affixes the destination in the center
of the map asset.
Web Analytics


Purpose: To supplement the user research and heuristic, to provide consumer insight around
the following concerns:

What are the most frequently used paths/links?

What parts of the site have the least traffic?

What can we do to minimize user steps?

What is the usage of the recommended links on the landing page?

How is the date text box used by users?
Analyze:

Customer visits

Customer paths

Frequency of specific links clicked/page visits

Manually typed entries for location and for date to ensure ease of use
Usability Test
Purpose:

Supplement the heuristic

Test real users on the product

Identify user strategies/ideas for planning
Method:

10 participants in-person

20-30 minutes

Traditional lab setup

Gather success rates, time on tasks, number of errors
Tasks I
1.
Start with warm-up questions (how do you shop, do you shop online, have you ever flown a
plane before).
2.
Start from “flights” home page: let’s say you wanted to research flights for next month to go
to Miami Florida. Walk me through your process.
1.
3.
[Evaluates general user interactions, let’s the user get acclimated to the site, etc.)
Start from “flights” home page: Book a round trip flight for you and your spouse to travel
from New York to San Francisco, CA that lands before 2:00 PM, Pacific Time.

[Evaluates the search feature, the passenger selection feature, the arrival time filter, and
actually selecting/booking flights]
Tasks II
3)
Start from the page they left off on (if still on flights): Access a previously saved flight from the
home page without pressing the browser back button.

4.
Start from “flights” home page: Research and save trip details for a round trip flight in
business class to London, UK while flying business class. Please look for the most affordable
flights possible during the month of April 2014.

5.
[Assess the findability of the previously saved search feature]
[Evaluates the seat type selection, and their method of finding the most affordable flight]
Start from “flights” home page: Book a multi-city flight that leaves New York on October 1st,
2014 to go to Washington, DC. Then, go from DC to Boston on October 2nd 2014. Book the
third and final flight to leave Boston on October 3rd, 2014 to return to New York.

[Evaluates the usability of the multi-city search]
Analysis
Analysis

Task Success

What tasks incur the most participant struggle? What features are underutilized? Does
this match up with Web Analytics?

Time on Task

Track issues
Next steps

Small changes

Iterative testing of changes

Un-moderated follow up testing
Wrap Up

Heuristic showed a quite a few issues to
further examine.

Web Analytics was recommended for
further insight of tool usage

Usability testing (both in-person and
un-moderated) recommended to further
diagnose issues and improve the customer
experience.
Download