If the devil is in the details, we're all in hell
You're in bed reading an article on your phone when an ad appears in the header. You're used to ads, but obviously want to close it. Carefully, using the absolute tip of your finger, you attempt to click the "X" in the 8 pixel-wide click box. And miss.
Whether or not this is sadly intentional, part of my on-going learning in user experience is recognizing these UX issues and taking mental note of them. Even Google, Facebook, and the New York Times have problems...
Before I start my list, I want to define "user experience problem". When any user is incapable of correctly and accurately performing a desired or intended action, THAT is a user experience problem.
This one tops my list because this issue has been present for over 3 years. This is far more common on lesser known websites, but as you can see, no one is perfect.
The clickable area should always be "forgiving" and non-surprising to the user. Look at the active state of the first tab "All" and notice the bottom blue border. This signals to the user that the entire tab is clickable, yet it is not. Furthermore, the anchor tag has both a side padding and side margin, but margin is not included in a clickable area, so there's space to the side that adds to the problem.
Not sure why Google hasn't fixed this yet, but it takes 2 lines of code to correct.
Overall, Facebook does a decent job of applying good UX practices, but sometimes lack consistency; which is somewhat surprising given the size of the company. Either way, below is an example that is similar to Google's clickable area issue above, yet different because of the lack of modal design consistency.
Here are the most glaring of inconsistencies:
- Different clickable areas on the close modal "X"
- Different heading sizes
- Different widths
New York Times
The Times is remarkably buttoned-up when it comes to user experience; which makes sense: before the internet, newspaper design was all about harmony of spacing, typography, and imagery. The best newspapers were often the most perfectly crafted.
Which is why, when writing this article, I scoured their site to find something they might have missed. It took me some time, but again... no one is perfect.
Font aliasing isn't necessarily a user experience "problem" per se, but nonetheless the user experience of the Times could be improved with font aliasing. Below, the version on the right is with font-aliasing applied.
Medium
I won't spend much time re-hashing my Google paragraph, but Medium's site suffers from the same anchor element padding issue that causes the clickable area to not be the expectation from the user's perspective.
Wrapping Up
It's easy to be a critic. -- And there may be a good reason the Times doesn't use font aliasing and Facebook's modal are different, but the lesson is the same: be consistent, be empathetic to the user, and be a stickler for detail.