The 5 Biggest Interface Screw ups of 2010
by Adam Kochanowicz on 12/30/10 at 3:08 pm
Over the past several months, I’ve been funneling my keen eye for awful interface design into a blog, User Interfucked. Interestingly to readers of UX Movement, it should come as no surprise, a vast wealth of terrible interfaces are not just door handles and kitchen cabinets – they’re right here on the web. For my guest post, I thought I’d write about this year’s worst interface screw ups.
1. Splash Screens
In case you forgot (and needed to know) the name of the application you’re using seconds after its execution, there is the utterly pointless splash screen.
A true splash screen has a fine, albeit mostly aesthetic purpose. While the application is loading, a resource-light branded image is shown as a kind of virtual waiting room. Some companies, such as Adobe, will use the splash screen to run a small ticker of the resources being loaded for your viewing pleasure.
A splash screen becomes pointless when either the application has already loaded or, worse, before the application begins loading. We all remember old school websites whose home page came after a splash page informing us we had successfully arrived there: “Welcome to Bob’s World!!1! [Enter]”
View while app is loading
View after app has loaded
Take this gem from a fitness app I use almost every day. The splash screen begins in a useful way. However, once the app loads, you have to navigate away from it to get to your data. It’s also very confusing because the user might not even understand the app has already loaded if they’re still staring at the logo.
2. “Click here” links
“Click here to continue” is probably the worst practice in the entire span of internet history when it comes to interfaces. We all know exactly what to do when we see colored underlined text. Yet for some reason, website developers insist on instructing us on how to use a hyperlink…with every hyperlink using the phrasing “Click here to…”
This mistake is so pervasive because anyone who knows basic HTML is vulnerable to make it. Instead of typing “Click here to go to the main page,” all a designer has to do is write “Main Page” or “Home” and make it a link. If your users can figure out how to navigate to your website, they can figure out how to click a link. “Click here to” adds unnecessary junk to the user interface and slows down the user’s experience.
3. Unclear dialogue boxes
This mistake is especially prevalent with dialogue boxes, for some reason. A user is given a prompt with a simple yes or no question. The problem is, the developer failed to make it clear what “yes” or “no” means.
In this case, the “Okay” means “Okay, don’t.” This is probably an action in the game where the user has pressed the close button right away. A better prompt would just say “Do you want to save? (Yes/No)”. If the user’s first action was to click an option that says “Exit without saving,” I wouldn’t have a dialogue at all. However, if you insist, it would be less ambiguous to say “Are you sure? (Yes/No).”
4. Fanciness over usefulness
I feel like I was the only one rolling my eyes when the BumpTop team debuted their OpenGL desktop replacement that solved their perceived problem with the traditional computer desktop. The team believed a flat surface did not reflect the 3D environment into which we organize an office in real life. The solution, for the team, was to create a 3D desktop with stacks as the unit of organization. This made for a very pretty “oh” and “ah” interface, but it essentially created an extra cognitive step in nearly everything you do on the desktop.
The reason it’s easier to make stacks and use a 3D environment in real life is because the input of real life is 3D. By making a 3D desktop, the user essentially has to constantly face the hurdle of transforming a 2D input into 3D. It’s pretty, but it quickly becomes annoying to use.
Worse, is this phone from Samsung. You can see why developers might be drawn to using this 3D cube interface. It looks so damn pretty and futuristic. But how does it improve upon the classic grid layout of icons? Now, the user is called upon to use a 2D input to navigate around a 3D surface to find their icon of choice. The design also means only three icons can be fully visible at a time.
If designers want to create the new desktop or startup page, I suggest they look to logarithmic scaling as a concept. This uses linear perspective as a method of increasing virtual geographic space without confusing three dimensions of movement with two dimensions of input.
5. Bad button placement
The rapidly increasing use of touch interfaces has conceived a new category of design flaws which fail to accommodate our big fat American fingers. This is even true in mobile sites such as Google Talk. The send button (“Envoyer,” sorry, I use french) could be placed in that space already available to the right of the textbox; saving real estate in the process. Instead, it is placed so close to the browser’s back button, the user is apt to write an entire message and have it erased by going back to the previous page.
Make 2011 a year of good interface design. Avoid these common interface mistakes at all costs. In the end, your users will thank you for it.
|
Adam Kochanowicz is a Ph.D. student in I/O Psychology. He writes as the National Psychology Examiner for Examiner.com and maintains the Tumblr blogs User Interfucked and Papyrus Crimes |
Andrew
Dec 30th, 2010
Interface Screw Ups of 2010? These are more like Interface Screw Ups of the last decade.
Mariusz
Dec 30th, 2010
Bad UX happens also in real life http://b0i.de/uxatm
Anyway, i’d say that #3 would be the worst. Imagine you have a more critical application. Oh, dear..
Clay McIlrath
Jan 4th, 2011
I agree that #3 has to be the worst.. bad UX is one thing.. error caused by UX can be detrimental depending on the application
Alvin Tan
Dec 31st, 2010
“Click here” is definitely not bad design. Links that double as calls to action have always been represented in that format. Doing otherwise goes against common user model and is bad design.
cherry win
Dec 31st, 2010
“click here” must die. calls to action are awesome, when they mean something. click here is not a call to action. buy now, hire me, download, etc. those are calls to action. to get someone to click somewhere, all you need to do is make your text look like a link, or a button – style adds emphasis. click here also has no SEO value – you know who ranks for “click here”? Acrobat reader… ack.
Stomme poes
Jan 1st, 2011
Alvin:
the example in the image posted for #2 should have been
(underlined link): Unsubscribe from all SparkPeople mailings
That IS the call to action. “Unsubscribe”.
Worse, when you have a list of all links on the page, “click here” “click here” “click here” and “click here” are a list of worthless nothings.
JohnnyUX
Jan 1st, 2011
For most “Click Here” calls to actions, you can generally just make the actual call to action the link. Clicking “Unsubscribe” is the call to action.
Having far too many “Click Here”s could also be a bit confusing to the user.
Amit
Jan 2nd, 2011
When I was running an email marketing campaign for a non-profit this year, I saw a significant increase in clicks when the sentence included the “Click here’ verbiage. While I have always heralded against the use of “click here’, I’ll continue to use it if it drives more clicks.
Chris Edwards
Jan 3rd, 2011
I agree with Amit. Although I despise the use of “click here” it does generate a higher click through ratio. Don’t know why, but maybe, just maybe, not everyone has figured out what the colorful text with an underline under it really is.
Dare
Jan 3rd, 2011
Agreed. It may seem noobish to the savvy internet geek, but for the mass majority #2 has (in my experience) been essential in directing them towards the next course of action. Yes, there are users who need explicit instructions on how to get to the next link.
Clay McIlrath
Jan 4th, 2011
I think it depends on the demographic you’re targeting. Click here works well for older generation users (just like large fonts and minimal design), but not for gen-y.
Allen
Feb 2nd, 2011
I too agree with adding click here… as long as you are qualifying it with a specific action/word… Just having “click here”‘s all through out your copy is ugly.
I too have done experimenting with this. I’ll send out emails with the same call to action in the copy of email campaigns. I consistently see see more click through rates with “click here to view our stuff” rather than “view our stuff” and not directing the user to click.
But I agree with Clay, some of it play with the demo’s of your audience. We’re all not 20-30 y/o UX/Web designers who know what a link looks like
Adam Kochanowicz
Mar 23rd, 2012
My opinion on this is that, if you must use it, make sure the action word is also a link. So,
this item.
is preferrable to
to purchase this item.
Otherwise, the actionable area is separate from the action word
(“click here” is not the action word because the thing I’m essentially doing is not “clicking,” it’s “purchasing.”)
Avangelist
Jan 5th, 2011
Click here is not a call to action it is the action required.
anthony
Jan 5th, 2011
It’s important not to confuse click through rate with conversion. Conversion rate is the one that matters. “Click here” may get you high click through rates, but the bounce rate is usually higher, especially if the page you take users to is not what they expect.
There’s also the issue of trustworthiness. If you tell a user to click here, and they can’t see the URL name or where the link takes them, they could get cautious and suspicious, unless it’s from a website they already trust.
Describing your links makes it clear and tells users what they can expect before they click on it. That way you have the right users clicking on your link, instead of users who didn’t really mean to click there in the first place.
Sietse
Jan 2nd, 2011
hehe nice
cool reference to those old school websites.. I can remember it was so awesome to have a wicked sound-enabled flash intropage, before entering the rest of the site… god that became annoying… Good thing people stopped doing that.
And yes.. those 3d navigation apps look cool, but in the end I always revert to easier browsing and navigation.
Petr Stedry
Jan 3rd, 2011
Ad 3) A better prompt would say: ‘Want save the game?’ (Save / Don’t Save / Cancel).
Marcello
Jan 3rd, 2011
For what it’s worth, in the English version of #5, the “Send” button is on the same line and to the right. So that just looks like a localization bug.
But the Mobile Safari version of Google Talk has plenty of other usability problems.
@clemenyeung
Jan 3rd, 2011
Thank you for the time you’ve taken to highlight these UI problems. Lots of gems to learn from here – great blog!
Pablo Cuadrado
Jan 4th, 2011
About the 4th point, just wanted to share a post I wrote, also mentioning BumpTop, as I think that this kind of literal digitalizations of a material environment are a terrible mistake.
http://silicoholic.com/2010/12/28/the-use-of-metaphors-in-interaction-design/langswitch_lang/en/
Christophe Maximin
Jan 4th, 2011
I can tell you for a fact that the reason the button “Envoyer” is misplaced is *because* you use the French version.
Proof: http://imgur.com/o51z1
You should know that designers can’t really position buttons of this kind with a variable text length, you run the risk of having a input field too small, which is worse.
Avangelist
Jan 5th, 2011
This is true, but could be the result of not considering enough localisation when building an app with multiple language support.
Now that is a big mistake of the last year! A lot of apps came out claiming multi-lingual support but were really straight up translations which didn’t use the correct linguistics of the people they were targeting.
Adam Kochanowicz
Mar 23rd, 2012
Probably, but surely you aren’t implying that it is the user’s mistake for speaking french
To complement @Avangelist, a lot of the times, the other languages are inserted from a simple copy document and put into the interface via a kind of script file to which the html files refer.
Good interface design should consider how the interface changes from replacing the copy.
Chris Hart
Jan 4th, 2011
“Your users will thank you for it.”
Are you sure about that? Users expect perfection and only mention something if its less than.
Adam Kochanowicz
Mar 23rd, 2012
Reminds me of one of my favorite quotations on design from Joe Soprano: “Good design is obvious, great design is transparent.”
Adrian Roselli
Jan 4th, 2011
The kind folks at UX Booth pointed out that I am being a passive-aggressive wimp by not making any comments here, specifically because I disagree with the premise of this post and cited it on my own blog (http://blog.adrianroselli.com/2011/01/year-end-cliche.html#5).
My issue with this post is that none of these are unique to 2010. They may still be pervasive in 2010 but they are old, dating back to the 90s (or even older). I liken it to saying that the biggest screw-up with cars in 2010 is the internal combustion engine. The issue goes back far further, it’s just that now some of us are in a position (ie, educated enough) to realize it.
I’d like to see a screw-up *introduced* in 2010, like some of the things we are seeing in touch interfaces (not just poorly-conceived hit-states, that’s old news) or the rampant attempt at duplicating touch interfaces in non-touch UIs. There is a whole new consumer UX model out there being made up, and screwed up, as we go.
dude
Mar 3rd, 2011
Oh unbunch your panties, would you? *yawn*
Julie
Jan 4th, 2011
There are some issues with the “click here” links for vision-impaired people using screen readers, as well.
http://stackoverflow.com/questions/2384493/click-here-to-read-this-article-read-more-why-these-are-bad-for-screen-reader
Amy
Jan 5th, 2011
I actually have that Samsung phone, and the problem with that cube is WAY more significant and different than what this article states. If you look at the physical buttons at the bottom of the phone, there is a button whose SOLE purpose is to launch that freaking cube. It’s right next to the essential back and end call buttons, so I accidentally launch that cube more often than I’d like.
Like many Android apps, it has no way to KILL the program FROM the program, so it sits there hogging memory until you use a THIRD PARTY app to kill it.
When I WANT it open (rarely), it’s actually a cool toy. You can rotate the cube by shaking the phone. I don’t think it was intended as anything more than a toy, which makes the dedicated button puzzling.
Adam Kochanowicz
Mar 23rd, 2012
Very interestng, Amy. Thanks for your comment.
johnny griswold
Feb 10th, 2011
For item #2 (click here), you can’t always blame the designer.
My company does work for a client who is INSISTENT that we use “click here for…” “click here to…” and/or “click here”. No matter how many times we try to get them to see the light, they won’t have it. So they get their way because they pay the bills. We do what we can to get them to change, but until we convince them 100%, they have their “click here”.
So, don’t be so quick to blame a designer for bad design.
Adam
Jul 8th, 2011
As a designer myself, I definitely agree, Johnny.
Adam Kochanowicz
Mar 23rd, 2012
Indeed, that’s an important consideration when judging any interface. The designer is not always king of the operation.
I know many of my designs have suffered due to insistence from the client that it look a certain way.