Mistakes Web Designers Make

http://ninjasandrobots.com/three-mistakes-i-see-web-designers-make-over-and-over-again

by johnjlocke • 13 years ago

60 37 13 years ago

a9entroy• 13 years 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• 13 years 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• 13 years 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• 13 years ago

I'd be perfectly happy if everybody defaulted to 12pt.

lelandbatey2• 13 years 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 . 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

jwdunne4• 13 years 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• 13 years 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.

adregan• 13 years 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_Sty...

[2]http://trentwalton.com/

radicalbyte• 13 years ago

I only really see this on sites that have been designed for 1280x800, which then look tiny on my 1920x1200 screen.

MichaelApproved• 13 years 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• 13 years 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.)

jwdunne4• 13 years 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• 13 years 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• 13 years 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• 13 years ago

>Basecamp has a great homepage.

Stopped reading there.

jwdunne4• 13 years 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.

raylu7• 13 years 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).

samweinberg• 13 years ago

Form follows function. Basecamp may not have the prettiest looking homepage, but at least it works. The copy effectively communicates what Basecamp is, and the website is laid out fairly well.

Was there something specific about the page that you had a critique on?

raylu7• 13 years ago

As I mentioned earlier in this thread, I really think Basecamp's homepage does a very poor job of communicating what it is.

> Last week 6,033 companies signed up for Basecamp to manage their projects. Today it’s your turn.

This is not a description of what Basecamp is.

> For all of my projects, I use Basecamp to keep track of every file, discussion, and event from beginning to end—all in one place.

This pretends to describe Basecamp but I could also use it as a description for Dropbox, MediaWiki, and Eventbrite (seriously, what the hell is an event?).

> 97% of customers recommend Basecamp.

COLOR ME IMPRESSED!

To quote myself: 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).

weixiyen• 13 years 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• 13 years 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• 13 years 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• 13 years 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.

Mistakes Web Designers Make

Related Stories