Search Usability Examples

Home page of the British version of trivago.

The main focus of the page is the search box, which allows the user to fill in a location, check-in and check-out dates, and group size. While it is not clear, it is optional to fill out the dates and group size.

Above the search box is a single line of information about the COVID-19 virus outbreak, that is each to spot and read.

Below the search box are travel-related articles in their trivago magazine.

If the user has previously performed any searches, they will be saved and listed below the search field.

Home page of Booking.com.

Booking.com’s search field is almost identical to trivago’s in both location, appearence, and functionality. The only difference is that the user defines the group in a slightly different way, and that they can check that they are travelling on business.

Booking.com also has travel-related articles (not visible). Above these are suggested destination searches.

Like trivago, Booking.com has an easily visible message about COVID-19. The message contains much more information, however, which can lead users skipping the text.

In addition to hotels, Booking.com also has several other booking services. These are available at the top, but will not be treated any further in this comparison.

The design of trivago’s search results have succeeded in being both compact and light at the same time. This means that, almost regardless of the user’s resolution, they will at least a couple of search results. This simplicity also draws immediate attention to the sorting and filtering options, located between the search box and the results.

Each search result has a clearly visible price, ratings, illustrations, and a call to action. When the user clicks the result, the results open with more images and information from the hotel, without leaving the results page.

The contents of Booking.com’s search result are essentially the same as those of trivago. The curious exception to this is that there is no price listed directly on the results page. The rest of the information is also presented very differently.

Before the seach results is a lot of text. Like before, the COVID-19 warning takes up more space. In addition, there is a brief description of the location. While story telling is nice, the information seems superfluous for anyone who has intentionally searched for the location.

As a result of this additional information, using the same resolution allows for one less result above the fold. In addition, the result is hidden by a pop-up insisting on a check-in date.

The sorting options are all visible, but requires more immediate reading than a drop-down. The filtering options are not visible at all.

Clicking a result opens a new tab with additional information about the hotel.

trivago’s implementation of the map search is fully responsive.

If the user has a narrow browser window, the user has to click the View Map button. This will open the map, with a compact version of the search results to the left.

If the user has a wide browser window, the map will be shown by default, with the results shown in full.

Booking.com always require the user to click the Map View button. This will open both the search results and filter options on the left. If the user has a narrow browser window, the results will stay the same width, while the map width will decrease. This has the unfortunate effect of hiding the very thing the user has requested.

As mentioned before, trivago has located their search filters between the search field and the results. While this takes up some horizontal space, it immediately draws the user’s eyes.

The filters work as drop-downs, each of which has additional information.

The categories Price/night, Accommodation, Guest rating, and Hotel location are fairly self-explanatory. The final option contains a large number of additional filters, divided into additional categories. It is also possible to search for specific filters.

If a filter is selected, the option is shown in the collapsed drop-down (except for the More filters, which only shown the number of selected filters).

Booking.com’s approach to filtering is much more traditional. All the filter options are listed in the left side, next to the search results. Unfortunately, because the number of filters is so long (marked in red – 133 filters in 15 categories), it is unlikely that anyone but the most dedicated user will go through them all. This approach is also the reason why important space must be used for the filters in the map search, while trivago can use the same location as without the map search.

Ironically, despite the long list, Booking.com does not appear to have all of the functionality that trivago does. For example, it does not appear to be possible to specify a maximum price.

Another unfortunate result of the long filter list is that the possibly most important filter groups, Property Accessibility and Room accessibility, are listed last. These are much more detailed than trivago’s accessibility filters (Accessible parking and Accessible hotel), but this greater detail also cause confusion.

Selected filters are shown in the category Recommended for You, rather than at the top of the results or the filters. This is a peculiar choice, and requires some searching to find.

Looking at these results, there are a few items that immediately look confusing: Both the Propert Accessibility and Room Accessibility categories that appear to be identical, but have different numbers of results:

• Toilet with grab rails, with 312 and 278 results respective, 134 results with both.
• Raised toilet, with 212 and 203 results respectively, 64 results with both.
• Lowered sink/Lower sink (sic), with 248 and 256 results respectively, 102 results with both.
• Bathroom emergency cord/Emergency cord in bathroom, with 40 and 36 results respectively, 11 results with both.

These differences suggest that the data quality of Booking.com is not as good as it should be. While specific accessibility filters can definitely be useful to those who need them, their usefulness are conditioned by them being applied consistently to.