Mistakes Web Designers Make(ninjasandrobots.com)
ninjasandrobots.com
Mistakes Web Designers Make
http://ninjasandrobots.com/three-mistakes-i-see-web-designers-make-over-and-over-again
7 comments
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.
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.
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.
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.
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.
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.
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
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
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/
> 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/
I realize I'm catching this a bit late, but I wanted to thank you for the tips! This is exactly the kind of thing that I was hoping to learn, thank you!
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.
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.
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.
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]
I only really see this on sites that have been designed for 1280x800, which then look tiny on my 1920x1200 screen.
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.
"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.
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.
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.)
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.)
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.)
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.
"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.
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.
>Basecamp has a great homepage.
Stopped reading there.
Stopped reading there.
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.
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).
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).
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.
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.
So you embrace the idea of catering to and selling to idiots? What's the difference between what you do and what a conman does?
Well, if the girl really is like you, then that's a fairly good strategy and not necessarily like a con-man. If I can distinguish quality and she's another me, then in effect I already like the thing on good grounds.
The disconnect comes in the implicit question I suppose: Are they really like me? I doubt most developers are likely to see the world as being full of kindred spirits with sharp minds that distinguish quality.
It's like Amazon reviews for earphones, (or whatever.) If there are a load of really terrible reviews then that's good evidence that something really is terrible. But since most people know little about a product or class of products their ability to compare things to the top-end is pretty much non-existent.
If they really are like you, then the deal makes sense. If you know a bit more about the subject than average then the deal is atrocious.
An even better deal would be if they were like an idealised you, I suppose. Make the choices that you'd make if you knew better. But you can't communicate with most people on those grounds for obvious reasons.
The disconnect comes in the implicit question I suppose: Are they really like me? I doubt most developers are likely to see the world as being full of kindred spirits with sharp minds that distinguish quality.
It's like Amazon reviews for earphones, (or whatever.) If there are a load of really terrible reviews then that's good evidence that something really is terrible. But since most people know little about a product or class of products their ability to compare things to the top-end is pretty much non-existent.
If they really are like you, then the deal makes sense. If you know a bit more about the subject than average then the deal is atrocious.
An even better deal would be if they were like an idealised you, I suppose. Make the choices that you'd make if you knew better. But you can't communicate with most people on those grounds for obvious reasons.
So you're saying Basecamp tries to accurately portray a neutral individual making a decision to use or not use their product rather than someone who's conclusion supports their agenda? That's beyond ridiculous.
That's one step beyond believing an "independent, third-party" report commissioned by McDonalds to show that their burgers make you healthy or cure cancer or whatever. Basecamp is not even pretending to be neutral.
That's one step beyond believing an "independent, third-party" report commissioned by McDonalds to show that their burgers make you healthy or cure cancer or whatever. Basecamp is not even pretending to be neutral.
I'm not saying they try to accurately portray anything. I'm just saying that's what it hooks into. Obviously, as with any communication medium, you can lie your arse off - and I'm sure people frequently do. You can do the same with stats as with testimonials - who's going to check, and how?
If you assume a company's lying, there's probably very little that they can say to get you on board.
If you assume a company's lying, there's probably very little that they can say to get you on board.
There's a difference between being presented with stats and a company's homepage which is designed specifically to get you on board. It's not that I don't trust anything I hear, it's that I assume that a company is cherry-picking the best anecdotes.
But there are ways to present information that don't seem stupid. In particular, Basecamp is doing two things here that are misleading. First, they're not actually presenting data, they're presenting anecdote(s). Second, they're presenting them in a medium which should be viewed with extra skepticism.
I don't want to know what percentage of your paying customers like you (seriously? 3% of your customers use you but dislike your product?). What I want to know is what specifically you do and how you do it. Everything else is noise - and so the entire page is noise.
But there are ways to present information that don't seem stupid. In particular, Basecamp is doing two things here that are misleading. First, they're not actually presenting data, they're presenting anecdote(s). Second, they're presenting them in a medium which should be viewed with extra skepticism.
I don't want to know what percentage of your paying customers like you (seriously? 3% of your customers use you but dislike your product?). What I want to know is what specifically you do and how you do it. Everything else is noise - and so the entire page is noise.
They can still cherry pick the best indicators for their stats, and/or favourable statistical tests.
Still, I can understand why you'd feel that way, and I don't really disagree with you that that's more what I'd find interesting. But as to whether that's what most people would be interested in, and whether that's what would sell.... -shrug- I'm not sure that all attempts at sales makes you a con man. Trying to demonstrate to people who may not understand how a certain thing would advantage them that it would, or that people who are like them think it would, doesn't necessarily amount to a stitch up job. I can understand that you'd view it as noise, but it seems to me at the moment to perhaps be a little harsh to call someone who may just be trying to put the best foot forwards a con man when they may be operating in good faith.
Still, I can understand why you'd feel that way, and I don't really disagree with you that that's more what I'd find interesting. But as to whether that's what most people would be interested in, and whether that's what would sell.... -shrug- I'm not sure that all attempts at sales makes you a con man. Trying to demonstrate to people who may not understand how a certain thing would advantage them that it would, or that people who are like them think it would, doesn't necessarily amount to a stitch up job. I can understand that you'd view it as noise, but it seems to me at the moment to perhaps be a little harsh to call someone who may just be trying to put the best foot forwards a con man when they may be operating in good faith.
The woman might not be a real customer of Basecamp, it's fairly common to use models, especially since consent for photos is pretty tough to get and keep (believe me, the amount of photos I've taken down due to change in consent...). The testimonial clearly states who it's from underneath such as 'Joy is a designer at Pitchfork'. What makes you believe this is made up? I'd be interested to know.
Also, testimonials have always generally had an impact on conversions when I've used them. If you have a product with a decent amount of unique visitors p/m and decent testimonial then split test it if you don't believe me - you have nothing to lose with a 30-day VWO sub and some time setting it up. I can't give access to the data I have access to, this isn't mine to give away, but great testimonials always help.
Also, the second mistake was "Pretend that no one says anything nice about you". Basecamp actually does the opposite by featuring a testimonial on the homepage, which is meant to be the right thing to do.
I think "manage your project" and then further "keep track of every file, discussion and event" is fairly decent brief description because that's exactly what it does. To the people I work with, an event is pretty straight forward: a calendar event (which is how you manipulate them in basecamp).
Either way, "Basecamp lets you write words, puts checkboxes next to them, then moves them around randomly" or "Basecamp lets you make todos" is never going to make a sale or pique interest. My notebook and pen does this fairly well.
Also, testimonials have always generally had an impact on conversions when I've used them. If you have a product with a decent amount of unique visitors p/m and decent testimonial then split test it if you don't believe me - you have nothing to lose with a 30-day VWO sub and some time setting it up. I can't give access to the data I have access to, this isn't mine to give away, but great testimonials always help.
Also, the second mistake was "Pretend that no one says anything nice about you". Basecamp actually does the opposite by featuring a testimonial on the homepage, which is meant to be the right thing to do.
I think "manage your project" and then further "keep track of every file, discussion and event" is fairly decent brief description because that's exactly what it does. To the people I work with, an event is pretty straight forward: a calendar event (which is how you manipulate them in basecamp).
Either way, "Basecamp lets you write words, puts checkboxes next to them, then moves them around randomly" or "Basecamp lets you make todos" is never going to make a sale or pique interest. My notebook and pen does this fairly well.
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?
Was there something specific about the page that you had a critique on?
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).
> 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).
"I really think Basecamp's homepage does a very poor job of communicating what it is."
That's great that you think that, but (and don't take this the wrong way), it's irrelevant. I'm fairly sure 37signals tests their design/copy/layouts and if this one wasn't working to make them more money, they'd tweak it as necessary.
That's great that you think that, but (and don't take this the wrong way), it's irrelevant. I'm fairly sure 37signals tests their design/copy/layouts and if this one wasn't working to make them more money, they'd tweak it as necessary.
While it may be the case that this version of their homepage has been tested to yield the best conversion, that seems completely irrelevant to my point: "the Basecamp homepage does a very poor job of communicating what it is".
If the Basecamp homepage did a very poor job of communicating what it is, I find it hard to believe it would yield the best conversion.
You find it hard to believe that people would pay for things without understanding what they are? I don't understand your premise.
Do you honestly think the Basecamp homepage communicates what it is? As stated earlier, the description could apply just as well to Dropbox, MediaWiki, or Eventbrite.
Do you honestly think the Basecamp homepage communicates what it is? As stated earlier, the description could apply just as well to Dropbox, MediaWiki, or Eventbrite.
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.