Module 16: UI/UX Principles — Design & Code Foundations

09

undefined

Information Access

Print

📖

Linear flow

Fixed layout, all content visible at once

Web

🖱️

Interactive

Progressive disclosure, click to reveal

Feedback

Print

📝

Static

No response to user actions

Web

✨

Dynamic

Hover, loading states, real-time feedback

Navigation

Print

Page 1, 2, 3...

Table of contents

Fixed page numbers, sequential reading

Web

Menu • Search

Non-linear access

Links, menus, breadcrumbs, search

Error Handling

Print

Errata sheet

Separate correction

Errors persist until reprinting

Web

Inline validation

Prevent & recover

Real-time prevention and recovery

10

undefined

Cognitive Load

undefined

Attention & Focus

undefined

Memory Systems

undefined

11

UX Principles in Action

How top products apply fundamental UX laws effectively.

Simple choices

3 products, not 30

Principles Identified:

Hick's Law Limited product lineup reduces decision time

Jakob's Law Consistent design across all products

Aesthetic-Usability Beautiful design perceived as easier to use

Key insight: Apple limits choices to reduce cognitive load. Fewer options means faster decisions.

🔍 Search or type a URL

Principles Identified:

Fitts's Law Large search bar is easy to click

Recognition Autocomplete shows options instead of recall

System Status Instant search results as you type

Key insight: Google's simple interface hides immense complexity. One large input, instant feedback.

Error Prevention

Card validation as you type

Principles Identified:

Error Prevention Card type detected automatically

System Status Real-time validation feedback

Flexibility Multiple payment methods supported

Key insight: Stripe prevents errors before they happen with smart inline validation.

12

UX Anti-Patterns

Common mistakes that frustrate users and violate fundamental UX principles.

Failure: Hidden Navigation

What's in here?

Fix: Use visible, labeled navigation

Clear, visible options

Rule: Desktop sites should show navigation clearly. Use hamburger menus only on mobile. Always label icon-only buttons.

Failure: Choice Overload

20 filter dropdowns

Decision paralysis

Fix: Reduce and categorize options

2 main filters + "More"

Progressive disclosure

Rule: Limit initial choices to 5-7 options. Use categories to organize. Hide advanced options behind 'More' or 'Advanced'.

Failure: No System Feedback

*clicks* ... nothing?

Fix: Show state for every action

User knows it's working

Rule: Every action needs immediate feedback. Show loading states, disable buttons during processing, confirm success or explain errors.

Failure: Tiny Touch Targets

Hard to tap on mobile

Fix: Use 44×44px minimum

Easy to tap accurately

Rule: Minimum 44×44px touch targets. Add padding if the visual element must be smaller. Space targets apart to prevent mis-taps.

13

UX Testing Methods

Techniques to evaluate usability and identify UX issues.

01

5-Second Test

Tests: First impressions

Show your design for 5 seconds, then hide it. Ask: What was this site about? What could you do? Where would you click first?

5

seconds to understand

02

Heuristic Evaluation

Tests: Nielsen's 10 principles

Walk through your interface checking each of Nielsen's 10 heuristics. Rate violations by severity (1-4). Fix critical issues first.

✓ System status

✓ User control

✗ Error prevention

03

Task Completion

Tests: Real user success

Give users a specific task (e.g., 'Buy a blue shirt size M'). Measure: success rate, time to complete, errors made, satisfaction.

Task: Find contact page

Success: 95% | Time: 8s

04

A/B Testing

Tests: Statistical comparison

Show version A to 50% of users, version B to 50%. Measure conversions, clicks, or other KPIs. Statistical significance required.

A: 3.2%

B: 4.1%

14

UX Implementation

CSS patterns for implementing UX principles.

/* Minimum touch target size */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Icon button with larger hit area */
.icon-button {
  width: 24px;
  height: 24px;
  padding: 10px;
  margin: -10px;
}

/* Spacing prevents mis-taps */
.button-group {
  display: flex;
  gap: 8px;
}

Touch Targets via CSS

min-width/height: 44px - Apple HIG recommended minimum
padding extends hit area - Visual can be smaller than touch target
gap: 8px between targets - Prevents accidental wrong taps

Tip: Test on real mobile devices. Desktop simulation isn't accurate for touch.

/* Primary - highest weight */
.btn-primary {
  background: #3b82f6;
  color: white;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
}

/* Secondary - medium weight */
.btn-secondary {
  background: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

/* Tertiary - lowest weight */
.btn-tertiary {
  background: transparent;
  border: none;
  color: #6b7280;
}

Visual Hierarchy via CSS

Size - Larger = more important
Color/Contrast - Filled vs outline vs text-only
Weight - Bold primary, regular secondary

Tip: One primary action per screen. Multiple primaries create confusion.

.button {
  transition: all 0.15s ease;
}

.button:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Feedback States via CSS

:hover - Visual change on mouse over
:active - Pressed state feedback
:focus-visible - Keyboard navigation indicator
:disabled - Inactive state clarity

Tip: Every interactive element needs all four states for complete feedback.

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open .accordion-content {
  max-height: 500px;
}

.content-preview {
  max-height: 100px;
  overflow: hidden;
}

.content-preview::after {
  background: linear-gradient(
    transparent,
    var(--bg-color)
  );
}

Progressive Disclosure via CSS

max-height animation - Smooth reveal of hidden content
Gradient fade - Indicates more content available
overflow: hidden - Clips content until revealed

Tip: Always indicate when content is hidden. Users won't click 'more' if they don't know it exists.

15

Self-Assessment

Test your understanding of UX principles and laws.

Q1

According to Fitts's Law, which button is fastest to click?

Click to reveal

Q2

What does Hick's Law say about decision time?

Click to reveal

Q3

What's the minimum touch target size and why?

Click to reveal

Q4

Name three of Nielsen's 10 usability heuristics.

Click to reveal

Q5

What is Jakob's Law and why does it matter?

Click to reveal

UI/UX Principles

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

UX Principles in Action

Common Failures

UX Anti-Patterns

Visual Tests

UX Testing Methods

5-Second Test

Heuristic Evaluation

Task Completion

A/B Testing

CSS Implementation

UX Implementation

Self-Assessment

Self-Assessment

Key Takeaways