Outer Court

Tech - Top 10 Errors in Web Design

These are the most common — and most annoying — errors in online accessibility, and web design in general. (This article has been prepared in April 2003.)

1. Unexpected Behavior, Opening New Windows

When the user clicks the back-button, or clicks on a normal link, one should always serve to the expected behavior. This would mean showing the last page as shown, or the next page in the current window.

Other unexpected behavior are any dynamic navigation schemes implemented with the likes of DHTML and Flash. Simple links work best and should always be preferred.

Other unexpected behavior is the curse of Flash animations. Suddenly, scroll-bars look and work differently, or I can't use the right-click, or can't use the keyboard navigation, or the mouse scroll-wheel. Instead, a great-looking and flashy scroll-bar with very unique functionality appears. However instead of taking the extra-time to figure out exactly how to make use of this element of the GUI (Graphical User Interface), a visitor might decide to leave.
Or, as web accessibility guru Jacob Nielsen put it, "Different = Difficult".

And many pages include JavaScript "Helpers". For example, the focus a certain input-box. However, as it the nature of most browsers, they display the content while being downloaded. This results in the JavaScript "Helpers" to become active often after choosing a certain action. Thus often, they revert back the user action, an annoying contradiction (e.g., a text-input box already focussed loses the focus again).

2. Slow Feedback or Updates

Have you ever bothered to criticize a web site, by writing to the webmaster, or telling them of a factual error? Or trying to help, in some way or another? Or — gasp — trying to get help from them?

If you ever did, it might have been your first and last time, since the response — if you're lucky enough to get any — is not motivating enough to ever give feedback again.

There's two simple rules: 1) If you put up a web site, provide a feedback option (e.g. a simple email link, or a link to the feedback details page) on every single page, and 2) Provide personal response to the feedback in a timely manner (e.g. 24 hours). You might also want to tell the visitor how long, approximately, one will have to wait for feedback.

And then, there's slow updates. If you put up a web site, there's another rule: update it frequently if you give the impression your site contains fresh content. It is perfectly valid to have an online archive which basically never gets updated. But if you include a news section on your site, better make sure it contains news.

Of course, often a site lacks necessary man-power to update heavily. But for larger companies, this should never be the case.

3. No Context Provided

Often, pages are assuming a certain context. E.g., they assume the visitor arrived from the cover page, and knows everything that's to be found there (like the author information). Or they assume that naturally, a context frameset has been loaded. However, almost since its invention, we live in a world of search engines, and context-free indexing.

For example, a Google result might not lead to the frameset, but directly to the content (which absolutely makes sense). Or, one bookmarks a page, which then just reads "Table of Contents" with no further clue as to what the page is about. Or, a link simply reads "Click Here". But we must know that users scan the page, and especially bolded text or linked text, and they may not read the prior sentences.

4. Unclear Link Text

A link text ideally should be the title of the following document. When one wants to link to a document about office chairs, the link-text should read "office chairs".
(There are some exceptions to this rule, in which one can use the "title" attribute of the "a"-element, but in general it's much better.)

In any circumstance, "Click here" should absolutely be avoided as link text, since it's non-descriptive (and can be plain wrong in assuming the user has the input device to "click" somewhere).

5. Confusing Color Schemes/ Fonts

Many pages' readability is destroyed by confusing backgrounds, color schemes, unique link colors, untypical font-faces, or tiny (sometimes even fixed) font sizes.
This can all be overridden by modern browsers, especially with so-called User StyleSheets, but hardly anybody knows about. Or if one knows about it, hardly anyone would go to the trouble to optimize browser settings just for one page — rather, one might simply go somewhere else.

If your content is not unique, make sure to optimize the layout or you annoy and potentially lose the visitor — and if it's unique, feel especially responsible to do so for the sake of your readers!

6. Lack of Following W3C/ HTML Standards

Most pages on the World Wide Web, as of today, don't care a bit about validating the HTML (or XHTML, or whatever document type they chose), or using CSS (Cascading StyleSheets).
This greatly decreases a browser's and searchbot's potential to make educated guesses about its content, or to do meaningful translations. It also deprives special-medium browsers of their ability to display the HTML in optimized ways.

Imagine if everyone in the world adopted the standard of using headers (h1, h2) in the way they are meant to be, that is: the most important header is the title of the page and appears usually only one (being unique), the second most important header is a sub-section, the third most important header is a sub-section of the sub-section above, and so on. Now, browsers and search results could very easily display the table-of-contents for a given page, even in a linked version (that's what the Amaya browser does).
This is just one small example of how much more powerful the web would be, and how much more we could increase its impact, when web masters and page writers would follow some of the suggestions offered by the World Wide Web Consortium (the W3C).

7. Animation, Gimmicks, Flash

We don't want to have to focus on advertisement. And mostly, we successfully don't (e.g. banner blindness). However some pages put their advertisement right in front of the text, only to disappear a few seconds later. This is a highly annoying trend and something that surely sacrifices many visitors. It is often unclear how to "click away" those noisy imagery.

In other instances, only slightly less annoying, are visually stunning (moving, blinking) Flash graphics or GIF animations right to the side of the text. It helps to de-install Flash and turn off animations in the browser options to be able to actually concentrate on reading the text (after all, that's why one came to the page).

8. Slow loading, Bloated Table-Layout Pages

So many pages, especially newspapers, think they have to put everything (from stock news, to advertisement, to sitemap, to category overview, to related book reviews) on a single cover page. And they will repeat that for every following page. The site will become slow-loading.

Often this sub-optimal approach is combined with a fixed table-layout, one that most browsers won't and can't render until the HTML has finished transmitting, for the nature of HTML and how to display tables. In other words, one has to wait for several seconds (a long time for broadband connections) to see anything of interest.
The only thing that helps pass the time is killing the pop-up that mostly goes with this type of site-design.

9. PDF, DOC, and Other Non-HTML Formats

Most people these days are searching the Web's documents with Google. Google is a search engine that does index e.g. PDF and DOC documents, that is, it understands their content and knows how to index the keyword contained within them.

However, the end-user might not have the right software (like Adobe Acrobat Reader, or Microsoft Word) to display the documents. He or she might not even trust the document format will be harmless to the PC (think Word Macro Virii).

In such cases, the only alternative that's left is to click on Google's automatic conversion — however, as good as it may be, it often displays the documents garbled, or especially hard to read. Let's hope the automatic conversion of Google does not make web authors lazy, but reminds them how important it is to provide content on the World Wide Web in its lingua franca — HTML (or, these days, XHTML).

10. Irrelevant/ Badly Researched/ False Content

Well, not really a design issue — this is all about content.
Much has been written about Weblogs (or Blogs, sort of online journals, updated frequently). Sometimes, a thing, no matter how well-presented, is still quite uninteresting to most. Just adding another page that says "Today I have nothing to say" to be part of the Blog-community, doesn't serve anybody anything good.

And sometimes, the speed in which something is presented online, makes its content suffer. This ranges from grammatical errors, missing words, ambiguous phrasing and simple spelling mistakes, to articles that are badly researched, or false information.

E.g. even one of the best German online news magazines, Spiegel Online, suffers from hilariously bad spelling, and often extremely weird sentence structures, or plain irrelevant articles — something which, in this drastic quantity, would never happen with the print magazine. Yes, it's much more up-to-date, with its daily news, but does that mean quality has to be sacrificed?

Also see Jacob Nielsen's on Useit.com discussing the Top Ten Web-Design Mistakes of 2002 (Alertbox Dec. 2002) (nicely illustrated and very informative article).

Make a donation