Web Conventions
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.
This homepage from Gymfactor.co.uk does not have the primary navigation at the top of the page as people have come to expect, but rather in the middle of the above the fold area. Apart from being confusing for visitors, it also makes the design look cluttered and up-side down. The logo is also not in the top left-hand corner which is another strong web convention.
Image Source: Gymfactor.co.uk
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 eight web conventions that if broken are likely to have a negative effect on the customer experience and may also reduce your conversion rate.
Web Conversions and the Negative Effects
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.
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.
Secondary Navigation
- This should be located either near the top of your page or on the left side of the page as people in the West are taught to read from left to right.
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.
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.
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.
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. Even the popular hamburger icon which is used in so many different contexts has been found to be sub-optimal in most experiments and works best with a ‘Menu’ label.
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. For web forms avoid using labels as placeholder text as this can create usability issues.
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 distracting and rings alarm bells in the user’s brain. The pink looks like red on a saturated dark blue background.
Conclusion:
Web conventions are the social norms and traditions of the web. You wouldn’t break real-world social norms in a business situation and so don’t do it on the web either. They provide a sense of familiarity to users who have never visited a site and this means a site can benefit from the mere exposure effect. People prefer environments that conform to their expectations and this helps to improve your conversion rate because users are more likely to convert if they feel at ease. Breaking web conventions increases cognitive load which often reduces conversions.
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.
