Bad UX Roundup #5 — WTF is a “jpg-large”?
Continuing to find and mock bad UX design, wherever it may lurk.
I decided not to keep you waiting so long this time. Only a week later, here is another episode of Bad UX Roundup! This week, you will find some of the usual suspects, goldmines of slop, as well as Netflix’s first dishonorable mention.
As always, these fails are opportunities for designers to learn from. Behind every fail lurk any number of good design principles that were senselessly violated. Learn these principles. Cherish them. Fight for them. This is how you will never fear a much-dreaded mention in a Bad UX Roundup!
So, let’s get started.
Netflix in the web browser is clumsy
The Netflix interface consists of a series of rows. Each row contains a selection of themed movies, and the row extends beyond the borders of the screen. On the Netflix app, the user can drag these rows with their finger. It’s easy and intuitive to use. On the Netflix website, it is not.
Rather than letting the user click and drag the row of movies, they must click a button on the side of the screen. The button advances the row of movies. Once clicked, it will not work until the next 6 (or however many) movies have slid onto the screen, so the user must browse at the pace of the website rather than their own pace. To those of us who watch movies on our desktop computers, this is an insult.
To their credit, Netflix has significantly improved the speed of the row slide. When this website design first came out in 2011, it was insufferably slow, and even back then I was wondering why they did not include a click-and-drag.
Important lessons
- Don’t waste the user’s time.
- Make use of realtime vs. non-realtime motion. Read more here.
Twitter’s infamous “jpg-large”
Have you ever tried to download an image from Twitter? Unlike on Facebook, which gives you a link to download the image, on Twitter you have to do it by right-clicking. Note the lack of a download link below.
Unfortunately, when you download the image, what should be a good old-fashioned JPG file has been turned into an abomination.
What, in the name Lemmy’s moles, is a “jpg-large”?? It’s clearly not a recognized file type, because OSX does not show a preview of the image. The lack of image previews actually caused me a pretty serious headache once when I was dealing with a large number of images from Twitter.
My first inclination was to assume this was an intentional “feature” conceived in the smug vapors between Jack Dorsey’s ears. Between this and the lack of a download button, it seems like some covert assault against the idea of data ownership (“how dare you want to download the data for yourself?!”) borne from the usual disingenuous leftism in which a lot of tech gigalomaniacs indulge. It would be too much of a PR disaster to actively prevent downloading files, but at least we can inconvenience them, right?
It turns out the actual explanation is not quite as sensational, but still pathetic enough to warrant a place in this episode. If you open up an image on Twitter the URL of that image (which does not show up in your browser bar normally) reveals the culprit. When an image is opened rather than viewed on the feed, it has “:large” appended to the URL. That colon then gets turned into a dash by the browser upon download.
So, there is no such thing as a “jpg-large” after all. There are no other major sites that do this, considering that browsers have not been programmed to account for it. There is no good reason to do this. It’s just half-assed coding by Twitter… and half-assed oversight by the designers and product managers.
Important lessons
- Mind how your developers are building your designs.
- Don’t violate established standards without a reason.
- Don’t bogart the content.
iPhone will attempt to connect to bad wi-fi instead of just using the cellular connection
Have you ever been at home, surfing the web on your iPhone only to be stopped in your tracks by a lack of internet? It might not even occur to you to check your router because, why would you? Your phone runs primarily on a cellular network and only uses wi-fi when it’s available. In fact, you only get your phone to access the internet again once you disable wi-fi. Of course, that means you have to manually turn wi-fi back on once your internet is back up and running.
Strangely enough, the product does claim that it will automatically switch to cellular if the wi-fi should fail. There is a switch hidden on your “Cellular” menu in Settings.
In truth, this feature does not actually work, as I have encountered this problem with several iPhones at several different wi-fi locations, and this setting is always on.
For a company like Apple, that boasted that their products “just work”, this is outrageous. The iPhone cannot do something as simple as switch to the cellular signal if the wi-fi signal is slow or nonexistent. This is as flagrant as omitting a “time to next alarm” feature from the iPhone’s clock app.
Important lessons
- Operate seamlessly
- Don’t start from zero (This is a concept from Microinteractions, meaning make use of all data available to you. In this case the data is that there is no data.)
Mac OSX and their barrage of file info windows
If I highlight several files in a Finder window, I will see this:
If I right click them and choose “Get Info”, hoping to see a single information window depicting the aggregate data of all the selected files, I will see this:
I first discovered this bit of slop the hard way. I had probably highlighted 50 or more files when I decided to “Get Info”. Needless to say, it only took one click to ruin my workspace, but 50 clicks to un-ruin it.
I’d like to personally meet the person who would actually assume that a salvo of pop-up windows would appear from a single click, as I would wish to commit them to an asylum. This is absolutely the opposite of what a person expects when they select multiple objects and perform a single bulk action on them. They would and should expect a bulk result. Is it even possible to look at the aggregate data of all of those files?
The answer is yes, but it is extremely unintuitive. The user must hold down CTRL (and that’s the oddball Mac one, not the normal Windows one) with the File menu open. The normal option of “Get Info” will turn into “Get Summary Info”, at which point they will be able to see the aggregate information.
They could have easily have “Get Summary Info” appear by default underneath “Get Info”, which could be renamed “Get Info On Each”, but they chose instead to hide a very important feature behind a very obscure set of actions.
All hail the kings of usability, amirite?
Important lessons
- Do not sacrifice the usability of common use-cases in favor of edge cases.
- Remember the difference between knowledge in the head and knowledge in the world.
- Let the user undo their mistakes easily (i.e. don’t force someone to click 50 close buttons).
On Yelp, the responses from vendors and pending reviews look the same.
If you are leaving a review on Yelp but never finish, Yelp will save it for you. That was nice of them. When you return to the page of the business you were reviewing, your unfinished review looks like this:
And, when a business owner replies to a review left on their page, the reply looks like this:
They use the exact same color, border, and corner. Yes, there are some clues, like the stars and the buttons, however the stars blend in with other reviews and the buttons are pretty subtle.
The unfinished review should be an attention-grabbing color like yellow and certainly not have the same color as another type of content. This reeks of siloing. It’s quite likely that the people who make both of these features have never even met before. Yelp is a big, bloated company so I wouldn’t doubt it.
Important lessons
- Make distinct types of content look distinct.
- Don’t let your UX become siloed.
Want more of me?
After you’re done getting your head checked, you can find me at these places.
LinkedIn:
https://www.linkedin.com/in/jclauss/
More articles like this:
http://blackmonolith.co/publications
Eggin tykist mær bert ein gátt, sorgin skipar lagnutáttin.
