UX Principles

Present Fewer Choices

The average person can only retain around 7 pieces of information at any one time. If you give your users too many choices it makes it more difficult to get them to focus on any important decision they need to make. If you need to present more than 7 information choices, they should be chunked into groups. This could be done by using sub-menus or tabs, depending where on the page you face a particular challenge.

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

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 remember 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

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 website (or app)?

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

LATCH Principles

The LATCH principles can be used when orgnising information. LATCH stands for Location, Alphabet, Time Category & Hierarchy, and these represent the finite ways of organasing information.

Feedback/Progress Tracking

It’s important to show a user how much progress they have made with a particular task. For example if a form is five pages long, show this.

The Gutenberg Rule

Used to show a user behaviour known as ‘reading gravity’, the western habit of reading left-to-right, top-to-bottom.

F Pattern and Z Pattern.

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.

The 5-point Rule

Limit the usage of 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.

Friendly Wording

Make the wording easy to read, this is especially true in the navigation.

Mobile hotspots

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