7 UX Quick Wins from Airbnb
I’ve just finished a UX audit of Airbnb’s website, and here are 7 brilliant bits I wanted to share.
Provide shortcuts to experimented users
In this part, I want to refer to Nielsen’s Flexibility and efficiency of use heuristic. The most experimented users will — sometimes inadvertently — try to use shortcuts. You should make sure your product is usable by both the least experienced and the Internet veterans.
Solution: Airbnb manages to tailor its UX to both. In the search engine, users can type a city name, but the engine offers to narrow down their search to homes, experiences or restaurants in that city.
Emphasize what’s going on
Users are busy. They’re distracted. When I’m not doing several things at once, I’m at least sipping on my tea, headbanging to music and checking any potential doggo passing by. Thus, I sometimes miss things that might happen on my screen.
Solution: Animations are a good way to discreetly point users towards what’s happening on their screen. When users browse Airbnb’s calendar, the new month doesn’t just appear, it slides in. Bonus: the checkout layer opens automatically after a check-in date has been selected.
Hide unavailable features
Some elements are only actionable under certain conditions. Hiding them allows to have less clutter. Additionally, their appearance catches the eye and shows users that something has changed.
Solution: Airbnb hides such elements, and only displays them when they can be used. In the search engine filters, the ‘Clear’ button only appears once users have selected one of the checkboxes.
Some products have to deal with a lot of material at once. While relevant grouping and good information architecture help handling big chunks of information, it’s also important to take navigation into account. On their template ‘House’ page, Airbnb has a lot of information to display. From bed arrangements to the house’s policies, this page stands out by how much information it conveys.
Solution: The page features a sticky menu with anchors to facilitate navigation inside the page. Thanks to this menu, users seeking specific information don’t have to scroll endlessly, they can directly jump to the relevant section. Moreover, users know where they are on the page at all times, because the current section has a look that’s different from the other sections available in the menu.
Users want to know what you have to offer. That’s obvious, right? Well, they also want to know what you don’t have to offer. A lot of digital products aren’t transparent about what isn’t provided.
Solution: On a house page, the ‘Amenities’ section features both what’s present in the house, and what isn’t. Airbnb crosses amenities that could be expected but aren’t provided by the host, so that you don’t forget to check the availability of an item you wanted.
Don’t leave users in a dead end
Back to Nielsen’s heuristics, he also mentions having explicit error messages and helping users recovering from said errors. Error messages deserve an article for themselves — and you can find one here — so I want to tackle the topic of recovery from errors. This implies implementing a fix for users, a way out of their cul-de-sac.
Solution: This is fairly simple, yet rarely encountered. When this search engine has no result, a link offers to go ‘Back to all reviews’.
Contextualise your content
UX is not just about digital shapes arranged on a screen. Text matters too. Contextualising the information you provide allows to reduce your users’ cognitive load.
Solution: Here, Airbnb features the exact dates until which you can cancel, depending on the dates you entered. They even provide a short timeline for better visualisation. Thanks, Airbnb!