Skip to content

Chris Smith

A blog about front-end web development and other nerdery

  • Home
  • About
  • Contact
  • Web Posts
  • General Nerdery
Follow @chris22smith
Tweets by chris22smith

Tag: ad position

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.

unconventional constructionGoogle (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.

Tweet
Posted on 16 September 200913 January 2017Categories WebTags ad position, alexa, bbc, bing, corporate info position, design consensus, ebay, facebook, filter position, Google, link design, link styles, login position, logo position, search box position, web design, web design conventions, yahoo!, youtube
Proudly powered by WordPress