101 Web design mistakes and how to avoid them!

By :
Ahmad Anis b. Mohd Fauzi
Faculty of Creative Multimedia,
Multimedia University
63100, Cyberjaya.
anis.fauzi@mmu.edu.my

Do inspirational design and fundamental usability have to be mutually exclusive? Not necessarily…

Professional Website design is one of the most difficult creative discipline around, with projects often stretching the designer’s talent and the user’s patience to their limits. There’s a conflict right at the heart of the design process, and it makes a difficult job even harder when there seem to be incompatible goals. Creative temperament rails against being constrained by limited bandwidth, inconsistent browser rendering and the potential absence of additional plug-in software. But users hate slow sites, over-large graphics, poor content and obscure navigation. Does it have to be this way? Do inspirational design and fundamental usability have to be mutually exclusive? Not necessarily. Often, the best results come from designing to the strengths of the medium, instead of lighting its limitations. In Web design, the first step is understanding the strengths and the limitations that exist, and realizing that the Web really is fundamentally different from any other medium.

This article describes 101 design mistakes the could be making your sites less useful, usable or attractive than they should be, ranging from cosmetic issues to serious usability problems. The aim is to help you achieve a balance between design and usability, creating sites that look great and are a pleasure for everyone to use.

Design

Falling to test in both IE and NN
Internet Explorer and Netscape Navigator have substantial differences in how they handle HTML tags, JavaScript and CSS. Make sure you test your pages on both browsers to ensure that they work correctly.

Putting important stuff ‘below the fold’
The initially visible area of a page is vitally important. Users will only scroll down if they can’t see what they’re looking for immediately, so ensure that things you want them to see are clearly visible above the bottom edge of the window at 800x600.

Not using Web-safe colours
Using Web-safe colours is still important: they help to stop colours appearing dithered on machines running in 256 colours. It’s generally worth sticking to Web-safe colours wherever possible, because on average, 5 percent of users still have only 8-bit colour.

Using blue or underlined text that isn’t a link
Don’t make text blue or underlined when it isn’t a link: users will become irritated when they click it and nothing happens.

Using transparent images on the wrong background colour
Be especially careful not to use transparent images on the wrong background colour: it reveals a halo of wrongly coloured pixels.

Setting the text of the status bar
Some Web authoring programs enable you to make custom text appear in the browser status bar when the mouse hovers over a link. It’s best not to do this, though, because it prevents the user from seeing the destination URL.

Using table background colour for borders
When using background colour on a table with 1-pixel cell spacing to contrast with a different colour for the cells to make border, Netscape won’t show table colour in the space between cells. Instead, put the main table inside another single cell table which has cell background colour applied.

Putting a background image in the TR tag
Don’t use background images for table rows because this isn’t supported in Internet Explorer. Watch out for Dreamweaver: in single cells table, it applies the background to the tag even if you have the cell selected.


Using table border colour
If you’re trying to create thin lines between table cells, you may have tried using 1-pixel borders with a table border colour. Unfortunately, the result is 2-pixel lines because the border is applied to each cell individually. Also, Netscape doesn’t support table border colour, so you get 3D embossing instead.

Using table borders
Don’t use the table border attribute to create more interest on the page; those 3D embossed edges can look tacky. To highlight or separate the information in a table, try using alternate row colour, or cell colour with 1-pixel cell spacing instead.

Using multiple columns
Using multiple columns of body text on a Web page forces users with smaller displays to scroll horizontally and vertically to read the content. It’s better to use a single column of a main text.

Making pages that cause horizontal scroll bars
Many sites are designed to a width of 740-760 pixels, but around 5 per cent of users still use 640x480.If you can, make pages flexible so they work at any window size but still look best at 800x600 (50 percent audience) and 1024x768 (32 percent audience)

Using images without width and height attribute
How many times have you viewed a page that shifts and rearranges as it loads? It happens when there are images used without width and height attributes, and makes it really unpleasant to read the page. Always ensure that image tags are supplied with width and height attributes.

Letting small text be anti-aliased in images or Flash
Anti-aliasing can ruin the appearance of small text, and make it look broken or fuzzy. In general, it’s best not to anti-alias 10pt text or smaller.

Not maintaining consistency
It’s important to keep design elements and navigation consistent throughout the site, so that all the pages feel like a coherent whole users don’t have to adapt the way they navigate as they move from page to page.

Not maintaining branding and navigation throughout the site
This tends to be a problem on Intranets and Websites with many content owners all doing their own thing. It’s important to ensure that all pages use common branding and navigation elements. Use Dreamweaver library items or GoLive components to control shared elements

Having splash pages or intro movies
These rank among user’s top pet hates, and serve only to put a barrier between your users and the content.

Making functional page elements look like adverts
Users are learning to ignore any page elements that look like adverts. Banner ads are 468x60 pixels, so avoid these sizes. Don’t make graphic panels the only way to link to important part of your site.

Making constantly running animations
Humans evolved with a high sensitivity for movement, particularly at the edge of vision, so constantly running animations prevents people from concentrating properly on the content.

Using animation for unimportant things
Use animation to direct attention to something urgent or important, not something trivial, or irrelevant to the main message of the page.

Using frames to crop the visible area to a fixes size
This prevents users from seeing more content by making their browser window bigger, and forces them to read through a tiny ‘letterbox’.

Using frames without compensating for the drawbacks
Printing, bookmarking, users entering the site from search engines, and accessibility to non-frames browsers are just some of the problems with frames. Make sure you put solutions in place for these if you use frames on your site.

Not designing in horizontal bands
On long pages, using a single table for the page layout can increase the time taken to display anything at all. Use several tables one below another, and the page will display progressively as it loads

Not using cascading style sheets
Still using the tag? It makes pages much slower and more difficult to edit, and can help to make the page less accessible. Try using CSS instead.

Embedding CSS style information in pages
Don’t embed style sheet information in the head of your pages. Instead, link to a shared style sheet so you can control your formatting from one file.

Using 8pt text in CSS
Don’t use 8pt text in CSS: this appears so small on a Mac that it’s completely illegible.

Falling to test on both Mac and Windows
Pages look different on different platforms, and it’s tempting to test only on the one you use. You have to ensure that your pages look sensible and work well on Mac and Windows.

Believing what your Web authoring software shows you
HTML code does different things depending where it’s viewed. Web design software is usually designed to show an approximation of what IE and NN will display, so it’s almost never right.

Designing for only one browser or platform
Users view our pages with a wide variety of browsers and internet platforms, and most of these handle pages differently. Don’t be fooled by what you see on your screen: learn to test your work in as many browsers on as many platforms as possible.
But remember: let go of the idea that pages have to look and work the same for everyone. They won’t and on the web, this is fine. HTML isn’t a page description language, and it wouldn’t be useful for its job if it was Design visually for up-to-date browsers, but also to make sure that everyone can use the content on the site in a way that’s appropriate to their set-up.

The best plan is to identify a core set of browsers and platforms to design for: IE4+, NN6, and perhaps Opera 5. Then, separate all the other browsers into two groups; layout capable but no DOM-compliant (for example, version 3 browsers and NN4) and text-only browsers (everything else). Ensure that everything works as you intend within these groups, and you’ll be doing well.


Accessibility

Making text into images
Texts GIF enable you to control the appearance of type, but they exclude vision-impaired users and search engines, and make your site incredibly sluggish.

Omitting ALT text from images
It’s important to include the ALT attribute in image tags and image maps, so that screen readers and other text-only browsers can still access the content. Make sure the ALT text is useful for users who can’t see the image.

Not putting any real text on the page
If your page contains only images, you may prevent users from accessing your site reliably, because images often fail to download properly when the Net is busy. Your page will download faster and be available to everyone if you use real text instead.

Using pixels as a unit of type size in CSS
Pixels used as units in CSS prevent the user from resizing the text on the screen in IE. Being able to resize text is important in enabling users with vision impairment to use your site effectively. It’s best to use other units such as point or percentage values for IE.

Using frames without helpful NOFRAMES content
The optional element enables you to provide alternative content for non-frames browsers. Unfortunately, all it usually contains is a message urging users who may be vision impaired or using a PDA to click here to upgrade your browser. Instead, it’s a good idea to include an email address, phone number, as well as links to some content.

Using scrolling text
Many people can’t read text when it is moving or blinking, or have difficulty controlling the mouse so as to click on scrolling links. It’s best not to use scrolling text at all, but if you do, ensure that it can be cancelled with the browser Stop button or pauses when mouse is over the animation area.

Not providing transcripts for movies or sound files
Providing a transcript enables vision or hearing-impaired users to access content in movies or sound files, while enabling all users with slow connections to share the content too.


Preventing the user from changing the type size
Some users have poor eyesight, and need to enlarge the type on screen. Others need to shrink the type to read it comfortably. It’s important not to lock the type size, such as using fixed-size Flash movies, text in images, or pixels as units in CSS

Using colour combinations known to be difficult
There are many users with various types of colour-blindness, and in their case, combinations of certain colours would make the foreground indistinguishable from the background. It’s best to avoid the most common color combinations that cause problems for people.

Preventing users from changing colours
To support vision-impaired users, you need to enable the user to override any colour choices in your site. The best way to do this is to use CSS to apply background images and colours.

Saying ‘Click here…’ as the subject of a link
Don’t use the words ‘Click here’ as the subject of a link. Links should contain text which describes what you’ll get if you go there, because screen readers summaries links out of context.

Using tables for layout
Tables cause problems for screen reader software, users with smaller displays or PDA browsers, and are ‘linearised’ when read with text-only browsers. This means you need to ensure that the table content makes sense when read row by row.

Failing to test for accessibility
Many Web designers are unaware that vision, hearing or physically-impaired people need to use Web, and so never test their sites for accessibility.

Failing to design for accessibility
Many designers work on the assumption that the Web is a visual medium. This is entirely wrong: it’s only a visual medium if designers make it so.
Images are important, of course, as is the visual design of pages. But if you assume that all your users can see, hear and use a mouse, you’re missing a big piece of the puzzle. Not only will you design sites that exclude people; you’ll design sites that simply don’t perform as well as they could in all situations.

A common misconception is that you’re hamstringing the design for a tiny audience. Wrong: there are over 1.7 million visually impaired people in UK alone (RNIB), and the Web is the only medium which gives them a chance to access written information on an even footing. Also, we’re talking about using DHTML and CSS as part of the solution, which enables you to make more advanced sites.

Making pages accessible to everyone is a matter of applying a few simple principles, and doesn’t involve compromising the visual design or performance of a site. All it takes is a little bit of thought, and the awareness that this is actually a moral issue as well as a design issue.

Navigation & usability

Using only icons for navigation
Icons are only helpful for navigation if they need no explanation. This is rarely the case, and the choice of icon for complex ideas like ‘about us’ or ‘press releases’ is never better than arbitrary. Don’t use just icons for navigation-offer text labels as well.

Making images too large to download quickly
It’s vital to keep image file sizes as small as possible. If the whole page takes longer than 30 seconds, people will abandon your site. Keep pages less than 50KB, and use lots of real text so that useful content downloads first.

Making the user roll over the links to see what they do
Its fine to offer additional information about link destinations using rollovers, but users mustn’t be forced to point at links to find out what they do.

Using clever names for site navigation
Navigation labels need to be clear and unambiguous, or they’ll simply be ignored. People don’t have the time or interest to explore links with obscure titles. Remember that because users quickly scan the page, they require simple, obvious link text.

Linking people’s name or navigation elements to MAILTO: links
Links on people’s names ought to go to a personal biography, not an email address. MAILTO links cause users to be taken into another program, losing the current window, and should only be used on text that’s an email address.

Linking to pages that have no content
If there’s no content on a page, don’t make a link to it. It’s better to have items in a navigation bar that aren’t linked yet so people know something will be along later, but don’t link to empty pages.

Pop-up windows that load too slowly
In an automatic pop-up window, ensure that you use a minimum of graphics so that the user has a chance to realize what the content is before they close it. You have about three seconds..

Pop-up adverts with no memory
It’s a major irritation when pop-up adverts keep appearing on every page, or when users revisit the home page. Use cookies to keep the pop-up closed once it’s been dismissed.

Not linking pictures associated with navigation links
When icons, photos or illustrations accompany text links, some users click the text and others click the image. It’s important to put the link on the image as well as the text so that users can find the link easily.

Not ensuring that the user knows where they are
Provide clear information on each page about where users are in the site. It’s important to ensure that the current page has an obvious heading, and also indicates which section it’s in.

Breaking the Back button
In navigation terms, the Back button on the browser is the user’s parachute. It’s important not to break it by opening new browser windows or using forced page redirection, otherwise the user will be unable to retrace their steps when they have to.

Making forms that require inappropriate fields to be completed
Forms can force certain fields to be completed, but you have to ensure that the form doesn’t force information to be entered if it’s not relevant.

Not having a search facility
All sites need a search feature unless they’re just a few pages in size.

Having a search facility that doesn’t work well
Around 50 percent of site visitors turn to a search feature within seconds of arrival at a new site, so it’s important that the search engine searches the whole site by default, and returns results in a useful way.

Broken links
Make sure that any broken links on your site are fixed as a matter of urgency. Check external links and remove or amend them if they don’t work. Try not to move things around on your own site so that inbound links don’t get broken.

Creating your own user interface elements
Creating new interface techniques using Flash and DHTML is exciting but can turn off users. Many users won’t bother or won’t be able to learn how to navigate the site.

Creating your own scroll bars
Scroll bars have to work just as the real ones do to enable users to access the content properly: this means they should grey out when all the content is visible.
The user shouldn’t be forced to learn new techniques such as hovering to scroll.

Not having a site map
Site maps let users see at a glance what there is and how it’s organized. They’re one of the best tools you can give your users.

Making a site map into a graphic
The site map is meant to be a hierarchical list of text links, outlining the structure of the site. If it’s made into an image, it won’t be accessible when it’s needed most.

Not having an index page in a large site
An alphabetical index to the content of a large site enables users to navigate directly to topics of interest without having to use the search engine or traverse the hierarchical navigation.

Not linking the logo to the home page
Visitors use the logo as a home button. Always make sure you link it to the homepage; this doesn’t stop you having other navigation for the home page as well.

Referring to something else on the site without linking to it
It’s important to make links to other parts of the site wherever appropriate so that users don’t have to try to navigate the whole site structure trying to find something.

Opening new browser windows for no apparent reason
Opening a new browser window is a major disruption to the user’s experience. Ideally, it should only happen when the user needs to see the previous page and the new page at the same time.

Not providing clear navigation back to where the user came from
When the user follows links down into the site, it’s essential to provide an explicit link to the parent page. Don’t force users to use the back button if they don’t have to: this is poor design.

Making links that go some place other than expected
It’s important that users get what they expect on the other end of a link. The most serious example of this problem is putting links to other sites in the navigation system or in the body text of the home page, where users expect to be taken into the current site. Make it obvious before the user goes there that a link leaves the site.

Putting too many links in a navigation bar
Generally, putting too many options in one place confuses users and slows them down. Restrict the number of choices to around ten at the most, and group larger list of options into categories described by headings.

Putting too many items in a select menu
Ensure that dropdown menus contain only related items, and if the menu contains a lot of items, make the dropdown menu into a scrolling list object showing at least five lines at one time.

Creating dead ends without onward navigation
It’s frustrating for users when they find themselves at a dead end: providing a set of ‘see also..’ links helps users get more from your site-especially if they contain references to other useful resources on the web.

Not offering links to other major site sections
Users have difficulty remembering options they have seen previously, so keeping important options in view helps usability. It’s often helpful to provide links to the main pages of the major site sections on every page, provided it doesn’t take up too much room. DFHTML menus are sometimes a good compromise here.

Having a search link instead of a search box
Users are able to find information more easily when you offer them a search box on every page. Going to another page to search discourages many users from attempting a search, making the site more difficult to use.

Making form fields too narrow
Most fields provided for users to type into are too narrow, and users tend to type only as much as they can see. This makes search much less efficient, for example, because users then don’t use enough search terms and receive unmanageable numbers of results.

Not making the next step obvious
When users need to complete a series of steps, it’s important to make the option to move to the next step obvious. Typically, the right option may be obscured by poor layout, too many alternative links, or by being located ‘below the fold’.

Making mailing list sign-up fields look like search fields
It causes problems when other text entry fields are positioned in the places users expect the search box to be, so avoid placing non-search forms in the top-right corner or the top of the left column below the logo.

Making sites are too slow
Slow performance is the main reason that users leave sites. Often the problem is caused by graphics that are too large, but sometimes it can also be caused by having too many small images. With functional sites, the performance of the database and application servers is often the problem.

It’s sometimes hard for the designer to understand the utter frustration that a user feels when the site won’t respond to them. It’s isn’t really about sites being fast or slow: it’s about something being there when the user wants it, or not. The best analogy is candidates attending a job interview. If five turn up, one of them will probably get the job, whereas a sixth who may have had better presentation, experience or skills, but didn’t show up, will not. Regardless of other considerations, your site has to be there when it’s needed, and the faster it responds, the better the user will like it.

CONTENT

Not saving images as GIF or JPEG
It’s essential to save all images as either GIF or JPEG. Although other formats may work in your browser, only these two are supported by virtually all the browsers in regular use.

Not using GIF and JPEG correctly
Saving photographs as GIF makes them dithered or posterised and greatly adds to file size. Saving other sorts of artworks as JPEG introduce artifacts, excessive blurring and makes colours muddy. In general, be sure to use JPEG only for photographs, and make everything else GIF.

Saying ‘Best viewed with..’
In the early day of the Web, when people started using proprietary Netscape tags on their pages, they would say on the site which browser you had to use to view the site successfully. In professional web design, you should aim to make the site useful in any browser.

Saying ‘Under construction..’
Most websites are ‘under construction’ all the time; you don’t need to say so. If the site is live, the content should speak for itself. Don’t put anything up that you don’t want people to see.

Not fixing spelling errors and typos
Grammar, spelling and punctuation matter as much on the Web as they do it in print. It looks really bad for the organisation if there are typos left on the site. Most Web authoring software includes a spellchecker, and all pages should be proofread before they go up.

Re-purposing text straight to web
Copy written for print isn’t usually suitable for re-using directly on the web. It’s important to keep paragraphs short, restrict them to one topic, and break up the content with lots of subheads. Use the ‘inverted pyramid’ style of writing so that the conclusion comes first and then provide progressively more detail.

Not setting page titles properly
It’s important to ensure that all pages have sensible titles that contain the site name and describe the page. Titles show up in the title bar of the browser window, but are also important in search engines and are used as the title of bookmarks or favourites.


Not adding new content
If you never add new content to your website, it looks like your organisation may no longer be in business. Users tend to revisit potentially useful sites about as often as they think they are updated with new content.

Leaving out the date information live
It is imperative to remove time-critical information as soon as it becomes out of date. You can use server or page scripting to remove such content automatically.

Not dating content
Pages can hang around for many years, and it’s essential for users to be able to judge how relevant the content is still likely to be. If you never update your content, then it makes you look bad to have old dates on the pages. The answer is to review information regularly and put a ‘reviewed date’ on the page.

Poor site structure
On the web, it’s important to make sure the content is structured in a way that makes sense for the users. Fit it to their needs and preferences, not functional divisions within the company. If possible, use a strict hierarchical structure, with local linear navigation where the user needs to complete a series of steps.

Relegating news to a news page
Many sites relegate news to its own page, and just link to it from the homepage. While there’s nothing wrong with having a news page. It’s important that any news stories are presented up front on the homepage. Users rarely visit the news page unless they are already interested in a story.

Using Java for navigation or essential content
Java applets are sometimes useful, but users often disable Java, or applets may be barred by corporate firewall software. It’s essential to make sure that the page is still usable if applets can’t run.

Using platform specific characters
Watch out for special characters because these may be displayed incorrectly when pages are viewed on other platforms. Typically, you’ll get problems with smart quotes, em dashes, trademark and registered symbols. Replace these with HTML character codes instead.

Using Director shockwave instead of Flash
It’s important to use Flash for web work in preference to Director whenever possible. This is because of Flash’s better download characteristic, high installed base, and much easier installation process for users who don’t have the player.

Not having email and phone contact information accessible from every page
It’s important for users to be able to contact the organisation using conventional means if they have trouble using the site or finding what they want on it. Make sure that every page contains contact information or a clear link to obtain the phone number, email address and physical address of the organisation.

Not providing a route for users to report problems
The first people to notice problems are generally the users. Make sure that you provide an easy method for them to report any problems, such as a link at the foot of each page.

Not acting on reports of problems
When users report a problem, they usually check back to see if it has been fixed. If the problem is still there, it makes it look as though your organisation doesn’t care. If you fix it straight away, then the user feels valued and your organisation will go up in their esteem.

Using Flash without browser detection and alternate content
Flash has become a standard to such an extent that it is the most widely supported rich content type on the web, and most people have a reasonably recent player. ‘Most’ is not ‘all’, however, and it’s likely that at least 10-20 per cent of your audience don’t have the right player. Make sure that alternative content is available as GIF or HTML, and display it automatically if the Flash player isn’t available or let the user choose.

Not saying which countries you do business in/with
It’s easy to overlook the fact that the first two Ws in WWW mean exactly what they say. Your site is available worldwide and users need to know whether you deal with their country. This is important whether you do or don’t, so ensure that you explain your policy somewhere central as well as wherever users can submit orders or queries.


Not providing enough information
One of the great cost benefits of a website is ability to relieve some of the burden that comes from answering queries, particularly for pre-sales and support issues. However, many sites just don’t hold enough information. So users that try the web first are still forced to phone up and hold in a queue- which helps no-one. Make sure that all relevant information is available on the web, or the site won’t succeed in reducing costs.

Not providing historical information
It’s surprisingly important to retain information on your site even if the products it relates to are no longer available. People buy and sell equipments for many years after it’s withdrawn from the product line, and it costs almost nothing to make your website a rich repository of all the information that exists for absolete products.

Not enough functionality
Even ‘brochure-ware’ sites can include rich supporting information that helps to answer pre-sales enquiries, or useful features like branch locators, comparison charts and links to other helpful sites.


Not supplying content as HTML
Adobe Acrobat PDF files are not universally accessible. Nor are Word document, Flash movies, Director shockwave files, Power point presentations, Excel spreadsheets, QuickTime movies, AVI files or Java applets. In fact, the only thing you can be sure your audience will be able to use is HTML.

Don’t be fooled by manufacturers’ claims of near-universal compatibility for any other format. Remember, ‘most’ is not ‘all’.

Apart from exceptional cases such as games, you shouldn’t provide content only in a proprietary or restrictive form, because it inevitably excludes some portion of the audience who don’t have access to the right software. Even then, it makes sense to use the most widely supported format that does the job.

This isn’t to say you shouldn’t offer content in PDF, Flash, Shockwave or any other format that adds value for some users. The point is you shouldn’t only offer content in these formats because this adds value for some users at the expense of others.