Search Result Design Patterns – Travel, Hotels, Apartments, POI

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 (, to apartement search (, point of interest (POI) search ( Skip to Summary and Design Recommendations/Takeaways.


  • 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 and and newer competitors such as The design approaches vary from very traditional to very modern.


search result design patterns: airbnb

search result on 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

search result design patterns:

As one of the biggest players in the travel space 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

search result design patterns:

A little less chaotic than however the elements of the 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’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

search result design patterns: 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
  • regular elements (6): name, price, rating average and number of reviews, hotel stars, ameneties, image
  • call to action (1): “Book”
  • design rating: 5/5


search result design patterns: 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

search result design patterns: 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

search result design patterns: One of the biggest search results, 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

search result design patterns: 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

search result design patterns: 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

search result design patterns: 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

search result design patterns: 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:

search result design patterns: flip side

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.
  • 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

search result design patterns: tripadvisor 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.
  • 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

search result design patterns: trivago I have added 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.

search result design patterns:

Similar to airbnb the focus here is the image. However it is interesting that 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

search result design patterns: 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

search result design patterns: 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

search result design best practice: 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

search result design best practice: 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

search result design best practice:’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.

search result design best practice: 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.
  • 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:
  1. allow for easy scanning and quick decision making
    1. group elements according to information presented -> use different background colors or borders
    2. present a clear hierarchy of elements -> use font sizes, font styles and colors
    3. focus on the relevant information at this point -> use information that allows for comparison between results
  2. focus on 1 clear call to action -> avoid too many points of focus
  3. large images make the result more appealing -> avoid minifying the image to present more content
If you have other innovative or well designed search results, feel free to share them in the comments and I might put them on the list.

Striped Progress Completeness Bars with CSS3

In a recent project we needed bars that represented the completeness of an entry in our portal software discoverize.


The idea was to introduce a gamification element to motivate entry owners to fill out their entry. The bars needed to allow for:

  • different colors (positive, normal, negative)
  • different sizes (depending on context)
  • display readable text in all settings

So lets get started with the css funkiness.

Step 1: Creating Stripes with CSS3 Linear Gradients

There are quite a few resources on creating stripes with css:

Because I wanted a more subtle, sketchy look with thin stripes, I decided to create my own pattern that looks like this:

css stripes thin sketchy as overlay

In order to achieve the effect I used the :before pseude-element to create the stripes as an overlay. You position it absolutely within your parent so that it fills it completely.

Basically you create a CSS3 linear gradient with transparent segments and semi-transparent black segments where you want the stripes to be. This way the stripes would always appear in the color of the parent element. You rotate the gradient to the angle you want (in my case 45 degrees). By using gradient segments that start and stop at the same point you get a hard line instead of a gradient between the colors.

You can adjust the width of the stripes by changing the gradient segments and the background size.

.stripes {

.stripes:before {
  background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
  background-size:20px 20px;

Check out the finished look (demo):

See the Pen ogRdWp by Andrej (@AndrejTelle) on CodePen.

Step 2: Creating the Progress or Completeness Bar CSS3

There a quite a few of resources for creating css bars, however they are mostly for displaying a animated progress status. Basically the user is waiting for something to happen on your page – either an upload or download or some transaction being completed.

We needed a representation of the current completeness of an entry – so no animations and more of a flat overall look and feel. And the text should be readable both above a full bar and the empty bar-wrapper.

completeness progress bar with css3

In order to be able to adjust all compontents of the bar I created a SASS mixin that allows me to create bars of different colors and sizes. I can set the following variables:

  • size (height) of the bar
  • color of the actual bar-meter
  • color of the text and the text-shadow
  • background color of the bar-wrapper

You need an html parent element that is the bar-wrapper and an child-element that get’s the inline style width set to the completeness percentage. Here is the html:

<div class="bar">
  <span class="bar-meter" style="width:92%"></span>
  Completeness: 92%

Here is the CSS (Sass, SCSS) needed:

// mixin definition for bar-wrapper, actual dynamic bar and text
@mixin bar($size:17px, $bar-color:#5bb75b, $text-color:#fff, $text-shadow-color:#444, $bg-color:#ddd) {
  // wrapper properties
  border-radius: 5px;
  border: solid 1px #999; 
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2); 
  // text properties
    1px 1px 1px $text-shadow-color, -1px -1px 1px $text-shadow-color,
    1px -1px 1px $text-shadow-color, -1px 1px 1px $text-shadow-color, 
    1px 1px 2px $text-shadow-color, 1px 2px 2px $text-shadow-color,;
  font-family: verdana; 
  // actual dynamic bar
  .bar-meter {background-image:linear-gradient(lighten($bar-color,7), darken($bar-color,7));
    border-radius:5px 0 0 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border:solid 1px rgba(0,0,0,0.35); 
    border-right: solid 1px rgba(0,0,0,0.45); 
    border-bottom:solid 1px rgba(0,0,0,0.45); 
  // stripes on dynamic bar
  .bar-meter:before {
    background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
    background-size:16px 16px; 

And then you call the mixin on your bar-element and define the variables (size, bar-color, text-color, text-shadow, bar-background) you want:

.bar-1 {
@include bar(36px, #5bb75b, #fff, #333, #ddd); margin-bottom:24px;}

Here is the result with different sizes and colors according to completeness:

See the Pen NPVygb by Andrej (@AndrejTelle) on CodePen.

Check out the full completeness bar demo.

For sake of brevity I did not include vendor specific css3 prefixes. Make sure to include those for browser you need to support.

If you have any suggestions for improvements I would be glad to read them in the comments. Feel free to critique my code.