The Principles and Laws of UX Design
A collection of the best practices for designers
Image source: olympics.com
Image source: olympics.com
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.
design is long-lasting.
design is as little design as possible.
The Allianz Arena in München, Germany, can accommodate 75,000 spectators. But that’s not the only thing that’s impressive about it.
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.
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—
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?
Alphabets took concrete shape —a milestone in designing and a breakthrough in communication.
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.
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.
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
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.”
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
80% of the effects of any process result from 20% of the effort that has gone into it.
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.
Get rid of the frills.
Remove buttons or features that don’t contribute to the outcome.
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.
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.
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.
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.
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.
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.
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
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.
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
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.
Good design is innovative Good design makes a product understandable
Good design makes a product useful Good design is unobtrusive
RT 20 tischsuper radio, 1961, by Dieter Rams for Braun
design is honest
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
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.
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.
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.
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.
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.
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".
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.
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.
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.
Characterized by blurred backgrounds, glassmorphism creates a frosted glass effect.
To create this effect, place light or dark elements on colorful multi-layer backgrounds.
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.
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.
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.
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.
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/