Jason Shah

There must be something to learn from the Airbnb user experience.

Airbnb, like many startups following in its path of collaborative consumption or others simply trying to power offline action, have the challenge of earning user trust. While PR, word of mouth, and direct outreach can alleviate some trepidation, the product is where Airbnb seals the deal. 

So let’s dive into the home page and see what we can learn from Airbnb.

Clean home page with a focus on booking a reservation — not sign up

Action before registration: While a user eventually must sign up, Airbnb wisely pushes you to find and book a reservation first. This lets the user feel like they are getting value out of your site. Sign up does not deliver value; immediately searching for/finding a flight on Hipmunk, viewing cool stuff on Pinterest, and even entering a query into a search box on Google.com are all first steps in getting value out of a site.

Tell the user what they can do on the site; NOT what your site does: It’s a subtle difference but notice Airbnb’s language: “Find a place to stay.” That’s all a user cares about. If you tell them, “We bring together renters and rentees…” or “We are a marketplace for sharing space…” a user has to take that and then process what it means for them. It’s a 2 step process. Make it 1.

Also, note that the pitch to VCs is unique to the pitch for users. VCs care about the marketplace; users care about getting value from your site ASAP.

VC Pitch: A community marketplace that facilitates residential real estate sharing and monetizes on transaction fees.

User Pitch: Find a place to stay. 

Choose language that fits a user’s mental model. Airbnb’s concept is novel. It’s not brand new, but it is changing behavior and facilitating changed behavior.

“Find a place to stay” is exactly how people describe the process of …finding a place to stay. When I tell my friends I’m making a trip to Boston, I’ll say something like “Yeah, my flights are booked, I just need to find a place to stay.” In UX, it’s a heuristic like Nielsen’s that says to make the system reflect real life. In lay terms, it’s talking how people talk.

Moreover, near the date selection, Airbnb uses language like “Check in”, “Check out”, and “Guests” - which is precisely what hotel booking sites use. As the site goes mainstream, using this sort of language for new users who would otherwise stay in hotels helps people feel like this will be a secure and comfortable booking and staying process.

Zoomed in - 

For autocomplete dropdowns, sort not just alphabetically but by popularity. When I began typing “San Francisco”, just after “San”, I noticed “San Francisco” ranked higher than “San Diego, CA”, “San Antonio, TX”, and others. Clearly this is not a purely alphabetical search. Rather, Airbnb knows that, in line with Hick’s Law, they want to minimize the time to selecting an option. Chances are that the most number of users will select the most popular options. What good would an alphabetical system be if it meant I still had to scroll down quite far (i.e. spend a lot of time making a decision)?

Zoomed in - 

Descriptive page titles help users remember why they came to your site + differentiates your site in a sea of browser tabs. SEO 101 teaches us to use descriptive page titles and names, and deprioritize the name of our own services (which arguably will not resonate with a user as well as the actual keywords will resonate). SEO is right to suggest this. It, fortunately, is also good UX practice.

In today’s world of browser tabs, you have a favicon and the text. Hopefully the favicon helps communicate your company name or purpose. Text to the same effect may be redundant, not to mention if your site is new. So why not use descriptive text? 

This text helps them rank better, but it also makes it so that if I glance at the tab, Airbnb will have successfully helped me remember what they are about, and I will likely reopen the tab as opposed to ignoring it (if the text didn’t resonate with me). In other words, seeing “Vacation rentals…etc. | Airbnb” performs better than “Airbnb | Web 2.0 Buzzwords”.

Automatically suggest checkout dates based on logical user behavior. On Airbnb, after selecting a check-in date, I was automatically moved to the next element (check-out date), and the next day was pre selected for me. This saves users time and is a delightful UI effect that will impress users.

When you hover over the Airbnb logo, it ‘shakes’ a little bit. Nice effect. These cool little effects make people feel like you know what you are doing. And Airbnb still caters to the relatively ‘edgier’, or ‘hip’, people who may very well appreciate this sort of nuance. (I tried to include a .gif of this activity but just visit airbnb.com to see for yourself).

No price option? This is surely deliberate to keep the form as simple as possible. A user is allowed to set pricing preferences on the next page.

—

Some things they can do better -

Disable outline when it makes your boxes incongruent. Indicate element selection in an alternate way. Basically when you click to enter ‘Where are you going?’, there’s no need to outline the box and make it look misaligned with the “Search” button. The way they did it DOES follow certain UX guidelines, but I think UX design is moving away from this treatment of elements in favor of changes in background color, solely showing the active cursor, etc. Instructions on removing outlines in CSS here.

*See my response to criticism of this tactic at the bottom of the post.

The ‘Host Guarantee’ is below the fold. If users have concerns about your service, display enough security/trust/social proof elements above the fold.

Enable sign up and login via overlay boxes. Right now I am transported to a separate sign up (https://www.airbnb.com/signup_login) or login (https://www.airbnb.com/login) page when I click on the options. I believe a lot of users click things like ‘Sign Up’ with no real firm intention, but to just see what it may take in order to sign up. If it’s especially painless, maybe they’ll do it even when they didn’t have a hard intention to do so. Lightbox is a great option for this implementation.

*See response to criticism of using light boxes below, as well.

Make the data input flow more natural. Right now, I totally bypass entering dates in the flow because when I come to the page, I enter my city and hit ‘Enter’. That triggers the search, without giving me a chance to enter my dates first. Entering the dates is almost entirely left out of the flow aside from me seeing it, and perhaps deliberately choosing to do the bottom elements first, then going to the top to enter my city and hit Search. If I use my mouse to select the option for ‘Where are you going?’ this isn’t an issue, but I think people who use their keyboards more should not be penalized.

Preset the dates. They surely have data on the average time between searching and renting. Maybe people typically check out Airbnb a week in advance. Maybe a month. Presetting the dates does two things. For some, it reduces the work required and feels even more streamlined (and also ensures date data is included in the search if the individual otherwise leaves it out of the search given the current UX flow). Moreover, when a date is already entered, the form is compelling. It feels like something that NEEDS to be interacted with. It’s a lot easier to ignore a blank form than one with partial information. Admittedly this may 1) create more work for people whose dates you get wrong, which is probably the majority 2) creep some people out. Nevertheless, it’s worth testing.

—

That’s all for this time. Any thoughts? How else can Airbnb improve? 

—

Comment here or on Hacker News.

—

EDIT (9:04a, PT, 2/24/12): The response to this post has been overwhelming. A lot of constructive feedback. I wanted to address a couple of points that I think are still up for debate. Here are my responses to 2 criticisms:

• “It is novice to disable default browser behavior.” Some people don’t believe it is right to disable outline on an element: This subverts default browser behavior and arguably worsens usability, particularly for anyone who is visually impaired. My full recommendation though, is not to remove the outline and do nothing else. A lot of sites are beginning to use dynamic CSS to change the background of the text input when you select a text field. Arguably that is even BETTER for the visually impaired than an outline given that it is more visually prominent. Moreover, when have we been satisfied with the state of browsers and simply accepted what the large tech companies release? Historical defaults should not dictate design.
• “Lightboxes are bad for usability and resemble pop ups to some people.” People have expressed pure but unexplained frustration with the use of light boxes: Sure, if you take the basic definition of a light box as “a box that pops up, and looks a lot like a pop up”. However, pop ups have a connotation with spam, etc. that make this an unreasonable comparison. Light boxes do function like pop ups; in fact, I have called light boxes pop ups before. That being said, I would be hard pressed to find a ton of users who felt like light boxes were ruining UX when it saves them from having to go to many different pages and adds a pleasing novelty effect to the site. Moreover, while some can claim a performance hit from using light boxes, and I’m sure there’s some validity to it since every JS plugin will hit your performance, everything is a trade off, and if we wanted our pages to strictly load quickly with no regard for design, we might just stop using JS entirely.
  
  Like anything else, it’s all about how you USE the tools, not the tools themselves. Twitter Bootstrap is great, but uncustomized, overused, and constantly deployed in production for the full lifecycle of an app is a misappropriation of the tool to some people. Does it mean that Twitter Bootstrap is bad and doesn’t have a place in the development process? Absolutely not.
  
  Edit: 2:25p PT - cleaned up some typos and included references to the above edit.
  —
  
  Would love to hear more in the comments section on these or the above issues! 
  
  
  — Here’s a response from an Airbnb co-founder: 

@jasonyogeshshah yup, you nailed some good points!

— Joe Gebbia (@jgebbia) February 28, 2012

Tweet Follow @jasonyogeshshah
Vote on HN