Sections

Designing Better User Experiences

The Importance of UX/UI Design

Why users click, stay, or leave — through layout, accessibility, color, typography, whitespace, and thoughtful interface design.

Let's Get StartedKey Takeaways

Section 1

What is UI/UX?

UI (User Interface) is what users see and interact with. UX (User Experience) is the complete experience of moving through a layout of sorts, making decisions, and relaying information.

Good UX/UI helps information move efficiently from an interface to the user. It can reduce friction, guide attention, and shape the decisions people make while using certain software or hardware.

In other words: design is not only decoration. It is synthesized communication, a form of decision support, and overall workflow design.

UI

  • Buttons, menus, forms, icons
  • Colors, spacing, typography
  • Visual hierarchy and layout

UX

  • Ease of use and clarity
  • Efficiency and confidence
  • How well information is conveyed
  • How easily users make desired decision

Section 2

Why UX Matters

UX affects how people feel, level of efficiency, how well information is conveyed, and whether a user trusts a product enough to keep using it.

Click on a card to reveal an example. Click on it again to flip it back.

Reduces Errors

Clear labels and logical flows help users avoid preventable mistakes.

View example
Example

Medication or form entry

Separating destructive actions like “Delete” from safe actions like “Save” reduces the chance of accidental data loss.

Builds Trust

Consistent layouts make software feel reliable, consistent and professional.

View example
Example

Consistent navigation

When every page uses the same labels, menus, and button styles, users can learn a system faster and feel more confident.

Improves Efficiency

Good design removes unnecessary steps and speeds up repeated tasks.

View example
Example

Saved preferences

A table or list that remembers common settings can save users repeated clicks or repeated filterings every time they review information.

Improves Focus

Visual hierarchy guides users toward what matters most.

View example
Example

Priority information

Large headings, strong contrast, and clear spacing can help set priority in the flow and guide users to more important information first.

Expands Access

Accessible design supports more users in more environments.

View example
Example

Readable for more users

High contrast, keyboard navigation, and clear labels support people with low vision or motor skill limitations.

Supports Habits

Low-friction design makes people more likely to return and keep using a tool.

View example
Example

Fast repeat workflows

If a task takes seconds instead of going through several screens, users are more likely to repeat it consistently over time.

Section 3

How We Process Information

Users may not catch every detail. They may scan, group, compare, prioritize, and miss important aspects.

UX design works best when it thinks about the user. People. We take into consideration their limits instead of fighting them.

Scan → Group → Decide → Act

Section 4

Cognitive Load

Cognitive load is the mental effort required to complete a task. A cluttered interface makes users spend energy understanding a screen instead of completing the desired goal.

Too Much at Once

High Load

Dense screens, vague labels, too many choices, and weak grouping.

Simplified Path

Low Load

Clear sections, obvious actions, consistent patterns, and helpful defaults.

Memory Heavy

User Must Remember

Users must hold previous steps, codes, or rules in their head.

Recognition Based

User Can Recognize

Visible options, labels, status messages, and guided steps reduce mental effort.

No Clear Priority

Everything Competes

Every button, alert, or any interactable element fights for the user's attention.

Strong Hierarchy

Important First

Primary actions, warnings, and key data stand out intentionally.

No Feedback

User Feels Lost

The interface does not confirm progress, success, errors, or next steps.

Clear Feedback

User Feels Oriented

Loading states, confirmations, and useful error messages reduce uncertainty.

Section 5

UX Laws That Explain User Behavior

These laws give us a practical way to explain why certain interfaces great, while others feel slow, stressful, or confusing.

01

Miller's Law

Background: Psychologist George A. Miller described limits in short-term memory, often summarized as “7 plus or minus 2.” In UX, the point is not to force every design into seven items, but to respect that memory can be limited and varies by person.

  • Do not use the “magical number seven” to justify unnecessary design limitations.
  • Organize content into smaller chunks so users can process, understand, and remember it more easily.
  • Use categories, summaries, and labels to reduce memory burden.
  • Remember that short-term memory capacity varies by individual and situation.
ProfileSecurityBillingPrivacyTeamAlerts
02

Hick's Law / Hick-Hyman Law

Background: Named after psychologists William Edmund Hick and Ray Hyman, this law states that the more choices a person is presented with, the longer they will take to reach a decision. In UX, we can use this to help us prevent menus, filters, and forms from overwhelming users.

  • Progressive disclosure: hide advanced or less critical options until they are needed.
  • Task chunking: break complex multi-option tasks into smaller sequential steps.
  • Smart grouping: categorize or group similar features or settings.
  • Highlighting: visually emphasize recommended or high value choices to reduce uncertainty.
→
03

Fitts's Law

Background: Paul Fitts studied human movement and target selection. In UI design, the law explains why large nearby targets are easier and faster to select than small, distant ones.

  • Make primary buttons large enough to select comfortably.
  • Place common actions close to where the user is already focused.
  • Do not crowd destructive actions next to common actions.
  • Remember that touch targets need more space than mouse targets.

Section 6

Gestalt Principles

Gestalt principles explain how people naturally organize visual information. Good UI design uses these patterns to make layouts feel understandable before users even read the text. These principles are especially useful for dashboards, forms, cards, menus, and data heavy tables.

Proximity

Objects close together feel related. This is why labels should sit near inputs.

Similarity

Elements with similar shape, color, or size feel like they belong together.

Continuity

The eye follows lines and repeated structures, which helps guide scanning.

Common Region

Items inside the same container feel grouped, like insight cards.

Figure / Ground

Users separate foreground content from the background to know what to focus on.

Closure

The brain fills gaps to complete familiar shapes or patterns.

Section 7

Color, Typography, and Visual Hierarchy

Visual design helps users understand what matters first, what action to take, and how different pieces of information relate.

Business

Quarterly Report

Clean, structured, trustworthy, and easy to scan.

Finance

$24,860.42

Precise numbers, strong contrast, stable visual rhythm.

Game

Level Complete!

Expressive, energetic, and visually memorable.

Clinical

Glucose Trend Alert

Calm, legible, precise, and focused on reducing risk.

Editorial

Feature Story

Readable rhythm, personality, and strong headline contrast.

Product

Start Free Trial

Clear action, friendly tone, and emphasis on conversion.

Color Relationships

Color is not random decoration. It creates attention, contrast, emotion, and meaning.

ComplementaryBlue + orange: strong contrast
ComplementaryPurple + lime: energetic
AnalogousCyan + green: calm flow
Alert PairDark + red: high urgency

Section 8

Whitespace Is Not Wasted Space

Spacing gives content room to breathe. It separates ideas, improves readability, and makes actions easier to find.

Cramped Form

Readable Form

Dense Card

Everything is close together so every detail competes for attention.

Focused Card

Spacing makes the content easier to understand and the action easier to find.

Warning

Low contrast, tight spacing, unclear next step.

Success Summary

Clear spacing, readable text, and one obvious next step.

Section 9

Accessibility Is Good UX

Accessible design supports users with different needs, devices, environments, and abilities. It also improves usability for everyone. WCAG gives us concrete rules to back this up.

WCAG 1.4.1 Use of Color

Color cannot be the only visual way to convey information, indicate an action, prompt a response, or distinguish an element.

WCAG 1.4.3 Contrast Minimum

Normal text needs at least 4.5:1 contrast; large text needs at least 3:1.

WCAG 1.4.11 Non-text Contrast

UI components and graphical objects need at least 3:1 contrast against adjacent colors.

Bad: Low Contrast

Text and buttons should not disappear into the background.

Good: Strong Contrast

Readable contrast helps users in bright rooms, on older screens, or with low vision.

Bad: Color Only

Error

Success

Without labels, color alone can be ambiguous.

Good: Color + Text

! Payment failed

✓ Payment complete

Text and icons support color meaning.

Bad: Tiny Target

Small controls are harder for mouse and touch users.

WCAG 2.5.8 supports minimum target size or enough spacing around small targets.

Good: Clear Target

Large, labeled targets are easier to select.

Section 10

Mobile, Tablet, Desktop, and Scalable UX

Responsive design is not only about shrinking a website. It is about matching the interface to the user's device, context, and considering task complexity.

Mobile

  • Small screen
  • Touch input
  • Short sessions
  • Simplified tasks

Tablet

  • Mid-sized workspace
  • Touch-first navigation
  • Supports multi-panel layouts
  • Combines mobility with productivity

Desktop

  • Larger workspace
  • Precision input
  • Complex workflows
  • Data-heavy interfaces

Large Monitors

  • More visible data
  • Multi-panel workflows
  • Better comparison views
  • Risk of overloading the screen

Tables & Data Grids

  • Need sorting and filtering
  • Column priority matters
  • Responsive behavior should be planned
  • Horizontal scrolling is a last resort

Scalability

  • Design must survive more data
  • Components should be reusable
  • Spacing keep layouts consistent
  • Navigation should grow carefully

Section 11

Why UX/UI Is More Than “Looks”

Good UX changes how people understand information, make decisions, and trust systems. It is visual communication, not decoration.

Decision-Making and Usefulness

Research in user/computer interaction connects interface design to decision time, perceived usefulness, and user confidence. When choices are organized well, users can evaluate information faster.

Faster decisionsLess confusionHigher confidence

Information Efficiency

UX/UI improves how information is aggregated and understood. Clear grouping, typography, contrast, and hierarchy help users identify patterns instead of fighting the interface.

Better scanningClear groupingLower cognitive load

Workflows Become Easier to Repeat

When tools are predictable, users build reliable habits. Consistent controls, clear feedback, and meaningful defaults reduce hesitation and make repeated work feel smoother.

ConsistencyMomentumTrust

Design Supports Confidence

For most platforms, users need to understand information quickly and accurately. Good UX supports confidence by making important information easier to locate, compare, and act on.

AccuracyFocusAction

Sources

Citations

These are the main sources used for the UX laws, Gestalt background, accessibility standards, and visual design principles. Click each citation to reveal the link.

Miller, G. A. (1956). “The Magical Number Seven, Plus or Minus Two.” Psychological Review.Open source
Nielsen Norman Group. “The Magical Number 7 and UX.”Open source
Interaction Design Foundation. “Hick’s Law.”Open source
Nielsen Norman Group. “Fitts’s Law and Its Applications in UX.”Open source
Nielsen Norman Group. “Proximity Principle in Visual Design.”Open source
Interaction Design Foundation. “Gestalt Principles.”Open source
Nielsen Norman Group. “How Chunking Helps Content Processing.”Open source
W3C. Web Content Accessibility Guidelines (WCAG) 2.2.Open source
W3C. Understanding Success Criterion 2.5.8: Target Size (Minimum).Open source

Things to Remember

Key Takeaways