Recognising a Bad User Interface at First Glance

http://www.hadermann.be/blog/134/recognising-a-bad-user-interface-at-first-glance/

by amberes • 11 years ago

106 89 11 years ago

thoman23• 11 years ago

These are always useful reminders. It's easy to get so lost in designing a system that you forget the perspective of the user, which is what really matters.

One of my current favorites is Rocksmith (guitar learning software), where upon exiting you are prompted with "Do you wish to continue? Yes/No". You as the user need to essentially state, "Yes, I would like to continue...exiting the program". This is right next to another menu option that I sometimes accidentally select which prompts me to "Quit", which in fact just brings up the "select profile" screen. It does boggle the mind how some things like this get all the way to production.

reagency3• 11 years ago

Apple's HIG from THIRTY years ago say to not use Yes/No in dialogs.

dragonwriter• 11 years ago

The real problem wasn't just Yes/No, it was "Continue" to mean Exit (Continue exiting). Which would have been just as bad if the verb from the question were pushed into the options, as "Do you want to continue? <Continue> <Stop>", where "Continue" still means, as in the question, "continue exiting" and "Stop" means "stop exiting".

"Do you want to exit? <Yes> <No>" would improve what was presented, though, yes, "Do you want to exit? <Exit> <Don't Exit>" would be better. But it was the question more than the manner that the responses were presented that was the problem.

nathan-muir2• 11 years ago

The Design of everyday things [1] (Found on Coding Horror's recommended reading [2]) was crucial in understanding how people intuitively interact with the world around them - including your web application - based on the visual cue's you provide.

While this article provides some metaphorical fish - I found the Design of everyday things helps you become a fisherman.

EDIT: Swapped the order of references.

[1] http://www.amazon.com/Design-Everyday-Things-Revised-Expande...

[2] http://blog.codinghorror.com/recommended-reading-for-develop...

kylebrown2• 11 years ago

Your reference [1] confused me because most of the books I saw were about code and design patterns, or books by Tufte. I also didn't realize what DoET meant, on first glance.

nathan-muir2• 11 years ago

Fair enough. I've reworded that part.

andygmb• 11 years ago

Use of image-only icons/buttons that have no distinctive meaning

There's nothing worse than this, along with no alt-text on web pages. With font-icons being so common nowadays, designers want to remove all text and revert back to hieroglyphics.

userbinator5• 11 years ago

I've heard it expressed this way: "A picture is worth a thousand words, but there are times when a single word will do."

woofyman• 11 years ago

You don't have to localize icons which is a feature.

dogweather• 11 years ago

This feels like one of those articles that the people who need to read it never will; developers who don't care to improve their craft, and are churning out software to check off some box in a list of features demanded by management.

elektromekatron• 11 years ago

Shotgun full of buttons is your standard coder designed UI.

Many of the common alternatives are worse though, I prefer a shotgun full of buttons to many of the supposedly simpler systems unless they are very well thought out.

Good UI is very hard.

edit - to me, really good UI is simple shit like things that gather system stuff, then install while gathering user stuff. When that started coming in as standard with many linux installs, I almost wept ;)

tinbad• 11 years ago

Not saying this is a bad article but the 'first glance' part seems misleading. There's lots more to read than the title suggests.

userbinator5• 11 years ago

I agree with some of the points (like ambiguous icons and vague error messages), but not all of them.

‘If you are an X, then you have to fill in Y and Z. If you are not an X, please only fill in Z, unless Z=1, then you should fill Y too.’

This could be simplified considerably: "Fill in Z. If you are X or Z=1, fill in Y." Although I'm not surprised that refactoring boolean expressions is something that a lot of people seem to have trouble with.

In some cases it can be better to have a more human, relative notation, e.g. ‘within the last hour’, ‘yesterday’, ‘next week’…

Actually I really, really abhor this style of date formatting since e.g. seeing events all dated "yesterday" - possibly on different sites - make ordering/comparing them nearly impossible. Is ISO 8601 really beyond comprehension for most of the population?

The user interface is totally empty when starting out

Unless you mean completely empty (as in devoid of any buttons or other widgets), I don't think that's a bad thing. It's funny that it mentions adding an explicit instruction "Click ‘add contact’ to add your first contact." when the next point is "Visual clutter", since it could very well be the case that the users are confused because after removing that "Visual clutter", "add contact" doesn't even look like a button anymore! Incidentally, this trend of "flat" UI designs is another thing I loathe.

Am I the only one who thinks it's rather sad that, despite society spending great effort over the last few hundred years to improve literacy (which was quite successful), we're now dumbing-down software to encourage basically the opposite?

navait• 11 years ago

Literacy and user interfaces are not related. Literacy is a tool people use to record and transmit information, which in turn allows people to learn and improve themselves. Software is meant to accomplish a task, the UI being the way you explain to the computer

I don't care much about the process of how paper and bindings are made, I just want to be able to read my book. Most users prefer the software just do what they wanted it to do with minimal cognitive load. Users that can use the software spend less time calling support, and more time happily using the application. If we made software smarter, what benefit would gain vs dumbing it down?

userbinator5• 11 years ago

I'd argue that computer literacy also "allows people to learn and improve themselves with respect to using computers".

I don't care much about the process of how paper and bindings are made, I just want to be able to read my book.

"I don't care much about the process of how sentences and grammar work, I just want to be able to know what the book says."

We force people to learn reading, writing, maths, and various other subjects in school because they have long-term advantages in improving the overall knowledge of society and empowering its population, despite many of them finding it useless and frustrating initially.

With the permeation of computers everywhere, perhaps the same should be true with their interfaces: they should not be dumbed-down or excessively hand-holding, nor have an entirely flat learning curve. Computers are powerful and immensely flexible machines, and in some ways I think it's a shame that we're taking away a lot of great opportunities for learning by making UIs that encourage their users to remain in a state of blissful ignorance...

TimFogarty• 11 years ago

Yes I'm shocked by how UIs dealing with very precise things sometimes use imprecise dating like "tomorrow".

On the DHL website, if I am ordering a collection for a certain time, I have to choose if I want it for "tomorrow". If it's 23:00 BST from where I am accessing the website and I'm ordering the collection from a country in EEST, am I ordering the collection for one or two days from now?

This kind of sloppy UI from a company that does logistics (which is supposedly quite a precise thing) is utterly unacceptable.

The DHL website is a cornucopia of bad UI patterns.

steveax3• 11 years ago

I really hate the "humanized" dates in the github website interface. "3 days ago" is not useful to me when I'm comparing dates.

Terr_• 11 years ago

I have a constant low-level battle in my company (not DHL) to try to folks to understand that we are an international company... and therefore their fields like "completed on" need a time-component, because not everyone has the same workday.

These are "product owners" who are themselves in satellite offices in other timezones...

paulojreis3• 11 years ago

This kind of sloppy UI from a company that does logistics (which is supposedly quite a precise thing) is utterly unacceptable.

Big corp's UX approach is almost always buzzword-driven, not customer-driven. :)

coldtea• 11 years ago

This could be simplified considerably: "Fill in Z. If you are X or Z=1, fill in Y.".

If I have to solve an equation to user your app, a) I won't, b) It's badly designed.

diziet• 11 years ago

Fill in your address. If you reside in a PObox or appartment, fill in the appartment box.

mdpopescu• 11 years ago

That is not an equation...

_sh• 11 years ago

"Fill in your job title. If you are unemployed or a student, put N/A."

Hardly equation solving.

vitd2• 11 years ago

"Is ISO 8601 really beyond comprehension for most of the population?"

Absolutely! I have had to program date-related code, and I am familiar with the differences between US and European date formats, and I have never heard of ISO 8601 before today.

The average person from the US will assume that 2015-04-03 is March 4th, 2015, while a typical person from Europe will assume it's April 3rd, 2015. You're still thinking in the context of a computer programmer, not the context of a user.

ryukafalz• 11 years ago

I'm in the US and I've never heard of 2015-04-03 being interpreted as March 4. I just see the standard interpretation as logical, since it's coarse (year) to fine (day).

userbinator5• 11 years ago

The average person from the US will assume that 2015-04-03 is March 4th, 2015

No country, including the US, uses YYYY-DD-MM:

https://en.wikipedia.org/wiki/Date_format_by_country

I'm a bit surprised that you "have had to program date-related code" and "have never heard of ISO 8601", because it is practically the standard for date formatting. I know non-programmers from different countries including US/UK/EU, and although they probably haven't heard of ISO 8601 either, they have absolutely no trouble understanding YYYY-MM-DD HH:MM:SS. This is a very small sample size and probably not representative, but I doubt many people would attempt to parse it as YYYY-DD-MM.

thaumasiotes2• 11 years ago

I'm not sure I can really speak to how the "average person from the US" would deal with 2015-04-03, but two data points:

1. Everyone I personally know would know that that meant 4/3.

2. 4/3 in US usage is April 3rd. As I understand it, it's March 4th in European usage, but you say they have no problem with YYYY-MM-DD. I tend to suspect that you sort of half-learned that "US dates are backwards from European dates" and then misapplied that lesson here.

viraptor2• 11 years ago

[post reading comprehension fail, disregard post]

sandstrom• 11 years ago

Obligatory XKCD: https://xkcd.com/1179/

Frozenlock• 11 years ago

"Is ISO 8601 really beyond comprehension for most of the population?"

No. It's the _only_ representation that makes sense and is easy to read everywhere. (Assuming you show it into the user timezone.)

Year -> Month -> Day -> Hour...

BIG -> Medium -> small -> smaller...

And because the year has 4 digits, you instantly know it's a year value.

There is nothing more infuriating than those silly "yesterday" "a week ago" and other cute time formatting. What if I wanted to know the precise hour, instead of a vague "yesterday"?

And don't get me started on the completely, utterly stupid "11/09/14". I'm French Canadian with many software configured halfway between US, Canadian and European standards. So when a software/website tries to be a smart-ass and gives me "11/09/14", It might be day-month-year, or year-month-day, or month-day-year. Yeah, fun times.

lentil_soup• 11 years ago

This could be simplified considerably: "Fill in Z. If you are X or Z=1, fill in Y."

You could easily have the computer present to the user the option to fill Y only when the conditions are met (or something similar). Why leave it up to the user to decide with a confusing message box?

DanBC3• 11 years ago

EDIT: disabled zoom?

It's weird to me that Google fails, hard, on so many ui things.

Here's one example from the Gmail app on iOS, from the feedback screen.

http://imgur.com/a/koKRb

The [done] button is where the [return] button usually is; and it's directly over the [send] button. So if you don't notice that return is now done, and tap it twice to get a new paragraph, you just sent your unfinished feedback.

I blame Google, but it could be Apple being stupid with the dreadful iOS keyboard.

possible to get a pretty good impression of whether the user interface was thought about or rather just an afterthought.

I'm sure Google spends a lot of time and money on the UI. Which just makes it more frustrating to me. EG Chrome's (on iOS) address bar does not let you select and copy an address until the page has nearly finished loading. And to paste an url into the bar you don't tap the cursor but some mid-point of the address box - except it's flat UI so you just guess where to tap. Items in the burger menu take five seconds to become clickable.

kylebrown2• 11 years ago

EDIT: disabled zoom?

Hah, the OP article does disable zoom. Disabled zoom is one of the frustrating things lately about iOS apps. Every time I try to show someone older than me something in a Skype chat, or (speaking of google) in a hangouts chat on the iPad... they cant read it - "Hang on... let me find my glasses."

dragop• 11 years ago

The web interface login page recently changed so first you type in your username, then have to switch to the mouse to click "next", then type in your password. (Perhaps not as bad as one website I know that disables tabbing between the two fields!)

Anyone know if there's a reason behind such a clunky interface change?

reagency3• 11 years ago

Google puts a lot of time and money into copy Apple UI and then overdoing it, not into building a usable UI.

vixsomnis• 11 years ago

As someone who hasn't worked in the software industry yet, stories like these are beginning to horrify me. Is the bar really this low?

kazinator2• 11 years ago

Yes -- but only by default! If you go to Tools -> Page Setup -> Zoom -> Sidebar -> Tweaks, and then click on [+] next to Polling Interval to expand the box, a "Bar:" property appears, where you can enter a lower number to set the bar lower. Or just use the arrow buttons next to the field to increase or decrease it. (But note that if you already typed a number, and then use the buttons, it increments from the old number that was overwritten, not from what you typed. (Bugzilla item dating back to 2006, status UNCONFIRMED.))

paulojreis3• 11 years ago

It is. One of the most basic usability references talks about this [1] and:

1) Nobody cares - nobody respects it; 2) People make posts saying " it dawned on me that a trained eye can often spot unfriendly software a mile away" as if this is something new!

[1] Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256.

baddox• 11 years ago

I've never heard the term "hallway testing" before, and I'm assuming I'm inferring its meaning correctly. I'll be using it in the future.

icebraining3• 11 years ago

Why assume when there's Wikipedia? :)

https://en.wikipedia.org/wiki/Usability_testing#Hallway_test...

taspeotis• 11 years ago

A bit dated, but relevant: http://interfacehallofshame.eu/www.iarchitect.com/lotus.htm

And its complement: http://hallofshame.gp.co.at/fame.htm

tommoor• 11 years ago

For some more recent good examples check out http://littlebigdetails.com/

JohnTHaller• 11 years ago

Oh dear god. Lotus Notes. I just twitched a bit.

steveax3• 11 years ago

We really have gotten better (and expectations are higher). Remember the abominable multi-row tab control dialogs common in Windows apps [1] shudder. Does anyone remember Debabelizer? [2] Really amazing piece of software with an interface that, ummm, well, here's the batch catalog setup dialog [3]

[1] http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm

[2] https://en.wikipedia.org/wiki/Dave_Theurer

[3] http://pangram.org/images/debab.gif

reagency3• 11 years ago

What's wrong with 3? It has a lot of options because the user needs control. They are well organized.

kazinator2• 11 years ago

Recent stupidity: UI asked for postal code (knowing the address being entered was Canadian.) Without thinking, the user (not me) put it in as L6A 3Z3. When the form was submitted, it was rejected with the field flagged in Red. the error message said like "please enter the Canadian postal code in the correct format, AnAnAn with no spaces." (AnAnAn? Cryptic to non-coders; the user was baffled.)

Postal codes are written with the space:

https://en.wikipedia.org/wiki/Postal_codes_in_Canada

If you're already validating the format, how much effort would it take to recognize and accept the common variant which has the space in it? A [ ]? in the regex, and a strip spaces function call.

vitd2• 11 years ago

This causes me no end of grief. Credit card fields where you can't enter spaces, phone number fields where you can't format the numbers like a phone number. It's literally a few lines of code to pull out just the numbers! So infuriating.

mgkimsal• 11 years ago

we get store survey codes on receipts from a local store. "please go fill this out online". OK.

On the receipt: 9873-435-289-6372-9983

Go to their survey page

"Please enter the survey code without the dashes".

WTF? Left hand, please meet the right hand.

TheLoneWolfling4• 11 years ago

Unneeded use of separating lines, grouping boxes,.. less of these = easier on the eye.

I seriously disagree with this particular assertion. I find that "flat" design trends make things much less usable, and this is no exception. It is far easier to group things with visual references than with lack-of-visual-references. And it is far easier to find things like buttons if there are, say, actual indications that they are buttons.

sopooneo• 11 years ago

There's a balance to be struck. The pendulum may have swung too far towards the minimalist, but it used to be much more common to have lines and boxes around everything, where simply removing them and leaving open space made the layout easier to quickly grasp.

TheLoneWolfling4• 11 years ago

Maybe. But if so, this mythical "open space makes things easier to grasp" unicorn has failed to show its face to me even once.

And, one other thing. Layouts that have too much delineation degrade much more gracefully than layouts that have too little.

chatmasta• 11 years ago

The user interface is totally empty when starting out. When seeing a ‘clean’ installation or account, there are no instructions to get you started.

This is such a big problem, and such low hanging fruit, it sucks to see products fail to implement proper onboarding. I understand why... writing user interfaces is a pain in the ass. Onboarding is usually done after "finishing" the code (of course the code is never actually finished), so generally most programmers are probably so exhausted after writing the code that implementing an additional onboarding process seems like too much trouble, because "JUST SHIP IT!"

It's like the programmers do 95% of the work, then stop caring about the last 5%. But it just means that the 95% goes to waste.

vincentbarr• 11 years ago

"Too much text/instructions"

I disagree that too many characters or too much instruction is a sign of a bad interface.

For users trying to complete their desired task, an interface lacking instruction/explanation will often cause lower task completion rates and longer average task completion times than an interface with verbose instructions. This is especially true for new users.

Don't get me wrong: I dislike wordiness and consider myself an advocate for simplicity, minimalism, and concision – and that might be the author's sentiment. However, while bloated instruction may hinder task completion and user engagement, incomplete instruction will prevent it.

I believe more useful measures of good instruction are when it is presented, where it is presented, and how well it is understood by users.

For example, a well-designed mobile app avoids a text-heavy interface by disclosing the appropriate amount of instruction at the appropriate time. Limited screen real estate happens to be a handy constraint in this case, and transfers more instruction responsibility onto a well-designed onboarding wizard. That wizard will really only get one shot to educate users, usher them to their 'aha' moment as quickly as possible, and hold their hand through the few actions that strongly influence successful user engagement and retention.

asdfas123414• 11 years ago

You are absolutely correct with your description of the user interface principles you espouse. Provide the right help information at the right time but otherwise stay out of the way.

However, I believe the author's sentiment was more focused on situations where programmers use instructions to avoid more complex display or validation logic. IE, less work to add some text than to properly display/hide form sections based on skip patterns.

"If you are an X, then you have to fill in Y and Z. If you are not an X, please only fill in Z, unless Z=1, then you should fill Y too." This is typical of programmers being ‘smart’ by avoiding some extra steps/code...

anigbrowl2• 11 years ago

On the other hand, developers have a knack of seeing everything as the user interface they’re most familiar with: their development IDE.

Along with the bizarre idea that the best interface of all is one that forces the user to write code of their own. Look folks, if everyone wanted to type then text adventures would still be top of the video game charts.

icebraining3• 11 years ago

Yet text chats are much more popular than videochat. Typing makes sense in some situations, and not in others. What works in videogames is not necessarily adequate for other UIs.

Aoyagi• 11 years ago

What? Isn't "2015-06-29 15:44:21 EST" the ISO format? Can't think of anything more relevant.

dghf2• 11 years ago

ISO 8601 format would be 2015-06-29T15:44:21-05:00.

wongarsu• 11 years ago

Replacing the T with a space is explicitly allowed by ISO 8601 if context makes it obvious that the date and time belong together. I prefer the version with space for many purposes since it's easier for humans to parse at a glance.

You are correct that time offsets are used instead of timezone names. The most obvious reason for that is that many names are ambigious (EST is either UTC-5 or UTC+2, depending on whether you live around the US or around Egypt).

paulojreis3• 11 years ago

Well, this is nothing new. It's called heuristic evaluation and it's been around at least since 1990 [1]. Almost every item in the article's list maps to a simple and well known heuristic.

It's very strange (or sad) that the author doesn't mention heuristics in his post and talks about his conclusion as something "new": "it dawned on me that a trained eye can often spot unfriendly software a mile away." It may have "dawned on you", but it's nothing new.

It never ceases to amaze me, how oblivious of basic usability the people in IT are.

[1] Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256.

zamalek• 11 years ago

I mostly agree, however one point I disagree very strongly with is the first: An Excel/development IDE – like user interface

IDEs are horrible, horrible examples of interface design I can easily agree with that. However,

Excel is the most unconstrained application most people know, and a lot of software starts out as an Excel sheet before growing up into ‘real’ software.

Usability comes first and foremost. If most people are familiar with Excel that means that the Excel interface language is a good language (if not the best). I don't care if it doesn't sate the desire for an "elegant" user interface. The fact is that nearly all users already know how to use the interface and are extremely proficient with it: what more could you possibly want out of an interface? Scrolly fiver-finger gestures and other complete shit that you don't need? YAGNI.

We make huge sales based on usability. Our bigger customers have historically placed us into a competition during our initial sales pitch. If the sale ends up in that situation we always win. Why? Because by the time customers are using our software to build toy/test solutions our competitors are still training the customer. Why? Because usability comes first and foremost, because our UX guys don't let pet peeves about Excel get in the way of making great and usable interfaces.

If you can "unconstrain" your solution enough to make it fit into a spreadsheet then I say, "go for it."

vlad• 11 years ago

A great user interface is dangerous when it's disconnected from the internals of the software, because the user starts to feel the software "is only pretending to be nice" and is fighting against them.

When an app loses hours of your work, you start to wish you used an app that took more clicks to use but actually focused on the internals.

I'm making daily videos at Rate My App (.com) and the latest version of ScreenFlow 5 (screen capture software) is known for the best user interface, but in fact impossible to feel safe recording even the most basic videos with.

- Forces you to delete your videos with endless prompts or forcefully shut down the app if you do a File -> Rename...

- Let's you record a new project but will not actually save it if it recently had an issue (above), so you lose that one, as well

- Does not explain that clicking Remove in the infinite prompt actually deletes all the video content. Does not backup for you, either

- Doesn’t always show YouTube categories, but allows you to click Start Upload, in which case the uploads remain in the upload queue forever. Issues or errors with video sites are not mentioned, the upload just stays in the queue.

- Warns about uploading videos greater than 15 minutes long on YouTube even though you’re exporting a 5 second range

- Their most important feature, video actions (keyframes) don't work. Modifying one randomly modifies another one, so I stopped using it. This was a major bug until it deleted a 1.5 hour project of mine. Now, it seems minor.

mikehawkins• 11 years ago

I agree... especially with the comment about terse and unclear error messages. I recently got lured into the customer-facing side of things, and nothing annoys me (or our new users) than a message like "Incorrect syntax" when I used a unsupported symbol for my password.

First, be clear with your design and instructions. In my hasty password example - "Please create your password (6 or more characters, letters and numbers only)"

Then - if the user messes up, explain a bit... "Whoops, please only use letters and numbers"

So, so much nicer. :)

</rant>

Recognising a Bad User Interface at First Glance

Related Stories