10 web design conventions that will make your website as good as Amazon.com

published on February 26, 2010 in Website Design

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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:

Amazon's website

Amazon's website

The following 3 conventions are more subtle but still very important to make sure your visitors are happy with your website.

  1. 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.

    Form labels

    Form labels

  2. 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.

subscribe

{ 25 comments… read them below or add one }

Josh from Inexpensive Web Design April 13, 2010 at 9:46 pm

Nice article. I think that what you have mentioned above is just good practice and usability. I’ve seen a lot of sites in my day that don’t go by the conventions that you mentioned. Which makes me think that only designers are in the know of these practices.

Reply

netaccountant April 14, 2010 at 5:55 pm

Hi Josh, thank you for stopping by. You are correct, implementing good practice and following conventions is really what differentiate professional web designers from the rest.
And it’s also great when exceptionally talented ones generate new standards like Eric Meyer, Andy Clarke or Jeffrey Zeldman did.

Reply

Josh from Inexpensive Web Design April 18, 2010 at 6:29 pm

No problem. I’m a big fan Andy Clarke and his stuff on CSS from New Riders. He provides a lot of useful content

Reply

Ample from website design May 23, 2010 at 3:28 pm

These tips certainly improve usability for big site and it can be apply to other website as well.

I always find Breadcrumbs useful in navigation, not knowing it’s call as such. Technie always have interesting jargon with interesting tales behind them. e.g: Cookies and Bug.

Reply

donnie from web design chattanooga May 26, 2010 at 4:24 am

Your list is pretty good. I do like breadcrumbs but they are not always needed for shallow sites. Having the ability to search the site is a good idea too, but not that important for shallow sites. I think one of the biggest things that you left off was contrast between background and copy. I’m amazed at how many people don’t get this right.

Reply

netaccountant May 27, 2010 at 12:58 pm

Hi Donnie, I agree with you on every points you made. My only comment would be that contrast would be more of an accessibility issue rather than usability one – where most of these conventions fall into.

Reply

Joyce from Large High Data Quality June 2, 2010 at 7:38 pm

Very informative & helpful tips. I have already followed most of your advice except for the breadcrumbs since I do not know how to apply. Is this a plug-in or built-in part of the theme?

Reply

netaccountant June 4, 2010 at 4:53 pm

I use Joost plugin for breadcrumbs, I simply modified it a bit to suit my needs, but you shouldn’t have to.

Reply

neil from web design liverpool August 5, 2010 at 12:43 pm

good tips, i often dont use breadcrumbs but can see why theyre useful. i guess theyre more important on larger sites

Reply

hector September 27, 2010 at 11:38 am

Nice post! For beginners in web designing this article is very important to keep in mind to have basic designing a website! I’m also learning to build my own website. Thanks for the post!

Reply

Neil from Web design Milton Keynes October 31, 2010 at 12:25 pm

I used to use heavily css’d category links on the left hand side. I studied amazons approach and cannot argue that whilst nice looking links are easy on the eye, people actually click on links that look like links!! Amazon are always testing their website and they didn’t do it this way for nothing. Nice article.

Reply

Rich from Web design leeds January 1, 2011 at 12:45 pm

I think to some extent that some of these points depend on if your site is as big as Amazon or not.

Amazon is huge, and so needs many ways people can get as simply as possible to what they are looking for.

However, if your site is only 6 pages, and they all are visible in the navigation, then things like a search and breadcrumbs can only clutter the page.

Reply

netaccountant January 12, 2011 at 8:22 am

Hi Rich, I agree, if you have a 6-page website breadcrumbs and sitemap are a bit redundant. Having said that, most sites have more than this amount of pages nowadays, especially the like of blogs and ecommerce websites. Breadcrumbs are particularly relevant if you want to “partition” your site and make it easy for users to visualise the “sections”.

Reply

Eve from Computer Repair Ventura January 22, 2011 at 12:26 am

I would have never thought there was so much thought process going into the design of a site. Obviously the general lay out is important, but things like putting your logo on a specific side, I would have not thought of. Do you think it’s better in a specific location because of the way we read?

Reply

netaccountant February 15, 2011 at 7:31 pm

Yes definitely, all the eye tracking studies show that in non-arabic countries the shape of our eye movement on a web page looks like an F. For arab speaking countries (reading from right to left) this shape is flipped.

Reply

Sean from Network Storage Center February 23, 2011 at 6:54 am

Using the <label> tag as shown above is a pro tip. Thanks for sharing Leo.
I also read that validating sign-up/contact forms in real time (you know those messages stating ‘you’ve written an invalid email etc…’) before a user submits the form and the page reloads can significantly increase conversion rates.

Another thing to note is that Amazon has a well thought out site hierarchy/categories. I’ve often seen redesign projects take too long because the initial design didn’t put too much thought into categorizing pages etc.. I think this often happens to small sites that weren’t really expecting to grow.

Reply

netaccountant February 24, 2011 at 3:28 pm

Thanks for the feedback re the instant validation of form field improving conversion, Sean. Clear categorisation also helps with search engine optimisation as it makes each section more coherent. And yes, small sites that grow tend to fail on the expansion and categorisation, but with more and more of them using CMS it should occur less often.

Reply

Dan from Tampa Web Design February 27, 2011 at 4:08 pm

You know it is amazing how much people appreciate simplicity. I designed a site for a client 6 years ago and it was very very basic and had that oldschool look to it. The layout was super simple. He recently contracted me to do a re-design, and he wanted all the bells and whistles, high res graphics, animated CSS, etc. Well after I did the redesign, he loved it, but his conversions went to hell and he has since put the old site back up! I always thought it looked crappy, but it converts like crazy and happens to follow most of these guidelines in this post!

Reply

netaccountant March 1, 2011 at 4:08 pm

Hi Dan, thank you for stopping by and for your comment. May I ask what the target audience for the site is and also the type of products / services it sells (and in which country)? This is really interesting, it would be good to also know if there is a lot of repeat business on this site (and if the new design was off-putting for regular users / they didn’t realise it was still the same site). Did you notice any drop in traffic after the redesign?

Reply

Dan from Tampa Web Design March 1, 2011 at 5:47 pm

The site sold technical support for professional audio systems. USA based. There are ALOT of returning customers. I did not notice any drop in traffic but I did in conversions. I do the SEO for this site and its ranked #1 for its main keyword so they do a good amount of daily business and there was definitely a drop when we did the new design.

Reply

netaccountant March 2, 2011 at 12:45 pm

Dan, thanks for the update. If you wanted to, you could “drop” a link to the site here with optimised anchor (via keywordluv), for us to have a look at it ;).

Reply

Dan from Pro Tools Training March 2, 2011 at 11:38 pm

Sure no problem! Like I said the site looks horrible in my opinion, but it converts like crazy!

Adam Barratt March 6, 2011 at 6:09 pm

Good point about the accessibility with both the www and without, as when I pay my credit card bill the site will not load unless I put the ‘www’ in there, and I forget to do it every time, very annoying and a very easy fix that a million dollar page rank 7 site does not do :(
Adam Barratt also wrote Yesterday I Became a Father

Reply

ashley from small business ideas March 22, 2011 at 9:02 pm

This is a fantastic post that highlights aspects that many websites ignore. It amazes me how poorly some commercial sites are designed. It is often so easy to get lost because the navigation isn’t in a clear hierarchy. I enjoyed this post an learnt a few things from your amazon example. Thanks
ashley@small business ideas also wrote Innovative Business Ideas Increase Success Rates

Reply

Danny from Tampa Real Estate
Twitter:
April 6, 2011 at 3:32 am

I think the search box is an important feature many blogs fail to leave off their blog. Having a clear and concise call to action like your phone number or contact form is very important like you mention.
Danny @ Tampa Real Estate also wrote You really want to buy a short sale

Reply

Leave a Comment. This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

CommentLuv badge

Previous post:

Next post:

©2014 NetAccountant.net - All rights reserved
Site Map | Legal Stuff