UX UI Design Principles for Beginners - A Bible

User experience design (UX) refers to the overall user experience on a digital product. It includes everything from the layout and colors to the fonts and images used. 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
• UI Design Guidelines
  • #1 Usability Rule: Don’t Make Users Think
  • More Navigation Guidelines
  • Visual Design
  • Mobile Design
• Wireframes and Prototypes
  • How Much Fidelity?

What are the UX UI design principles?

UX (User Experience) and UI (User Interface) design principles are guidelines that designers can follow to create products that are both usable and aesthetically pleasing. Here are some common UX/UI design principles:

1. Clarity: Design the user interface so that it is clear and easy to understand. Use simple and straightforward language, clear typography, and a clean layout to improve legibility.

2. Consistency: Use consistent design patterns, such as navigation, typography, and color, throughout the product to improve usability and reduce confusion.

3. 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.

4. Feedback: Provide users with immediate and clear feedback for their actions, such as through visual cues, animations, or notifications.

5. 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.

6. Usability: Design the product to be intuitive and easy to use, with a focus on reducing friction and facilitating task completion.

7. Aesthetics: Use design elements, such as color, typography, and iconography, to enhance the aesthetic appeal of the product and create a memorable brand experience.

8. Responsiveness: Design the product to be responsive and adaptable to different screen sizes and devices, ensuring a consistent experience across different platforms.

9. Flexibility: Allow users to customize their experiences, such as by choosing their preferred layout, language, or theme, to improve engagement and increase personalization.

10. Continuous Improvement: Continuously gather feedback from users and data to inform ongoing design improvements and ensure that 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 products that are usable, aesthetically pleasing, and provide a positive user experience.

Why Invest in an Upfront Design Phase?

(Cooper, Inmates Are Running the Asylum)

• Once bad 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 is always offering 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 useful - A product is bought to be used. It has to satisfy not only functional but also psychological and aesthetic criteria. Good design emphasizes the usefulness of a product whilst disregarding anything that could detract from it.
• Is aesthetic - The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on 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 making use of 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. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression.
• Is honest - It does not make a product appear more innovative, powerful, or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
• 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.
• 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 important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.

Is as little design as possible - Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. 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 affords an opportunity to swim. 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 steering wheel(car turns left when you turn the wheel left) or positioning of knobs to control 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 side of a digital watch.
  • A structure that is too simple 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 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 really 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 key 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 a lot 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
  1. Provide the user with a trigger that actuates behavior
  2. User takes action—behavior done in anticipation of a reward
  3. Provide the user with a variable reward
  4. 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 with a simple, clean page, automatic spelling correction, predictive results, results in that load as 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 powerful for activating behavior. Example: slot machines; scanning Pinterest for interesting images
  • People are most motivated when close to reaching the goal; motivation plummets/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, with an expectation of 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 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 ATM or originals in 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

UI Guidelines

 

Apply UX Design Principles to Your Digital Product.

To make sure your website has a good UX design, start by thinking about who will be using it. What features do they need? How should they navigate through the site? Once you've answered these questions, think about how you can improve the user's experience.

#1 Usability Rule: Don’t Make Users Think

(Krug, Don’t Make Me Think) 

• Having to ask “Where am I?” or “What do I do next?” makes us think
  • A user should always know their current location via visual contrast (shading or color) for the active tab and perhaps breadcrumbs, e.g.,  You Are Here: Home > Hobbies > Book Collecting (each hyperlinked)
  • A user should always know what to do next; calls to action should be clear and prominent, and limited in number
• Dense or confusing screen layouts make us think, “What’s this page for?” 
  • People scan/skim, so design pages like billboards
    • Create a clear visual hierarchy by giving prominence (via larger or bold fonts) to important items; by grouping similar items; and by nesting sub-categories
    • Break pages into clearly defined areas, using headers, etc
    • Highlight key terms with bold fonts
    • Make what’s clickable obvious with prominent buttons, obvious links, etc.
    • Minimize noise/busyness by omitting needless words and page elements, using bullet lists, etc.
  • Follow industry conventions for web or mobile navigation, e.g., where to place navigation links, utilities, “about us,” etc.
    • Users don’t have to think as much when they find things where they expect to find them
    • Note that designers often resist using conventions, viewing them as uncreative
• Bad naming makes us think, e.g., vague categories (e.g., do I find a handheld vacuum cleaner in “electronics” or “home & garden”?), clever names, technical jargon (e.g., use “Stamped Mail” or “Metered Mail”?), etc. 

More Navigation Guidelines

(Krug, Don’t Make Me Think) 

• The home page should include: 1) site identity and concise/informative/lively tagline or mission statement that conveys differentiation; 2) how to get started via 1 )site navigation hierarchy, 2) search or 3) best stuff = teases/timely content/deals; 3) call to action, if appropriate (e.g., registration)
  • Some users almost always use the search box for what they want, others almost rely on links, tabs, and other navigation cues. You must design with both types in mind.
• Navigation format should be persistent and consistent on every page (except for the home page and some pages for forms) and should always include: 1) logo/site ID (which should link to the home page); 2) “Home” link or icon; 3) search box; 4) sections, ideally as tabs; and 5) utilities 
  • Every screen needs a prominent name (e.g., the “Auctions” section, then the “Sell an Item” subsection)
• Drop-down menus are tempting as a way to save space, but they reduce serendipity in discovery and they are error-prone because they disappear easily and require careful mouse maneuvering 
  • The risk of error is particularly acute with multi-level/nested pulldowns (i.e., a category list whose elements each expand into subcategory lists)
  • Pulldowns work best for alphabetical lists of known names, e.g., states
• Preserve the visual distinction between visited and unvisited links
• Don’t put labels inside text boxes: they may be perceived to be default answers
• Don’t float headlines between paragraphs: position them closer to the text that follows
• Progressive disclosure: don’t overwhelm users with too much information on the first page
  • Let users choose the level of detail that meets their needs. 
  • Don’t worry about requiring multiple clicks—if each click makes sense, the user will find navigation easy
• Provide progress indicators for multistep actions, e.g., creating a profile, shopping transaction
• Make it easy to undo the last action and the entire last sequence
  • Back button accounts for 30-40% of all web clicks
• What gets attention: faces, things that move (e.g., videos), loud noises
• Make navigation targets large enough and not too distant from each other
• Fast-loading pages are VERY important
• Responsive design that avoids horizontal scrolling (i.e., automatic adjustment based on display size) is VERY important 
• Internal search (Sharp)
  • Make the search box wide enough to see the input
  • Must account for plurals, typos, hyphens, variants
  • Tips: 1) identify the top 10-20 search terms via logs, then make sure results for them make sense: 2) check results for terms like “shipping,” “customer service,” “phone number,” and “returns”
  • Consider using filters to narrow search results

• More tips: (Stayintech)

Visual Design

• Flat design is trendy and removes clutter, but it also removes visual distinctions and thereby makes it more difficult to provide clues about the functionality of screen elements (Krug  p. 152) 
• Readability (Weinschenk, 100 Things)
  • All caps text is harder to read; use sparingly, to get attention
  • Contrary to conventional wisdom, research shows no difference in reading comprehension between high-resolution serif and sans serif fonts; nevertheless, many designers favor serif fonts for large text blocks
  • Some newer fonts, e.g., Tahoma and Verdana, are designed with large letter body heights for better screen readability
  • Especially when reading on a screen, contrast matters, and is best achieved with black text on white background
  • Break text into chunks with bullets, short paragraphs, pictures, etc.
  • People read faster with long line lengths but prefer shorter line lengths
• Colors (Weinschenk, 100 Things)
  • Blue and red don’t go together; they are hot and cold colors
  • 9% of men are color blind
  • The color meaning varies by culture, e.g., white is the color of death for some, purity for others

Mobile Design

• Read iOS Human Interface Guidelines and Android Design Principles!!
• With small screens on mobile devices, it’s possible you may have to click through more levels than with websites to get to the same content/features
• Pull-down menus are more difficult to manipulate with small touch screens; use buttons when possible
• Avoid requiring pinch-to-zoom to navigate or view the content (Google Research)
• Give clear direction to switch screen orientation when landscape offers the best experience (Google Research)
• The mobile touch interface forfeits cursor hovering, making it more difficult to provide clues about functionality (Krug p. 152) 
• Responsive design is a great goal, but according to Krug (p. 149) it takes a lot of time and it is difficult to do well, compared to designing separate experiences for web and mobile
  • Always provide a link to the desktop version, but don’t label it the “full” site, because this may cause users to perceive the mobile experience to be inferior (Google Research)

Wireframes and Prototypes

Definitions

• In the definitions below, “fidelity” reflects the degree of closeness in form and function to the final working product
• Wireframes  are low-fidelity depictions (sketchy; typically black & white) of how software screens’ main user interface elements (e.g., content, features, navigation aids, calls to action, ads, etc.) are structurally arranged, and how screens relate to each other (Marcin Treder)
• They are used for planning and communicating about designs, often with accompanying text. Also used to elicit feedback from users
• Mockups are medium or high-fidelity static representations of web pages or mobile app screens that incorporate visual design elements (e.g., graphics, typography, color schemes)
  • Used to get user feedback and buy-in from management
• Prototypes refer to any representation of a design idea and can range in fidelity from very low (e.g., “paper prototypes”; interactive wireframes) to very high (versions with working functionality). 
  • According to Houde & Hill: “Is a brick a prototype? The answer depends on how it is used. If it is used to represent the weight and scale of some future artifact, then it certainly is.”
  • Prototypes can be used to: 1) simulate users’ interactions with the envisioned product, to determine whether a design meets their needs; 2) to get feedback on the sensory experience (“look and feel”) of a design; or 3) explore a design’s technical feasibility, e.g., confirming that a new technology works as intended.
• There is confusion about the differences between wireframes, mockups, and prototypes. The terms are often used interchangeably and the definitions above are by no means universally recognized.
  • For example, some development professionals reverse the definitions above, labeling sketchy low fidelity representations “mockups” and higher fidelity versions “wireframes.”

Wireframing

• Most designers start with pencil and paper
• Advantages of digital wireframes: 1) modifying design elements doesn’t require you to redraw everything; 2) easy to share

How Much Fidelity?

• Advantages of high fidelity prototypes
  • Customers/senior managers/test subjects may find it difficult to envision application functionality based only on low-fidelity wireframes
• Drawbacks of high fidelity prototypes
  • Early in the design cycle, it would be costly to create high-fidelity prototypes for each of the potential solutions explored.
  • Designers and engineers may become prematurely attached to a high-fidelity prototype after working so hard on it
  • Customers/senior managers may focus too much attention on visual design elements (“I don’t like that shade of blue”) and not enough on how a design addresses unmet customer needs
  • Customers may be less inclined to criticize a design perceived to be finished

Takeaways

There are several key principles of good user experience design. These include simplicity, consistency, clarity, and empathy.

I am a Fulbright fellow and a multidisciplinary designer expert in solving complex problems breaking things down to tangible designs, seamless flows, and friendly interfaces. Let's write this story together. For UI UX consultation contact me at princepal@think360studio.com.

Skype: princepal-designer

Google Hangout: palprince@gmail.com

WhatsApp: +91 9915 106 790