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.