UX UI Design Principles for Beginners - A Bible
Discover essential UX/UI design principles for beginners in this comprehensive guide, your go-to resource for creating intuitive and user-friendly designs.
User experience design (UX) refers to the overall user experience of a digital product. It includes everything from the layout and colors to the fonts and images. The goal is to create a positive user experience that encourages users to return for future visits.
Article Content
UX Design Principles
Dieter Rams, A Good Design
Good Interaction Design Provides…
Goal-Oriented Design
Humanizing Software
Things That Diminish Users’ Goodwill
Segmenting Users by Level of Proficiency
Designing for Engagement: The Hook Model
Probability of action=motivation x ability x trigger
Variable Rewards
How User Investment Increases Engagement
Analyzing User Errors
What are the UX UI design principles?
UX (User Experience) and UI (User Interface) design principles are guidelines that designers can follow to create usable and aesthetically pleasing products. Here are some common UX/UI design principles:
Clarity: Design the user interface to be straightforward to understand. Use simple language, clear typography, and a clean layout to improve legibility.
Consistency: To improve usability and reduce confusion, use consistent design patterns, such as navigation, typography, and color, throughout the product.
User-centered Design: Design the product with the needs and goals of the target users in mind. This includes considering their motivation, context, and behavior when making design decisions.
Feedback: Provide users immediate and clear feedback for their actions, such as through visual cues, animations, or notifications.
Accessibility: Design the product to be usable by people with disabilities, such as by using clear and concise language, providing alternative text for images, and supporting keyboard navigation.
Usability: Design the product to be intuitive and easy to use, focusing on reducing friction and facilitating task completion.
Aesthetics: Use design elements, such as color, typography, and iconography, to enhance the product's aesthetic appeal and create a memorable brand experience.
Responsiveness: Design the product to be responsive and adaptable to different screen sizes and devices, ensuring a consistent experience across various platforms.
Flexibility: To improve engagement and increase personalization, users should be able to customize their experiences, such as by choosing their preferred layout, language, or theme.
Continuous Improvement: Gather user feedback and data to inform ongoing design improvements and ensure the product remains relevant and usable over time.
By following these UX/UI design principles and considering the needs and goals of the target users, designers can create usable, aesthetically pleasing products and provide a positive user experience.
Why Invest in an Upfront Design Phase?
(Cooper, Inmates Are Running the Asylum)
Once harmful software is written, it’s hard to throw it out – programmers get emotionally attached.
Agile iteration without upfront UX research is a costly way to get good software.
Understand the Basics of UX Design.
A good user experience starts with understanding the basics of UX design. This means knowing what makes a good user experience and why it's important.
According to legendary Braun designer Dieter Rams, A Good Design…
Is innovative—The possibilities for progression are not, by any means, exhausted. Technological development always offers new opportunities for original designs. But imaginative design always develops in tandem with improving technology and can never be an end in itself.
Makes a product worthwhile—People buy products to be used. They must satisfy not only functional but also psychological and aesthetic criteria. Good design emphasizes a product's usefulness while disregarding anything that could detract from it.
Is aesthetic—A product's aesthetic quality is integral to its usefulness because products are used every day and affect people and their well-being. Only well-executed objects can be beautiful.
Makes a product understandable—It clarifies the product’s structure. Better still, it can make the product clearly express its function by using the user's intuition. At best, it is self-explanatory.
Is unobtrusive—Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Therefore, their design should be neutral and restrained to leave room for the user's self-expression.
It is honest—It does not make a product appear more innovative, consequential, or valuable than it is. It does not attempt to manipulate the consumer with promises that cannot be kept.
It is long-lasting—It avoids being fashionable and, therefore, never appears antiquated. Unlike fashionable design, it lasts many years—even in today's throwaway society.
It is thorough down to the last detail—nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect toward the consumer.
Is environmentally friendly - Design makes an essential contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the product's lifecycle.
It uses as little design as possible—less but better—because it concentrates on the essential aspects and does not burden the products with non-essentials. It is back to purity, back to simplicity.
Good Interaction Design Provides…
(Norman, Design of Everyday Things)
Signifiers that show where an affordance action should take place
Examples: a pull handle or a push plate on a door; an arrow + icon depicting people indicating that the user should swipe to see contacts
Affordances are opportunities for action, e.g., a river allows swimming. Affordances are not properties of objects; they are relations between properties of a physical object and a person. A chair affords support and, therefore, affords sitting.
Mapping that ensures spatial correspondence between controls and devices being controlled, as with the steering wheel(car turns left when you turn the wheel left) or positioning of knobs to maintain a grid of four stove burners.
When possible, controls should be close to the item being controlled
The feedback that makes people less likely to feel stupid – which they hate!
Good design provides a clear, readily accessible display of the system state.
Feedback must be prioritized; too much feedback results in it being ignored or turned off.
A conceptual model that provides the user with a simplified explanation of how the system works
Ideally, the system’s or object’s structure provides clues to its function and thus provides/reinforces a conceptual model, as with holes for fingers in scissors.
Some objects provide no clues, e.g., how to use buttons on the side of a digital watch.
A too simple structure can cause confusion due to a flawed conceptual model. Examples: a cloud-based email program that always shows all of the user’s folders – even those that aren’t available when the user is not online
Goal-Oriented Design
(Cooper, Inmates Are Running the Asylum, Ch. 10)
Design should focus on the user’s GOALS, not on tasks
Goal reflects desired end conditions; tasks are means to goals
Tasks change as technology changes; goals do not
Programmers tend to favor task-oriented design because programming is inherently procedural and reflects the steps needed to complete specific tasks.
Example: user Jennifer must monitor her computer and periodically reconfigure it to ensure peak performance.
A programmer will build separate functions for monitoring and reconfiguring because these functions require distinct programming.
By contrast, a good UX design will ONLY invoke configuration controls when monitoring suggests performance problems. THEN, monitoring and configuration controls will be shown together so Jennifer can watch performance change as she tweaks configuration controls
Humanizing Software
(Cooper, Inmates Are Running the Asylum, Ch. 10)
Humans react to software as they do to other humans. So, the software should be:
Politely interested in me, e.g., by remembering and respecting my preferences
Deferential and generous with relevant information on the system’s condition
Helpful when I am trying to complete tasks
Practical, making common-sense assumptions about which controls a human would need front-and-center (e.g., if I ask for food at a restaurant, I will need silverware too)
Trustworthy and self-confident, e.g., it shouldn’t always need to double-check if I want to delete the file
Responsive
Perceptive, e.g., seeing that I often do X after I do Y
Things That Diminish Users’ Goodwill
(Krug, Don’t Make Me Think)
Hiding critical information like your customer service phone number or shipping costs
Insisting that user inputs conform to the site’s format preference (e.g., requiring dashes in Social Security number)
Asking for unnecessary information
“Putting sizzle in the way of the steak” (e.g., a time-consuming Flash prelude)
Amateurish looking site
Segmenting Users by Level of Proficiency
(Cooper, Inmates Are Running the Asylum, Ch. 11)
Beginners. Marketers and management tend to focus on them and push for designs that suit their needs. But no one likes to be a beginner, so no one stays in this segment long. They either become intermediate or attrite.
Intermediates. Often, no one champions design for the largest user group!
Power Users. Programmers relate to them and love to build for them.
Designing for Engagement: The Hook Model
(Eyal, Hooked: How to Build Habit-Forming Products)
Objective: guide users through “hooks”—experiences that, with repetition, form habits linking products used to daily routines and emotions (e.g., “I’m bored, so I open Twitter”)
Four steps of the Hook model
Provide the user with a trigger that actuates behavior
User takes action—behavior done in anticipation of a reward
Provide the user with a variable reward
Encourage user’s ongoing investment in the product, increasing its value with use.
Model is relevant only for products that could be used frequently (e.g., NOT a car buying service)
Probability of action=motivation x ability x trigger
(model of Stanford D-School’s B.J. Fogg, cited in Eyal, Hooked)
If any factor = 0, probability = 0
Core motives: 1) seek pleasure/avoid pain; 2) seek hope/avoid fear; 3) seek social acceptance/avoid rejection
Factors influencing user’s ability to take action: 1) time required; 2) fiscal cost; 3) amount of physical effort; 4) amount of mental effort; 5) social acceptability of behavior; 6) amount of disruption to the routine
For example, Google reduces the time/effort required to search by providing a simple, clean page, automatic spelling correction, predictive results, results that load as the user types, etc.
Trigger types: 1) external calls to action (e.g., search ad, “Buy Now” button); 2) internal triggers manifest automatically in a user’s mind when the product becomes associated with negative and positive emotions
Products initially provide external triggers; the goal is to form, through habitual use, internal triggers.
To harness internal triggers, a designer requires deep insight into users’ goals and motivations for product use, e.g., Instagram’s link to Fear Of Missing Out.
Variable Rewards
(Eyal, Hooked)
Research shows that variable, unpredictable rewards are more potent for activating behavior. Example: slot machines; scanning Pinterest for interesting images
People are most motivated when close to reaching the goal; motivation plummets, and attrition risk rises after reaching the goal, so design reward thresholds carefully.
Reward types: 1) tribe, 2) hunt, 3) self
Tribe rewards make us feel accepted and included. Example: “Likes” to our Facebook posts
Hunt rewards tap into the survival need to acquire resources. Examples: scan Twitter feed
Self-rewards tap into intrinsic motivation and pride at mastery. Examples: leveling up in video games, Codecademy progress
Some products tap multiple reward types. For example, email connects us socially, provides surprises, and offers the mastery challenge of “inbox zero.”
How User Investment Increases Engagement
(Eyal, Hooked)
Psychological factors: We seek consistency and avoid cognitive dissonance (e.g., “If I’ve spent so much time with this product, it must be good”)
Stored value: Ongoing investment in the product can increase its utility. Examples: growing iTunes library; vendor reputation on eBay or Airbnb; expanding LinkedIn profile; Twitter follower base; customization of Microsoft Office; mastery of Photoshop features
A powerful feedback loop occurs when product use loads the next trigger, expecting greater rewards. Examples:
Each Tinder swipe increases the odds of a match
High-quality Twitter posts send users back looking for re-tweets and favorites and can boost follower count
Analyzing User Errors
(Norman, Design of Everyday Things, Ch. 5)
Causes of user error include 1) deliberate action (e.g., propping open a door; exceeding the speed limit); 2) multitasking; 3) fatigue; 4 )carelessness due to boredom; 5) time stress.
Distinguish slips, where users have the correct goal but flawed execution, from mistakes, where users have the wrong goal.
Types of slips
Capture slips happen when procedures require similar opening actions and then diverge. For example, you’ve been doing procedure A a lot, then switching to B, but you keep following the action path for A
Description slips (e.g., pushing the wrong button in the airplane cockpit) happen with controls that look too similar
Memory-lapse slips, e.g., leaving cards in the ATM or originals in a copier, are caused by interruptions or cognitive load due to lots of steps. Avoid vivid reminders or force, e.g., can’t get cash until you recover card
Mode-error slips, e.g., turning off the wrong component in a home entertainment system. Exacerbated when one control has multiple functions to save money
Experts are more vulnerable to slips because they go on autopilot
Mistakes are due to problems at higher levels of cognition (i.e., planning and comparing results against expectations). Types:
Rule-based, i.e., the user applies the wrong rule despite the correct diagnosis of the situation
Knowledge-based, i.e., the user lacks the knowledge to properly diagnose the situation, e.g., cargo measured in pounds, not kilos; novel situation with no set rule
Memory lapse based, e.g., a distracted tech botches diagnosis.
Reducing user error
Constraints can prevent slips, e.g., different container designs, so spouts only fit one intake.
Confirmation statements can help with slips, but with mistakes, the user is typically sure that they want to proceed, so the error may not be corrected.
Checklists help, especially when two people execute them.
Why Hire Me?
Benefits of Idea Testing
Your idea is tested on your users only
You are saving 4X development time
You are saving 10X Money
Increase 3X angel funding chances
100% success guaranteed!