5 Painless Usability FixesOne 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 ContrastEven 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 SizeSimilarly, 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 SpacingNature 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 CopyIf 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 ClickableSomewhere 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.
Very 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.
Dr. Pete· Tuesday, February 12
Thanks, 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 :)
Thanks for the tips; I look forward to the next 5:)
A 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 14
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.
#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.
Hello 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.
about #2, i remember reading interesting case study on news portals about news portal improving pages view when they increase font size of article page
Dr. Pete· Monday, November 17
@Jean-Francois - It's funny how even sites like news sites, which really should be content-focused, forget the basics sometimes. We all get caught up in designing for a certain narrow aesthetic and forget that we serve diverse audiences that aren't all techies who surf the net all day.
"Make Links Look Clickable". Very important to me. I've seen too many websites where it is difficult to know where the links are!
This is a great list Peter. I particularly find #4 and #5 very important - its a common frustrating mistake that I see far too often. Too many web designers use way to much too text on a homepage - they don't realize that people don't read online, they 'scan'. And if you combine that with a lack of whats obviously clickable, then you are at an immediate disadvantage, and the visitor is gone... to a competitor instead.
#2 is very important to me. I see way too many web sites with small fonts, and they have to be very good to make me come back to them.
Interesting information, thanks!
We had problems with the fonts on our corporate website (http://www.elfiq.com) but we fixed it. But now we're looking at redesigning the whole website, and we'll make sure to have the 5 points indicated below included.
Very nice post..
Thanks, Good information.
I've found #5 to be the hardest to convince designers of. Links need to look like... LINKS! Buttons should like like... BUTTONS! I don't want to play minesweeper with my browser.
Thanks for the tips; I look forward to the next 5
Nice tips that although basic are often the most important.
I am guilty of many long copy websites for some of the reasons mentioned above tho to be fair we often receive higher traffic to the longer copy pages as we can more easily target 2 or three relevant phrases per page.
Yes I know you might say to split those phrases into individual seperate pages targeting each specific term but then fitting themed similar pages into navigation etc can be, well, impossible in many cases. Therefor eit really comes down to the indivudual website and not in my opinion something to be recommended across the board.
Some simple actions can improve a site usability significantly, but after that initial work is done things become more hard.
Thanks for sharing this, I'll add this best practices to my check list!
Great tip, I learned a lot
Thnaks for the information. I read this article and took notes to build our new website at www.villiard.com , and I love the results. User also seem to like it a lot, thanks!
Nice basic tipps - i would like to add: call to action in the viewport and make pictures clickable.
Most of the Websites in the Internet don't care about the basics.
Call to action buttons i miss very often. what also helps is to highlight prices, especially when prices are reduced, just cross out the old price.
is for my french site, thanks for information :)
Increasing the spacing and making links look clickable are the two most important. The links that are highlighted in blue and underlined not only serve as a link, but also draws the attention of a visitor
Excellent tips for basic good practice. There is nothing more frustrating than having to work with clients (or their representatives) who are more concerned about the look of the site than the usability.
JayPatel· Sunday, May 30
#5 is still relevant today. Saw a nice example of links on W3C's site: http://www.w3.org. Notice the underlines. They're blue, but softer. I agree that we should probably stick to blue in most instances and I would say always underline so it is blatantly clear to users.
The things outlined here are common sense. Unfortunately, common sense is not so common amongst designers these days.
One way to improve usability is to guide your visitors, using text links containing the subject (main keyword) pointed to the page. Besides facilitating the navigation of users to the pages of their interests, will also allow search bots to move easily from one page to another.
Have a good design. A professional appearance is essential to generate credibility, but do not overdo it and avoid at all costs that design compromises usability and functionality of your site. Know that you can simply integrate beauty and function, and thus increase conversions.
Make sure your visitor has the feedback when it expected to perform an action on your site. Nothing more annoying than clicking a text link and be directed to a page with content unrelated to the text (anchor) of the link. And worse yet, do not get any feedback or response to an action within a site. For example, broken links, pages that do not open, etc..
Everything in this post is centered around making the page more scannable. People don't read on the web (very often), but what they do read, they want to be able to digest in quick easy chunks.