10 Usability Sins that Make me Bounce at any Rate!
Bounce rate is the number or rather percentage of people who leave your site almost instantly after taking a quick look.
People do not click or perform any other action on your site when they bounce! Make sure to prevent them from bouncing.
Many people bounce due to your own mistakes as a web designer or blogger.
Thus I collected a list of these usability sins that make me bounce and never come back again to avoid whenever possible. See below!
1. Overlay ads hiding your content: I’m off. In contrast if there is a full page ad on white background – an interstitial – I will stay.
Imagine a movie scene hidden behind an ad.
The second one would be akin to a commercial break. It’s still interrupting but does not require switching it off.
2. No content on top of the page aka above the fold/without scrolling. When I can see only Google Ads and banners I’m gone.
Huge forms that as me to sign up for a newsletter on the first visit are also a nono. Offer value first!
3. Loading too long. I’m in a hurry. In many cases I won’t wait until you loaded all the ads and third party widgets especially if I don’t know what to expect.
4. Portal like cognitive overload – unless I’m looking for a portal or portal like site. I almost never do.
That’s also the main reason I rarely use the cluttered Google “search” results anymore.
5. A stupid publication name like “funny images” or “interesting design” or “cool art”. Splog!
Such random sites are most likely displaying stolen content with no attribution to the actual source!
6. Black background: My eyes are strained! In case you haven’t read advice on readability and contrast for the last 10 years it’s your fault! You scared me away
7. Badly displayed images: either having clearly visible JPG artifacts or wrongly resized: This looks way too clumsy that I leave!
Tiny thumbnails upsized to blurry quality or huge images loading forever are ostracizing me too!
8. “Make $$$$$ quick” with this and that. People seriously buy into that? Make money online and get rich quick schemes are too prevalent to get taken seriously.
9. Smilies and emojis! I like using them from time to time on social media.
Lots of huge emojis at the top of the page are ridiculous though. Buzzfeed-like sites are for teenage kids.
10. Huge Headlines in Verdana? Gosh that looks ugly! Verdana is no headline font!
Only Ikea got away with that design sin. Even they replaced it by now to use a cleaner font.
All these sins do not enhance your site – they break it – while at the same time you can very well live without them.
Please take basic usability and user experience into account and remove all of these obstacles.
Why? You’ll feel better afterwards. Your site visitors will stay longer too (think “time on site”) and maybe even buy something!
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:
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.
“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.
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.
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.
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.
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.
Very nice article. And I dislike verdana in any form.
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.
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.
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 ;-)
#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!).
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 ;-))
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.
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.
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:22.214.171.124) Gecko/20080702 Firefox/126.96.36.199
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. :)
[…] 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. […]
1,3,4,5,7,9 – Agree
2,6,8,10 – Dis Agree
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.
[…] 10 Usability Sins That Make Me Bounce And Never Come Back . […]
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.
! I am also a user and I dont care about the font as long as its readable and verdana its very readable, that suggestion makes no sense ! Period and Period.!