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.