5 Basic Design Principles that will level up your product’s UX/UI.

80/20 rule, The Golden Ratio, Rule of Thirds, Fitts’ Law, Hick’s Law.

Golden Ratio — spiral stairs.

1. 80/20 rule.

The 80/20 Rule states that approximately 80% of users interact with 20% of the features in any large system.

80/20 rule in Adobe Photoshop –80% of the features are hidden in drop-down menus. This reduces the complexity of the display but also makes frequently used functions more difficult to access. Identifying the 20% of the functions and making them readily available in toolbars solves the problem.

The rule can be applied to any aspects of our lives — from management, economics, engineering, to interface design, productivity, to name a few. A few examples of 80/20 rule include:

80% of a product’s usage involves 20% of its features.
80% of the results come from 20% of the effort.
80% of bugs come from 20% of code.
80% of the company’s revenue comes from 20% of its products.
80% of the time is spent on 20% of installed apps on your phone.

The 80/20 rule can be very effective used when deciding what to focus on when improving user experience. Use this rule to focus 20% of your efforts on the areas of your work that bring 80% results. As designers, it is our duty to pick up problems that might involve a painful path but in the end, create the most impact.

2. The Golden Ratio

Golden Ratio is a ratio within the elements of a form, such as height to width, approximating 0.618.

The Golden Ratio.

The golden ratio is a mathematical ratio that is commonly found in nature and design. It conveys balance, symmetry, and fosters natural-looking compositions that are aesthetically pleasing to the eye. So what exactly is the golden ratio and how can we use it when designing digital products?

A little bit of theory first!
Putting it as simply as I can, the Golden Ratio is the ratio between two segments of the line below, such that the smaller segment B is to the larger segment A, as the larger segment A is to the whole line A+B.

How to apply the Golden Ratio to your designs?

Text Size

Set your modular scale with the golden ratio 1:618.

https://type-scale.com/

For instance, let’s take text size. We start with a base — 16px. After that, you multiply to get the sequential numbers: 16px, 26px, 42px, 68px, 110px.

If you are like me and like quick solutions, then you could use a tool like Gridlover or Type-Scale where you can play with different scale ratios, and it even gives you the CSS and HTML.

Spacing

Layout with the Golden Ratio diagram.

Golden Ratio — Twitter Layout example.

Spacing is an all-important element of any design, be it the use of negative or positive space, and it can often make or break the final result. Determining the spacing of elements can be a rather time-consuming affair; instead, start with the Golden Ratio diagram and let the squares guide where you place each element. This will ensure your spacing and proportions are calculated, rather than ‘instinctual’, as any minor tweaks towards achieving the Golden Ratio can make all the difference.

Content

Trace the Golden Spiral.

The Golden Spiral can be used as a guide to determine the placement of content. Our eye is naturally drawn to the centre of the spiral, which is where it will look for details, so focus your design on the centre of the spiral and place areas of visual interest within the spiral.

Saastamoisen säätiö.

Images

Golden Ratio/Rule of Thirds.

https://expertphotography.com/golden-ratio-photography/

If you need to convey important information or to create an aesthetically pleasing photograph, the Golden Ratio is here to help. Using the Golden Ratio, you split the picture into three unequal sections then use the lines and intersections to compose the picture. It helps lead the viewer’s eye through the entire photo, leading to more captivating images. Here’s how.

The ratio is 1: 0.618: 1 — so the width of the first and third vertical columns will be 1, and the width of the centre vertical column will be 0.618. Likewise, with the horizontal rows: the height of the first and third horizontal rows will be 1, and the width of the centre row will be 0.618.

1: 0.618: 1 — Photo credit: Canva.

03: Rule of thirds

9 equally divided blocks with 4 intersecting points.

Placing a subject on one of the 4 intersecting points creates much more balanced and dynamic communication between the art and the viewer. Placing the medium on the intersecting points allows for the image to tell a story through the visible background and the focus point. The asymmetry of the resulting composition is interesting to look at and generally agreed to be aesthetic.

04: Fitts’ Law

The time to acquire a target is a function of the distance to and size of the target.

Fitts’ Law.

Selecting a UI element can be faster, if the size is increased, of the distance decreased. Understanding this law helps us design better buttons, forms, lists, and other interactive elements.

Here are a few examples:

Buttons to complete an action should be closely beside the active elements.

Log in.

Important actions should be larger, so they’re easier to select.

Button size.

With menus, drop-downs and any type of interactive list, shorter is better.

Drop-down menu.

To conclude, consider Fitts’ Law when designing systems that involve pointing. Make sure that are near or large, particularly when rapid movements are required and accuracy is important. Likewise, make controls more distant and smaller when they should not be frequently used.

05: Hick’ Law

The time it takes to make a decision increases with the number and complexity of choices.

The more items in the list, the more time it’ll take to make a selection. Not too surprising. So how to improve UX/UI with Hick’s Law?

Unnecessary Effort = Frustration & Poor Conversions

Sign Up form comparison.

The more buttons the harder it is to stay focused on the search bar.

Google’s UI — before and after. Less is more!

Using Hick’s Law to categorise products.

Nike’s execution of Hick’s Law. The navigation menu is broken down into the primary category (men, women, boys, girls, customize, collections). When you choose the ‘Women’s’ category, it will display all categories for women. Therefore the user is not bombarded with too many choices. By categorising menu items, the user can navigate with ease and efficient manner.

Summing up, using Hick’s Law in practice, we will reduce the amount of time and effort needed to complete the user’s task.

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!

Want to improve your UX/UI skills further? Check out these sources below:

Laws of UX:
https://lawsofux.com/

Universal Principles of Design — a must-have book: https://www.amazon.co.uk/dp/1592535879/?ref=idea_lv_dp_ov_d

Nielsen Normal Group — YouTube channel
https://www.youtube.com/user/NNgroup

Pablo Stanley’s awwwards speech:
https://www.youtube.com/watch?v=bEg5ySTUGxE

I’m a UX Designer based in London. You can book a 1:1 time with me for a portfolio review or to get more advice on breaking into UX/UI!
For more info, check out my Patreon page: https://www.patreon.com/nicolaguzowska.
Connect with me on Instagram!

Love,

Nicola