Rubbish Web-Design and Goldfish Syndrome

Sketch lines on Web-Design

by Rupert Sharp
of http://www.oyster-web.co.uk

Last updated: 3 Dec 2007

The importance of having a well SEO'ed site is obvious (it's why we're here!) but having good Rankings and having good design go hand in hand when it comes to customers. There is no point in having a well optimised site but awful design and vice versa. People will either lose interest or never see it.

The solution is of course to have both, but here I'm going to talk more about the design and the effect it can have on the customer.

Having a well designed site has an enormous amount of influence on whether the customer is going to buy from you or someone else. If your site looks like it's been thrown together in a few hours their going to think you're not serious and will hit back and down to the next search result. It is, from my experience, the sites that look impressive that I am more likely to find attractive and research shows that I’m not alone in this behaviour. This is why design is such an important factor.

Goldfish Syndrome is when a customer is browsing through search results and comes upon a site, looks at it for 3 seconds then forgets all about it. This is the thing that web-designers try to tackle, creating a site that enthrals the user even to the point that a user not looking for your services will go on it anyway to have a look around. I'm not saying you should try and tackle a market that doesn't want anything you have to offer, I'm just saying a site should be interesting enough to be worth spending time looking at. Having enthralling Content is just as important as design so don't just use one in place of another.

Images and CSS

As mentioned above, a site should grab your attention the second you're on it, long gone are the days of plain text and table sites, the best way to ensure an interesting, custom feeling and fresh looking layout is to avoid using block colours as backgrounds and banners/bars, there is nothing more boring than seeing a site that looks like a wire frame. By using images, the sky is the limit for visual design you can do whatever you want with your site; you can make it look all mechanical and curvy or keep it very straight and ordered either way it's going to look a lot better than lines and blocks. Just a note on image use, if you don't already know you should never replace words with images, that includes buttons and menu items as this is not good for Search Engine spiders. Often sites have a small image banner at the bottom containing their contact details, don't do this; anything that can be text should be, this has many advantages especially for SEO purposes. Having text as an anchor on a link is very important, having a good Anchor Text on a link will give the search spider an idea of where it's going and the expected content/purpose of said page. Using CSS to configure your links and text areas doesn't mean that you can't do interesting things with it. With the implementation of CSS you can make said link change the background, text colour, border or anything on mouse-hover. See the example below...

#button{
width:200px;
height:auto;
}
#button a{
color: black;
display: block;
padding: 3px 3px 3px 3px;
background-color: blue;
border-right: 2px solid #777777;
border-bottom: 2px solid #777777;
border-top: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
}
#button a:hover{
border-right: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
border-top: 2px solid #777777;
border-left: 2px solid #777777;
background-color: red;
color: black;
}

Then the onpage code would look like...

<div id="button">
<a href="http://www.example.com/">Anchor One</a>
<a href="http://www.example.com/">Anchor Two</a>
<a href="http://www.example.com/">Anchor Three</a>
</div>

The example is a bit garish but the code can be changed to whatever you want including swapping “background-color:” to “background-image:” to get the same effect as a JavaScript image switch and from an SEO perspective retain the same goodness as an ordinary text link.

General Guidelines For Design

Obviously the final design is up to you (it is your website after all!) but there are a few general guidelines that I would suggest to make sure your site isn't one to be just 'glanced' at.

Something that you should remember when creating/editing your site, ensure your homepage has some content on it not just an image or a 'welcome to the site' screen, it's a bad idea to have nothing on your homepage and just use it as a 'you've found our site' page. The homepage should be impressive as this is of course the first impression a customer gets of your site.

Now, the first thing that a person nowadays expects when they go to a site is to be hit in the face by the logo (metaphorically of course, a lawsuit might be in the making otherwise). The logo should traditionally be at the top of the page as this is where the person first looks which, like a search spider, defines everything else underneath like a header. Never squish your logo in a corner as people will pay less attention to it and it won't stick in the memory, it will also make your site looked cramped which is an attention death-trap. People generally don't like sites that look too compacted, solidity is a yes but if you've tried to cram all your stuff into an area that just isn't big enough it will make it looked strained; you should ensure your site can breathe.

The second thing people will be drawn to is the content. The content of a page being the most important should be put in a spacious area in the central spot of your site to catch the eye, it is also best to define an actual area visually for your text for example add a border around it or some form of separator. Ensuring content is isolated from other objects on the page increases its individuality and therefore increases the eye-catching value of the content. Your content should be quite near the top of this area. Don't fill the top up with too many links or pictures. Instead, find another place to put those - preferably at the side or at the bottom of the content, but ensure your content isn't pushed too far down the initial page as this makes the text look a bit sporadic. If you’re going to include 'extra information' links or images in your content (unless it's a diagram or a link that flows into the content) place them at the side of the text try not to break up the flow of the document with large images or adverts. If there are large blocks of objects in-between text it can sometimes make the user believe that that's the end of the document which disrupts the customer’s chain of thought.

Menus next! Yet again there is a basic traditional position for these - underneath the logo at the top (above the content) usually contains the main horizontal menu bar. This main menu bar should contain links to the central parts of the site such as 'Home', 'About Us' and 'Shop', by focusing the main areas at the top it means customers can easily get to the central points of the site without having to look too hard. Getting the bit about goldfish syndrome? The fact is people lose interest in a site if things are too difficult to find, it isn't laziness it's just the way our minds work so that kind of menu should be easily accessible no matter what part of the site you’re on at any given time. The second menu that (word of the week) traditionally is on a basic site, is the left menu; this menu has more specific navigational links on it that point towards more detailed areas concerning that part of the site, archives, news etc. but sometimes is used in place of the top menu bar and controls all site links usually with the main site links at the top of the list. Occasionally it is appropriate to place a third menu, usually on the right hand side of the document. This menu usually contains links to more detailed informational areas of the site, such as a deeper explanation of one or some of your services/products.

Finally, the footer. A footer is a useful little feature that increases the 'professional' look of the site, and also allows you somewhere to put your company details such as phone-number, address, contact us, etc. The footer can be a bar or a whole section that should be placed surprisingly at the foot of page, I personally would advise to keep it smallish don't let it take up too much space or it will look a tad blocky and unattractive.

A Few Do’s And Don'ts Of Design

1: Don't use flashing text or banners ever (moving is fine but flashing is annoying and also distracts the user, breaking any concentration they had on your content).
2: Don't have something that follows you around the screen (helpbox/advert).
3: Do validate your code to ensure you haven't missed something that will hinder design.
4: Don't have too many moving gif's on any one page as this distracts the users and takes their attention away from your real content.
5: Don't use inline styling.
6: Do use a remote spreadsheet (styles.css)

<link href='styles.css' rel="stylesheet" type="text/css">

7: Do check for cross browser compatibility.
8: Do use classes where necessary to ensure maximum flexibility with design.
9: Do keep your website consistent, don't suddenly change the style through a link.
10: Ensure your colour scheme compliments your text colour so it isn't a chore to read.
11: Don't use any CSS or JavaScript that moves around or changes the design of the page on hover, on click is all right but otherwise no (links and such are ok, but the shape of the page should remain the same).

As said at the end of the day the final design is up to you but always consider how accessible and attractive your site is to your intended market. Having a basic template in your mind when you’re designing can ensure things move smoothly design-wise, make it professional; give it personality and happy designing!