Learn

Search results are a list of results displayed after a search form is completed and submitted.

This is an interesting design pattern for us to discuss here because it can take a number of different forms. It’s fairly common for search results to be showed as a list view, but we could also potentially use a card view to display results as a grid. Some types of data might work well with a table view.

In designing how search results are displayed, we should consider:

What information should be displayed for each result to help users select the best fitting result?
For a search on a newspaper site, this might mean showing a title, author, description, thumbnail, and date. For our flight booking tool, users might want to see the airline, flight date, departure time, arrival time, total duration, number of stops, and airports.

What order should results appear in by default?
Should other sorting options be available to the user? Some examples of sorting methods include relevancy, chronological, and alphabetical.

Should any filters be available to users after searching?
For example, on an ecommerce website, users might be able to filter results by price or available sizes. For our flight booking site, users might be able to toggle whether to show nonstop flights only.

What is the next desired step after the search, and should there be any shortcuts?
For example, a shopping website might allow a user to quickly buy a product or add it to their cart directly from the search results, without navigating to a more detailed product page.

How will users scroll through results?
Is the listing an infinite scroll that loads more results as the user scrolls? Will it use pagination? If so, how many results should it show per page?

Should any results be differentiated visually?
For example, for our flight booking app, should limited deals on flights be highlighted or featured so users see them first? On a news website, sponsored stories might be visually differentiated to make it clear they aren’t standard editorial.

Instructions

Take a close look at the search result examples from various flight booking websites on the right. What similarities and differences do you notice between the different approaches? What information is included in each? Which information is emphasized? What kind of filters and options are made available for users?

Next, think about what kind of information we’d want to include in our flight booking search results and what options we’d want to offer our users. Feel free to sketch out some ideas!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?