5 Painless Usability Fixes
One of the worst parts about being a usability consultant is being brought in on the tail-end of a project and realizing that it needs a major overhaul. Even for something as relatively easy to re-engineer as a website, a major redesign (especially for a large company) can take months and cost tens of thousands of dollars.Fortunately, in this age of CSS-driven design, not all changes require starting from scratch. So, in the spirit of saving you money and aggravation, here are 5 usability fixes that are relatively painless but can have a big impact:
1. Increase Text Contrast
Even in 2008, readability is a big problem on many websites, and one of the major culprits is still text-to-background contrast. I know black text on white feels boring to some people, but there's a good reason it's so common. Compare the examples below:
Of course, a little artistic license is ok, but unless cutting-edge design is a big part of your brand (you're an artist, for example), stick to high-contrast text.
2. Increase Font Size
Similarly, we all have a bad habit of wanting to stuff as much text as possible on the screen, and that often means using tiny fonts. Even if your audience is young and has 20/20 vision, small text takes longer to read and is more likely to be ignored. At the same time, many of us are using road-warrior laptops, PDAs, and other devices with small screens to browse the internet.
3. Increase Font Spacing
Nature may abhor a vacuum, but good designers appreciate the value of whitespace. Empty space helps us separate words and objects, and the more crammed together information is, the harder it is for people to process quickly.
4. Reduce Home-page Copy
If a decade of digging through web analytics and studying test results has taught me anything, it's that people don't read. It's easy, especially in a corporate culture with competing interests (management, sales, legal, etc.) to overload your home-page, but the more information you put out there, the more cluttered your message becomes.Of course, redesigning the home-page and redeveloping the "real estate" is a big job, but one easy place to start is with your marketing copy. See if you can say the same thing with half as many words (or even a third).
5. Make Links Look Clickable
Somewhere around 2000, we started to get bored with blue, underlined links and decided it was time to mix things up. From a design-perspective, it's understandable to want variety, but people still expect links to look a certain way, and the farther we stray, the less they understand what's clickable.
If you're not using traditional links, at least consider making those links either the traditional blue or underlined and in a different color than surrounding text. Stay clear of using other types of emphasis, like bold text, to indicate links.
Dr. Pete
· Tuesday, February 12Thanks, Avinash. I find #4 to be the hardest sell, especially with larger clients. Everyone wants their say on the home-page and has their own idea of what's "important". Kind of like designing military hardware by committee: you end up with a blueprint for a VTOL jet that can go underwater, has a gun turret, and holds 50 troops. Unfortunately, the thing ends up costing $500,000,000,000 and explodes when it hits a sheep.
Sorry, I think I got off on a tangent there :)
David LaFerney
· Wednesday, February 13A designer that worked for me once was nearly ready to quite because I insisted on blue links, black on white text, and a "home" button on the template.
She Insisted that "Everyone knows the logo links to the home page". Everyone at the coffee shop maybe. My target demographic is people ready and willing to charge 2-1200 dollars. I don't want anyone to be confused.
Mordechai
· Thursday, February 14Good tips.
Regarding #2, Increase Font Size, you should also make sure to allow users to be able to increase their font size without hindering usability. I've seen many sites where increasing the font size causes text to overlap. For example, your blogroll overlaps the content area.
Dr. Pete
· Friday, February 15@Mordechai: Admittedly, when you start getting into cross-browser issues, screen resolutions, etc., some of this isn't easy. What browser are you on? I've tried resizing text, and my righthand column seems to scale ok. I'm probably going to shift to Wordpress in the near future, so that's definitely something I'll test a bit more.
Mordechai
· Saturday, February 16@Dr. Pete: I originally noticed it in Konqueror, but have found the same issue in Firefox.
Another problem I noticed was that you have your fonts specified in points. This is bad for two reasons. For starters, points are not a screen oriented unit. More importantly, however, IE users can't resize the font if it isn't expressed in ems or percent.
Kendall
· Monday, February 18#2 gets me a lot. I have to do a text size increase on a number of site including this one (I'm in my mid-20s and good eye-sight). Like someone stated, if you increase the text size on this page the right sidebar "breaks" (I'm using Mac, Firefox) it starts to overlap the content.
A lot of web designers don't seem to realize that the default font size (16px) in browsers is set that way for a reason. I generally try to use 1em font sizes for content. I also use a small laptop screen, which further makes small font sizes hard to read. I also find contrast to go down on LCD screens partly because I change my angle to the screen a bit. Web designers these days seem to forget not everyone is using the same display as them. Also if you do make your fonts 1em, a user can change the user default size in the browser to something smaller if they really want small text.
Pritam Barhate
· Tuesday, August 19Hello Dr. Pete,
Loved these tips. And I must admit I am guilty of a few of these mistakes. Especially small text. The reason behind this is, probably, the cool designer sites I grew up watching. For me (and for quite a few designers out there) 11 Verdana looks most presentable (beauty quotient wise) among various sizes. Something I should correct in next redesign of my Blog.
I agree with the line spacing point. Most of the time I find myself using something in between 140% to 180%.
As far as spacing between various block elements is considered, I have found that a lot of web designers (sometime myself included) make the mistake of keeping same distance between the end of last paragraph, a subheading and the start next paragraph the same. This creates a effect where is heading merges in the text and it does not become immediately clear that next section starts with the subheading.
Dr. Pete
· Tuesday, August 19@Pritam - I have to admit that I'm constantly tempted to follow the Web 2.0 convention and use gray text instead of black. Somehow, it just looks "softer" and more aesthetically pleasing. Unfortunately, it's demonstrably harder to read. Of course, there's often a happy medium in most of these cases.
Avinash Kaushik
· Tuesday, February 12Very nice post! #5 is one that I find particularly painful, and have a hard time believing how common it still is in this day and age. Its a crime I say, a crime! : )
For #4 nothing works better than testing. Great way to lay out your ego and let the customers stomp on 'em. And now testing is free, whats the excuse for not doing it.
-Avinash.