As a frequent traveller, I’ve tried out quite a lot flight search engines such as Kayak, Eexpedia, Skyscanner, you name it. My most favorite is definitely Google Flights, a single page web app. Its interface is very simple and clean. What I like the most is its ability to show prices for the whole month with color codes to make sure users can find the cheapest dates. In this article, I will be talking about the task flow and design pattern of Google Flights.
Task Flow
Below is a simple task flow for Google Flights. It is a diagram that shows the simplest/shortest path that a user needs to travel through a website while performing specific tasks. When I land on the home page, Google will need me to fill out the most basic details of my trip including trip type such as round trip or single, input the number of passengers, choose the class, input departure and arrival city, then finally departure and arrival date. After that, a search result will appear, first I need to choose my departure flight, then choose arrival flight. The last step is booking, Google would direct me to the specific Airline’s website.
Design Pattern
Design patterns define standard layouts, interactions and flows for things like navigation, dropdown or search. Google definitely uses some common design patterns.
Preferred location: The first input field in above screenshot shows “Waterloo” because Google automatically detects my current location. The input field does a great job for clearly communicating its state, for example, users can know it is active since the box is highlighted in blue. Users can erase preferred location and input their own departure destinations.
Search: Google Flights website incorporated a search input box with auto-complete feature.
Accordion: Let’s look at the first screenshot. Accordion is inserted within the search results to reduce page length and scrolling. For example, users can reveal and hide “Seoul, South Korean” to see all airports by clicking the pointing down arrow. Accordion is also used to display search result where users could click on the pointing down arrow to see flight detail.
Dropdown Calendar: A full calendar dropdown appears when users click on the date input field.
Carousel: When users click on the date input field, users can see two months calendar due to limited space. However, two arrows are displayed on each side of the menu indicating users could scroll left or right with their mouse wheel.
Filter: Horizontal filter is used for the site showing few filter options to give a clean look. Users could also view hidden filters by clicking “more”. Google also uses checkboxes/toggle buttons to allow multiple selections; Radio buttons to allow a single selection.
Information Panel: When users click on share(Call to Action/CTA), an information panel with a directional arrow pointing to the CTA appears over the content on the same page. When users hover over on CTA, it will change color.
Takeaway
It is clear that Google Flights presents a simple but effective way of using design patterns to help users navigate a site.
