Web conventions facilitate easy browsing and reduce cognitive load

Web Conventions

Definition:

A web convention is an established design norm that web users have become accustomed to expect websites to follow. Web conventions help create a user’s cognitive schema so that they know where to expect to find certain kinds of information or functionality. This reduces cognitive load and improves browsing efficiency.

Buttons should look clickable

Where web conventions are not followed this can disrupt information search and confuse users because the website design does not conform to expectations set by their cognitive schema. Below are seven web conventions that if broken are likely to have a negative effect on the customer experience and may also reduce your conversion rate.

Primary navigation should be a bar across the top of the page

  1. Logo placement – Users expect a site’s logo to be located in the top left-hand corner of the page. Indeed, research by the Nielsen Norman Group found that getting back to the homepage is around six times harder when the logo is in the centre of the page rather than in the top left.
  2. Primary navigation – The primary navigation should be positioned as a horizontal bar across the top of your page. This is such a strong web convention that if your main navigation is not at the top of the page this could lead to frustration and users leaving your site. A top navigation is more visible because it always located above the fold and in the west people naturally read across a page from left to right.
  3. Button design – People should instinctively know what is clickable and what is not clickable. A button should therefore use a 3D effect and be clearly shaped like a button to be instantly seen as clickable. Anything that interferes with a button looking clickable, such as flat-design, could reduce conversion rates and lead to user frustration.
  4. Link styling – People intuitively expect links to be text that is underlined and in a different colour. Avoid using different coloured text or underlining text that isn’t a link as this just confuses people.
  5. Red is for error – Don’t use red or pink as a font colour because red is strongly associated with error messages and mistakes. Pink can easily be perceived as red depending upon the background (e.g. saturated dark blue). This pre-dates the internet of course as many generations of school children and students have become accustomed to teachers correcting mistakes with red pen.
  6. Standard icons – The meaning of certain icons such as the shopping cart or envelope are instantly recognisable by web users. Avoid changing icons to less recognisable images as this will just confuse and annoy customers.
  7. Clear naming – Labels allow us to categorise items and also refer to them by name. Ensure you use clear, descriptive names that people can instantly tell what they refer to as otherwise this can result in confusion and frustration.

How confusing is this? The website partycasino.com uses a pink font for links. Together with the low contrast text the use of the colour pink for links is very distracting and rings alarm bells in the user’s brain.

Image of partycasino.com homepage where the colour pink is used for links

 

Resources:

Conversion marketing – Glossary of Conversion Marketing.

Over 300 tools reviewed – Digital Marketing Toolbox.

A/B testing software – Which A/B testing tools should you choose?

Types of A/B tests – How to optimise your website’s performance using A/B testing.

Digital Marketing and Insight