Resize text
+-
Here are the general categories the tips fall into:

Navigation Related Usability Tips
Tips on Improving Readability
Usability Tips on Using Search
Usability Tips on HTML Coding
Tips for More Usable Forms
Usability for Design and Layout
Usability Tips on Using Color
Ecommerce Usability Tips
Tips on Usability Testing
Usability Tips for Graphics and Flash
Advice on Frames
General Web Site Usability Practice
Advice on Following Usability Guidelines

Navigation Related Usability Tips

1. Use consistent intuitive navigation. Users are impatient. They hate having to learn new site navigation. Make your navigation obvious and consistent throughout your site.
From Christine Churchill
KeyRelevance.com

2. Consistent navigation and search feature present on each page are among the most important usability tools we can offer to a website visitor.

Putting together navigation and search results can be even more powerful -- it provides context and eliminates guesswork.

If you have a site search you might want to consider putting together search results and navigation (i.e. bread crumbs or cookie crumbs, depending on your culinary preference). If impossible to add the crumbs navigation to each link in the search results, consider adding the URL. Provided your site's information architecture is decent, seeing what directory the page belongs to, might provide an additional clue as to whether the result is indeed relevant.
From Mitko
Usable and findable sites from WebSage

3. Don't disable the "Back" button.
From Wanderer

4. Cookie crumbs are good to help visitors know what page/section of your site they are on. You know, the trail that looks like this:

You are currently browsing this page:
Home > Our Services > SEO Services > Pricing
From Kal
Ethical and effective global search engine marketing services

5. Home page link: Always have a consistent link to the home page of your site in the same location on every page (I do two: one at the top and one at the bottom). (Similar to consistent nav, but if you have a new small window you're opening, you may want a lighter design, but you should still have a link home, because you never know how someone will get to the site.)
From jbelle

6. Back up fancy navigation such as java applet, flash DHTML & javascript with appropriate text links & sitemap
From Excell

7. Build a Site Map

Yes, people do use them! The bigger your site, the more you need one.
From Scottie
Right Click Web Services

8. Remember that the homepage is not the only entry page to the site and make it clear to users which page they've landed on and where it exists in relation to the architecture of the site.
From Mark Stockton
1design4life search engine optimisation

9. Redundancy in Navigation. Navigation is fundamental to website development so redundancy assures users will find what they are looking for. Some may be attracted to images, some may wish a descriptive text link and some may wish to see an embedded link which assures them that what they are clicking is what they want. It never hurts to make it easy for the user to find their way around even if that means pointing them directly to what you think they may want.
From Schkecy

Tips on Improving Readability

10. Write for the Web.
You need text- but remember to break it up into easily skimmed topics. People will read a newspaper from front-to-back but tend to skim and jump around on a website. Make it easy for them to find what they want and get more info. (Refer to Bob's post- use document headings properly!)

11. Proofread
Nothing says "amateur" like grammatical/spelling errrors. Have someone else read over your work to catch things you might have missed.

12. Beware of Background Images
Background images are dramatic and eye-catching but unless you really know what you are doing, stick to a plain background, especially behind text.

13. Arrange elements on a page carefully.
Remember that people (who read using the roman alphabet) read from left to right.

Typically you will want to place your most important elements in the upper left side of the page. The further right and down you go, the less emphasis in placed on an element. Fine for graphics, bad for links and text.

This can be overcome with overemphasis (oversize, bright colors, anything that draws the eye) but as a general rule, put things that are most important first.

Too many sites put their secondary navigation (about us, contact, jobs) in their most important real-estate. People will look for that information- you want to direct their attention to products, services, or information that serves the site's goals.
From Scottie
Right Click Web Services

14. Use resizable fonts - using controls to change the size on the page, or through the browser's controls.

15. Use a san serif font for when people are viewing body text on a monitor, and a serif font for when they get a printable version of the page.

16. If you decide to ignore the advice on using resizable fonts and use pixels to define the sizes of your text, use points for your printable version.

17. Make sure that you name similar alternative system fonts for different operating systems.

18. A screen full of side-to-side text is difficult to read. Shortening the width of text upon a screen can make it easier to read.

19. Don't mix serif and san serif fonts in body text

20. Use mixed case, especially in body text. Avoid the use of all caps there.

21. Use bold for emphasis -- but not too much. If everything is important enough to be bolded, then nothing is.

22. Use italics for emphasis.

23. Use colored text for emphasis.

24. Don't use underlines. (except on links)

25. Avoid full justification. Left justification, with different stopping points on the right make text easier to read.

26. Text should be easy to scan, and adjusting line-height may help.

27. Make sure that there is enough contrast between text and background. Dark text with a light background works very well.

28. Use whitespace on a page in margins, to keep text from getting too close to edges and borders.

29. Using short paragraphs, bulleted lists, and headings and subheadings can make a page much easier to read than a presentation of the material in a large block of text.
From Bragaddochio
www.delawareintercorp.com

30. Spacing out Content
No, I don't mean spaced-out content.

Have you ever seen a large post that was all written as one paragraph? Did you want to read it or did you feel like you really had to focus to understand it?

Putting spaces between paragraphs draws the eye down the page and encourages the reader to continue. A good balance between text and whitespace is important, especially with large amounts of text.
From Scottie
Right Click Web Services

Usability Tips on Using Search

31. Ensure that every page has a search box, and place it at the top of the page. Make it obvious it is a search box, and try to use the word 'search' or 'go' for the button (I prefer search as it tends to be more intuitive for the user).

32. Make sure the search box is long enough so that the user can see the search terms they are entering into the box.
From Daniel Phillips
Box UK - Amaxus XML Content Management System

33. Capture the visitors search queries to a log file, then study. We had a site search and studied the logs...for a while. We later decided it was more work than it was worth. We're now switching gears and spending our time and efforts on making our site user-friendly.
From Think Web
The Karcher Group - Web Design & Internet Marketing

Usability Tips on HTML Coding

34.A good rule of thumb is to always use HTML tags in the manner that they were intendedd. That alone can help with usability and also from having to worry about getting banned or penalized by the search engines. From Jill

35. Validation: run code through a validator; even if you're not going to create perfectly valid code, it will help you catch errors that could cause problems
From Jbelle

36. Use HTML Tags properly.
I want to add something about the use of H Tags beyond SEO - in particular, accessibility. Many screen readers rely on H Tags to interpret the structure of web pages. Even if web pages have a structure, without proper header tags, screen readers can't find it. So it is important to use H Tags - for your visitors.
From Daniel Phillips
Box UK - Amaxus XML Content Management System

37. When setting up "Print this page" pages, put them in a separate directory so that you can exclude the robots from spidering them. "Print this" pages can be viewed as duplicate content.
From Scottie
Right Click Web Services

38. Use alt and title attributes to properly describe images, links, etc.
From Wanderer

39.Use proper document structure. Use heading tags for logical topic headings so that users can easily scan the page, and don't format them so much that they no longer look like headings.
From Bob Gladstein aka qwerty
Raise My Rank SEO Services

Tips for More Usable Forms

40. Always put the Submit Form button on the left and on the Clear Form button on the right. Never, ever put the Submit Form button on the right and the Clear form button on the left.

I don't know how many times I have filled out a form, went to click the Submit button, ON THE LEFT, and it's been the clear button instead and I've cleared out all my form fill-ins instead of submitting the form.
From Julie Hunkar
jhWebWorks Web Site Design, Hosting, eCommerce, and Marketing

41. Forms Should Retain Data Make sure your forms have cookies or whatever it is you need to do to keep your data intact if you have to click away for a minute while you're filling it out.
From Jill Whalen
HighRankings.com

Usability for Design and Layout

42. Keep everything close. No matter how complex your directory structure may be, there's no reason any page should be more than three clicks away from the home page.
From Bob Gladstein aka qwerty
Raise My Rank SEO Services

43. Catch your errors.
We all make mistakes. Create a custom 404 error page that includes your main navigation elements to help users find their way back to your site.
From Scottie
Right Click Web Services

43a. Make a custom 404 Not Found Page

Large sites in particular, have a need for this. In the life of a website, some pages will disappear, be moved, etc. And in case visitors drop by a page of yours that was somehow removed, or they typed in the filename wrong (this happens frequently and often takes visitors a while to figure out what the problem was), a custom 404 page will give them an indication of where else they may find the page they were looking for - might present a search option, or give links to the most popular parts of the site - or even a link to the site map.

Custom 404 Not Found pages are not an excuse to put everything and the kitchen sink on to one page though! They should be short and to the point, directing the visitor to possibilities with a quick-loading, helpful bit of information right when visitors need it.

This is a particularly useful idea for sites that are commercial and/or "professional". It really doesn't look professional when your web hosting company's 404 Not Found page pops up in the middle of a user's experience with your site! Ick!
From Jodi Krangle
Muse's Muse Internet Marketing Services

44. Don't mess with Scroll Bars!

Yes, you can make a scroll bar blend in with the rest of your page beautifully. So much so, that people don't see it. First preference- leave it alone. If you MUST change the scroll bar, give it some contrast so that it doesn't disappear.
From Scottie
Right Click Web Services

45.Make content printable. People often print things once they find something interesting.
From Ed Kohler aka Haystack
Web Marketing by Haystack In A Needle

46.Plan before you Build

Many usability issues can be cut off at the beginning by planning for the future. A good architecture will take future plans/expansion into account before ever looking at design. You must have a good foundation before you start painting the walls and picking out carpet...
From Scottie
Right Click Web Services

47. Keep a consistent look and feel throughout, don't confuse users with a lot of wacky pages that look completely different.
From RobWatts of Zoneweb website promotion services for business

48. Scrolling: keep it one-directional and preferably vertical.
From jbelle

49. Keep the page simple. Direct the readers eyes to the important parts of the page. Overloading the page headlines and links in confuses people.

50. Be careful with animations & marquees. They distract a reader from reading your content.

51. Make links obvious. Don't use the same font settings and color to make links visible only on a mouse-over.
From Bernard Ertl
SEO Help - search engine optimization reference, tutorial and advice

Usability Tips on Using Color

52. Be careful of low contrast color schemes

You can't go wrong with black on white. Sometimes, you just need more drama but remember to use a light font on a dark background or a dark font on a light background. Browsers are different, monitors are different, you never exactly know how the colors will render.
From Scottie
Right Click Web Services

53. Use colors carefully - especially the color red. Red is an eye magnet for a lot of people.
From Tom Dahm
Plano Yoga Connection

Ecommerce Usability Tips

54. Have whomever takes the customer inquiry telephone calls in a business write down detailed information about anything someone calls up and starts the conversation with "I was looking at your web site and had a question...". If they have a question, either content needs to be updated or the way things link together are not following the buyer's thought process.
From Paul Hayes
Bannerbooth.com

55. Definitely have the person on the phone ask a question or two about the site while they are at it. It's as good as talking about the weather (or better) as a conversation opener. It may not be as good as conducting ongoing weekly usability testing, but it can help to get regular input from customers. By all means, count your self fortunate to be in a situation where you can get customer responses about a site. If you get a lot of those questions, consider conducting some usability testing.
From Bragaddochio in response to Paul's advice
www.delawareintercorp.com

56. Don't force people to "Buy Now" before revealing the price. Why hide the price?
From Wanderer

57. Don't get too "interesting" with the shopping cart program - after I give my credit card number over to a website I do not want to see "something interesting and cool". I want to see my purchase processed in a "normal" and secure way. You can vary it a bit and make it look nice, but people usually don't like "cute" when it comes to their finances being handled by strangers.
From Mcanerin
McAnerin Networks Inc. - Internet Promotion in Calgary and Las Vegas

58. Make it easy to buy (of course it's easier said . . . .)

The three link or three purchase opportunity rule; graphic, text link, club over the head

59. Remember your international users!

When asking for address remember that it is not always in the same format as you may be used to: states are pretty unique to the US (town or county otherwise), country (list all or allow customer to enter), Zip (postal) code (don't force 5 characters). Phone numbers, if you do international business, should have the country code listed as well!

And especially, on an ecommerce site, let your users know your international shipping limitations or requirements before the sale!

60.Use a site map for Products.For an ecommerce site it can be especially helpful to show all of the product categories and associated details on a central page.
Matt Bailey
The Karcher Group - Web Design & Internet Marketing

61. Another usability best practice would be to define the purpose of your website. I see so many sites that are nothing more than a blob of information that someone slapped on the Internet. Site owners seem to pray that you'll figure out where to go and what to do next.

Define a few goal/target pages...and then help the visitors get to those pages.

If an e-commerce site's goal is to sell products, make the target page the "Thank you for purchasing our product". I think a mistake that is often made is defining the "Buy now" page as the the goal/target. This would be incorrect, because if your form or applications are difficult to use (or broke) - you may be losing customers at the form - and never know it. But, if you define the target page as the "Thank you" page, you can measure true success.
From Think Web
The Karcher Group - Web Design & Internet Marketing

Tips on Usability Testing

62.Test for different screen resolutions and browsers. Not everyone is viewing the web at 1280 x 800 or whatever on IE.

63. Test for text only browsers. Paranoids and dial-ups on slow connections often browse with images, flash, javascript, etc. turned off.
Bernard Ertl
SEO Help - search engine optimization reference, tutorial and advice

64. Check for cross browser compatibility and accessibility via text browsers or voice to text software. From Excell

65. TEST!

Test? Who tests? EVERYONE SHOULD! It's not hard or expensive. Find 3-10 people in your target audience and ask them to go through the site and tell you what they think. Observe only- don't explain why you did what. Compare notes between subjects to see where difficulties lie. If they never found your newsletter signup or get confused when they go to buy, you've got an improvement plan.
From Scottie
Right Click Web Services

Usability Tips for Graphics and Flash

66. Images: use at their actual dimensions.
From jbelle

67. Take the time to put larger images into a navigable page on the site instead of just pointing links into your images directory.

68. Optimize images for fast download without losing quality

69. Take care when using flash to give those that cannot or will not download a plug in an alternative.
From Excell

70. Flash skip buttons: do not put them inside the flash movie. If someone doesn't have flash, that skip button is useless.
From Jbelle

71. Add an exit option to flash splash movies/animations. Not everyone likes flash.
Bernard Ertl
SEO Help - search engine optimization reference, tutorial and advice

72.NO Flash splash!
Matt Bailey
The Karcher Group - Web Design & Internet Marketing">The Karcher Group - Web Design & Internet Marketing

Advice on Frames

73. If using frames make sure that pages indexed in the search engines are navigable.

74. Don't use frames unnecessarily.
From Excell

General Good Usability Practice

75. Don't have any dead end pages, regardless of how good your page navigation structure is. Give the user a suggestion and hyperlink of where else may interest them on the site. This applies equally to info sites aswell as e-commerce set ups.
From Jellytott
www.amwell-systems.com

76. Give users warnings. Opening new windows or PDFs: warn users.

77.Provide FAQs. Having the most frequently requested information (make sure to research your log files) in a FAQ list could benefit any user, whether experienced or not. Having the list of the FAQs on the top of the page with jump links to the answers would enable the visitor to see most of the FAQs without scrolling.
From Mitko
Usable and findable sites from WebSage

78. Small pop up windows: don't turn off resizing and scrollbars: one or the other is workable, but preferably just keep resizing available.

79. Make Contact info easy to find. It should be at the bottom of every page (obviously subjective, but almost always a good idea); at the very least a contact link.
From jbelle

80.Keep overall page size down in consideration of those on dial up.

81.Don't frighten people with the inappropriate use of elements such as unsolicited sound files. (Make it opt in!)

82.Contact pages should give clear contact details, not just a form to fill out that gives no info on who & where you are.
From Excell

83. Be careful of the use of pop up windows, don't try to control the users browser or create multiple open windows. From Excell

84. Keep Humans in the test loop. There simply needs to be a human element in there to determine what works best for a given site's potential audience. Not all of these suggestions will work for every site. It takes a knowledgeable person to know which will work best, and it also takes a very patient person to negotiate effectively with an oftentimes quite sensitive web designer, to get those changes implemented.

85. Redundancy is a GOOD thing!

Obviously, there's a point at which one can go too far with that (let's not be silly about this. ) but generally, having several ways to get to the same point - for example: text links on the bottom of the page, graphic links on the side of the page with appropriate alt-text, a search function in a highly visible and easily spotted location, an easily accessible site map, spotlights that explain what links are about in the text of the page, etc. - will make sure that your visitors get where they want to be, in the quickest amount of time for them. And that means more "business" - whether that's subscribers, happy folks who find the information resources they're after quickly, or people who buy the product the site has to offer - for the owner of the web site.
From Jodi Krangle
Muse's Muse Internet Marketing Services

86. There's a lot to be said for creating pdf versions and html versions of documents, so that people have a choice. Printable versions of html pages can turn out pretty good if you either have alternative printable versions or use cascading style sheets to make nice looking printed versions.
From Bragaddochio
www.delawareintercorp.com

87. Create literature as PDF docs so if someone has to show a superior in the organization something to move a purchasing decision forward, they can present something better looking that a printed out browser window. You only get one chance to make a first impression!
From Paul Hayes
www.bannerbooth.com

88. A better solution to the "print this" page is to use CSS. By using media-specific styles to specify different background/text colors, typefaces/sizes, etc. for printers versus browsers, you can have the exact same (X)HTML page serve as both your display and your "printer friendly" page. No duplicate content, no separate "printer friendly" pages, no subdirectories to exclude.
From Torka
NineYards.com - Bright Ideas for the Web and Beyond!

Advice on Following Usability Guidelines

Forum covers a lively discussion on when guidelines should be followed. A must read!

89. Usability isn't about mindless conformity to guidelines.

90. Usability best practice - provide an interesting experience for your site's visitors.

91. Usability standards guidelines should be read critically, and should be broken if they aren't appropriate. They are guidelines. Lightning won't come out of the sky and strike us dead for doing something a little different. As much good as the alertbox columns are, it's too easy to take them for gospel.

92. What I'm suggesting is to be aware of accepted design standards, and to know that sometimes the guidelines are not there because they are the best that's ever come along, but rather because they are the latest. I mean, we have cars. We didn't always have cars. Someone must have deviated from that horse and buggy standard.
From Bragaddochio
www.delawareintercorp.com

93. Jakob's research has shown him that webmasters are foolish to break from the conventions which are somewhat standardized on the web today. While a person is free to do whatever they want when designing a site, web users have grown to expect certain things to be in certain places. For example, you can expect to find a link to a site's homepage by clicking on the company's logo. You can also generally expect to navigate a site using navigation along the top of the page or along the left column.

Basically, he's suggesting to use your creative talents within the boundaries of accepted design standards. This is no different from car designers who continually turn out new cars but generally stick to putting the steering wheel and dashboard controls in a consistent location.
From Ed Kohler aka Haystack
Web Marketing by Haystack In A Needle

94. The best rule I know about usability is "do not use usability guidelines as a shortcut to thinking".

You will not necessarily get better usability from following a set of prescriptive guidelines.

95. Usability is about meeting the needs of the user. Spend time really understanding the user and their motivations. Then apply the guidelines that best suit your visitors needs.
From peter_d
www.searchengineblog.com

96. IMO you need to know the rules of usability before you can break them creatively. You shouldn't read too much into blanket statements, such as those often made by Jakob Nielsen. They're made for another kind of reader, one who doesn't know the rules yet. His mission is to "get them to get it". Once they get it, they don't see so much in what he's saying - because they're beyond it.

There is no doubt that many web sites lack usability, not because of creative divergence from the rules of usability, but mainly because of ignorance of the rules of usability.
From Alan Perkins
www.ebrandmanagement.com

97. Know your audience. Will they appreciate something being different if they can see that it may well be better the new way? Or will they just be pissed off that it's not where/what they thought it was because that's how AOL has their homepage?

I know that sounds like common sense but everything's common sense if you know enough; to have it all collected in one place is a valuable reminder of it, and why this thread is a good idea.
From Dragonlady7

98. An accomplished designer ought to be able to break the rules without losing the concepts of usability. But they do need to know what they are doing first.
From Scottie
Right Click Web Services

99. I'd much rather have a dull, boring site that is full of great content and easy to navigate than have something fresh and exciting that I can't find my way around or that frustrates me by hiding things I expect to be able to find.

100. It may be fun, but if it's not usable first I won't be back! All things being equal though, it would be more appealing to visit a site that is fresh and original. It's just that things typically aren't equal and more emphasis is given to novelty than usability. <
From Scottie
Right Click Web Services

101. Likeability is an important aspect of usability. But, it's also also more difficult thing to achieve because it can only really be measured during testing. But given two sites where everything else in the user experience was equal, the site that is more enjoyable does stand a chance of getting more traffic.
From Bragaddochio
www.delawareintercorp.com

More KeyRelevance articles...

Back to home page