Bounce rate means the number or rather percentage of people who leave your site instantly after taking a look for less than a second. Many people bounce due to your own mistakes as a web designer or blog writer. I collected 10 of these usability sins that make me bounce and never come back again:
- Layer ads hiding your content, I’m off. In contrast if there is a full page ad on while background I will stay. Imagine a movie scene hidden behind an ad. The 2nd one would be an ad break
- No content above the fold/scroll. If I can see only Google Adsense and banners, I’m gone.
- Loading too long. I’m in a hurry. In many cases I won’t wait until your Flash animation has it’s 100% especially if I don’t know what to expect.
- Portal like information overdose, unless I’m looking for a portal or portal like site.
- A stupid publication name like “fun…” or “interesting design” or “cool art”. Splog!
- Black background: My eyes are strained, if you haven’t read advice on readability and contrast for the last 10 years it’s your fault, you scared me away
- Badly displayed images, either having clearly visible JPG artifacts or wrongly resized: This looks sooo clumsy that I leave!
- “Make $$$$$ quick” with this and that. People seriously buy into that?
- Smilies! I like them from time to time, but emoticons in huge sizes at the top of the page are ridiculous.
- Huge Headlines in Verdana, gosh that looks ugly, Verdana is no headline font!
All these sins do not enhance your site, they break it, while at the same time you can very well live without them. So take heed to basic usability and remove all of these no-nos. You’ll feel better afterwards. Your site visitors will stay longer too.
Related posts:
- 7 Usability Mistakes Usability Experts Commit
- The 7 Simplest Ways To Lower Your Bounce Rate and Get More Conversions
- 5 More Design + Usability + SEO Articles: The Clean Dozen
- For Design, Usability and SEO Simplicity Is Key
- Review: Better Blogging with Michael Martine
This thing has 30 Comments
You had me until point #10, since I think Verdana is one of the most readable fonts on a computer.
But after looking at the SEO 2.0 headline font, I’m guessing you’re just trying to make sure your readers are paying attention in class.
Good advice on 1-9, though.
You can never design a usable website that has a black background? Ever?
black (or better: dark) websites are more comfortable for the eye.
Verdana > Arial. Verdana is a screen font and easy to read even at small sizes (by which I don’t mean small fonts are good ;-) ). but still one could argue that Verdana is not a good headline font. i wouldn’t bounce though if I saw it as a headline font :D
I am not completely agree with we cannot create web site with black background. Certainly, designer need to design with caution in some scenario where designer has make sure it has enough contrast in other design elements and fonts.
A site which is content oriented (more text) might looks boring and eye hitting.
Verdan is san serif font and it is ideal to web media, designer need to take care of size sometime too big fonts makes non aesthetic.
Paul: I use Helvetica, Arial, sans-serif!
inkodeR: Maybe for a photography site in Flash. Also see links below.
Sebastain: They are not. Read this: http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/
I use Verdana at the top, but it looks not only ugly in big sizes it also makes the impression that the page has no web design at all, only DIY coding by a programmer who can’t distinguish fonts at all.
naushad: Read the article linked above and also consider these 3 lists:
http://tutorialblog.org/30-dark-designs/
http://vandelaydesign.com/blog/galleries/dark/
http://dzineblog.com/2008/06/27-dark-website-designs.html
You’ll notice that even dark designs in most cases use grey instead of black especially where there is text involved.
Verdana is fine in small sizes but not as h1, h2 in big, typical for headlines, sizes.
I think some of your sins here are based on snobbery rather than actual usability. Do you think that maybe as a web designer your perception of these items are somewhat skewed as you know about how they work and have read lots on them? Most users will not really care about the difference between Verdana and Helvetica in a heading font. They are both sans-serif fonts and look virtually identical.
In response to point number 1, you actually prefer the full page, white background ads? I find them intensely annoying and on a par with splash pages. The only thing they do is separate me from the content. I do agree that the invasive layer ads hiding content are bad, but I don’t see how full page ones are better.
Also, I actually prefer black backgrounds and white text, I find them easier to read and easier on the eye. I change all of my IDE’s so that they have black backgrounds and white text. I find that some monitors cause large areas of white space to “pulse” and make my eyes hurt.
“Most users will not really care about the difference between Verdana and Helvetica in a heading font. They are both sans-serif fonts and look virtually identical.”? Sorry, but this is sheer ignorance. I can’t say anything more about that, just show it. Below is a h1 in in Verdana (first) and Helvetica or rather Arial, (second) as displayed on Windows meaning how most people will see them:
If you can’t see the difference visit a doctor.
I didn’t say that I couldn’t see the difference, because there clearly is, I said that they were “virtually identical”. The only difference is that Verdana is a little thicker than Helvetica.
I really don’t think that it matters to most users. Do you really think that when a user visits a site they say “oh, this site has the wrong sort of sans-serif font for me to read” and leave?
In my opinion, this isn’t a usability issue, it is a design choice.
Verdana is barely readable as a headline, slobby and sloppy. Period. People do not have to know that it’s called Verdana, they perceive the bad impression.
There is a balance between usability and interesting design.
Unusable is worthless, but so is totally uninteresting. I read a lot of posts by web gurus who seem to prefer stark (like their webpages!), absolute rules, ignoring the fact you must balance the two issues for best effect, and to pique the interest of the public. Note that very few of those folks are allowed to DESIGN the brand look of a website, they just code for those who do design it.
They seem more slave to the code and ‘web rules’ than the intent of a site, or emotive content and effect. I work at a marketing firm where we track the myriad of statistics on ‘eye time’, bounce, etc., but don’t ignore the human element that goes beyond simple statistics like that. Maybe the focus should be on innovating the hidebound coding to support more robust choices in both fonts and functionality. Plus, getting REALLY hung up on one specific font seems…obsessional. Get help.
I think a much bigger sin then any of these is the “invisible form” that many designers think is hip and trendy these days. You’ve probably seen them… forms with inputs outlined by lines that are in like #fdfdfd, or not at all. I can barely even find the inputs, and I know where to look for them, imagine how many of your users will given up when they can’t even figure out where you super clever form’s submit button is. Blarg.
Hey, I guess it’s a nice list you have hear; and I’m no usability expert,
but I must say, that there’s irony here, even whilst writing this comment.
In order to see your actual article on this old 1024×768; I ended up having
to scroll the length of your side bar. Then, for writing the comment, the
text overflows the box, and hide’s itself.
(hence the line break so much in the comment)
Still, a nice article. I just thought I’d point out the slight irony I saw.
Very nice article. And I dislike verdana in any form.
mark: true, but it’s not really what’s at stake here. I’m talking very basic usability here, also for blog owners. I neither support web standards extremism nor the rigidness of Jakob Nielsen.
Jon: Forms are very important especially to “convert” users. You do not bounce due to a form though.
Micheil: I’m aware of the textarea overflow bug in FF and also the scroll problem in FF3 on some Linux and Mac systems. If you want me to fix it tell me your browser and system as well as the screen resolution. I couldn’t reproduce the FF3 bug yet.
Thanks Janko. Verdana in certain sizes is perfectly legitimate in looks better on Windows than most other system fonts.
#7-10 aren’t usability mistakes - they’re just things that annoy the author.
It seems like the author had six good ideas and then struggled to come up with a few more. “6 Usability Sins that Make me Bounce and Never Come Back” would have been a much more effective headline (no matter what font was used!).
Dale: You can say “you” as I’m “the author”. No need to complicate things: In fact the focus on usability is a loose one, it could be called usability and web design. Also I often do “top 7″ lists. Nonetheless, these are 10 reasons that make me bounce and then I won’t USE your site so it’s about usability in this sense at least ;-)
You’re right with the Verdana. At huge sizes the Verdana receives some strange kerning effects which results in different spaces between the letters. At least this point made me think about the headlines on my blog – of course, headline fonts should really be different from the continous text.
Well, something different. You can’t demand short loading times (#3) and simultaneously complain about bad jpg compression. That’s at least a little bit ridicules. Shure, there are defintively really bad compressed images out there, but try it yourself in Photoshop how difficult it can be to measure saved kilobytes with lossy compression. The jump between 50 and 51% is the most odd one.
But you just forgot some even more important things:
- full flash pages
- flash intros
- splash screens
- usage of comic sans
- content that’s squeezed into defined sizes (see onreact.com ;-))
if your eyes are strained - try making up a negative / inverse coloured stylesheet for your browser, which also implements an option to avoid the white-black-flash you probably want to avoid when stepping into black-backgrounded sites.
Also, there are several OSes who support display negating. AFAIK Mac OS X and the Compiz Window Manager (anything that’s able to run X) do so.
cu, w0lf.
datenkind: Reread #3 for Flash ;-) Comic Sans pages are so far off I didn’t even consider them. I wouldn’t even visit those probably. onreact.com is 4 years old now but I do not like randomly resizable page content which looks differently on each screen resolution.
fwolf: Thanks for the suggestions. You can’t expect people to look for such complicated solutions though. They’ll just bounce.
My comments section is on a black background with white text, I find it soothing to my eyes more than the stark white glare of this page.
Good List. I agree with most of what you’ve said above. I get the issue in Firefox as well. Details of my browser in case it helps you:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16
As for Jason’s comment, I prefer dark text on a light background myself, but I once read dark on light is optimal for print and light on dark is optimal for the screen, apparantly because human eyes are drawn to the light.
I’m not expert, I can’t say whether it’s true, it goes against my own preference and I’ve never seen that written again, but I thought it worth repeating here.
Jason: You probably have a “glare type” of screen.
Stephen: Which issue? The scrolling to the bottom of the page to see the blog entry? If yes, than you’re the first to encounter it in FF2 and on Windows. What screen resolution do you use?
Thanks for the feedback guys!
Some good tips if taken with a grain of salt. However, have to applaud the “no content above the fold” tip. :)
1,3,4,5,7,9 - Agree
2,6,8,10 - Dis Agree
nice blog
Nice list, I agree with most, but loved the discussion it ignited!
Great debate guys! :)
a lot of valid points; just another i would like to add.
Auto playing audio!
I thought this fad died but wit the emergence of the pay per play ads they have made a horrible re-occurrence.
Another thing i hate is sites with deadlinks! or wrong links, if this happens twice im out…
I’ll think of more later :p
some people love verdana. some people love comic sans.
Love the site. But for the love of all things free and easy, why do your blog posts have 3 feet of white space between it and the site name?
Trey: That’s a bug which appears in Firefox 3 on Mac & Linux only it seems. What system and browser version do you use?
Not a bad list, but as an addition, how about ‘Using Helvetica for body text, I’m off.’? It’s really hard to read vast quantities of Helvetica (at relatively low font-size(s)) on screen.
Harry
This thing has 4 Trackbacks
[...] Recently, when I evaluated my first year of blogging, I decided to set some additional goals. The first of these goals has been accomplished today; being able to publish dark text on a light background. Although the current design looked pretty nice (at least to me) a year ago, the readability kept bugging me more and more over time, as a dark background is even considered to be a usability sin. [...]
[...] 10 Usability Sins That Make Me Bounce And Never Come Back . [...]
[...] public links >> usability 10 Usability Sins that Make me Bounce and Never Come Back Saved by Schnamtaro on Sun 28-9-2008 Usability vs comfort Saved by shariq02ca on Thu [...]
[...] 24. 10 Usability Sins that Make me Bounce and Never Come Back [...]