Bad user experiences are all around us, and there's no worse time to run headlong into them than while travelling. Deadlines are tight, there are a million and one things to do and it's very easy to become distressed at a time when you're meant to be de-stressed. Today I was on the receiving end of it on Airbnb's website and enough was finally enough. It's time for an in-depth analysis of a UX disaster.
Setting the Scene
I had just woken up on the last day of my stay at one Airbnb that a friend operates. I had to be out that morning in time for the place to be cleaned for an arriving guest. I was trying to book another place I'd been pre-approved for when I ran into a screen which cheerfully announced that new verification requirements had been put in place and that I'd have to submit a bunch of information and confirm my email address.
There was also a somewhat sinister sentence tacked on below the main body copy.
"Your booking will not be placed until you complete verification."
Talk about instant stress. There's no guarantee that I won't lose my booking if someone swoops in before I finish this verification process? Cue panic while I scramble for my passport.
Ticket booking companies have been getting this one right for years now - it's an easy fix. Let the user know that you're holding their booking for the next 10 minutes while they complete the process - it instantly defuses the situation and gives the user some breathing room.
I thought my dramas were over after submitting my passport and getting it verified, but they were only just beginning.
"Please verify your email address."
Immediately after the passport page I landed on a page asking me to verify the email address on my account. There was something odd about this. I've verified my email address before. I shrugged and checked my inbox, desperate to get through the ordeal ASAP. No confirmation email. Hammering the "resend" link did nothing to solve my problem. Checking my profile page I noticed the email address they were using was the same one that was linked to my Facebook account - an email address that has been inaccessible for years now.
There was also a puzzling UI element which left me perplexed.
I looked at all of these inputs on my iPad and saw a bunch of tacky locks off to the side. Was this data locked? Would I be able to change it? I tapped on the field, hoping for the best. I got a cursor and the keyboard popped up! Success, or so I thought.
I entered my new email address and was prompted to head on over to Facebook to confirm my password. All well and good, I entered my password and was bounced back to Airbnb, where this absolute gem of an error message awaited me.
There were no validation errors noted against the form inputs, no indication of what went wrong and as I sat there puzzled, the error shown above promptly vanished.
Everything I thought I knew about the profile page was cast into doubt in that instant. The padlock icon sat there off to the left of the email field, staring me down, eating away at everything I thought I thought I knew about <input type="text"/>.
I had no idea what to do. Thinking it might have been a temporary random error, I tried again. Same result.
Googling for the error turned up nothing.
At this point I was seriously concerned about someone booking my apartment out from under me. I even considered creating a new email address and a second Airbnb account.
All of this angst brought on by one simple problem. A terrible, pathetic excuse for an error message.
The Secret to Writing Effective Error Messages
It's super simple. Tell your user what went wrong. If you can't do that, tell them where to get help.
In this case, I had no idea whether there was a system problem on Airbnb's end, if my Facebook account had a problem, if the email address field was indeed locked (I discovered later on my laptop that if you hover over the padlock it indicates privacy, but there's no hover state on a tablet) or if there was some other issue at play.
I also didn't know what the next steps were.
This should have been where I was directed to a support contact form to get immediate assistance. Instead, I was left with nothing but my wits - and I was at my wits' end.
When all else fails, try anything and everything.
Out of desperation I tried the first thing that came to mind. Thinking the email address might be locked to my Facebook address I went to change my email on Facebook.
Little intermission for a special extra bonus fail courtesy of Facebook:
Facebook developers: why not just do what developers for years have done and send a bloody email to the address with a confirmation link that I can click on? I've been receiving email at that email address for years now.
At this point I was just about ready to throw my iPad across the room. Thankfully I identified that particular course of action as a bad move and decided against it.
For whatever reason Facebook accepted my work email, so that's nice. Heading back to Airbnb I tried setting my email address to the new one I'd just set up on Facebook - and by some miracle it actually worked. I was able to confirm my booking and I was on my way to having a cozy bed for the night.
So, does anyone care to guess what the constraint on the email field was?
Astute readers might think that it has to match the Facebook email address for linked accounts.
Sorry astute readers, you're wrong. I thought the same thing at first - it fits the evidence, right?
Yes and no. I dug a little deeper. I thought it odd that I had previously confirmed my email address on Airbnb at my personal address and yet I was being asked to do it again at an email address I hadn't used in years.
It turns out, I had two Airbnb accounts and didn't realise it.
I had previously set up an account which wasn't linked to Facebook. As part of their standard onboarding process Airbnb prompts you to connect your social accounts for verification and reputation purposes. I did this via their dashboard and everything looked fine on the surface. For whatever reason though (possibly because the email address I used on Airbnb didn't match my Facebook email address, at a guess?) a new account was created instead of simply linking my Facebook profile to my existing Airbnb account.
That pathetic blue error message noted previously should have read "email address already exists."
There are a few key lessons to be learnt here.
- Test thoroughly. Especially account management tools and external integrations.
I now have my reputation and reviews split across two Airbnb accounts. The only way I can use my personal email address on my personal account is to delete my original account. All of this could have been solved by a smarter, more thoroughly tested Facebook integration.
- Write better error messages. Reach out to users affected by unknown/unexpected errors.
When there's an error, tell the user what they did wrong. If you don't know what they did wrong, direct them to a contact form which puts them in touch with someone technical. Even better, follow up with them directly and work with them to identify the flaw.
- Don't be too clever.
I'd be willing to bet that the reason Facebook rejects my email address is the fact that it starts with admin@ - if they just used the classic tactic of pushing out a confirmation email I'd have been able to use my current email address and none of this would have happened.
Keep these lessons in mind when building your next application. Let's work together to make the web a better, more usable place.