11 ms·

Small but significant usability sins that websites should never commit

50 points by pascal07 14y ago

peeters 14y ago
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?
- fromhet 14y ago
  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!
  - deleted 14y ago
    [deleted]
  - masterzora 14y ago
    (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.
    - fromhet 14y ago
      Thank you very much, I'll start using this! Very elegant solution, indeed.
  - Semiapies 14y ago
    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.
- justincpollard 14y ago
  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.
adambratt 14y ago
> 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.
- romaniv 14y ago
  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.
- AtTheLast 14y ago
  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.
- fusiongyro 14y ago
  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.
bunderbunder 14y ago
> 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.
- shawabawa3 14y ago
  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.
  - kodablah 14y ago
    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 This gives the users that want to save links and open them in other ways, but still have a good feel when left click only. Clicking on directories in Github source trees demonstrate this well.
    - LogicHoleFlaw 14y ago
      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.
adam-a 14y ago
> 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.
alanctgardner2 14y ago
I would add not using the relevant cursor for things that are clickable. Its not perfect ( especially for mobile), but its a huge hint.
smoyer 14y ago
Are there really only five? I think you could write a book ;)
zoowar 14y ago
I'd like to add: Don't reprogram the command sequence for browser page search to a site specific search bar.
- yread 14y ago
  Even Google does that the search box is always in focus so when you try to search Opera's '.' it doesn't work. I hate reaching for ctrl...
matthewlyle 14y ago
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.
- pascal07 14y ago
  As mentioned in the post, these are findings based on usability testing - direct observational research.
bluetidepro 14y ago
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.
- fusiongyro 14y ago
  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.
  - bluetidepro 14y ago
    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.
    - masterzora 14y ago
      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.
      - think-large 14y ago
        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.
dorkrawk 14y ago
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.
justincpollard 14y ago
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.
snitzr 14y ago
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.
MBlume 14y ago
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.
- bunderbunder 14y ago
  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.
- lazugod 14y ago
  Is it really important to type the delimiter? Or just to have it appear onscreen while typing?
  - adamzochowski 14y ago
    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.
its_so_on 14y ago
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!
Semiapies 14y ago
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.
ISV_Damocles 14y ago
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.
- masterzora 14y ago
  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.
think-large 14y ago
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.
kposehn 14y ago
The one about highlighted table rows makes total sense.

50 points by pascal07 14y ago

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?

fromhet 14y ago
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!
- deleted 14y ago
  [deleted]
- masterzora 14y ago
  (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.
  - fromhet 14y ago
    Thank you very much, I'll start using this! Very elegant solution, indeed.
- Semiapies 14y ago
  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.
justincpollard 14y ago
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.

adambratt 14y ago

> 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.

romaniv 14y ago
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.
AtTheLast 14y ago
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.
fusiongyro 14y ago
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.

bunderbunder 14y ago

> 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.

shawabawa3 14y ago
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.
- kodablah 14y ago
  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 This gives the users that want to save links and open them in other ways, but still have a good feel when left click only. Clicking on directories in Github source trees demonstrate this well.
  - LogicHoleFlaw 14y ago
    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.

adam-a 14y ago

> 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.

alanctgardner2 14y ago

I would add not using the relevant cursor for things that are clickable. Its not perfect ( especially for mobile), but its a huge hint.

smoyer 14y ago

Are there really only five? I think you could write a book ;)

zoowar 14y ago

I'd like to add: Don't reprogram the command sequence for browser page search to a site specific search bar.

yread 14y ago
Even Google does that the search box is always in focus so when you try to search Opera's '.' it doesn't work. I hate reaching for ctrl...

matthewlyle 14y ago

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.

pascal07 14y ago
As mentioned in the post, these are findings based on usability testing - direct observational research.

bluetidepro 14y ago

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.

fusiongyro 14y ago
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.
- bluetidepro 14y ago
  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.
  - masterzora 14y ago
    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.
    - think-large 14y ago
      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.

dorkrawk 14y ago

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.

justincpollard 14y ago

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.

snitzr 14y ago

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.

MBlume 14y ago

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.

bunderbunder 14y ago
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.
lazugod 14y ago
Is it really important to type the delimiter? Or just to have it appear onscreen while typing?
- adamzochowski 14y ago
  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.

its_so_on 14y ago

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!

Semiapies 14y ago

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.

ISV_Damocles 14y ago

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.

masterzora 14y ago
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.

think-large 14y ago

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.

kposehn 14y ago

The one about highlighted table rows makes total sense.