This is an object lesson in how not to lay out a screen.
Background: While configuring a Linux PC, I found myself setting up Ubuntu One, Canonical’s cloud sync service. After I entered the confirmation code I received via email, I was taken to this screen.
My first reaction: Blargh! Where do I look first? What do I do?
Let’s break it down:
- None of the calls-to-action appear to be primary. Nothing screams “Start here! Click me first!” The most visually prominent calls just sort of step on each other.
- The layout is an eye-hurt. No really. I’m not exaggerating, it /actually/ hurts my eyes. I can’t recall the last time a screen layout actually made me go cross-eyed. Little thought seems to have been given to aligning the controls, text and links. I don’t mean to be too snarky…but it looks like the UI fairy barfed up links and controls onto the screen.
- When I was a wee UX lad, mama always told me “If you can’t choose one font size, might as well use them all.” Unfortunately, mama was wrong. On this screen it’s disorienting. It adds to the difficulty users will experience trying to find a “start here” call-to-action.
- Screenshots are helpful…in theory. But they have to illustrate something helpful to the user. This one falls short. The detail is too small to be of use. It just causes eyestrain. Or maybe I’m just getting old, and you youngsters have no problem with it. Well good for you. And get off my lawn.
I know I’ve ranked on Linux in the past, so I readily admit that Canonical has made great strides creating a better user experience for desktop Linux. Ubuntu 11.10 is by far the most usable Ubuntu release ever, and Ubuntu has always stood above other distros in ease of install, configuration and initial/ongoing use. But like any app or OS that comes from a legacy of “built by geeks for geeks”, there will always be areas of the user experience that don’t get the UX love and attention they deserve. This screen – even though it was probably created for more recent distributions – reminds us of Linux’s geeky origins.
One last thing, and this is a completely preference-driven personal peccadillo of mine…bevel-lowered grouping boxes must die. Hate ‘em. They’re /so/ Windows 3.11…
After many years of working in user experience, I’ve found the semi-mythical holy grail of poor design: in my grandmother’s condo I encountered the dreaded “which way is which?” thermostat.
Just looking at this picture, you might think that pressing the left-facing button would lower the temperature, and pressing the right-facing button would increase it. And you’d be wrong. At least, I think you’d be wrong.
If only they were reversed, I could at least deal with that….but sadly no, what we have here is *both* a 90-degree control rotation (or negative 90; I’m not sure), and some kind of mode problem where I couldn’t actually just change the temperature on the fly without entering a “temperature change” state.
And no, I never discovered how to enter the “change temp” mode…I just sweltered in the Florida heat for the rest of the visit.
Here’s a great example of how feature requirements and design have combined to cause a lost sale. Some background: This is the donation page for the Presidential candidate I support. I’m not getting into who it is; those who know me personally can probably guess, and those readers who don’t can visit candidates’ donation pages until they find this example.
I’m your typical semi-involved voter: I care a bit about local policitics, I try to vote in every election, but don’t always make the smaller or off-year ones. But I do care about state and national politics, and since I live in *the* quintessential swing state, I feel like my vote actually matters.
This morning I received a call-to-action email asking me to donate, and followed the link, landing at the page you see (in part). I noticed the “Make this a monthly recurring donation” checkbox, and immediately thought “Awesome! That’s what I want to do!” I figured it would be easier for me to just automagically kick in $25 per month until the general election was over. So I ticked the box, expecting to get one of those “For how many months?” dialog or AJAX partial page update. Nope. Nothing. Which sucks for the candidate and party, because I – and I suspect many, many other small donors – only want to make a recurring donation until the general election is over. And if I can’t do this – or easily figure out how to do this – there is no way I’m setting up an autopayment.
This is a classic failure of the product managers and designers to understand the customer. They may *want* me to set up an autopay in perpetuity. But I guarantee that most small, semi-involved donors most certainly do not want to do this.
Lesson: Learn what your customers want from your product and what their motivations are when they use it. Wishful thinking about user behavior is not a good way to meet their wants and needs.
Standard disclaimer: I am a user and fan of eBay. When it comes to user experience, they do lots of things right.
Here’s one thing they did wrong: They provided half-hearted, linkless “help” in the form of “to do x, go to [place A] or [place B]“, without including links to those locations. This is a no-brainer and should’ve been coded ages ago.
As a result, I had to hunt around for a small but still-annoying period of time before I found where I needed to go.
Somebody add that to the eBay UX fix list.
This screenshot is about a year old, so my apologies to the site if they’ve fixed this UX issue.
The point remains, however, that when someone wishes to unsubscribe from your email list, it is incredibly imperious to *require* them to explain why.
Sure, as a business you might *like* to know, but you have no right to demand an answer.
That’s treating your visitor rudely.
Paypal goes a little too far with this login transition screen.
“The world’s most loved way to pay and get paid”?
I don’t think so.
Using marketing-speak in the UI is one thing. It’s come to be expected and (mostly) accepted. Just make sure it doesn’t trigger your users’ BS detectors.
Really Google? I’m on my home network. No one else is using my connection, according to my outbound connection monitoring software.
Nothing but little ol’ me on Firefox.
This is a pure customer experience issue: I was just locked out of my AT&T wireless account after a SINGLE INCORRECT PASSWORD ENTRY.
I suppose it’s theoretically feasible that someone was trying to crack my account at the very moment I was trying to legitimately log in, which would explain why I was locked out after a single try. Odds are, probably not.
Thanks the inconvenience, AT&T.
And companies wonder why we call instead of self-service on the web. It’s because the web is basically a brittle support mechanism.
Given that the average support call costs anywhere between 5 and 50 dollars (sorry, no recent reference; going from memory), I’m about to cost AT&T ~ 15 or 20 bucks because someone decided to implement a single-attempt lockout policy.
Whatever. Time to call a CSR and burn some of AT&T’s cash.
This morning I followed a link from an independent writer’s feed, and found myself for the first time on Rush Limbaugh’s site.
I don’t like the guy or what he stands for. He’s a liar and a bully. But let’s get beyond that and talk about his site.
Clearly there’s too much…stuff. Multiple rows of nav, a riot of highly saturated opposing colors (ouch my eyes), and…not enough white space between elements.
Maybe he did that on purpose. That would be so meta and clever if he meant that. Get it? Not enough white space? Because, uh, that’s what he believes…there’s not enough white space.
Yeah…somehow I doubt it was intentional.
My company uses this product to (surprise!) document our expense reports. When I started a few months back, one of the first emails I received from my colleagues was the “Here’s how you create an Expensify report” message. It was that hard.
Last time I logged in I noticed a whole bunch of user assistance in the UI, including a “faux-modal” lightbox that provides links to the two most common actions (“add expenses” and “new expense”). They’re not the most well-crafted sentences in the world, but they get the points across.
Because I was in a user-assistance-y mood, I also noticed the “How do I?” links on the left for the first time. I have no idea whether they’ve been there since I started using the app, or whether they were new as well.
In any case, while Expensify’s main workflow isn’t exactly the most well-designed interaction I’ve seen, at least they’re providing a bit of guidance at the front end.
I just like this infrographic from our refrigerator. There’s something classy about the dress shirt cuff and suit sleeve. Also note the grey circles that call attention to the different ice cube maker switch states.
Not sure I get the warning though. “Ejector fingers”….riiiight…
And this, folks, is how you put your customers at ease and make them feel better about interacting with your web app.
Lesson: If you have an opportunity to a) make your customers not feel stupid, and b) make it easy to fix a mistake, do it.
I’d love to get a peek at the New York Times’ server logs and see just how many thousands of bounces this page generates every day.
Understand, it’s not a bad interaction design. It’s a fundamental misunderstanding of how to treat visitors.
In other words, the NYT is shooting itself in the foot and driving away visitors in droves.
Finding myself working in the info security world, I have little doubt that the content of this article is spot-on.
The problems lay with the graphs embedded in the article:
1. The graphs are unreadable at the embedded resolution.
2. It’s not immediately clear that you can click to embiggen them. You merely *hope* that you get the hand cursor when you roll over the images.
3. When you do click the image, you’ve lost context. Even a simple title or line or two of text recapping the post content prior to the image would help maintain continuity and context.
On the plus side, at least the embiggened image is not the same size as the thumbnail, which is probably in most people’s list of top 10 annoying web design flaws.
If your brand and on-web persona fit the attempt at humor, that is.
This little piece of fun is from Woot, who pretty much define funny in the e-commerce space.
In this case, I was amused enough to get that little brand affinity glow.
Good experience.
Mashable’s gotten a bit, um, *busy* over the past few months.
OK, it looks like someone barfed food coloring on the page. There. I said it.
From the Delta Airlines iOS app. It solves the age-old problem of remembering where you’ve parked at the airport.
If you don’t have a fancy-shmancy smartphone, here’s an analog life hack for you: Just write the row number on the little ticket and PUT THE TICKET IN YOUR WALLET (or purse).
Uh, you *do* have a pen in your car, don’t you?
…but you know you’re going to click anyway.
http://www.gershoni.com
The kicker? They’re a design firm that purports to understand UX design.
Found at an e-Reader display table in an airport somewhere.
The post title says it all really.
For whatever reason, I’m not a big RSS feed user. I like visiting blog and aggregation sites rather than taking in the content via a reader. Which is why I appreciate this little feature in the corner of The Consumerist‘s banner that tells me how many posts have been made in the last day.
It’s not as slick as, say, Huffpost‘s auto-refreshing web content, but it does the job nicely for me.
