During my training in becoming a Product designer, I referenced Jon Yablonski’s Laws of UX for many stages of the design process to ensure that my designs followed best practice for heuristics and principles.
Jon had already visualised his Laws of UX using minimal, abstract concepts not to dissimilar to my own style of visualisation. I therefore decided to put a spin on things, visualising 12 of his laws of UX using ‘food metaphors’ which actually helped me memorise the laws faster! Take a look below..👇🏼
1. Fitt’s Law
The time to acquire a target is a function of the distance to and size of the target.
Targets that can be touched should be large enough to accurately select them and placed in areas on an interface where they can be easily accessed and selected. This is particularly important for buttons and icons where their touch target should follow user interface guidelines.
In this case, the larger apple is a larger target and easier for the user to grab due to its close distance. The smaller apples on the top shelf are far away and hard to select, creating frustrations for the user.
2. Miller’s Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
As the average person can only memorise roughly 7 items in their working memory; it’s better to organise content into smaller chunks to help them understand and process the information.
Take a food shopping list for example. By organising the items into small chunks, they can be easily ticked off when acquired and make the grocery shopping experience easier.
3. Aesthetic Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable.
You see this problem in Architecture whereby function follows form and people are mesmerised by a beautiful building which has flaws. In UX, users can overlook usability issues and design flaws when the product itself is aesthetically pleasing. During the Usability Testing phase of a product, watch out as visually appealing products can mask usability problems from being discovered.
This pancake stack looks fairly delicious right? However, try to eat this without knocking over the stack or making a mess. An example of the aesthetic usability effect.
4. Pareto Principle
The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
A tricky concept to understand but it comes down to the fact that inputs and outputs are usually not evenly distributed. In terms of a digital product, focus on the areas that will bring the largest benefit to most of the users.
Take this taco for example. 20% of the taco contains a chilli sauce. Although 20% may not seem a lot, it definitely will be for the end user and their experience of eating this taco as it’s going to be memorably spicy!
5. Hick’s Law
The time it takes to make a decision increases with the number and complexity of choices.
We see this all the time in our world of oversaturation and too much choice. I can’t be the only one who struggles to choose which show to watch on Netflix right?
Well this comes down to Hick’s Law where the time it takes to make a decision incrases with the number & complexity of choices. To combat this, it’s better to minimise choices and break them up into smaller chunks to reduce cognitive load. When highlighting new features or products to users, it can also be beneficial to use ‘onboarding’ with simple, memorable steps to stop the user feeling overwhelmed.
Sometimes a vending machine has too many good options. From sweets, to crisps, to chocolate, to drinks. How do we ensure we pick the right choice? Sometimes if options are recommended to us instead (in this case its chocolate or crisps) we can make a faster decision on our choice.
6. Jakob’s Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
We’re creatures of habit. Our expectations that we’ve built around familiar products will transfer to other similar products. For example, if a new streaming service appears (yes another one) we would expect it to have similar expectations to similar services we are used to such as Netflix or Amazon Prime.
If a new product is similar to existing products (or mental models), users can spend their time on their desired tasks and goals instead of wasting time on learning new models.
Everyone loves a bowl of pasta or noodles. Our existing mental model of eating stringy pasta involves using a fork or knife. Sometimes, we may even use chopsticks to eat stringy noodles.
However, if we were suddenly told to learn how to eat pasta with a spade, we would really struggle to learn how to do that for a period of time, taking us away from our desired goal of actually eating the pasta.
7. Goal Gradient Effect
The tendency to approach a goal increases with proximity to the goal.
If users are close to completing a task, they work faster to reach this goal. This is particularly useful on platforms that contain challenges. Showing users a progress bar of their progress an help motivate them to complete the task.
If we have a choice between cooking Recipe A or Recipe B for dinner, we may opt for B through the lens of the goal gradient effect. This is because Recipe B would only take 10 minutes and if we are feeling particularly hungry, we would be more motivated to cook this.
8. Parkinson’s Law
Any task will inflate until all of the available time is spent.
The famous Parkinson’s Law. We see this all the time in the workplace. If we have 3 weeks to complete a project, it might take us the full 3 weeks because of factors such as procrastination or a lack of constraints. In product design, features such as autofill can help the user save time and allow for quicker completion of tasks whilst preventing the task from inflating.
This visual quite literally represents the expansion of work (or custard) to fill the alloted time.
9. Law of Similarity
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Humans perceive visually similar elements as related based on their colour, shape, size or movement. In product, it’s therefore important that areas such as headers, footers or CTA’s or visually different from other elements on the screen to ensure they are perceived as having separate functions. Different colour styles and font sizes can help with differentation.
Although there are thousands of varieties of fruit in the world, you can tell they are fruit by their shape, colour and origins. You can differentiate fruit from a static, inorganic, geometric cereal box right? That’s partly because of the law of similarity.
10. Law of Common Region
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
A common region creates a structure or space that differentiates elements and sections. Think of a tickbox for example. It usually contains a 🔲 followed by a question or statement for you to fill. Once you’d like to interact with it, you input a ✔️ or a ❌ within its defined boundary OR common region.
You also find this with platforms which contain a background/surface colour which differentiates from the content or elements in the foreground.
In a supermarket, you’re not going to mix up the Coffee & the Cereals. That would create confusion! Instead, the products are clearly defined in separate zones with zonal markers to help navigation. The zones will contain defined boundaries such as shelving, aisles or sections; helping customers find products.
11. Law of Proximity
Objects that are near, or proximate to each other, tend to be grouped together.
If objects are near to each other, they tend to be grouped together. You can even see this on this article where the elements on a page are grouped in sections e.g. Heading, sub-title, section divider, body text, image. They are all separate objects, defined by their proximity to eachother.
The advantage of this is it allows us as humans to organise and understand the content faster.
Take these separate foods. Because they are separately grouped together, you can clearly define the sections for pineapples, onions and broccoli without confusion. If they were all mixed together, it would confuse you.
12. Zeignarik Effect
People remember uncompleted or interrupted tasks better than completed tasks.
When creating products, it can be beneficial to highlight the progress of the user when they are completing a specific task to give the user motivation to complete it.
Take this delicious last slice of cake. I will be thinking about this profusely as I’ve almost finished the cake and it’s the very last slice. However, once its gone I’ll stop thinking about it.
Conclusion
I hope you enjoyed me transforming 12 of Jon’s Laws of UX into 12 food metaphors. If you’d like further information about more Laws of UX, click here: https://lawsofux.com/
If you’d like to follow me and my work, take a look below👇🏼 & thanks for reading!
https://www.linkedin.com/in/steffanmh/
Read the full article here
