Proximity

Grouping

Within a UX design experience, having UI elements that are closely related, grouped together to clearly display different sections.

Similarity 

Consistency

Having UI elements that are related in action, for example, certain call-to-action buttons in one same hue, shape etc. 

Closure

Gaps 

Using less details or shapes on UI screens as the user is able to fill in the gaps. 

Continuity

Movement

Having UI elements go in the same direction, similar flow.

Figure

Ground 

Having distinguished focal points on UI screens, within the background or foreground.

Common Region

Together 

Using for example shapes, that include details, that might not be necessarily be all together but similar to group.

Interviews 

Understanding Why

Key Purposes of Pre-Test Interviews

• Contextualization: Understand user motivations, pain points, and existing workflows, which helps interpret why they struggle or succeed during tasks.

• Participant Validation: Ensure the participant fits the target persona, which aids in interpreting data, especially if results are unexpected.

• Setting the Stage: Build rapport and comfort, reducing test anxiety and encouraging honest, vocal feedback.

• Background Info: Ask about experience level with similar products, tools, and technical proficiency.

User Testing

Validating Does it Work

Card Sorting

Structuring IA

Questioniare

A Tool

• A questionnaire is a tool (the set of questions)

Surveys

Entire Process

• A survey is the entire process (designing, distributing, and analyzing the data).

Product 🙄

For Testing 

• Evaluates a product by observing real users completing realistic tasks to uncover pain points and improve functionality.

• Effective tests require clear, task-based scenarios, "thinking aloud" techniques, and unbiased facilitation, ideal for identifying issues early (formative) or validating design before launch (summative).

Key Components

• Participants Target, realistic users of your product.

• Tasks Realistic activities and scenarios, not leading questions.

• Facilitator Guides the session, records behavior, and asks probing questions (e.g., "What did you expect to happen?").

• Environment Lab tests (controlled), remote, or unmoderated sessions. 

Tests 🙄

Common Methods

• Moderated Testing One-on-one sessions, excellent for understanding the "why" behind actions.

• Unmoderated Testing Users complete tasks at their own pace without a facilitator, often automated.

• Guerrilla Testing Quick, low-cost testing in public places for fast feedback.

• A/B Testing Comparing two versions of a design to see which performs better.

• Tree Testing Assessing navigation, labels, or information architecture. 

Steps for Conducting Tests

1. Define Goal What do you want to learn?

2. Recruit Find the right audience.

3. Task Develop, concise scenarios.

4. Run Test Observe and gather qualitative/quantitative data.

5. Analyze & Report Identify trends, prioritize issues. 

Good to..😊

• Get Consent: Ensure participants understand how their data will be used.

• Think Aloud: Ask users to say what they are thinking and feeling while performing tasks.

• Focus on Behaviors: Observe what they actually do, rather than what they say.

• Pilot Testing: Run a dry run to catch bugs in your script or setup.

• Right Tools: Utilize platforms like Maze, UserTesting, or Hotjar for recruiting and running tests. 

1🤨

Designer's

Conceptual Mental Models? 🙄

• The...behavior...layout defined by designers to explain how the system actually works.

• It includes information architecture, terminology, and interaction design.

Key Aspects for UX

• Misalignment Consequences: When the designer’s model does not match the user's, it causes confusion, errors, and frustration, leading to abandonment.

• Bridging the Gap: Designers must conduct research (interviews, card sorting) to understand user models, and then adjust the interface—or improve user understanding—to close the gap.

• Leveraging Familiarity: Using standard UI patterns (e.g., hamburger menus, trash can icons) helps align with established user models.

2🤨

User's

Conceptual Mental Models? 🙄

• The...expectations, and cognitive representations a user brings to a product.

• It's how they think it works, often influenced by prior, similar experiences.

Methods to Align Models

1. Card Sorting: Helps understand how users categorize information.

2. User Research/Interviews: Reveals user expectations.

3. Personas/Journey Maps: Validates user thought processes.

Both 😊

• Designers should research existing user mental models...to create a system that matches their intuition rather than forcing them to learn a new, unnatural model.

• When the designer’s conceptual model aligns with the user's mental model, the interface feels RIGHT!

Consider Design Principles

• Affordances 

• Signifiers 

• Feedback

• Constraints

Focus on Core Functionality

Identify the 20% of features used by 80% of users and prioritize their design and usability.

Prioritize

Critical Flows

In prototyping, focus on polishing the 20% of journeys (like onboarding, search, or checkout) that deliver 80% of the value.

Optimize

High-Traffic Areas

80% of user attention is often focused on 20% of the page. Place critical content and CTAs (e.g., "Add to Cart") in these high-visibility areas.

Streamline Data/Analytics

Use analytics to identify the 20% of pages causing 80% of drop-offs, or the 20% of bugs causing 80% of user complaints.

Simplify

Forms

Pre-populate form fields based on the 20% of options that cover 80% of user inputs (e.g., auto-selecting the most common country or shipping method).

Both are important and the 80% should be considered as an opportunity to improve on user experiences.