Good web design – following conventions

When designing a website an important consideration is its usability and, in particular, the site's visitors being able to understand how to use the site instantly without having to think about it. It should be obvious where to find the login link, the search box, know which text is hyperlinked without having to hover over it, etc.

The easiest way to design for people is to give them more of what they already know and understand. Let's take a look at the most popular sites in the UK and see how they do things. We'll look at where various page elements are positioned and how links are styled. This list comes from Alexa's Top Sites in the United Kingdom.

Google (UK/Global) google.co.uk/google.com

logo position - centered, top login position - top right search box position - central settings position - top right filters/options position - top ads/sponsored results position - right column corporate info position - footer links - blue, underlined unlinked URLs - green

Facebook facebook.com

logo position - top left login/logout position - top right search position - top right options position - top feed filters position - left column ads position - right column corporate info position - footer post box position - central, top links - dark blue, not underlined

YouTube youtube.com

logo position - top left login position - top right search box position - top, central and repeated at foot of page corporate info position - footer links - blue, not underlined

Yahoo! yahoo.com

logo position - top left login position - top right search box position - top, central filters position - top options/filters/personalised links position - left column corporate info position - footer links - dark blue, not underlined links - black, not underlined (in menu box)

Bing bing.com

logo position - top left login position - top right search box position - central, top corporate info position - footer links - white, not underlined (to fit with background image) links - blue, underlined links - blue, not underlined (in menu box) unlinked URLs - green

BBC bbc.co.uk

accessibility info position - top left logo position - top left search box position - top, central corporate info position - footer links - green, not underlined

eBay UK ebay.co.uk

logo position - top left login position - top search box position - top filters position - left column corporate info position - footer links - blue, not underlined

The consensus

From looking at these popular sites we can see these common conventions:

logo position - usually top left corner login position - usually top right corner search box position - always at the top, usually central corporate info position - always found in the page's footer search filters or options position - either running horizontally across the top or down the left side ads position - in the right column, after the main content links - usually blue or dark blue, sometimes underlined, more commonly not but underlined on hover

Consciously or not, this is what people are used to seeing on the web so this is what you should follow. Web users will instinctively look for these page elements in these locations and understand links in these colour schemes. Any deviation from "the norm" will increase the chances of uncertainty or confusion.