Tag Archives: search results

Search results are the central interaction element for users in order to decide whether or not an entry is worth diving deeper. If you design them right and show the important information in an appealing design, your visitors can decide faster and more confidently if they want to explore the result or not.
I take a look at search results from leading online services that revolve around geographical search. Ranging from travel and hotel search (airbnb.com, booking.com) to apartement search (rent.com, apartements.com) point of interest (POI) search (yelp.com).
Skip to Summary and Design Recommendations/Takeaways.

Notes:

The design rating is my personal take on the overall design of the entry and takes into account the layout, ease of use and overall look-and-feel.

I have ommited the “click on the result itself” as a call to action – because this one is implicit and true for almost all search results

Travel and Hotel Sites

Travel sites represent one of the biggest online industries with very “old” player such as tripadvisor.com and booking.com and newer competitors such as airbnb.com. The design approaches vary from very traditional to very modern.

Airbnb

search result on airbnb.com

Airbnb.com focuses on the visual aspect of travel: A almost maximum size image with gallery functionality. Little distraction, clean design. The compact designs also allows them to use a grid instead of a list and makes the mobile design approach easier, because a single search result will always fit any screen.

Booking.com

As one of the biggest players in the travel spacebooking.com seems to have a very full design with a lot of competing elements. Many visual elements (icons, different colors, font-sizes) and a lot of information that seem to be randomly positioned make it hard to quickly process the result. Thus a clear focal point or idea does not emerge.

One theme that does appear seems to be the psychological “limited availability” element of suggesting to visitors that booking as soon as possible is very important. This is supported by 3 elements: Latest booking time, number of people looking at the entry, last chance.

regular elements (14): image, name, rating with average and number of ratings, 3 different badges, number of likes, room type, price with explanation text, region, latest booking time, amenities, more of room type, “last chance” text

call to action (1): book now

design rating: 1/5

Expedia.com

A little less chaotic than booking.com however the elements of the expedia.com search result still do not seem to clearly communicate how the information is structured and prioritized. The user is forced to read in different blocks and lines, no clear flow or scanning is possible.

Google Hotel Finder

Google Hotel Finder is one of the very interesting travel sites because it has launched with a very reduced and in many ways innovative approach. In today’s world with sites like hipmunk, airbnb and lovely driving the design change in this space google has been able to stay in this group with small and smart design decisions.
The search result is well layed out, all information is grouped in a sensible way. The call to action is clearly visible. One interesting aspect is the positioning of the image to the right – which only 2 of the sites I have looked at do – the other being Kayak.com.

Hipmunk

Hipmunk.com is a relatively new player on the aggregated travel search market and has drawn quite some attention for a innovative and well balanced overall search page. Being created by Steve Huffman, founder of reddit certainly helped draw attention too.
Himpunk presents one of the smallest search results I have come accross. It clearly focuses on the call to action which is by far the most prominent part of the result. The rest is visually clear and quick to scan. The image clearly looses in this micro-design. Not a lot of appeal and information can be transported in 70 by 70 pixels.

elements (5): image, name, hotel stars, rating average and number of reviews, price

call to action (1): “Select”

design rating: 4/5

Hostels.com

Hostels.com presents a very well designed search result. The call to action is well represented, the relevant information is grouped and font sizes and colors in balance to support the overall appearance and information. One drawback is the tiny image in favor of a seemingly generic sales slogan “Great Value!”.

regular elements (7): image, name, “great value” badge, prices, distance to city centre, short description with link to more info, rating average with well layed out number of reviews

Hotels.com

One of the biggest search results, hotels.com does not really seem to use the big amount of space quite well. Even though white space in most cases is a good thing, in this case the elements seem to be in no clear relation to one another. Especially the rating block seems lost between the price and the image. The visual seperation of the price from the rest by using a different background color for the 2 elements is an interesting approach that makes the composition and clearer. The “Special Deal” banner also heavily competes with the “Select” button which is to be the primary call to action with poor wording however.
Why the complete address is relevant to the user at this stage beats me.

HRS.com

HRS.com offers an interesting design approach: It uses multiple columns to layout the different information parts. I like this design because it makes scanning and comparing between search results much easier. Also using a visual representation (circle and color) for the rating average seems to make a lot of sense. The use of simple and universal icons reduces the amount of text and thus noise.

The “Free with HRS” section is an interestin addon however sadly it breaks the otherwise very well designed column layout.

Kayak.com

Kayak.com has been a great source of inspiration for me – especially their entry page/overview is incredibly well designed and we have used parts of the layout for our design at discoverize.

The search result is equally well designed. Clear typography, well layed out elements, no clutter, a lot of white space and a clear call to action make this search result easy to read.

regular elements (7): price, image, name, hotel stars, rating average and number of reviews, amenities and link to details, deal

call to action (2): “Select”, “Show details”

design rating: 5/5 – Winner of the Best Search Result Design Award

Laterooms.com

Laterooms.com presents a simple, reduced and well balanced search result. Again, I like the seperation of content parts using different background-colors. The visual representations of rating average with yellow blocks is unusual however helps users visually grasp the information. The image is failry large however the “1 person viewing” in red attracts a bit too much attention away from the otherwise clearly visible call to action.

regular elements (6): price, rating average and number of reviews, postal code with link to map, distance to centre, hotel stars, number of people viewing

call to action (1): “View”

design rating: 4/5

Roomkey.com

Roomkey.com chooses a very minimal approach for their grid based search result. The image and the price clearly are the main focus, however the primary call to action “book” is also very visible due to size but does not overwhelm because of the neutral color and small type.

There is a very interesting twist to the design: Even though the icon on the top right might not be very intuitive, it flips the search result around and presents you with more detailed information:

The thing I really like with this approach is that the user does not leave the current search context and can still compare different search results – either the detailed information or the cover page.

Tripadvisor.com

Tripadvisor.com is probably the largest and most popular online travel community. They focus heavily on authentic reviews and recommendations. Their search result clearly reflects this: The “content” part of the result is clearly seperated from the “booking” part. Thus suggesting independence from the whole monetary aspect of booking a hotel/travel. This way you tend to doubt the authenticity of the reviews and ratings less and see tripadvisor as what it primary is: A community for passionate travelers.
The design of the content part could be a bit better spaced and grouped, but does a decent overall job of conveying information. It is not quite clear though how the user specific ranking “#1 Just for You” is generated.

Trivago.com

I have added trivago.com because it seperates and groups their information elements stronger than most search results. Almost presenting a table view, all elements are divided by borders. This makes it easier for the visitor to scan the result and even more importantly to compare different search results – the information is always located at the same easily findable spot.
I would have liked to see a bit more white space to make the reading of the search result a bit easier. The call to action however is very well emphasized without much distraction. Offering a fairly large image also benefits the user.

Apartment Search Sites

Appartment results differ from travel results that the precise address/location is of highest priority to the users. And in most cases there are no reviews/ratings.

Apartments.com

Similar to airbnb the focus here is the image. However it is interesting that apartements.com also prioritizes their call to action “Contact Property” directly from the search result. Even though a lot of information is displayed, it does not overwhelm and appears nicely layed out.

Hotpads.com

Hotpad.com is well designed mix of compactness and focus. The typography is simple, clean and allows for quick scanning. The emphasize is on the price and no additional call to action (except for clicking the result) distracts from the information.

regular elements (5): image, address, price, rooms, number of photos

call to action (1): “31 photos”

design rating: 4/5

Immobilienscout24.de

Immobilienscout24.de is the largest apartement search provider in Germany and presents a very well balanced design. The result is unusually high which allows for a very large image with gallery (even though the big border reduces the actual size). The rest of the information is well seperated and I especially like the subtle line to divide the footer from the rest. The position and choice of the “star” icon for saving the result seems a bit odd because it is in conflict with the rating stars. Also there is no explanation or clue to why there is a white-on-blue exclamation sign next to the result title.

Livelovely.com

livelovely.com has a very similar approach to airbnb: The image is emphasized, the rest of the information is well balanced and easily readable. Using different shades of grey for the typographical elements makes the overall design appealing.

regular elements (4): image, address, number of rooms, size

call to action (1): “save/like”

design rating: 5/5

Rent.com

Rent.com presents a clean and well designed search result. The focus to check availability is clearly visible and even the secondary call to action - calling the realtor is also well presented. The overall spacing and grouping seems to pretty much on spot.

Walkscore.com

Walkscore.com’s apartement search offers a lot of interesting features (like their own WalkScore - a measure of how much you can accomplish in a neighbourhood by walking) - most of which can be used while interacting with the map. This is why the search result is relatively small. It does still a very good job of conveying the relevant information: The image is very big and the rest of information is overlayed and thus does not need additional space.

Point of Interest Sites

Point of interest (poi) sites combine different entry types into one portal: You can search for restaurants, bars, clubs, art galleries, shopping, and so forth all within one web application. This certainly makes it more difficult to design a search result that fits all different categories equally well.

Yelp.com

Yelp.com is the largest online community for finding almost anything - primarily local business in your vicinity ranging from restaurants to spas to home services. Similarly to tripadvisor at it’s core it is all about users and reviews.
The search result presents a decent content elements seperation. Presenting a review at the bottom with the image of the reviewer is a good approach to presenting human-based recommendations. The average rating is not easily readible due to little contrast between the orange and the grey background.

Summary - Similarities and Differences in Search Results

Some present a very user friendly design in a very small space, some do not use the big amount of space too well.

Most search results present between 6 and 10 regular elements and 1 call to action.

Using an image and the name and some form of rating/reviews is present in most designs

The primary call to action (apart from clicking on the search result itself) varies from booking/selecting to saving/liking

Design Pattern Recommendations for Search Results

Good usability and user experience are key for a successful product. On most search pages the key goal for your visitors is to find an entry/search result that they feel confident is worth exploring further either by booking or opening the detailed view. Reducing the effort to compare results and make decisions will ensure a happy user who is assured that he has found the right entry. Which in turn ensures that she or he will book with your site and return the next time she or he searches for an entry.
In order to improve your search result performance and improve the experience for your visitors you can experiment with the following design pattern takeaways:

allow for easy scanning and quick decision making

group elements according to information presented -> use different background colors or borders