Small but significant usability sins that websites should never commit(elezea.com)
elezea.com
Small but significant usability sins that websites should never commit
http://www.elezea.com/2012/09/usability-sins/
53 comments
If I'm entering a credit card number, let me type the fucking spaces. Use JS to trim them before they hit the server if you have to. I once used a site that had JS specifically to prevent me from typing a space, and it was infuriating, because exactly the same amount of engineering effort could have gone into just letting me type it the way I wanted to.
Or hypens, or periods, or whatever delimiter makes the user happy.
s/[^\d]+//g <- Not just easier on your users. Easier that what you were planning to do instead, too.
s/[^\d]+//g <- Not just easier on your users. Easier that what you were planning to do instead, too.
Is it really important to type the delimiter? Or just to have it appear onscreen while typing?
Cards usually have the numbers in a groups of 4 digits. When typing into a field let me type in same groups of 4 digits. It is easier to see that there are 4 groups of 4 digits each, as opposed to counting a blur of 16 digits.
> Don’t open links in new browser tabs. Tabbed browsing is for advanced users. If you open a page in a new tab, most users will get lost. . .
And many of the advanced ones will still get irritated. I can manage my own tabs, TYVM, and don't appreciate it when web designers presumptuously attempt to decide for me when I do and do not want a page to open in a new one.
And many of the advanced ones will still get irritated. I can manage my own tabs, TYVM, and don't appreciate it when web designers presumptuously attempt to decide for me when I do and do not want a page to open in a new one.
Very true, this is especially a bugbear of mine when browsing on iPhone. All too often I have eight tabs open that I'm meaning to get back to. Then I click on a link (or accidentally click an ad) and my heart lurches as the link opens a new tab, so Safari very helpfully destroys my oldest tab and I lose whatever was there. I've noticed quite consistently that this behavior comes with sites that just want to keep you on there, so they open external links in a new tab, usability be damned.
I hate that too, and here's a way to get that tab back: wait for the new page to load, and then the back button works, taking to back to the not-exactly-overwritten page.
I think that works if you follow a link from another app, but not if it is a popup from safari? Or maybe they changed this in ios 5
This is a sad commentary on the computer literacy of the average user. Tabbing is a basic, basic concept graspable by small children.
Note that I'm not at all disagreeing with the point, but.. geez. People are dumb.
Note that I'm not at all disagreeing with the point, but.. geez. People are dumb.
It's amazing how many things there are that small children can learn readily, where adults have a difficult time learning. Languages, musical instruments, even things as mundane as people's names.
The loss of neural plasticity as we age is certainly regrettable at first glance. But it's not all downsides, and it can hardly be summarized with a flip, "People are dumb." There's evidence to suggest that it's actually an annealing process that's necessary part of staying smart and perhaps even achieving mastery of one's specialty. People who work in machine learning are all familiar with analogous concerns such as overfitting.
The loss of neural plasticity as we age is certainly regrettable at first glance. But it's not all downsides, and it can hardly be summarized with a flip, "People are dumb." There's evidence to suggest that it's actually an annealing process that's necessary part of staying smart and perhaps even achieving mastery of one's specialty. People who work in machine learning are all familiar with analogous concerns such as overfitting.
I think he means don't make links automatically open in new tabs when you left click them, middle mouse or whatever will still open in a new tab.
This is what a lot of websites seem to have a problem with. It's not that difficult to put an href in your anchor. Then in your click handler, simply check modifier keys (ctrl, alt, shift) and if none of them are pressed, return true. Otherwise, do your HTML5 history (or hashbang) URL change normally. Here's kinda how I've done it in CoffeeScript (though not sure if exactly right):
linkClickHandler = (e) ->
# can't have meta key
if not e.originalEvent?.ctrlKey and not e.originalEvent?.altKey and not e.originalEvent?.shiftKey
# defer the work so we can kill the link right away
deferred = () =>
href = $(e.target).attr 'href'
if href?
#do something here like history.pushState
setTimeout deferred, 0
# stop bubbling and return false
e.stopPropagation()
return false
else
return true
How does that respond to middle-mouse-clicks? I use that for open-in-new-tab functionality all the time. There's no need to chord the mouse and keyboard together for it. Right-click->context menu is the same way.
From my experience, middle mouse clicks do not trigger the handler. Here's a fiddle to test: http://jsfiddle.net/GTWfn/. Try middle-clicking that link vs. left clicking.
I strongly disagree with some of these from the user feedback I've always heard. Yes, I'm sure target audience matters on some of the points but come on, "Most users don’t know what FAQ stands for". That's just ridiculous and you provide no evidence to support this claim. I feel like these "sins" are major shots in the dark with no real studies to back up such big claims.
His point about FAQs being out-of-context is completely valid. Every page on CenturyLink's site links to a help page that (IIRC) has a random mishmash of questions about billing, setup, technical support and whatnot. It would be much better to answer billing questions on the billing page and technical questions on the support page, and so forth.
A problem is that a number of users also instinctively look for FAQs to answer any questions. However, in theory your solution is far more elegant and correct.
Fortunately, any well-designed (from a back-end perspective) site should have no problem presenting the relevant information both on the relevant page and on a catch-all FAQ document. This would allow the site to elegantly handle everything properly.
Fortunately, any well-designed (from a back-end perspective) site should have no problem presenting the relevant information both on the relevant page and on a catch-all FAQ document. This would allow the site to elegantly handle everything properly.
I can agree in that context but the author specifically says "Most users don’t know what FAQ stands for", which I disagree with. But to what you mean, yes, the way FAQ's should be presented may vary, depending on the site.
It definitely depends on your audience but the general non-tech audience probably doesn't know what "FAQ" stands for on average. In fact, most of the things you tech for granted among a tech-savvy audience disappear if you are targeting an audience that includes a non-trivial non-tech segment.
Source: Working at a startup with a wide audience. The email consisting only of the subject line "WHAT IS PASSWORD" was not the least-savvy email received.
Source: Working at a startup with a wide audience. The email consisting only of the subject line "WHAT IS PASSWORD" was not the least-savvy email received.
This sort of thing is very dependent on a person's age too.
I know a lot of my peers would know what FAQ means and what a password is. Even some of the "less" tech savvy people. But late adopters who are still using 10 year old PCs usually don't know.
Before I hear claims of ageism, it is just a fact that a higher percentage of the older generations don't know how to use computers. It isn't ALL of them but they didn't have the benefit of growing up with computers as a tool, to the point where they become second nature.
I know a lot of my peers would know what FAQ means and what a password is. Even some of the "less" tech savvy people. But late adopters who are still using 10 year old PCs usually don't know.
Before I hear claims of ageism, it is just a fact that a higher percentage of the older generations don't know how to use computers. It isn't ALL of them but they didn't have the benefit of growing up with computers as a tool, to the point where they become second nature.
He may not have studies, but he has spent days conducting usability tests. How many days of usability tests and how many studies do you have to back your claims?
Well, I guess if you are going to question my credibility I will back it up for you. I'm the senior UI/UX designer at Angie's List (a major US company), so we actually do countless usability tests through the abundant site visits we get. So, that can easily back up my claims.
I understand you may be defending the author but maybe think twice before you try to discredit someone so quickly, without any knowledge of their background?
I understand you may be defending the author but maybe think twice before you try to discredit someone so quickly, without any knowledge of their background?
I understand you may be defending the author but maybe think twice before you try to discredit someone so quickly, without any knowledge of their background?
There is nothing wrong with questioning credentials when things get down to a he-said-she-said. Your comment provided no reason to think you had anything more to back up your claims than the usability studies of the OP. If knowledge of your background is going to be important, that might be something you should mention.
There is nothing wrong with questioning credentials when things get down to a he-said-she-said. Your comment provided no reason to think you had anything more to back up your claims than the usability studies of the OP. If knowledge of your background is going to be important, that might be something you should mention.
Depending on the target audience of the web-site, I can see that there might be large percentages of web-site users who don't know what a FAQ stands for. Anecdotre of one -- I recently emailed a mortgage lender with the word "docs" (instead of "documents") in it and she actually sent me an email asking me what was "docs"? Sometimes things that seem very apparent to us due to the group we move around in may not be apparent to others outside the group.
Back when everyone was using NCSA Mosaic to look at your website, it was reasonable to expect most users to understand the word "FAQ". However, it's 2012.
> I feel like these "sins" are major shots in the dark with no real studies to back up such big claims.
As mentioned in the post, the claims are indeed based on real studies: observing users as they perform prescribed tasks in a usability testing lab.
As mentioned in the post, the claims are indeed based on real studies: observing users as they perform prescribed tasks in a usability testing lab.
This article was written to express findings of one study ("two days running usability tests") with specific products ("websites that sell financial products like life cover, funeral policies, and annuities") for a specific target market ("lower-income users who access the Internet at least once a day on a desktop at home or work, or on their phones").
Take the information with a grain of salt. It's a positive thing to think about how a user outside of the early adopter cohort will use a product. Maybe not right at first, but at least later on when your company outgrows (hopefully) its first users.
Take the information with a grain of salt. It's a positive thing to think about how a user outside of the early adopter cohort will use a product. Maybe not right at first, but at least later on when your company outgrows (hopefully) its first users.
Always know your audience. Hacker News readers are not most users and you won't always be designing for them. You wouldn't believe what hangs up most users unless you saw it yourself. This is true for the web as well as all devices. Forgo testing with real users and prepare for a high bounce rate.
Disagree with the "never" highlight rows in a table. If you have a number-heavy table with lots of rows and columns, it's the perfect way to help users read the data shown.
Of course, this sort of thing is more common on intranet sites, not exposed to the general public, so it's simply "Know Your Audience", as usual.
Of course, this sort of thing is more common on intranet sites, not exposed to the general public, so it's simply "Know Your Audience", as usual.
That sort of highlighting almost never should be relegated to a mouseover event. Besides the issue mentioned in the article, if the only way to reliably read a row of data is for it to be highlighted then highlight-on-mouseover makes it a bitch to read more than one row on a table.
These are far to presumptive to be general truths. You mean to tell me that the percentage of (even first-time) visitors to Hacker News that know what PDFs and FAQs are is less than 99%?
Also where is your data coming from in the first place? Are your claims based on any non-anecdotal evidence?
Also where is your data coming from in the first place? Are your claims based on any non-anecdotal evidence?
I think that "in-person usability testing" refers to the process of actually watching a user use a product. I agree with you that these aren't general truths, but I don't see where the author said that; the author said that these are "general findings". Also, they are general findings for a specific target market: "lower-income users who access the Internet at least once a day on a desktop at home or work, or on their phones". My guess is that anyone who visits Hacker News does not fall in that target market.
In the article, OP explains that they (there should be a gender neutral singular pronoun in english) are in middle of analyzing data from a certain income group who are used to getting around the web, who handle both desktops and phones. It's in the first or second paragraph!
(there should be a gender neutral singular pronoun in english)
There are a number of attempts at this but I've found Spivak pronouns (specifically the Elverson set) to be a particularly elegant solution. The easiest description is "the 'they'-form pronouns without the 'th'". Thus, your first sentence would become "In the article, OP explains that ey ([...]) are in middle of analyzing data from a certain income group who are used to getting around the web, who handle both desktops and phones."
Anecdotally, I've found most people seem to understand what I'm saying online and offline people either understand me or think I'm saying "they" and understand my point anyway. Plus, this pronoun set sounds more natural than other constructions and is easy to remember since it's keyed to a set you already know.
There are a number of attempts at this but I've found Spivak pronouns (specifically the Elverson set) to be a particularly elegant solution. The easiest description is "the 'they'-form pronouns without the 'th'". Thus, your first sentence would become "In the article, OP explains that ey ([...]) are in middle of analyzing data from a certain income group who are used to getting around the web, who handle both desktops and phones."
Anecdotally, I've found most people seem to understand what I'm saying online and offline people either understand me or think I'm saying "they" and understand my point anyway. Plus, this pronoun set sounds more natural than other constructions and is easy to remember since it's keyed to a set you already know.
Thank you very much, I'll start using this! Very elegant solution, indeed.
I used to resist using the singular "they" for one person (preferring Spivak pronouns) until someone pointed out to me that documented use of singular they for someone of unknown gender dates back to the 1600s.
And, perhaps most importantly, people will understand you when you say or write it.
And, perhaps most importantly, people will understand you when you say or write it.
[deleted]
While these sins are good things to be thinking about when building a site lists like this can be dangerous if they cause people to make a fundamental error; assuming you know what "most users" or the "average user" know or want without actually doing some basic usability/UX testing.
One of the most important things to consider when thinking about usability/UX is that if you built it then you're not a good authority on what it's like to use it.
One of the most important things to consider when thinking about usability/UX is that if you built it then you're not a good authority on what it's like to use it.
I would add not using the relevant cursor for things that are clickable. Its not perfect ( especially for mobile), but its a huge hint.
> Don’t open links in new browser tabs
I agree that this can be confusing, but it's helpful for external links. I'd rather have a user be confused for a minute than have them completely forget about my website. Not to mention, when you close the new tab you'll probably end up looking at the tab containing my site again. At the end of the day, it's a usability vs visibility tradeoff.
> Don't have an FAQ page
Do you really think most users don't know what a FAQ is? Unless your target audience is 12 year olds I really doubt this is true. I do agree though that having a separate page for your FAQ means your workflow is lacking the proper information users are looking for.
> Don’t give table rows highlighting mouse-overs if the rows aren’t clickable
Totally agree. I think this is the biggest thing Twitter bootstrap gets wrong. Sure it's easier for lining up a row, but if you use zebra striping that won't be an issue.
I agree that this can be confusing, but it's helpful for external links. I'd rather have a user be confused for a minute than have them completely forget about my website. Not to mention, when you close the new tab you'll probably end up looking at the tab containing my site again. At the end of the day, it's a usability vs visibility tradeoff.
> Don't have an FAQ page
Do you really think most users don't know what a FAQ is? Unless your target audience is 12 year olds I really doubt this is true. I do agree though that having a separate page for your FAQ means your workflow is lacking the proper information users are looking for.
> Don’t give table rows highlighting mouse-overs if the rows aren’t clickable
Totally agree. I think this is the biggest thing Twitter bootstrap gets wrong. Sure it's easier for lining up a row, but if you use zebra striping that won't be an issue.
When you say "I'd rather have a user be confused for a minute than have them completely forget about my website" you're essentially saying that you'd rather the user have an unpleasant memory of you than no memory at all. That seems like a pretty shallow notion of branding. I'll never forget ExpertsExchange, it doesn't mean I ever wish I still had to visit it.
Web designers should standardize on visual clues that indicate when the link will:
1) Just open something normally.
2) Open it in new Window/tab. Maybe browsers should automatically do something about those links? Like displaying a different cursor on mouseover?
3) Perform an action that doesn't navigate away from the current page.
4) Is not a real link and sits there only for mouseover events. This is often denoted by dotted underline, but no everyone uses that convention.
1) Just open something normally.
2) Open it in new Window/tab. Maybe browsers should automatically do something about those links? Like displaying a different cursor on mouseover?
3) Perform an action that doesn't navigate away from the current page.
4) Is not a real link and sits there only for mouseover events. This is often denoted by dotted underline, but no everyone uses that convention.
I really like the table hover effect. It gives me a visual cure of what row I'm currently on. However, I always make sure it's a subtle highlight color.
Are there really only five? I think you could write a book ;)
Another important thing to consider is your target audience. If you are designing a site like github that targets developers then you can probably assume they know what a FAQ page is.
I think that overall, this article isn't highlighting sins, but more pet-peeves. I get annoyed by some of these things as well and I think good website designs should incorporate better options. But unless you present me with a study that is broken down by generation on who doesn't know what a FAQ is I'm going to have to throw the BS flag here.
I think that overall, this article isn't highlighting sins, but more pet-peeves. I get annoyed by some of these things as well and I think good website designs should incorporate better options. But unless you present me with a study that is broken down by generation on who doesn't know what a FAQ is I'm going to have to throw the BS flag here.
> Don’t open links in new browser tabs
> Tabbed browsing is for advanced users. If you open a page in a new tab, most users will get lost
This is the default behaviour for Twitter and Facebook, two of the biggest sites on the net. It is arguably the biggest reason why FF originally won market share over IE. And Chrome centres it's whole UI around tabs.
Maybe for certain audiences this is still good advice but I don't think it is a truism anymore.
> Tabbed browsing is for advanced users. If you open a page in a new tab, most users will get lost
This is the default behaviour for Twitter and Facebook, two of the biggest sites on the net. It is arguably the biggest reason why FF originally won market share over IE. And Chrome centres it's whole UI around tabs.
Maybe for certain audiences this is still good advice but I don't think it is a truism anymore.
This is an interesting post (the required-field point in particular), but I think I'll make the opposite of the usual HN page-usability complaint. Unlike a lot of blog posts I've looked at today, this design is clean, readable, and doesn't try to give me a headache with low-contrast text.
It's a pleasure not to have to hit Readable for once.
It's a pleasure not to have to hit Readable for once.
There's a lot of positing here. To assume the "average user" doesn't understand what browser tabs, PDFs, and FAQs are seems ... odd. Now these may or may not be fine tips, but they are not recommendations based on best practices or any research that I can tell. If they are, I'd be interested in seeing it.
As mentioned in the post, these are findings based on usability testing - direct observational research.
The one about highlighted table rows makes total sense.
the asterisk. even after 10 years of this (or is it 15?) i still look for the footnote :(
... made worse by the fact that sometimes there is one!
... made worse by the fact that sometimes there is one!