Airbnb Fixed Booking Options
✋ What is it?
This is a solution found in the Airbnb web app. When a user scrolls through an Airbnb listing, the booking options stays fixed so they are always available for the customer to complete the booking at any moment.
🤲 How does this interaction or solution work?
Airbnb listings feature a comprehensive amount of information about each location. This information includes an overview of the location, description, specific data about the host and reviews by past guests.
Since all this information is quite long, users have to scroll several page folds to review it.
To avoid the constant scroll jumping, Airbnb fixes the container with the booking form, so it's always available to the users at any scroll position of the listing.
Users don't need to go back to a specific position of the page to finalize their booking.
🙌 How does this interaction or solution work?
Keeping Context and Reducing Cognitive Load.
Although it could be argued that this solution is mainly beneficial for Airbnb (since it likely helps with conversions), it also helps the customer to accomplish their primary job-to-be-done on this page.
This solution helps the user to keep price and booking dates in context regardless of their position on the page. This behavior allows users to understand the listing better as they scroll through it.
Additionally, this solution reduces the cognitive load associated with scrolling back and forth to reference previously seen information.
That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.