So, let’s jump right in, shall we?

1. Lack of a search feature

A recent observation of the advertising habits in Japan revealed that many companies are opting to display the search bar as a means for promoting their site instead of using actual URLs.

More and more people are relying on search engine functionality to find things in the ever-increasing collection of information on the Internet today. Neglecting to include a search feature would be a huge mistake and might ultimately end up costing you repeat visitors.

With services like Google’s CSE and Yahoo’s Search Builder creating your own custom search engine becomes a piece of cake. Everyone should have one. No really. Everyone.

2. Excessive Download Times

With more and more people using high-speed broadband connections you wouldn’t think this is an issue anymore, right? Wrong. It’s been calculated that approximately 55% of Americans now have broadband access, which is up from 47% last year, but that still means there’s a good portion of the population still using dial-up connections.

If users have to wait for long periods of time for information to load then their experience will suffer as a result. Keeping your pages to a respectable size can save you money in bandwidth costs as well, should your website succumb to a large influx of traffic all of a sudden.

3. Outdated Information

Have you ever been to a website that contained outdated information about the subject you were researching? It’s a drag isn’t it? Information on a website should be perused occasionally to make sure it’s still relevant to the audience. Otherwise, they may feel that the website doesn’t get updated frequently enough to want to check back.

4. Using Complex URLs

From a user experience standpoint it’s a good idea to keep your URLs short and sweet. This makes it easier for users to quickly type in a URLs they remember of say in an advertisement without having to remember a complex series of parameters.

Which one seems easier to remember?

• www.furnitureoutlet.com/outdoor/furniture/collections
• www.furnitureoutlet.com/jump.jsp?itemID=3559&itemType=CATEGORY&path=1,2,3558,3559

Search engines also weight these URLs higher for relevance because they actually contain keywords and not just a long string of server variables.

5. Long Scrolling Pages

Though not as much of an issue anymore, people really prefer not to have to scroll through a seemingly endless page to find some relevant content. Try to keep the most important information up at the top of the page (“above the fold” preferably).

6. Non-intuitive 404 Error Pages

An error page is a fact of life when running a website. People are going to mistype something or your website could be experiencing some issues. It’s always nice to include a customized 404 error page that contains some information a human can understand (and not just the default browser’s interpretation of the problem).

Things to consider when designing your 404 pages:

• Explain to the user what happened and the possible causes and offer solutions
• Avoid using technical terms, because most users will have no idea what they mean
• Provide some helpful links that might help them get back on track, including a link back to the homepage
• Include a search feature to help facilitate continued browsing
• Brand error pages to keep a consistency with the rest of the website
• Include a link to “Report a broken link”
• Try a bit of humor to help lighten the users attitude toward the situation

Examples of good 404 error pages:

• www.simplebits.com/404
• www.threadless.com/404
• www.jhuskisson.com/404

7. Inaccessible Navigation

If users have to search around to find out how to go from page to page chances are — they won’t — so it’s a good idea to try and keep your navigation consistent and accessible at all (or most) times.

8. Scrolling Text. Marquees, and Repetitive Animations (That Never Stop)

It’s every Web Designer’s nightmare to see scrolling text, marquees and annoying animated images on a website. With plenty of other ways to attract attention to information, that don’t cause seizures and temporary blindness, it’s best to leave these techniques in the past where they belong.

9. Unscannable Text

Breaking up information into sections that can be easily scanned will help users find the information they’re looking for quicker. The quicker they find information the happier they’ll be. People remember sites that are easy to read and scan through.

10. Using Frames

Back in 1996 Jakob Nielsen said it best:

“Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link?”Jakob Nielsen

Just avoid them, because there really isn’t a compelling reason for using them anyway.

Conclusion

When creating a website it’s best to think about how your users are going to interact with the elements on the pages. Putting things on the page without regard for what that does to the experience can, and probably will, hurt the overall effectiveness of the website. There have been numerous advancements in the technology on the web today, and many of the old forms of website creation are not viable anymore and should be avoided at all costs.

Taking the time to avoid these things will greatly increase the chances of a successful website, and users will thank you with repeat traffic.

Thanks to a recent article by Aaron Cannon entitled, “The Accessibility Checklist I Vowed I’d Never Write”, there is such a checklist to now consider when dealing with accessibility.

Again, this list is not the perfect solution, nor is it the only solution, but I believe it is a good first step, and it gives our developers and designers a place to start from.— Aaron Cannon

You can download a copy of Aaron’s checklist as a PDF from Cameron Moll.

Page-by-page updates of a site design — including layout, colors, and fonts — is a time-consuming and error-prone process.

As customers visit your website, you can learn something about what they like and what they don’t like in terms of content and look and feel. You can also learn what works and what doesn’t work in terms of navigation. You might glean this feedback from informal conversations with customers, from server logs indicating that people don’t click on certain links, or from more formal usability and market research. But once you have some information about what could be improved, fixing it on your site can be daunting unless you’ve planned ahead.

If you’ve got design problems to fix on all your pages, it will be hard to justify the changes if you have to edit every single page. It takes time to open, edit, and save every file back to the server; then test every file, and possible open and edit it again if there continues to be problems.

You can avoid the problem of mixed content and presentation and make it easy to modify the presentation of all of your web pages by using cascading style sheets (CSS). Although it’s not difficult to make changes to HTML pages without CSS, it will often become problematic if you need to change whole sections of a page or several pages at once.

CSS offers a way of separating presentation from content

With CSS, you specify all of your content in the standard HTML files, and specify how that content should be presented in a CSS file.

Below is an example of what I mean.

HTML:
<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<h2>Example heading</h2>
<p>Some content would go here.</p>
 
</html>

Only the content is specified in this HTML file. All the style information is contained in a separate style sheet (style.css).

CSS (style.css):
h2 {
     text-align: left;
     color: #333;
     font-family: Georgia, "Times New Roman", serif;
     font-style: italic;
     font-size: 18px;
}
p {
     text-align: left;
     color: #777;
     font-family: Verdana, Arial, sans-serif;
     font-style: normal;
     font-size: 11px;
}

With a CSS file like this it would be possible to make whole sitewide changes to the style of the <h2> and <p> tags on every page of the site with the update of only one file.

Define a standard style sheet as part of your sitewide page template

Style sheets can be used as part of your page templates to create flexible and attractive web pages. You might define one default style sheet that all of your pages will use — one that defines the basic look and feel or your site.

Things that can benefit from the use of style sheets include
Flexible grid layouts
Navigation bars
Tab rows
And text links

Define a separate style sheet for printable pages

It is a good idea to have a separate style sheet for creating printable pages. This style sheet can be a much simpler version of your page template style sheet because printed web pages will not display navigation elements such as tabs and navigation bars, extra content modules, such as the sidebar or external links, or advertising.

To establish a specific print style sheet you’ll need to define the following just below the default style sheet in the HTML file.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

This will ensure that the printing functions will use the styles defined in the print.css file instead of the default style sheet. The technique can be very useful when creating ‘newspaper’ style articles that you intend for your visitors to print for future reference.

What about a mobile style sheet? You can do that too.

If you intend on having your content viewable by mobile phone users, then it’s a good idea to setup a separate mobile style sheet for them. This ensures that your content and web site represent the best possible image they can to your viewers. Someone would hate to navigate to your site only to find out that you haven’t taken the time to design an experience around the way they like to browse your site. It might make them feel like they are less important. This is just not the case anymore with more and more users beginning to really use their smart phones for things like browsing news sites and even purchasing products online. Sites like Amazon and Google have jumped on this trend and it can only be assumed that more and more companies will join in.

Here’s an example of how you might define a mobile style sheet:
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

For more information about creating mobile CSS, go to w3.org/TR/css-mobile
A List Apart is also a great resource for articles on the topic of CSS.