What should your website have in common with Amazon.co.uk?
Web design conventions are a set of rules that help visitors “feel at home” on your site even if it’s the first time they visit it. Most websites adhere to these rules and yours should to.
If you are involved in the design of your website, this is what you should know:
- Your logo should be at the top of the page… most likely on the left
Your company / website logo, also sometimes referred to as site ID, should be placed in the top left corner of your site. This is the first place people will look to identify the site they are on.
Note: if your site targets people who are used to read from right to left, you may consider putting your logo in the top-right corner.
- Your logo should link back to your homepage
This point is very important on information heavy websites or if the link to the homepage is not clearly and easily visible “above the fold”. By clicking on the logo, visitors should expect to go back to your website home page.
- Links are underlined and in a different colour than the text
Do not rely exclusively on colour to differentiate links from “normal” text because around 10% of the population suffers from colour blindness. Links are usually underlined and blue, but it has become common practice to match their colour to the branding of the site.
Note: do not use underlined text for non-links as your visitors expect all underlined text to be a link.
Note: headings are sometimes underlined, but the line is usually not continuous or of a different colour.
Note: it is also common for the main navigation links to not be underlined because they possess other features that makes them easily recognisable.
- Visited links are of a different colour than other links
Still important but not as much as making every link jump off the page, you should make sure that people know which page they already visited by changing the colour of the links pointing to these pages.
Note: this is achieved in CSS by using the :visited selector.
- The navigation stands out and is consistent throughout the site
Consistent navigation means that it is always at the same place, preferably above the fold, at the top (horizontally) or on the side (vertically). It behaves the same way throughout the website and can easily be identified. The page / section the visitor browses is usually differentiated from the others to let them know where they are.
- Visitors can search your site
For larger sites, a search facility is almost mandatory. The search box is usually labelled as such and the associated button reads “go”. If the box is not labelled, the button should read “search”. In any case, you need to make sure it is obvious what the box does.
- Breadcrumbs are used somewhere near the top
Again, mandatory on larger sites, breadcrumbs help the visitors visualise where they are. It also allows them to go “up” one or two levels to view the complete structure of a section.
Note: breadcrumb navigation or breadcrumb trail takes its name from the Hansel and Gretel fairy tale.
- If something looks like a button, it should act like one
Form buttons should submit or clear the form, navigation buttons should take your visitors to a new page.
Note: buttons tend to have a higher click-through rate than inline links, so make sure you use them as part of your call to action.
The above conventions on Amazon.com:
The following 3 conventions are more subtle but still very important to make sure your visitors are happy with your website.
- Make form fields easily clickable
Getting a bit technical for this point. Your forms fields should be labelled properly and, when clicked, the text should focus on the associated field. This is extremely important for small form elements like radio buttons and checkboxes.
Note: this is achieved using the HTML <label> tag.
- Your website should be accessible with and without the www
As you can see, the address of this website is http://netaccountant.net. But if you were to type http://www.netaccountant.net in your browser address bar, you would still find the site.
Ideally, your visitors should only be able to access one version of the site (either www or non-www). This is to avoid duplicate / canonicalisation issues in the search engines.
And because you are not Amazon.com yet: put your contact details in plain sight. The aim of your site should be for people to contact you, so make it as easy as possible. Have your phone number prominently on every page and a contact link within your main navigation.