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.
-
regular elements (6): image with gallery, price, name of entry, type of entry, location, image of entry owner
-
call to action (1): like/save search result to list
-
Design Rating : 5/5
Booking.com
As one of the biggest players in the travel space booking.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.
The approach to present marketing formulations is interesting however: “Free Cancellation”, “Sale!” and “Book now, Pay Later” seem to go in a different, more positive direction than booking.com’s psychological “limited availability” approach.
-
regular elements (12): image, name, average rating with text and number of reviews, hotel stars, location and link to map, contact: phone, price and discount, “free cancellation”, “expedia rate”, “book now pay later”, VIP button
-
call to action (1): “Sale!”
-
design rating: 3/5
Google Hotel Finder
- regular elements (6): name, price, rating average and number of reviews, hotel stars, ameneties, image
- call to action (1): “Book”
- design rating: 5/5
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
- call to action (1+2): “Book Now” (major focus), “More info…”, “Show all room types” (minor focus)
- design rating: 4/5
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.
- regular elements (11): image, name, price, last booked, address, hotel stars, average rating and number of reviews, district, distance to centre/poi, “free cancelation”, “special deal”
- call to action (1): “Select”
- design rating: 2/5
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.
-
regular elements (11): image, name, region, distances to poi, average rating and number of evaluations, price, number of rooms available, “hot” badge, “incl. breakfast”, “free with HRS” text
-
call to action (1): “Hotel details”
-
design rating: 4/5
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:
- regular elements (5) (front cover only): image, name, district, hotel stars, price and price with taxes
- call to action (2): “book” button, flip result
- design rating: 4/5 – Winner of the Search Result Innovation Award
Tripadvisor.com
- regular elements (9): image with slideshow, name, rating average, number of reviews, hotel ranking in region, user-specific ranking, short description, mini-comments, price listed by site
- call to action (1): “view deal”
- design rating: 3/5
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.
- regular elements (8): image, name, hotel stars, city, distance to poi/centre, prices on sites, average rating and number of reviews, price
- call to action (2): “view deal”, “view all deals”
- design rating: 4/5
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.
- regular elements (9): name, entry owner, stars, address, price, apartment type, amenities, contact: phone, link to more
- call to action (3): “contact property”, “play video”, like/save entry
- design rating: 5/5
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.
- regular elements (10): name, address, link to map, price, size, rooms, link to ground plan, average rating and number of reviews of entry owner, entry owner, entry owner logo
- call to action (1): “save/like”
- design rating: 3/5
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.
-
regular elements (7): image and number of available images, name, district, price, amount of units, rooms, contact: phone
-
call to action (1+3): “check availability”, call phone, “view more info”, “current rent specials”
-
design rating: 5/5
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.
- regular elements (5): image, price, name, type of apartment, walk score
- call to action (1): like/save button
- design rating: 5/5
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
- regular elements (7): image, name, average rating and number of reviews, price range, type of business, address, review with reviewer image
- call to action (0): none
- design rating: 3/5
Summary - Similarities and Differences in Search Results
There are many different approaches to presenting 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
- present a clear hierarchy of elements -> use font sizes, font styles and colors
- focus on the relevant information at this point -> use information that allows for comparison between results
- focus on 1 clear call to action -> avoid too many points of focus
- large images make the result more appealing -> avoid minifying the image to present more content