Websites: What Not to Do

(Or: Why Making a Splash Might Wash Your Visitors Away!

by Gail Breese

Why do people visit websites?  

Generally it's because they want information about a business, an artist, a writer etc., and perhaps how to make a purchase. Home pages are so valuable. It is the first place where the visitor finds at a glance what your site is about, who you are and how to navigate to the information they want - and quickly! Or it should be….

Splash pages

A splash page is an intro; a page that in most instances just shows off fancy graphics or flash animations (and a prompt to download the latest version or plug-in). It usually has music playing, with no way of turning it off, and sometimes a hard-to-find ENTER link for the visitor to get to where they really wanted to go in the first place: the home page. The splash page can take quite a while to download for people who have slower internet connections. It is also yet another click away from the all-important home page.

Of course your website needs to be visually appealing to make the visitor's experience a pleasing one. A black and white, text-only website can be a very drab and boring place to visit. But there is a balance between making your website visually interesting with colours, graphics, information etc, and making sure that it is easy to navigate, that visitors understand the focus of the page, and that the text is easy to read.

Don't Drive Your Visitors Away

Here are a few things that you shouldn't use:

• Fast animations or scrolling text that the visitor can't read because it is scrolling too fast. Avoid those blinking, flashing graphics.  How can anyone concentrate and read your information when there are things moving, bobbing, flashing etc around the page? They are very distracting and annoying.
  
• Flashy, bright, patterned backgrounds or ones created from a large, busy image. (See example Three.) Not only does it brand the site as amateurish; it makes reading the text nigh on impossible. There are so many websites offering free graphics for websites that it can be hard to resist for someone creating their first site.
  
• Auto-loading sound. If the visitor wants sound, they can go with their own preferences at home. But if they are at work, they probably don't need the distraction of someone else's idea of favourite music starting up. Worse still: a site without an OFF button! These sound files can take quite a time to download depending on the size.
  
• A "busy" site which makes it impossible for the visitor to find the focus of the page.
  
• A hodge-podge of fancy font styles, sizes and colours that make clarity and ease of reading difficult. (See example one.)
  
• Black backgrounds with white or any other colour text. (See examples Two.)
  
• Broken links. The visitor clicks to visit a page and finds themselves either going nowhere or to the wrong page.
  
• "Best viewed with this browser" notices. Your site should work well on all browsers.
  
• Pages that take too long to load. Twelve seconds should be the maximum.
  
• Frames (unless you really have to).

As I mentioned in a previous article, the contrast and balance of your text size and colour and the background is paramount for a site that's enjoyable to visit because it's easy to read. So do not - ever - use white text on a black background for the main information text. I know, black and white contrast, but this combination makes reading very hard indeed.

Some examples of what not to do with your website:

Example One:

This is a website for camping enthusiasts. It's chaotic. It felt like my eyes were bouncing around the page like marbles! Where is the focus? The confusing number of colours, boxes, backgrounds and fonts doesn't help me decide where to find the information I want.

It just looks as though it's been cobbled together with bits and pieces as though the designer couldn't decide which colour scheme to use. I didn't stay very long.

Example Two:

(Example 2a) Dark backgrounds and white - or even worse - red text:

This site is for a little market town in the UK. The first thing I noticed was the bold block at the top with black text on a red and yellow background that was inviting me to "Click to visit".  I was on the homepage and I thought I was already visiting.

This bold red and yellow block of colour at the top totally dominated the rest of the information and links.

(Example 2b) Here is another website that uses a black background. This time the text is all red. I find my eyes are drawn to the two pictures at left and right, which, by the way, have the subjects both facing left making for an unsatisfying design.  I didn't get to read what the site was about. It hurt my eyes to try.

There was nothing on the page that caught my attention regarding information within the text. The lack of legibility lost another visitor: me.

Example Three:

And what about this doozy!  I have no idea what it is about. What you can't see on this graphic is that the geometric turquoise and bright, electric blue background was a constantly flashing, jiggling, psychedelic neon-coloured insult to the senses.

The interior graphics also flashed constantly. It was so painful to look at that I clicked the back button and sighed with relief.

Example Four:

This website was showered with numerous animated gifs. If anything could turn, flash or jiggle, then it was added here. The designer couldn't decide whether everything should be ranged left or centred. And they had their own little party using just about every colour they could think of for headings, text,  links and graphics.

It also scrolls down for what seems like forever. I didn't get to the bottom of it for this example.

On a positive note, at least the background was light and the text, in most instances was a dark colour and fairly easy to read.

Things that you should do...

It makes sense to make it easy for your visitors. Your goal is to have someone visit your website, stay to look around and especially come back again and again! 

Limit the clicks.

Your visitor's time is important to them. To help your visitors find what they want, ensure that  your home page contains all the necessary links to your attached pages. To keep visitors on your website, make it as easy and quick as possible for them to get to the information they are interested in.

Consider a Site Map.

Do you have a large amount of information on many pages? Then a site map would be a good thing to create. One click on the Site Map and they can see every page link at a glance.

Use Consistent Navigation

Make your navigation appear in the same place on every page so that the visitor knows exactly where to look when they want to see other pages. Graphic links are fun and can lift a website design and make it unique but it is important to also include text links for those who have images turned off.
 
Some people  turn off images so make sure that all your images have an alternative tag (ALT) or (TITLE) which describes what the image shows, i.e. "A picture of my book cover",  "My book launch at the local bookshop" etc..

Limit the Width of the Text Area

Keep the width of your text at 600 pixels or less. It is easier to read at that width than anything wider. It's no wonder that newspapers and magazines put their text into columns because it makes it easier on the eye to find the next line. Of course, your visitors could be viewing your website with different-sized screens, which will stretch or compact depending on the screen width from 800 pixels wide to over 1000 pixels. Fixing the width of the text will overcome the stretching problem. Or you could put it into two columns.

There are many instances of wonderfully designed websites on the web and when you are visiting websites just take a moment to think about the design; what worked for you, or what didn't. This way you will get an idea of what your own website design should include. I'm not advocating plagiarism, that would be counter-productive and the resulting design would not reflect you and your personality. But it could be helpful to gain an overview of what you'd like by visiting websites that appeal to you in some way.

© Gail Breese