Users want to book a flight/hotel/car/....


Allow users to search for the 'object' flexibly, especially concerning date/time versus prize. Then allow that to make the actual booking.


Use when

Typically used in Travel Site or E-commerce Site. On the Homepage of such sites...


Booking a flight/car/holidays is in structure very similar to other online purchasing or ordering activities. It consists of two high-level steps:
  1. Determining the item to book/buy using a search-like process.
  2. Going through the Purchase Process for the selected item(s).
The trickiest part of the booking is the searching and selecting of the item. In many cases, such as on a Travel Site, you'll find a box containing some variation on Advanced Search on the Homepage. See the example above from Expedia. Such a Form is the start of a series steps the users have to go through using a Wizard:

The basic steps are:
  1. Initial selection. Users can narrow down their preferences for dates, prices, type of fare (if applicable), sort of transport, and the number of persons.
  2. Perform a search in the database. Users will see a Processing Page while the system is searching because it usually takes quite long before the search is completed.
  3. Show the results. The results are basically a special case of Search Results. The main problem here is how to deal with the combination of dates and prizes. One approach is to search primarily on date or price as the user requests. Another approach is not ask the user the set search type first but instead to combine price and dates. Primarily the results are sorted by date but with an indication of the prices. For example, using color coding. See British Airways example below. Narrow down dates first, then prizes. There are many ways that the combination of prices and dates can be handled, for example using a or calendar views with color coding.
  4. View selection. Optionally step back. View the date, time, prize, flight-numbers etc.
  5. Perform the purchaseThe rest is just a Purchase Process just like when using a Shopping Cart


The combination of price and 'fit' to the requested dates or preferences is the basis on which users have to make a decision. Primarily they want an exact fit to their request with the lowest possible price. Since that is rarely the case, they must balance the other options. How to visualize this is a difficult problem and it is not fully known what the best solution is, not yet at least.

More Examples

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below