5 ms·

Mistakes Web Designers Make

60 points by johnjlocke 13y ago

a9entroy 13y ago
You forgot "microscopic font size". Why is this even a thing? Who thought microscopic text was attractive? It's such a turn off. I instantly close a page if I have to strain my eyes to read the text.
- naradaellis 13y ago
  Ctrl-scroll wheel. I used to only do it with uncomfortably small text, but now I just do it on probably 50+% of sites, even if I could read it without zooming. It just feels nice. Puts all that horizontal whitespace on a widescreen monitor to use.
- hnha 13y ago
  "Gigantic font size" is just as bad. If I can only see 10 lines on my monitor in a size that would fit a book for toddlers, my close tab reflex is quick.
  - nknighthb 13y ago
    I'd be perfectly happy if everybody defaulted to 12pt.
    - sesqu 13y ago
      When I googled around for recommendations, 12pt was the most common, but some went as high as 16pt. Personally, I prefer 14pt, leaving 12pt only for good font and layout pages.
- lelandbatey 13y ago
  Maybe it's just me, but I pretty much never see that. Are there any common examples? Though I do notice when text is well laid out. A nicely chosen font, a page that's comfortably wide-but-not-to-wide, good spacing and thought out contrast. As well, when there's nothing but the text (or as little else as possible) it's just perfect. I've really tried to do that with my own projects like http://xwl.me http://xwl.me . I really just wanted the nicest reading experience for random [0]things that I feel like writing and posting on the web. Btw, I'd actually love it if there's more I can do for readability. I really just want this to be as easy on my eyes as possible, but I'm often not the best judge of that. [0] - http://xwl.me/md/b4aa7u4hof178z2 http://xwl.me/md/b4aa7u4hof178z2
  - jwdunne 13y ago
    The only example I can think of is Facebook comments. I often zoom in on Facebook and leave it that way. I have actually seen this quite a lot amongst less popular websites, such as websites for local dental practices. I work for a marketing company in the UK and I've even seen our own contracted designer do this. If I don't do it myself, I'm often asked by the client to increase the font size. It's quite pervasive. xwl.me is readable and I like how it's very simple too. I might tint the background colour but not so much that it kills contrast between the BG and text. I notice my eyes feel scorched using editors with pure white BGs after some time and I'm not surprised; #fff creates the brightest light source for a monitor and it's never pleasant looking directly at a light or, more extreme, the sun.
  - SiVal 13y ago
    I use a Firefox extension called "NoSquint" on my Retina MacBook Pro and set the default page size to 140%, saving me the trouble of hitting cmd-+ a couple of times each time I go to a new website. That seems to result in a roughly balanced number of pages that are too small and pages that are too large. If I always wore my reading glasses, which I usually don't, I would probably set this to 120%. With reading glasses, my vision on this retina display is razor sharp, and I still think the text on most web pages is too small for maximum comfort.
  - deleted 13y ago
    [deleted]
  - adregan 13y ago
    If you are really looking for some readability tips, might I suggest one? Via the incredibly influential, albeit dry, _The Elements of Typographic Style_ by Robert Bringhurst[1] concerning the "comfortable measure," which I find to be the most important aspect of readable text: > Anything from 45 to 75 characters is widely regarded as a satisfactory > length of line for a single-column page set in a serifed text face in a text size. > The 66-character line (counting both letters and spaces) is widely regarded as ideal. The measure on your site is around 99 characters and that's a bit large. The best way I've found to work on the character length involves a dead simple tip I appropriated from Trent Walton[2]. If you add an asterisk at the 66 character of a line, you can easily manipulate the font-size up and down (I prefer percentages on the body element and ems on the individual elements, and then fuss with the single percentage) until you achieve an appealing measure. [1] http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Sty... [2]http://trentwalton.com/ http://trentwalton.com/
- radicalbyte 13y ago
  I only really see this on sites that have been designed for 1280x800, which then look tiny on my 1920x1200 screen.
MichaelApproved 13y ago
Don't forget low contrast fonts. I've seen many pages where the designer likes a soft font color that blends into the background and is hard to read.
joshuaheard 13y ago
As a suggestion to, "You've buried the lede.": use an About link. Even his example, Basecamp; I have no idea what they do. They "help groups work together"? Details, please. Have an About link so I can go and get a complete description of what you do. This is especially important for startups. (Put it next to the Contact link.)
- jwdunne 13y ago
  Actually, Basecamp has this in large text on the homepage: "Last week 6,033 companies signed up for Basecamp to manage their projects. Today it’s your turn." It's clear that Basecamp is some sort of tool to manage projects. A project management tool. An about link is okay but it should be obvious as soon as you land on the homepage, or any landing page, what the product does. Basecamp actually clearly describes what it does as soon as you hit the homepage.
- jeltz 13y ago
  Agreed, if I am investigating a set of alternatives and am overwhelmed I usually first ignore the pages which do not explain what they are selling. I do not want to spend 5 minutes to find what your website is about.
- crazygringo 13y ago
  This, times a million. There's some kind of bizarre belief that people don't want to ever read more than a sentence and a half of text, so links to "About" pages are often buried somewhere obscure in a footer, or worse, there isn't even one. It's not enough for me to know what the product is -- I need the details -- why does it exist? What does it do specifically, and what does it not? Sometimes I'll find myself checking if there's a Wikipedia page for the site, just because the site can't manage to tell me directly just what the heck it is, exactly. (A particularly egregious example of this is when a site focuses on presenting a product as a "solution" and tells you what it solves -- well, without telling me exactly how you solve it, it's pretty useless to me.)
ellie42 13y ago
>Basecamp has a great homepage. Stopped reading there.
- jwdunne 13y ago
  Designers here may agree but programmers, of which I'm sure HN has a majority and like myself, would love to know why exactly this made you stop reading. Currently, "stopped reading there" adds nothing useful to the discussion at all and it even seems pretty rude.
  - raylu 13y ago
    OK, it's rude. But Basecamp makes mistake #2 from the article, which is actually a mistake to call it a mistake. Really? Testimonials? Out of all of the potential and made-up customer feedback, you've hand-selected a few data points to advertise on your homepage. Even if they were randomly selected (obviously not), reducing the data down to mere anecdotes is... stupid. Insanely stupid. I can't even wrap my head around why people would ever base a decision on that. And so when it presents the thought bubble of the woman thinking about how she uses Basecamp and the fact that, of the extremely unbiased sample of people who use Basecamp (haha), 97% of them recommend Basecamp, I'm just unimpressed. Here's my number one beef with homepages: I still don't what your product actually specifically does. I don't want generalizations like "manage your projects" and "keep track of every file, discussion, and event" (what the hell is an event?). I want something concrete like "Basecamp lets you write words, puts checkboxes next to them, then moves them around randomly" (I'm not a fan of the product so my summarization may be biased).
    - bprieto 13y ago
      No, it's not stupid. It's how most people think: hey, this girl is like me and she loves the product, so I will love the product too. Unless your product is developed for engineers, having testimonials in your sales materials is a must, and throwing lists of hard facts and functions is a sure way to scare customers off.
      - 13y ago
weixiyen 13y ago
I rather like the Parallax portfolio sites. They simply value emotional design over usability to offer an immersive experience. It's a different approach, and for a portfolio site, I'd argue it's better.
- nate 13y ago
  Ah, thanks for this. I definitely like the Paralax portfolio sites too. I didn't mean that using a paralax or scrolling site was a bad idea at all. I just wanted to raise a warning that while creating a site like that, you probably still want to create a very obvious method on immediate page load to convert this user before they need to scroll.
callmeed 13y ago
If you're a wedding photographer, it's probably contact you for work. If you're a website designer, same thing. I create/sell websites for photographers and this is very true. One specific mistake I see them make is labeling their contact link something non-obvious (presumably to be hip/different). The anchor text of their contact link will be something like "inquire" or "connect" or "say hi". I should probably run some tests but my hunch is this is bad.
create028 13y ago
I completely agree with your first point, 'You've buried the lede' and this is a mistake I see on a daily basis. Great design should never say "look at me" it should always say "look at this". The first steps to achieving this and therefore avoiding the mistakes you mention are to cohesively join your UX and UI teams or designers into one fluid process. One will never work well, without the other. What are you saying and how are you saying it is the basis for ensuring your core company message is translated effectively over any medium. If in doubt always ask yourself, 'would my mum get it', she might not be the target audience but your design should be that simple to understand and decipher. No-one wants to have to go to an about us page, or scroll endlessly down a page to 'get it', otherwise why do we bother having headlines on newspaper articles? Simplicity is difficult, but this is the challenge all great designers should embrace.

60 points by johnjlocke 13y ago

You forgot "microscopic font size". Why is this even a thing? Who thought microscopic text was attractive? It's such a turn off. I instantly close a page if I have to strain my eyes to read the text.

naradaellis 13y ago
Ctrl-scroll wheel. I used to only do it with uncomfortably small text, but now I just do it on probably 50+% of sites, even if I could read it without zooming. It just feels nice. Puts all that horizontal whitespace on a widescreen monitor to use.
hnha 13y ago
"Gigantic font size" is just as bad. If I can only see 10 lines on my monitor in a size that would fit a book for toddlers, my close tab reflex is quick.
- nknighthb 13y ago
  I'd be perfectly happy if everybody defaulted to 12pt.
  - sesqu 13y ago
    When I googled around for recommendations, 12pt was the most common, but some went as high as 16pt. Personally, I prefer 14pt, leaving 12pt only for good font and layout pages.
lelandbatey 13y ago
Maybe it's just me, but I pretty much never see that. Are there any common examples? Though I do notice when text is well laid out. A nicely chosen font, a page that's comfortably wide-but-not-to-wide, good spacing and thought out contrast. As well, when there's nothing but the text (or as little else as possible) it's just perfect. I've really tried to do that with my own projects like http://xwl.me http://xwl.me . I really just wanted the nicest reading experience for random [0]things that I feel like writing and posting on the web. Btw, I'd actually love it if there's more I can do for readability. I really just want this to be as easy on my eyes as possible, but I'm often not the best judge of that. [0] - http://xwl.me/md/b4aa7u4hof178z2 http://xwl.me/md/b4aa7u4hof178z2
- jwdunne 13y ago
  The only example I can think of is Facebook comments. I often zoom in on Facebook and leave it that way. I have actually seen this quite a lot amongst less popular websites, such as websites for local dental practices. I work for a marketing company in the UK and I've even seen our own contracted designer do this. If I don't do it myself, I'm often asked by the client to increase the font size. It's quite pervasive. xwl.me is readable and I like how it's very simple too. I might tint the background colour but not so much that it kills contrast between the BG and text. I notice my eyes feel scorched using editors with pure white BGs after some time and I'm not surprised; #fff creates the brightest light source for a monitor and it's never pleasant looking directly at a light or, more extreme, the sun.
- SiVal 13y ago
  I use a Firefox extension called "NoSquint" on my Retina MacBook Pro and set the default page size to 140%, saving me the trouble of hitting cmd-+ a couple of times each time I go to a new website. That seems to result in a roughly balanced number of pages that are too small and pages that are too large. If I always wore my reading glasses, which I usually don't, I would probably set this to 120%. With reading glasses, my vision on this retina display is razor sharp, and I still think the text on most web pages is too small for maximum comfort.
- deleted 13y ago
  [deleted]
- adregan 13y ago
  If you are really looking for some readability tips, might I suggest one? Via the incredibly influential, albeit dry, _The Elements of Typographic Style_ by Robert Bringhurst[1] concerning the "comfortable measure," which I find to be the most important aspect of readable text: > Anything from 45 to 75 characters is widely regarded as a satisfactory > length of line for a single-column page set in a serifed text face in a text size. > The 66-character line (counting both letters and spaces) is widely regarded as ideal. The measure on your site is around 99 characters and that's a bit large. The best way I've found to work on the character length involves a dead simple tip I appropriated from Trent Walton[2]. If you add an asterisk at the 66 character of a line, you can easily manipulate the font-size up and down (I prefer percentages on the body element and ems on the individual elements, and then fuss with the single percentage) until you achieve an appealing measure. [1] http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Sty... [2]http://trentwalton.com/ http://trentwalton.com/
radicalbyte 13y ago
I only really see this on sites that have been designed for 1280x800, which then look tiny on my 1920x1200 screen.

MichaelApproved 13y ago

Don't forget low contrast fonts. I've seen many pages where the designer likes a soft font color that blends into the background and is hard to read.

joshuaheard 13y ago

As a suggestion to, "You've buried the lede.": use an About link. Even his example, Basecamp; I have no idea what they do. They "help groups work together"? Details, please. Have an About link so I can go and get a complete description of what you do. This is especially important for startups. (Put it next to the Contact link.)

jwdunne 13y ago
Actually, Basecamp has this in large text on the homepage: "Last week 6,033 companies signed up for Basecamp to manage their projects. Today it’s your turn." It's clear that Basecamp is some sort of tool to manage projects. A project management tool. An about link is okay but it should be obvious as soon as you land on the homepage, or any landing page, what the product does. Basecamp actually clearly describes what it does as soon as you hit the homepage.
jeltz 13y ago
Agreed, if I am investigating a set of alternatives and am overwhelmed I usually first ignore the pages which do not explain what they are selling. I do not want to spend 5 minutes to find what your website is about.
crazygringo 13y ago
This, times a million. There's some kind of bizarre belief that people don't want to ever read more than a sentence and a half of text, so links to "About" pages are often buried somewhere obscure in a footer, or worse, there isn't even one. It's not enough for me to know what the product is -- I need the details -- why does it exist? What does it do specifically, and what does it not? Sometimes I'll find myself checking if there's a Wikipedia page for the site, just because the site can't manage to tell me directly just what the heck it is, exactly. (A particularly egregious example of this is when a site focuses on presenting a product as a "solution" and tells you what it solves -- well, without telling me exactly how you solve it, it's pretty useless to me.)

ellie42 13y ago

>Basecamp has a great homepage. Stopped reading there.

jwdunne 13y ago
Designers here may agree but programmers, of which I'm sure HN has a majority and like myself, would love to know why exactly this made you stop reading. Currently, "stopped reading there" adds nothing useful to the discussion at all and it even seems pretty rude.
- raylu 13y ago
  OK, it's rude. But Basecamp makes mistake #2 from the article, which is actually a mistake to call it a mistake. Really? Testimonials? Out of all of the potential and made-up customer feedback, you've hand-selected a few data points to advertise on your homepage. Even if they were randomly selected (obviously not), reducing the data down to mere anecdotes is... stupid. Insanely stupid. I can't even wrap my head around why people would ever base a decision on that. And so when it presents the thought bubble of the woman thinking about how she uses Basecamp and the fact that, of the extremely unbiased sample of people who use Basecamp (haha), 97% of them recommend Basecamp, I'm just unimpressed. Here's my number one beef with homepages: I still don't what your product actually specifically does. I don't want generalizations like "manage your projects" and "keep track of every file, discussion, and event" (what the hell is an event?). I want something concrete like "Basecamp lets you write words, puts checkboxes next to them, then moves them around randomly" (I'm not a fan of the product so my summarization may be biased).
  - bprieto 13y ago
    No, it's not stupid. It's how most people think: hey, this girl is like me and she loves the product, so I will love the product too. Unless your product is developed for engineers, having testimonials in your sales materials is a must, and throwing lists of hard facts and functions is a sure way to scare customers off.
    - 13y ago

weixiyen 13y ago

I rather like the Parallax portfolio sites. They simply value emotional design over usability to offer an immersive experience. It's a different approach, and for a portfolio site, I'd argue it's better.

nate 13y ago
Ah, thanks for this. I definitely like the Paralax portfolio sites too. I didn't mean that using a paralax or scrolling site was a bad idea at all. I just wanted to raise a warning that while creating a site like that, you probably still want to create a very obvious method on immediate page load to convert this user before they need to scroll.

callmeed 13y ago

If you're a wedding photographer, it's probably contact you for work. If you're a website designer, same thing. I create/sell websites for photographers and this is very true. One specific mistake I see them make is labeling their contact link something non-obvious (presumably to be hip/different). The anchor text of their contact link will be something like "inquire" or "connect" or "say hi". I should probably run some tests but my hunch is this is bad.

create028 13y ago

I completely agree with your first point, 'You've buried the lede' and this is a mistake I see on a daily basis. Great design should never say "look at me" it should always say "look at this". The first steps to achieving this and therefore avoiding the mistakes you mention are to cohesively join your UX and UI teams or designers into one fluid process. One will never work well, without the other. What are you saying and how are you saying it is the basis for ensuring your core company message is translated effectively over any medium. If in doubt always ask yourself, 'would my mum get it', she might not be the target audience but your design should be that simple to understand and decipher. No-one wants to have to go to an about us page, or scroll endlessly down a page to 'get it', otherwise why do we bother having headlines on newspaper articles? Simplicity is difficult, but this is the challenge all great designers should embrace.