SlideShare a Scribd company logo
1 of 12
Download to read offline
The Principles and Laws of UX
Design – Why Every Designer Should
Know Them
Five prominent rings.
Blue, yellow, black, green, and red.
It’s one of the most recognizable symbols globally – a hallmark of
good design. Yet, designing an Olympic logo isn’t a walk in the park.
Striking a delicate balance between the host city and the revelry of
the games is a tough act – although not unachievable. The logo of
the 1964 Tokyo Games, designed by Yusaku Kamekura and Masaru
Katsumi, is a stellar example of timeless design.
Why did the logo work?
Among other reasons, it embodied two crucial commandments in
Dieter Ram’s principles (we’ll come back to this) of design: (a) Good
design is long-lasting, and (b) Good design is as little design as
possible.
Who doesn’t know the “land of the rising sun”? As much as it
captured the very essence of Tokyo, it also
Across the world, the Allianz Arena in München, Germany, can
accommodate 75,000 spectators. But, that’s not the only thing that’s
impressive about it. Host to the opening ceremonies of the 2006
World Cup, it’s considered one of the best architectural structures.
The stadium’s design emphasizes the procession-like walk of the
fans toward the stadium.
Although a crater-like shape, the stairs on the outside lead to a great
slope to the approach, so it looks like a swarm of ants making their
way home from an aerial view. Thousands of fans walk shoulder to
shoulder, the adrenaline rush is high, and there’s solidarity in the air.
The exterior of the stadium also changes color. Each aspect of the
stadium is a masterclass in innovative design.
This is to say that all designs must serve a
purpose.
But, before we get there, let’s go back to the roots of designing to
what UX design has become now. The objective has always been
the same – to create a user-friendly experience.
It is the base of all design, whether in art, architecture, or digital
spaces.
A Brief History of Design
According to an article published by Career Foundry, we can travel
back to 6000 B.C. to start our journey in design. With the concept of
Feng Shui implemented in living spaces, the idea was to move
objects around to make life harmonious and optimal. Choosing the
right colors too is an intrinsic part of Feng Shui as it affects a person’s
mood.
Not too different from designing any user interface, is it?
By 500 B.C., alphabets had taken concrete shape – a milestone in
designing and a breakthrough in communication. Modern-day
design, efficiency, and the purpose of design as we see it now
perhaps started with Toyota. It put the people and the workers in the
forefront, encouraging a healthy lifestyle, a decent pay — actively
incorporating suggestions and feedback.
They placed their employees at the heart – a critical step in defining
user experience.
Had UX design finally seen the light of day?
Perhaps, it did.
Cut to – the 70s – to Apple.
Xerox’s PARC research center deserves a special mention here
though. The mouse and the graphical interface were boons that the
center bestowed on the world and set the path for future personal
computing that we’ve come to accept as necessities today.
Before the world relied on Siri or got used to the “Marimba” ringtone,
Macintosh released Apple’s first PC with a graphical user interface,
a built-in screen, and a mouse. Then, in 2001, teenagers found the
only way to stay “cool” by playing around with the iPod click-wheel,
till they landed on The Calling’s “Wherever You Will Go.”
It was a time of great UI, even better UX, and incredible music.
In 1995, Donald Norman, a cognitive scientist at Apple, coined “User
Experience. At Apple, he worked as a User Experience Architect, the
first there ever was.
In 2022, the term has evolved into so much more than just what looks
good.
It’s a shape-shifting phenomenon that looks different every day. The
focus now is on personalized and localized user experience with a
heavy dose of augmented reality, artificial intelligence, data
visualization, 3D elements, and responsive designs.
Now, let’s get to the meat.
Principles of UI/UX Design
The Pareto Principle
Ever heard of the 80/20 rule — eat 80% of the pie and leave the rest
for the spouse – no, unfortunately, not that one.
The principle states that 80% of the effects of any process result from
20% of the effort that has gone into it. However, you might want to
view it slightly differently in UX design. Suppose the 80% are your
users and 20% are your features.
Bottom line – simplify interfaces. Get rid of the frills. Remove
buttons or features that don’t contribute to the outcome.
The Gestalt Principle
The Gestalt Principle or the Gestalt psychology are “laws of human
perception that describe how humans group similar elements,
recognize patterns and simplify complex images when we perceive
objects.”
For designers, it’s crucial to understand and implement this principle
to organize the layout of any interface and make it aesthetically
pleasing.
Six common laws fall under the Gestalt Principle:
 Closure (Reification)
The human mind is wired to complete spaces in perceived
incomplete shapes. Hence, we automatically fill in gaps between
elements, so that the mind can accept them as one singular or whole
entity.
Designers rely heavily on this law to create logos with negative
spaces or make negative spaces look not as barren.
 Common region
The human mind also groups elements that fall in the same closed
region. To put this law to use, designers deliberately place related
objects in the same closed area to show the difference from another
set of closed areas.
An excellent way to create a common region is by placing elements
inside a border.
 Continuation
Whether with lines, curves, or a sequence of shapes, our eyes tend
to follow a natural path. A break in these elements might be jarring –
a key learning for a designer. It may immediately drive a user away.
Continuation also affects positive and negative spaces in design.
The objective is to create a flow that is easy to navigate.
When designing an E-commerce website, ensure that navigation
follows a linear path. In the example given below, one can quickly
categorize and differentiate between primary and secondary
navigation. Home, profile, shop, contact and help promptly stand out
as one group while men, women, and kids are another.
 Figure/Ground (Multi-stability)
What do you see first? A vase or two faces?
What’s happening here is called the principle of multi-stability. The
image can be interpreted in two ways, but our mind can only interpret
one view in one go. Because it’s out of our conscious control, we
can’t predict what and who will see the vase first or the two faces.
When posed with a dilemma like this one, our mind is quick to fight
uncertainty and look for solid and stable items. But, in most cases,
unless an image is truly abstract, the foreground catches our eye first.
In UX design, this principle is used in navigation panels, modals, and
dialogs.
 Proximity (Emergence)
It’s the spatial relationship between elements inside a perceived or
actual frame. To follow this rule, place things related close to each
other and unrelated things further from each other.
You can also apply the same rule in the context of text. Sentences
should be grouped in paragraphs and separated below and above by
whitespace. Whitespaces around headings demarcate the beginning
of a new topic or paragraph.
 Similarity (Invariance)
The invariance principle states that our brain finds similarities and
differences in everything. This is why it’s easy to make something the
center of attention in a crowd of similar objects. Imagine a wall full of
black squares in different sizes and one solitary red square. Without
realizing it, you created two groups in your head.
The fields and the button are the same sizes in the image below.
However, the button is of a different color – this immediately prompts
us to perform a specific function. We intuitively knew that the blue
texts are links in the description text.
Understanding design principles provides designers a good head
start on their journey. But, there are 10 commandments of design by
Dieter Rams that a designer must
Dieter Ram’s 10 Commandments for Good Design
1. Good design is innovative – Developments in technology go hand-
in-hand with those of UI and UX design – they supplement each
other. As a result, there is always room for innovative design with
new offerings in technology, especially when designing for the
masses. However, innovative design doesn’t have to rely on
technology alone. It can also benefit from shifting trends in user
behavior.
2. Good design makes a product useful – The sole purpose of
designing is to serve a practical purpose. When a design meets
functional, psychological, and aesthetic criteria, it emphasizes the
usefulness of a product.
3. Good design is aesthetic – Human beings are visual creatures and
have relied on visual cues since the beginning of time to find food,
shelter, mates, and the like. So, when designing a product, the
aesthetic quality is integral to its usefulness and success.
4. Good design makes a product understandable – If you must
explain a product and what it does; consider the battle lost. Good
design describes the product’s structure as it is carefully laid out in
the product itself. It should be self-explanatory and intuitive.
5. Good design is unobtrusive – In UX design, products will rarely
take up ample physical space. Yet, good UX design seamlessly finds
itself incorporated into our daily life. The design should be neutral
and feel personalized.
6. Good design is honest – If your design attempts to manipulate the
consumer – you should go back to the drawing board and start
afresh. Good UI design has nothing to hide; it’s transparent.
7. Good design is long-lasting – Good design doesn’t attempt to be
fashionable; it stays classic and never appears antiquated. Instead,
it stands out as fresh even in a constantly changing world.
8. Good design is thorough down to the last detail – When
designing a product, a designer must put himself in the user’s shoes.
Starting a project by forcing a solution is not the way to go. Instead,
focus on all the pain points and leave nothing out. Practice care and
accuracy at every step of the design process.
9. Good design is environmentally-friendly – What can you do as a
UI designer to make your designs more earth-friendly? For starters,
you can choose an eco-friendly web host, power your website with a
green energy source, and create simple designs. All of which will help
reduce the carbon emissions of your website.
10. Good design is as little design as possible – Always strip
down to the basics and keep what is crucial. The more the clutter,
the more confused the user will be. Focus on reducing elements and
buttons as it will help you concentrate on essential aspects and
things that matter.
Getting the hang of it? There’s just one last thing we’ll cover now.
Pay attention – it’s important.
UX Laws Every Designer Should Know About
 Hick’s law
Hick’s law states that the more the choices – the more the user is
spoilt for it. This directly increases the decision-making time as they
are burdened with the complexity of options. To incorporate Hick’s
law into your design, break complex tasks into smaller steps and
minimize choice when response times are critical.
Sometimes, the user needs a little help. Highlight options as
recommendations to help ease their user journey. However, be
careful of what you’re subtracting or removing – you may miss out on
crucial elements.
 Fitts’s law
Fitt’s law simplifies the process for users even more. Think of it this
way – the user wants to hit a bull eye at one shot, but the only
difference is that the center of the target shouldn’t be a small red dot.
It should be as large as possible.
Touch targets should be large enough so that users can accurately
select them. Ensure that there is enough space between the touch
target and other buttons so that movements are quick, deliberate,
and precise.
 Miller’s law
On average, Miller’s law states that a person can only retain seven
items in their working memory. Suppose you are designing a
navigation page – bombard the user with more than seven elements
and chances are that they would most likely not recall the location
they had arrived from.
This is often why services or products with several options are
grouped to reduce the memory load.
 Jakob’s Law
Jakob’s law states that users will often project expectations of other
sites on yours. If they prefer a website for any reason, they will enjoy
spending time on it. When they hop onto your site, they will expect a
similar sense of aesthetic and satisfaction their preferred site offers.
While it may seem counter-intuitive, it may be a good idea to hover
around benchmarks already set and not try to create something
overtly unique.
Even when armed with all the knowledge in the world, mistakes are
bound to happen. When designing for UX, designers often make the
following mistakes. With everything we’ve learned, let’s figure out
how we can avoid them.
UX Design Mistakes to Avoid
Inconsistencies
Inconsistency is a major turn-off for all, whether in life or UX
designing. For instance, while using straight lines as dividers for
icons, elements, or segments, ensure that the lines are thick or thin. If
you’ve settled on a font, incorporate fonts of the same family
throughout the product. When each element within your design
creates what appears to be a consistent pattern, inconsistency
breaks the pattern. The anomaly stands out in a jarring way.
Blurred lines between primary and secondary
buttons
Not demarcating primary and secondary buttons is a good way to
annoy a user – the biggest sin a designer can commit. Primary and
secondary buttons exist as they serve a specific purpose. Highlight
primary buttons in a strong color and add more visual weight to them.
Lack in text hierarchy
A lack in text hierarchy can also instantly break your design. Think of
study notes you made in school while cramming for an exam. You
capitalized the main topic, wrote over it to make it appear bold, and
even drowned it in some fluorescent yellow highlighter. The important
bits followed as sub-headings and then bullet points. A clear ranking
of the most critical information to the least stood out most effectively.
Apply similar practices for UX design and ensure that you let your
text breathe with adequate spacing.
Not focusing on icons
Bad iconography can make a potentially successful design or product
one that will instantly be forgotten. Why are icons important in UX
design? Users recognize them instantly, and it helps them navigate
better. Most importantly – icons save space. The purpose of an icon
is to communicate a concept quickly. Hence, it’s best to stick to
figures and images that resonate with the action it prompts. Line
style, hand-drawn, and multi-color icons are all the rage in 2022.
Low-quality images
We’re in 2022 – visuals are everything. There is no excuse for you to
settle for low-quality images. Your user most definitely won’t. While
you’re at it, look for images that speak about your service or product
and find high-quality images only. Staged and fake photos may land
you in a hot mess, so look for realistic and creative photos.
Now, to stay abreast – let’s equip you with some UX trends for 2022.
2022 UX Trends to Keep an Eye On
1. If there’s one thing you must learn from Dieter Rams – it’s simplicity.
Whether we’re in 2022 or 3022 – one thing will remain constant.
Simplicity; it will never run out of fashion. So, when designing a
product, your sole aim shouldn’t be to chase everything that’s
transforming around you. Start with the basics and come back to the
basics.
2. Delicate serifs will continue to reign, but now is an excellent time to
experiment with typography. Go bold and go big. Keep in mind that it
may appear boxy. Likewise, 70s-inspired disco fonts are making
quite the comeback.
3. Characterized by blurred backgrounds, Glassmorphism creates a
frosted glass effect. To create this effect, place light or dark elements
on colorful multi-layer backgrounds. As you add another layer of a
blurry effect to the background of the elements, it appears as though
it’s morphed into frosted glass.
4. Were you aware that 22% of internet users buy groceries using voice
assistants? If you didn’t, now is a good time to incorporate voice user
interfaces in your design or product.
5. Diversity and inclusivity shouldn’t just be buzzwords anymore. When
designing a product, you must also think about how accessible it is
for every audience member – including those with limited abilities. An
all-inclusive design is the need of the hour.
6.
Now that you’ve got this crash course under your belt, will you
become the best designer the world has ever seen? Perhaps, not
just yet – but you’ll become one that was better than yesterday. While
following the laws and principles is crucial in understanding user
experience and how best to design for the user, design thinking is
the first step in designing UI.

More Related Content

Similar to The Principles and Laws of UX Design.pdf

Creating products for people: how user experience is creating products that a...
Creating products for people: how user experience is creating products that a...Creating products for people: how user experience is creating products that a...
Creating products for people: how user experience is creating products that a...Diego Mendes
 
Design Process | Tool 01" personae"
Design Process | Tool 01" personae"Design Process | Tool 01" personae"
Design Process | Tool 01" personae"Gessica Puri
 
Psychology, design and computer science
Psychology, design and computer sciencePsychology, design and computer science
Psychology, design and computer scienceDiego Mendes
 
Good design in UX and UI | Trevayne van niekerk
Good design in UX and UI | Trevayne van niekerkGood design in UX and UI | Trevayne van niekerk
Good design in UX and UI | Trevayne van niekerkTrevayne Van Niekerk
 
My take on Design [Thinking]
My take on Design [Thinking]My take on Design [Thinking]
My take on Design [Thinking]Marcel Zwiers
 
Technology,
 visual Trends 
& References
Technology,
 visual Trends 
& ReferencesTechnology,
 visual Trends 
& References
Technology,
 visual Trends 
& ReferencesCocoon Experience
 
World Interaction Design Day 2019 // Mito Digital - Social Behavior Design
World Interaction Design Day 2019 // Mito Digital - Social Behavior DesignWorld Interaction Design Day 2019 // Mito Digital - Social Behavior Design
World Interaction Design Day 2019 // Mito Digital - Social Behavior DesignMito
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1Sebastian Tory-Pratt
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive DesignKaren Krull
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hesswww.usarte.co
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UXWhitney Hess
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Danielle Arvanitis
 
Push conference 2018 key takeaways
Push conference 2018 key takeawaysPush conference 2018 key takeaways
Push conference 2018 key takeawaysJustin Crowell
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItBMN Infotech
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - KeynotePhil Barrett
 
Multi-Device Digital Product Design
Multi-Device Digital Product DesignMulti-Device Digital Product Design
Multi-Device Digital Product Designprodactive
 
How Design Theories Evolved from User-Centered Design to Design Thinking.pdf
How Design Theories Evolved from User-Centered Design to Design Thinking.pdfHow Design Theories Evolved from User-Centered Design to Design Thinking.pdf
How Design Theories Evolved from User-Centered Design to Design Thinking.pdfWorxwideConsulting1
 

Similar to The Principles and Laws of UX Design.pdf (20)

Creating products for people: how user experience is creating products that a...
Creating products for people: how user experience is creating products that a...Creating products for people: how user experience is creating products that a...
Creating products for people: how user experience is creating products that a...
 
Design Process | Tool 01" personae"
Design Process | Tool 01" personae"Design Process | Tool 01" personae"
Design Process | Tool 01" personae"
 
Psychology, design and computer science
Psychology, design and computer sciencePsychology, design and computer science
Psychology, design and computer science
 
Good design in UX and UI | Trevayne van niekerk
Good design in UX and UI | Trevayne van niekerkGood design in UX and UI | Trevayne van niekerk
Good design in UX and UI | Trevayne van niekerk
 
My take on Design [Thinking]
My take on Design [Thinking]My take on Design [Thinking]
My take on Design [Thinking]
 
Technology,
 visual Trends 
& References
Technology,
 visual Trends 
& ReferencesTechnology,
 visual Trends 
& References
Technology,
 visual Trends 
& References
 
World Interaction Design Day 2019 // Mito Digital - Social Behavior Design
World Interaction Design Day 2019 // Mito Digital - Social Behavior DesignWorld Interaction Design Day 2019 // Mito Digital - Social Behavior Design
World Interaction Design Day 2019 // Mito Digital - Social Behavior Design
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hess
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UX
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)
 
Push conference 2018 key takeaways
Push conference 2018 key takeawaysPush conference 2018 key takeaways
Push conference 2018 key takeaways
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love It
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
Multi-Device Digital Product Design
Multi-Device Digital Product DesignMulti-Device Digital Product Design
Multi-Device Digital Product Design
 
How Design Theories Evolved from User-Centered Design to Design Thinking.pdf
How Design Theories Evolved from User-Centered Design to Design Thinking.pdfHow Design Theories Evolved from User-Centered Design to Design Thinking.pdf
How Design Theories Evolved from User-Centered Design to Design Thinking.pdf
 

More from SophiaJasper

Enterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkEnterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkSophiaJasper
 
Enterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkEnterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkSophiaJasper
 
how to develop healthcare app.pdf
how to develop healthcare app.pdfhow to develop healthcare app.pdf
how to develop healthcare app.pdfSophiaJasper
 
how to develop healthcare app.pdf
how to develop healthcare app.pdfhow to develop healthcare app.pdf
how to develop healthcare app.pdfSophiaJasper
 
How to develop healthcare app.docx
How to develop healthcare app.docxHow to develop healthcare app.docx
How to develop healthcare app.docxSophiaJasper
 

More from SophiaJasper (6)

Enterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkEnterprise UX: Designs for People at Work
Enterprise UX: Designs for People at Work
 
Enterprise UX: Designs for People at Work
Enterprise UX: Designs for People at WorkEnterprise UX: Designs for People at Work
Enterprise UX: Designs for People at Work
 
how to develop healthcare app.pdf
how to develop healthcare app.pdfhow to develop healthcare app.pdf
how to develop healthcare app.pdf
 
how to develop healthcare app.pdf
how to develop healthcare app.pdfhow to develop healthcare app.pdf
how to develop healthcare app.pdf
 
How to develop healthcare app.docx
How to develop healthcare app.docxHow to develop healthcare app.docx
How to develop healthcare app.docx
 
Angular vs.pdf
Angular vs.pdfAngular vs.pdf
Angular vs.pdf
 

Recently uploaded

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 

Recently uploaded (20)

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 

The Principles and Laws of UX Design.pdf

  • 1. The Principles and Laws of UX Design – Why Every Designer Should Know Them Five prominent rings. Blue, yellow, black, green, and red. It’s one of the most recognizable symbols globally – a hallmark of good design. Yet, designing an Olympic logo isn’t a walk in the park. Striking a delicate balance between the host city and the revelry of the games is a tough act – although not unachievable. The logo of the 1964 Tokyo Games, designed by Yusaku Kamekura and Masaru Katsumi, is a stellar example of timeless design. Why did the logo work? Among other reasons, it embodied two crucial commandments in Dieter Ram’s principles (we’ll come back to this) of design: (a) Good design is long-lasting, and (b) Good design is as little design as possible.
  • 2. Who doesn’t know the “land of the rising sun”? As much as it captured the very essence of Tokyo, it also Across the world, the Allianz Arena in München, Germany, can accommodate 75,000 spectators. But, that’s not the only thing that’s impressive about it. Host to the opening ceremonies of the 2006 World Cup, it’s considered one of the best architectural structures. The stadium’s design emphasizes the procession-like walk of the fans toward the stadium. Although a crater-like shape, the stairs on the outside lead to a great slope to the approach, so it looks like a swarm of ants making their way home from an aerial view. Thousands of fans walk shoulder to shoulder, the adrenaline rush is high, and there’s solidarity in the air. The exterior of the stadium also changes color. Each aspect of the stadium is a masterclass in innovative design. This is to say that all designs must serve a purpose. But, before we get there, let’s go back to the roots of designing to what UX design has become now. The objective has always been the same – to create a user-friendly experience. It is the base of all design, whether in art, architecture, or digital spaces. A Brief History of Design According to an article published by Career Foundry, we can travel back to 6000 B.C. to start our journey in design. With the concept of Feng Shui implemented in living spaces, the idea was to move objects around to make life harmonious and optimal. Choosing the right colors too is an intrinsic part of Feng Shui as it affects a person’s mood.
  • 3. Not too different from designing any user interface, is it? By 500 B.C., alphabets had taken concrete shape – a milestone in designing and a breakthrough in communication. Modern-day design, efficiency, and the purpose of design as we see it now perhaps started with Toyota. It put the people and the workers in the forefront, encouraging a healthy lifestyle, a decent pay — actively incorporating suggestions and feedback. They placed their employees at the heart – a critical step in defining user experience. Had UX design finally seen the light of day? Perhaps, it did. Cut to – the 70s – to Apple. Xerox’s PARC research center deserves a special mention here though. The mouse and the graphical interface were boons that the center bestowed on the world and set the path for future personal computing that we’ve come to accept as necessities today. Before the world relied on Siri or got used to the “Marimba” ringtone, Macintosh released Apple’s first PC with a graphical user interface, a built-in screen, and a mouse. Then, in 2001, teenagers found the only way to stay “cool” by playing around with the iPod click-wheel, till they landed on The Calling’s “Wherever You Will Go.” It was a time of great UI, even better UX, and incredible music. In 1995, Donald Norman, a cognitive scientist at Apple, coined “User Experience. At Apple, he worked as a User Experience Architect, the first there ever was. In 2022, the term has evolved into so much more than just what looks good.
  • 4. It’s a shape-shifting phenomenon that looks different every day. The focus now is on personalized and localized user experience with a heavy dose of augmented reality, artificial intelligence, data visualization, 3D elements, and responsive designs. Now, let’s get to the meat. Principles of UI/UX Design The Pareto Principle Ever heard of the 80/20 rule — eat 80% of the pie and leave the rest for the spouse – no, unfortunately, not that one. The principle states that 80% of the effects of any process result from 20% of the effort that has gone into it. However, you might want to view it slightly differently in UX design. Suppose the 80% are your users and 20% are your features. Bottom line – simplify interfaces. Get rid of the frills. Remove buttons or features that don’t contribute to the outcome. The Gestalt Principle The Gestalt Principle or the Gestalt psychology are “laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects.” For designers, it’s crucial to understand and implement this principle to organize the layout of any interface and make it aesthetically pleasing. Six common laws fall under the Gestalt Principle:  Closure (Reification)
  • 5. The human mind is wired to complete spaces in perceived incomplete shapes. Hence, we automatically fill in gaps between elements, so that the mind can accept them as one singular or whole entity. Designers rely heavily on this law to create logos with negative spaces or make negative spaces look not as barren.  Common region The human mind also groups elements that fall in the same closed region. To put this law to use, designers deliberately place related objects in the same closed area to show the difference from another set of closed areas. An excellent way to create a common region is by placing elements inside a border.  Continuation Whether with lines, curves, or a sequence of shapes, our eyes tend to follow a natural path. A break in these elements might be jarring – a key learning for a designer. It may immediately drive a user away. Continuation also affects positive and negative spaces in design. The objective is to create a flow that is easy to navigate. When designing an E-commerce website, ensure that navigation follows a linear path. In the example given below, one can quickly categorize and differentiate between primary and secondary navigation. Home, profile, shop, contact and help promptly stand out as one group while men, women, and kids are another.  Figure/Ground (Multi-stability)
  • 6. What do you see first? A vase or two faces? What’s happening here is called the principle of multi-stability. The image can be interpreted in two ways, but our mind can only interpret one view in one go. Because it’s out of our conscious control, we can’t predict what and who will see the vase first or the two faces. When posed with a dilemma like this one, our mind is quick to fight uncertainty and look for solid and stable items. But, in most cases, unless an image is truly abstract, the foreground catches our eye first. In UX design, this principle is used in navigation panels, modals, and dialogs.  Proximity (Emergence) It’s the spatial relationship between elements inside a perceived or actual frame. To follow this rule, place things related close to each other and unrelated things further from each other. You can also apply the same rule in the context of text. Sentences should be grouped in paragraphs and separated below and above by whitespace. Whitespaces around headings demarcate the beginning of a new topic or paragraph.  Similarity (Invariance) The invariance principle states that our brain finds similarities and differences in everything. This is why it’s easy to make something the center of attention in a crowd of similar objects. Imagine a wall full of black squares in different sizes and one solitary red square. Without realizing it, you created two groups in your head. The fields and the button are the same sizes in the image below. However, the button is of a different color – this immediately prompts
  • 7. us to perform a specific function. We intuitively knew that the blue texts are links in the description text. Understanding design principles provides designers a good head start on their journey. But, there are 10 commandments of design by Dieter Rams that a designer must Dieter Ram’s 10 Commandments for Good Design 1. Good design is innovative – Developments in technology go hand- in-hand with those of UI and UX design – they supplement each other. As a result, there is always room for innovative design with new offerings in technology, especially when designing for the masses. However, innovative design doesn’t have to rely on technology alone. It can also benefit from shifting trends in user behavior. 2. Good design makes a product useful – The sole purpose of designing is to serve a practical purpose. When a design meets functional, psychological, and aesthetic criteria, it emphasizes the usefulness of a product. 3. Good design is aesthetic – Human beings are visual creatures and have relied on visual cues since the beginning of time to find food, shelter, mates, and the like. So, when designing a product, the aesthetic quality is integral to its usefulness and success. 4. Good design makes a product understandable – If you must explain a product and what it does; consider the battle lost. Good design describes the product’s structure as it is carefully laid out in the product itself. It should be self-explanatory and intuitive. 5. Good design is unobtrusive – In UX design, products will rarely take up ample physical space. Yet, good UX design seamlessly finds
  • 8. itself incorporated into our daily life. The design should be neutral and feel personalized. 6. Good design is honest – If your design attempts to manipulate the consumer – you should go back to the drawing board and start afresh. Good UI design has nothing to hide; it’s transparent. 7. Good design is long-lasting – Good design doesn’t attempt to be fashionable; it stays classic and never appears antiquated. Instead, it stands out as fresh even in a constantly changing world. 8. Good design is thorough down to the last detail – When designing a product, a designer must put himself in the user’s shoes. Starting a project by forcing a solution is not the way to go. Instead, focus on all the pain points and leave nothing out. Practice care and accuracy at every step of the design process. 9. Good design is environmentally-friendly – What can you do as a UI designer to make your designs more earth-friendly? For starters, you can choose an eco-friendly web host, power your website with a green energy source, and create simple designs. All of which will help reduce the carbon emissions of your website. 10. Good design is as little design as possible – Always strip down to the basics and keep what is crucial. The more the clutter, the more confused the user will be. Focus on reducing elements and buttons as it will help you concentrate on essential aspects and things that matter. Getting the hang of it? There’s just one last thing we’ll cover now. Pay attention – it’s important. UX Laws Every Designer Should Know About  Hick’s law
  • 9. Hick’s law states that the more the choices – the more the user is spoilt for it. This directly increases the decision-making time as they are burdened with the complexity of options. To incorporate Hick’s law into your design, break complex tasks into smaller steps and minimize choice when response times are critical. Sometimes, the user needs a little help. Highlight options as recommendations to help ease their user journey. However, be careful of what you’re subtracting or removing – you may miss out on crucial elements.  Fitts’s law Fitt’s law simplifies the process for users even more. Think of it this way – the user wants to hit a bull eye at one shot, but the only difference is that the center of the target shouldn’t be a small red dot. It should be as large as possible. Touch targets should be large enough so that users can accurately select them. Ensure that there is enough space between the touch target and other buttons so that movements are quick, deliberate, and precise.  Miller’s law On average, Miller’s law states that a person can only retain seven items in their working memory. Suppose you are designing a navigation page – bombard the user with more than seven elements and chances are that they would most likely not recall the location they had arrived from. This is often why services or products with several options are grouped to reduce the memory load.  Jakob’s Law
  • 10. Jakob’s law states that users will often project expectations of other sites on yours. If they prefer a website for any reason, they will enjoy spending time on it. When they hop onto your site, they will expect a similar sense of aesthetic and satisfaction their preferred site offers. While it may seem counter-intuitive, it may be a good idea to hover around benchmarks already set and not try to create something overtly unique. Even when armed with all the knowledge in the world, mistakes are bound to happen. When designing for UX, designers often make the following mistakes. With everything we’ve learned, let’s figure out how we can avoid them. UX Design Mistakes to Avoid Inconsistencies Inconsistency is a major turn-off for all, whether in life or UX designing. For instance, while using straight lines as dividers for icons, elements, or segments, ensure that the lines are thick or thin. If you’ve settled on a font, incorporate fonts of the same family throughout the product. When each element within your design creates what appears to be a consistent pattern, inconsistency breaks the pattern. The anomaly stands out in a jarring way. Blurred lines between primary and secondary buttons Not demarcating primary and secondary buttons is a good way to annoy a user – the biggest sin a designer can commit. Primary and secondary buttons exist as they serve a specific purpose. Highlight primary buttons in a strong color and add more visual weight to them.
  • 11. Lack in text hierarchy A lack in text hierarchy can also instantly break your design. Think of study notes you made in school while cramming for an exam. You capitalized the main topic, wrote over it to make it appear bold, and even drowned it in some fluorescent yellow highlighter. The important bits followed as sub-headings and then bullet points. A clear ranking of the most critical information to the least stood out most effectively. Apply similar practices for UX design and ensure that you let your text breathe with adequate spacing. Not focusing on icons Bad iconography can make a potentially successful design or product one that will instantly be forgotten. Why are icons important in UX design? Users recognize them instantly, and it helps them navigate better. Most importantly – icons save space. The purpose of an icon is to communicate a concept quickly. Hence, it’s best to stick to figures and images that resonate with the action it prompts. Line style, hand-drawn, and multi-color icons are all the rage in 2022. Low-quality images We’re in 2022 – visuals are everything. There is no excuse for you to settle for low-quality images. Your user most definitely won’t. While you’re at it, look for images that speak about your service or product and find high-quality images only. Staged and fake photos may land you in a hot mess, so look for realistic and creative photos. Now, to stay abreast – let’s equip you with some UX trends for 2022. 2022 UX Trends to Keep an Eye On 1. If there’s one thing you must learn from Dieter Rams – it’s simplicity. Whether we’re in 2022 or 3022 – one thing will remain constant. Simplicity; it will never run out of fashion. So, when designing a
  • 12. product, your sole aim shouldn’t be to chase everything that’s transforming around you. Start with the basics and come back to the basics. 2. Delicate serifs will continue to reign, but now is an excellent time to experiment with typography. Go bold and go big. Keep in mind that it may appear boxy. Likewise, 70s-inspired disco fonts are making quite the comeback. 3. Characterized by blurred backgrounds, Glassmorphism creates a frosted glass effect. To create this effect, place light or dark elements on colorful multi-layer backgrounds. As you add another layer of a blurry effect to the background of the elements, it appears as though it’s morphed into frosted glass. 4. Were you aware that 22% of internet users buy groceries using voice assistants? If you didn’t, now is a good time to incorporate voice user interfaces in your design or product. 5. Diversity and inclusivity shouldn’t just be buzzwords anymore. When designing a product, you must also think about how accessible it is for every audience member – including those with limited abilities. An all-inclusive design is the need of the hour. 6. Now that you’ve got this crash course under your belt, will you become the best designer the world has ever seen? Perhaps, not just yet – but you’ll become one that was better than yesterday. While following the laws and principles is crucial in understanding user experience and how best to design for the user, design thinking is the first step in designing UI.