I've always had a knack for learning user interfaces. From getting the VCR to stop blinking 12:00 to swiping my way around my first touchscreen, it's something that's always come easy to me.
I've also spent a lot of time using that knack to teach other people how to use and understand technology. As a result, it's easy for me to immediately pick up on things that I know would cause confusion and uncertainty for folks who aren't as tech savvy as those of us who spend our days and nights reading about user experience, pattern libraries, and tactile feedback.
Here are a few examples of poor or simply bad user experience that boggle my mind every time I see them:
1. The "Phantom Download"
Try this fun exercise on your browser or phone, especially if you're using Chrome: Click here to download this sample docx file.
On desktop, if your browser is set to the defaults (as opposed to asking you where to save the file), what just happened is that the file dropped to the bottom of your screen in the "downloads" bar. On your phone, you might get a tiny icon in the top status bar indicating that something happened, but let's be honest: to the casual user, they just clicked to download a file and literally nothing happened.
2. Dropdown menus that have to be followed perfectly
I'm going to pick on First Niagara Bank for this one, although they're hardly the only offender. Here's another fun thing to try:
- Load their homepage http://fnfg.com
- Browse to "Operating and investing accounts" under the "Bank" menu
If you're like me, you instinctively moved your mouse down under Bank, then to the right to hit "Operating and investing accounts". However, try hovering over Bank and then going diagonally-right to "Operating and investing accounts", the way any sane person who hasn't been conditioned by years of bad user experience might. The menu disappears as soon as you hover away from the word "Bank".
(Side note: This is a problem that was solved years ago by a library called hoverIntent)
3. Phone number fields that make you format the number perfectly
You've probably experienced this user experience nightmare:
"2159251980 is not a valid phone number".
Maybe the error message will indicate this, and maybe it won't, but it's secretly requiring you to type 215-925-1980 (with dashes). Sometimes it's the reverse — you get an error if you do include dashes. Because this is a field that's often found on sign-up or checkout forms, confusing people here is a horrible idea when it comes to conversion.
Pro tip: It's one line of code to automatically format the phone number:
text.replace(/(\d{3})(\d{3})(\d{4,})/, "$1-$2-$3");
4. Mailto links
Let's talk about these. Mailto links are intended to automatically pop open a ready-to-send email when you click on someone's email address, like this:
not-really-jim@easternstandard.com
With a majority of users using either web-based email or not having their default mail client configured, here's what actually happens when someone clicks a mailto link:
- Their computer opens a program they've never used before, for example the version of Outlook that came with their computer.
- A form pops up asking the user for their email address.
- Another form pops up asking for their SMTP and IMAP settings. If they don't have these, no fear, they can "contact their system administrator."
- The user is confused and cancels out of the setup wizard they didn't realize they were in.
- The email client is left open, but is in no way capable of sending mail.
- No email is sent, and everyone is sad.
5. For the Philly folks: Those BigBelly trash cans with gross handles
I've been citing these recently as an example of how far design can deviate from actual user experience. For the uninitiated, Philadelphia installed "BigBelly" solar trash compactors throughout the city in 2008. These solar-powered trash compactors reduce the number of trash pickups required throughout the city, and were touted as a high-tech, green initiative. There's just one problem: No one wants to actually touch the disgusting handle to open the things.
The good news, though, is that the city has worked through the issue with BigBelly, and we're getting foot-pedal-activated cans in the not-too-distant future. I guess we'll call this a win for iterative design — they just needed shorter sprints.