The Principle and Laws of UX Design

Page 1

The Principles and Laws of UX Design

A collection of the best practices for designers

Index t oduct o A b ef to y of de P c ple of X de D ete Ram ’ 10 comma dme t fo ood de X la X de m take to avo d 2022 X t e d to keep a eye o Bu t commo de myt ual t e of a ood de e B bl o ap y

Image source: olympics.com

Introduction

Why did the work?logo

The logo of the 1964 Tokyo Games, designed by Yusaku Kamekura and Masaru Katsumi, is a stellar example of timeless design.

One of the most recognizable symbols globally—it’s the hallmark of good design. Yet, designing an Olympic logo isn’t a walk in the park.

The Olympic logo embodies two vital pointers in

Dieter Rams’ principles of design.

design is long-lasting.

design is as little design as possible.

Good
Good
1 2

Creating alasting impression

The Allianz Arena in München, Germany, can accommodate 75,000 spectators. But that’s not the only thing that’s impressive about it.

How does the stadium's design the procession of fans? emphasize

Fans walk shoulder to shoulder toward the stadium.

The stairs on the outside lead to a slope to the approach. From an aerial view, it appears like a swarm of ants making their way home.

The exterior of the stadium changes color.

Image source: Allianz-arena.com

When Facebook suddenly started to change, we expressed displeasure in our “status” bar. Like-minded people chimed in too.

The biggest shock perhaps came in the form of Facebook’s ‘Timeline’ view. However, it was a UI and UX design win, which re-instated Facebook as “the” social networking site to be on.

Image source: uxplanet.org

Image source: eonline.com

UI that was intuitive, without lengthy instructions.
easy to navigate, and directional—

These examples prove that all designs must serve a Purpose

A Brief History of Design

B.C

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 a user interface, is it?

B.C

Alphabets took concrete shape —a milestone in designing and a breakthrough in communication.

40’s

ABToyota placed its employees at the heart—a critical step in defining user experience.

The brand encouraged a healthy lifestyle and a decent pay. It actively incorporated suggestions and feedback.

6000
500

Henry Dreyfuss’ contribution to UX design and how human input quickly became the benchmark in all design is captured in his 1955 book, Designing for People.

Design Thinking

It’s an iterative process which encourages the user to solve complex problems with an allencompassing solution.

Macintosh released Apple’s first PC with a graphical user interface, a built-in screen, and a mouse.

He also talks about ethics in design, responsibility, and commitment to public service, making the book the true north for designers even today.

Prototype Test

50’s 60’s 70’s

80’s 90’s 2001

Don Norman writes in his 1988 book The Psychology of Everyday Things,“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that

User Experience

Norman, a cognitive scientist at Apple coins "user experience.”

Teenagers discovered the only way to stay "cool" was fidgeting around with the iPod click-wheel till they landed on The Calling's "Wherever You Will Go."

It was a time of , and incredible music. great UI, even better UX

He stated, “I invented the term because I thought human interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system.”

2018 2021 2022

A big leap to 2018 brings us to how the full potential of UX design was finally being realized. Words like diversity, inclusivity, sustainability, and responsible design weren’t just buzz words anymore.

You're getting pulled into the allure of the Metaverse. In that case, you'll also be pleased to know that Speechly, a speech recognition technology startup released a tool to add voice interfaces to Unity—the virtual and augmented reality platform.

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 UX & UI Design

The Pareto Principle

80% of the effects of any process result from 20% of the effort that has gone into it.

Think of it this way:

80% of revenue comes from 20% of customers. When someone visits a website, only 20% of it gets attention from 80% of the visitors.

As a designer it’s crucial to identify what you want to incorporate so that you can get a user hooked, even if it’s just 20%.

Less can go a long way in user interface design.

80% Results 20% Effort

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 is a collection of “laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects.”

From the field of psychology to design, the Gestalt theory of learning is implemented in various phases of design like User Experience Design, User Interface Design, Interaction Design, and other areas.

The Gestalt theory is based on the perception of a human brain.

Similarity

Closure Proximity Continuation Figure & Ground

The Gestalt Principle

1.Closure

The human mind tries to fill spaces in perceived incomplete shapes. Hence, we automatically fill gaps between elements so that the mind can accept them as one singular or whole entity.

2.

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.

The Gestalt Principle

Continuation

Whether with lines, curves, or a sequence of shapes, our eyes tend to follow a natural path.

Continuation also affects positive and negative spaces in design.

When designing an E-commerce website, ensure that navigation follows a linear path. In the example given above, 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 as another.

3.

The Gestalt Principle

Figure & Ground

This image can be interpreted in two ways, but our mind can only analyze one view at one go. Because it’s out of our conscious control, we can’t predict who will see the vase first or the two faces.

In UX design, this principle is used in navigation panels, modals, and dialogs.

4.

The

Proximity (Emergence)

inside a perceived or actual frame. To follow this rule, place similar things close to each other and unrelated things away 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.

Gestalt Principle 5.
Image source: nngroup.com

The

Principle

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 exact sizes in the image below. However, the button is of a different color. It immediately prompts us to perform a specific function. We also intuitively knew that the blue texts are links in the description text.

Image source: uxget.com

Gestalt
6.

Other Principles of Design

Contrast Balance Emphasis

The art of mixing colors from opposite ends of the spectrum and turning them into a visual delight is not easy to master. Contrast doesn’t mean you have to work with red and black, or blue or white. It can also be a clever use of pastel with realistic icons and images.

When designing for the web or interfaces, one must keep balance in mind, both symmetrical or asymmetrical.

To achieve the perfect balance, place items of equal weight on either

side and separate it with a dividing element like a straight line. In an asymmetrical design, objects of different weights and sizes are laid out concerning the line, which may or may not be centered.

Symmetrical Logo Asymmetrical Logo

Designers use this principle when designing logos. By laying emphasis on one aspect, they can highlight the entire logo and concentrate on the services offered by a brand or institution.

The YouTube button at first glance is simply a red rectangular shape but the “play” button in white immediately stands out.

Image source: Lush.com, Onthegrid.city

Other Principles of Design

Movement Proportion

Movement means guiding the user's eye to a predetermined path in a composition. When a user views a design they are first attracted to the focal points of the design.

Adidas’ logo works so well and is almost instantly memorable because it follows the movement principle. The stripes are placed one after the other with equal spaces in ascending order. In UX design, movement implies how the users' eyes travel over a design.

Proportion is the relationship of two or more elements in a design and how they compare with one another. Proportion is said to be harmonious when a correct relationship exists between the elements with respect to size or quantity.

Apple’s website uses the principle of proportion to make its offerings stand out. Apple prioritizes the information they want to show first by placing larger elements above the smaller ones.

Dieter Rams’ 10 Commandments For Good Design

Commandments for Good Design

Good design is innovative Good design makes a product understandable

Good design makes a product useful Good design is unobtrusive

Good design is aesthetic

RT 20 tischsuper radio, 1961, by Dieter Rams for Braun

design is honest

Good
2 5 3 6 1 4

Commandments for Good Design

Good design is long-lasting

design is environmentally-friendly

Good design is thorough down to the last detail

design is as little

design as possible

Good
Good
7 9 8 10

Laws

UX

Hick’s Law

The time taken by a user to make a decision depends on how many choices are offered and how complex they are.

To incorporate Hick’s Law into your design, break complex tasks into smaller steps and minimize choice(s) when response times are critical.

UX Laws

Fitts’ Law

If the target size is too small, it will take longer for the user to reach or spot it.

In UI and UX design, the law applies to rapid movement and not a continuous motion.

Fitts’ Law is particularly crucial for user interfaces that involve pointing—whether it’s a cursor for a computer screen or using your finger to tap on touchscreen devices.

By minimizing the user’s travel distance with a selection option like the mouse, the law helps reduce time and increase productivity.

UX Laws

Miller’s law

The number of objects an average person can hold in working memory is about seven, also known as The Magical Number ‘7’, plus or minus two.

Following the principles of Miller’s Law, designers often incorporate a technique called “chunking”.

Also referred to as “clustering”, it is the process of grouping information together related to perceptual features.

When designing, each chunk must serve a purpose and be meaningful. It helps aid the user’s short-term memory capacity.

UX Laws

Jakob’s Law

Users will often project expectations of other sites on yours.

This means that users prefer your site to work the same way as all the other sites they already know.

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.

Changes over time in design are unavoidable, but the law advises designers to ease the user into it.

UX Laws

Parkinson’s Law

A user journey is the only clue you need in designing a seamless experience. Hence, it is essential to focus on the final moments of a consumer’s journey.

Aim to reduce the user's duration in completing a task. The lesser the time spent, the better the overall user experience.

UX Laws

Postel’s Law

Postel’s Law asks the designer to be all kinds of users. Be open to all forms of curveballs and anticipate virtually anything that may come your way. Whether that is input, access, capabilities, or anything else that will help design the outcome.

The law is a design guideline for software, specifically Transmission Control Protocol (TCP) and networks. It states, "TCP implementations should follow a general principle of robustness: be conservative in what you do, be liberal in what you accept from others".

UX Laws

Tesler’s Law

Tesler’s Law states that for “any system there is a certain amount of complexity which can’t be reduced.”

Also known as The Law of Conservation of Complexity, it addresses the fact that all processes come with their own core complexities that can’t be designed away and must be assumed by the user or the system.

For designers, there is an innate need to simplify interfaces. However, the law asks the designer not to simplify it to the point of abstraction.

UX Laws

Law of Pragnanz

We tend to perceive and interpret ambiguous or complex imagery, patterns, and symbols and break them into the simplest possible form. The final interpretation requires minimal cognitive effort.

Research shows that people are better able to remember simple figures than complex ones. So, the human eye tries to simplify complex shapes.

It shows that using uncommon, abstract, and complex shapes as elements, icons, and buttons in UX design is one of the biggest mistakes a designer can make.

UX Laws

UX Design Mistakes To Avoid

UX Design You Must Avoid Mistakes

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Inconsistencies Blurred lines between primary and secondary buttons Absence of text hierarchy Not focusing on icons Low-quality images Keeping it too verbose Paying attention to UX only in the initial stages Ambiguous buttons and elements Not staying updated Using too many animated elements Image credit: Luiza Tagliatela

2022 UX Trends To Keep An Eye On

Simplicity Font Styles

Trends

Whether its 2022 or 3022, simplicity will never run out of fashion. Start with the basics and come back to the basics.

Delicate serifs will continue to reign, but you may also experiment with typography. Go bold and go big. 70s-inspired disco fonts are making quite the comeback.

Glassmorphism

Characterized by blurred backgrounds, glassmorphism creates a frosted glass effect.

To create this effect, place light or dark elements on colorful multi-layer backgrounds.

Voice User Interfaces (VUIs)

Were you aware that 22% of internet users buy groceries using voice assistants? If you didn’t, now is an excellent time to incorporate Voice User Interfaces (VUI) in your design or product.

2022 UX Design
1. 2. 3. 4.
1 2 3 4

Busting Common Design Myths

Busting common design myths

UI and UX design are the same thing

UI aims to create an interface that connects the user to the service. UX design deals more with how the platform functions. UX is all about giving the user the “experience” they desire.

You can sprinkle elements on top of UX design UX design is a “one size fits all” design

In UX, minor changes can lead to an overhaul from the beginning and affects development through all stages.

Trying to replicate the same user experience across different products will not have the same effect as your end-users will have different needs and expectations.

UX is a trend UX is driven solely by technology

If we refer to the history of UX design, we observe that UX has been an integral part of design for many decades and that it simply didn’t have a name. User experience is what drives the design.

UX is driven by humans—their needs, requirements, and expectations. Through feedback and to-the-point criticism, design evolves until it reaches user satisfaction.

1 2 3 4 5

Qualities of a Good Designer

A good designer is curious.

A good designer is also a good listener.

A good designer communicates well.

A good designer is creative.

A good designer is a storyteller.

1 2 3 4 5

References

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

Dieter rams: https://www.interaction-design.org/literature/article/dieter-rams-10-timelesscommandments-for-good-design

https://careerfoundry.com/en/blog/ux-design/the-fascinating-history-of-ux-design-adefinitive-timeline/

Create winning interfaces with a creative and digital expert

peppersquare.com

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.