Not every UX blunder is explicable in a single screenshot. Sometimes a blunder is a tightly-coordinated ballet of dumbfuckery. Such blunders are often the most valuable object lessons because they illustrate that failure does not always happen at a single point, but as the result of several things going wrong. A good designer needs to be able to see several steps ahead and anticipate how different design elements will interact.
With that in mind, I’ve gathered a few examples of complex, multi-step UX buffoonery. A recurring theme here is that, as a user goes through a multi-step process, you must provide them information on all the steps, so they can understand the process a whole and see the big picture, rather than isolating them in one step at a time.
Strap in and enjoy.
On Twitter, you cannot open up a tweet in a new browser tab.
Let me set the stage.
I am surfing Twitter and I see a long discussion thread, so I open it up and begin to browse it. Since it only loads a certain number of tweets at a time, I go through several load cycles on the way down until I reach a tweet that I like. After liking it, I decide that I want to view the responses. So, I click it.
It then takes me to a new thread where the focus is on the tweet I clicked, with responses to it shown below.
Now, if I hit the back button, will it take me back to my place in the thread, so I don’t have to scroll down several levels and then locate that specific tweet again? Of course not. It takes me back to the beginning, and not only that, but all the batches of tweets that I had to load separately are all hidden, so I must load them one by one again.
Well, to avoid that annoying step, why not just do what I do on every other site and right-click the tweet to open it up as a new tab?
Uh, turns out I can’t do that:
And that dropdown caret doesn’t offer the option either.
A lot of things went wrong here. The fact that it doesn’t remember your position prior to clicking the link and the fact that it doesn’t leave cached the tweets you had loaded if you hit the back button are an obvious issue, however the real problem is the inexplicable inability to open up tweets in new tabs. If there is a difficult-to-overcome technical hurdle (hard to imagine though), then the ability should be nested in the tweet dropdown menu.
This is an example of the need for a tight integration of usability designers and developers. The designers need to understand when the user experience may be impacted by technological limitations and the developers need to have enough understanding of usability to foresee these issues and request a workaround from the designers.
- UX design is not about coding, but UX is absolutely affected by code.
- When a user hits the back button, it should remember precisely where they were on a page.
- You should be able to open any link or content up in a new tab.
On the Spotify mobile app, you cannot see the complete list of an artist’s songs.
On Spotify’s desktop app, you can browse through the entire catalogue of an artist (minus guest appearances on some compilations; we’ll cover that another time). If you want, you can play through the entire catalogue of songs.
This is not the case on mobile. You only get the first five songs on the band’s home page.
There are lists of albums, singles, compilations, and various other stuff nobody cares about, but not a master list of songs.
The main reason this is annoying is that, if you want to quickly scan a band’s catalogue of songs for a title that rings a bell, you are out of luck. You will have to open up each individual album and look through them separately. And if the song you’re looking for is only found on a single, you might not even think to scroll further below the list of albums to find the singles.
Even after I published the Spotify Edition of BUXRU, these guys still have a big pile of UX blunders I haven’t touched yet. Thanks to Todor Lichev for spotting this one.
- Do not prevent a user from seeing all the information at once.
- Do not cut functionality on one platform that is available on another.
Adobe Illustrator’s disastrous way of selecting a gradient
I could cut straight to the money shot here, but if you already use Illustrator, you don’t need me to tell you this. And if you need me to tell you this, you need a primer on Adobe Illustrator.
Imagine that I have created this green square in Illustrator.
Now imagine that I were to click it with my mouse, thereby selecting it.
Illustrator works with shapes rather than pixels, and so the whole shape is one color. It is reflected in the color picker, found in the toolbar, which looks like this:
If I click the color picker box, it opens up the color picker window, where I can select any of the 16 million colors available to me. If I were to select orange, then when I hit “OK”, that square would turn orange.
Now, let’s say that, instead of a solid color, I want my shape to be a gradient, like the one shown below.
If I highlight that gradient rectangle, the color picker box will reflect the gradient there too. So far so good.
Adobe has a menu for configuring the gradient. The gradient is previewed in the menu, and there are two color stops. These represent the endpoint colors of the gradient. In this one, it is a smooth transition from pure white to pure black.
However, what if I want to change the white to green? How do I do that?
First I have to select the white color stop. When I click it, the little triangle turns black. As an aside, that’s a pretty poor visual indicator, but that’s not the main problem here.
If I double click the white box, I get this:
Well, that’s not very helpful. What about the big color picker window? Why do I have to select from that tiny range? And in greyscale, no less?
Perhaps, since I have already highlighted the color stop on the gradient, I just go back to that color picker on the other side of the screen:
Hmm, this is strange. I have individually selected a component of the gradient, so shouldn’t the color picker box reflect the specific color I selected — namely white? What happens if I click it?
Dafuq? The selected color was white, and yet the color shown in the color picker is black. That’s extra stupid. But nonetheless, if I move the selector to green, and hit OK, this is what I get:
Yes, those are the steps you have to take if you want to select a color from the color picker for your gradient. It’s not even the number of steps that is the problem, however. It is the fact that there are no visual indicators of the connection between different interface elements, or the status of the system. It is mind-blowingly amateurish, and this is a bug that has been in Illustrator since the earliest days I have used it (the 90s).
Adobe keeps adding unwanted and unneeded features and yet they don’t have the 10 hours to spare that it would take to fix this obnoxious design blunder. I keep waiting for someone to come in and eat their lunch. It’s there for the taking.
- Things should behave logically and consistently.
- The interface should indicate what is happening behind the scenes.
- Do not add new features until you have fixed the old ones.
GoDaddy’s site builder won’t let you see your business’s hours of operation all at once.
If you didn’t know, GoDaddy has a WYSIWYG site builder along the lines of things like Wix and SquareSpace… except totally shitty and half-assed. I will probably have an episode devoted to this turd of a tool at some point. For now, here is a great example of how much it sucks.
If you are using the site builder for your business’s website, you may wish to display hours of operation. The app has the ability to include this, but this is what it looks like:
For each day you can choose whether and what time you are open, but you cannot actually see what you have entered. You have to click on each one separately to see a dialogue like this:
There is simply no way to review every day all at once. There is more than enough space to show that on the list of days, but they just don’t do it. Lame.
- Again, do not prevent a user from seeing all the information at once.
- Do not add extra steps.
When you are leaving a comment on Medium in full-screen editor mode, you cannot see the original article.
When you are responding to an article on Medium, there is a good chance you will want to quote specific parts. Perhaps it is a listicle, or maybe you are Fisking a political article. Maybe you don’t even need to quote them, but want to make sure you are replying to something the author actually said. Whichever way, you’ll need to be able to see the article.
And chances are, if you are crafting a well-thought-out response, you will probably want to use the formatting tools that the full-screen rich editing mode provides.
Well, too bad. You can’t have both. If I convert my response to full-screeen mode, I can’t see the original article.
Lame, Medium. Very lame.
- For the third time, do not prevent a user from seeing all the information at once.
Help me hit 5000 followers!
Did you like this article? Then please follow me, because my goal for 2018 is to reach 5000 followers. I can only do it with your help.
Want more Renegade UX?
I’ve got you covered.
- Doing Your Job For You: The iOS autocomplete
- 5 examples of brilliant UX design
- Bad UX Roundup: Facebook Edition
You always were my favorite drug. Even when we used to take drugs.