Core UX Principles

Present Fewer Choices

The average person can only retain around 7 pieces of information at any one time. If your website provides your users too many choices, it makes it more difficult to get them to focus on the action they need to make e.g. selecting the product they want to buy.

If you need to give more than 7 choices, they should be chunked into groups. For example, ‘chunking’ could be achieved by sorting a long list of household products into groups based on similarity (e.g. Kitchen Products or Bathroom Products etc.). Design solutions to chunking include sub-menus or tabs, depending on where on the website the challenge is faced.

The rule of 7’s is sometimes called Miller’s Law.

Organising Information

The L.A.T.C.H principles can be used when organising information. L.A.T.C.H stands for Location, Alphabet, Time, Category & Hierarchy and together they represent the finite ways of displaying information.

Clear website navigation/signposting

A user on a website should always be able to answer these three questions.

• Where am I?
• How do I get back/one level up?
• How do I get to another part of the app/website?

If your user can’t answer these questions then you should consider adding in more signposting. For example, breadcrumbs with deep-level websites.

Feedback/Progress Tracking

It’s important to show a user how much progress they have made with a particular task. For example, if the user needs to complete a form that is five pages long they should be shown this (e.g. page 2 of 5 or 40% complete).

Reading Gravity

The Gutenberg Rule is used to highlight western habit of reading left-to-right, top-to-bottom. The Z pattern and F pattern are variations of this.

Standardise Design

Website users will spend most of their time on other websites (and not yours) so, when they get to your website they probably want it to work in a similar way. If you think back to the past five websites you visited it’s likely that they all had consistent features; logo in the top-left that linked to the homepage, horizontal primary navigation etc.

This is sometimes referred to as Jakob’s Law.

The 5-point Rule

Limit the usage a typography on your website/app to no more than 5-points. For each font, size, colour and weight you get a point. If you want a nice, clean design you should use no more than 5-points.

Visual Hierarchy

Websites should have clear visual hierarchy, so it’s obvious to the users which pieces of information or action are the most valuable.

• Size – Larger elements will dominate and catch eyes first.
• Colour – Bright colours catch eyes ahead of muted, drab ones.
• Contrast – Stark differences between elements draw eyes to the brighter one.
• Alignment – Users expect to find certain elements in the same place.
• Repetition – A repeated quality (e.g. coloured parts of the text) draws the user’s eye.
• Proximity – Putting related elements (e.g., header with associated text) close together means these are related.
• Whitespace – Including whitespace around elements singles them out as separate groups of information.
• Texture and Style – Using distinct textures/styles (e.g., chunky, military-style buttons) draws the eye while setting the theme.

Limit Distractions

Don’t have a load of clutter on the page, as this will distract the user from their goals.

Sentence Length

The ideal sentence length for maximum readability is between 50-60 characters long. Using a font size of 16px a column would need to be between 600-650 pixels wide. Popular news websites stick to this rule, the BBC website has a column width of 615 pixels and the Guardian website is 620 pixels wide.

Friendly Wording

Make the wording easy to read, this is especially true for the navigation and calls to action.

Device Dexterity

You should ensure that there is a 40 pixel by 40 pixel clickable area on mobile layouts.