🎨 CSS323 — UX/UI Design Cheat Sheet

1. What Is UX? (User Experience)

One-liner: UX = the quality of experience a person has when interacting with a design — from a cup to an airport.

• UX is how users feel when using a product
• Determines if they will use it again (users always have alternatives)
• Applies to anything: website, app, physical product, service

🍎 Apple example: The iPhone's "slide to unlock" (2007) wasn't just a feature — it was a moment that felt magical. No manual needed. That's UX: the feeling of "I get this" without thinking.

🍅 Ketchup analogy: Old upright bottle (familiar UI) vs. squeezable upside-down bottle (better UX) — same product, dramatically better experience.

2. Common Sense vs. Information Architecture vs. UX

🍽️ UX is setting the dinner table — not just sorting the silverware drawer.

🍎 Apple example: macOS Finder (IA) labels everything precisely. But UX is that when you plug in a USB drive, it just appears on the desktop — no drivers, no setup wizard. You always know where things are and what to do next.

3. UX Design (UXD)

• UXD = process of enhancing user satisfaction by improving usability, accessibility, and pleasure
• Goal: Design a product users can use with success AND pleasure — and want to use again

💬 "It doesn't matter if you used a device a hundred times successfully — you will remember the unsuccessful attempt." — Donald Norman

🍎 Apple example: Face ID failing once at a family dinner is the moment you remember — not the 300 times it worked flawlessly. This is why Apple obsesses over edge cases.

4. What Do You Want Your Audience To Do?

5. User Interface (UI)

• UI = the interface users interact with — the meeting point of user needs and product features
• When users see an interface, they form a conceptual model — imagining how it works
• Designers are responsible for both how it looks AND how users interact with it

💬 "A picture is worth a thousand words. An interface is worth a thousand pictures." — Ben Shneiderman

🍎 Apple example: The iOS Control Center — one swipe down from the top-right reveals the most-used toggles. No hunting through Settings. The UI reflects what users actually need quickly.

6. UX vs. UI — The Difference

🏠 UX = the floor plan and blueprint of a house. UI = the interior design and paint colors.

🍎 Apple example:

• UX: Apple decided that setting up a new iPhone should take under 5 minutes using Quick Start (hold old phone next to new one → done). That's a UX decision.
• UI: The blue gradient on the setup screen, the SF Pro typeface, the rounded buttons — those are UI decisions.

7. The 5 Layers of UX (Jesse James Garrett Model)

Bottom = most abstract/strategic → Top = most visible/concrete

         ┌─────────────────────────────┐
    5    │       VISUAL DESIGN         │  ← What users SEE (colors, fonts, icons)
         ├─────────────────────────────┤
    4    │  Interface / Navigation /   │  ← How users MOVE (menus, buttons, layout)
         │   Information Design        │
         ├─────────────────────────────┤
    3    │  Interaction Design /       │  ← How users INTERACT (flows, IA, gestures)
         │  Information Architecture   │
         ├─────────────────────────────┤
    2    │ Functional Specs /          │  ← What it DOES (features, content req.)
         │ Content Requirements        │
         ├─────────────────────────────┤
    1    │  User Needs /               │  ← WHY it exists (goals, objectives)
         │  Site Objectives            │
         └─────────────────────────────┘  ← FOUNDATION

🍎 Apple example for each layer:

1. User Needs: People want to listen to music anywhere → iPod
2. Functional Specs: Must hold 1,000 songs, sync with iTunes
3. Interaction Design: Click wheel for scrolling through library
4. Navigation Design: Menu → Artists → Albums → Songs hierarchy
5. Visual Design: Clean white device, minimal screen, iconic silhouette ads

8. UXD Misconceptions — "UXD is NOT..."

🍎 Apple culture example: At Apple, even the packaging experience is UX. The slow, satisfying resistance when you pull the lid off a new iPhone box — that was engineered on purpose. UX isn't just one team's job.

9. Experience Building Blocks

Foundation: Users (emotional & rational needs) + Business (measurable goals) + Brand (core values)

→ All 5 together = Great Customer Experience

10. UX Design Process

For New Products

Define Scope → Learn (Research, Personas) → Generate (Flows, IA, Wireframes, Prototype) 
→ Supply (Front-end, Visual Design, Code) → Feedback Loop (Testing, A/B, Interviews)

For Existing Products

Input (Analytics, Feedback, Issues) → Learn (Audit, Update Personas) 
→ Generate (Improve IA, Partial Wireframes) → Feedback Loop (Contextual Inquiries, Testing)

🍎 Apple example: When Apple redesigned iOS 7 (2013), it went through exactly this — existing iPhone users, tons of analytics, full redesign of visual layer without breaking existing mental models (same gestures, same app positions).

11. Psychology in UX Design

UX sits at the intersection of: Psychology (how it feels) + Science (how it works) + Art (how it looks)

Six Key Cognitive Areas:

1. Attention
2. Memory
3. Language
4. Reasoning
5. Problem Solving
6. Decision Making

#1 — Cognitive Attention

Two types:

Eye-Tracking Findings:

• People spend more than 2× as much time looking at the left side of a page
• Content above the fold gets 57% of viewing time — attention drops sharply after scrolling

🍎 Apple example: Apple's website always places the hero product image and headline on the left/center-top. The "Buy" button is always prominent and above the fold. Nothing important is buried.

#2 — Cognitive Memory

Von Restorff Effect

Items that stand out from their surroundings are more likely to be remembered

🍎 Apple example: On Apple's pricing page, the recommended storage tier is always highlighted differently — slightly bigger, different background. Your eye goes there first because of the Von Restorff effect.

Serial Position Effect

Users best remember the first and last items in a series

🍎 Apple example: iPhone's dock (bottom bar) — the 4 most important apps sit there. First = Phone, Last = Safari. These are anchors in users' memory.

🎤 Speech analogy: People remember your opening and your closing, rarely the middle details.

#3 — Language in UX Design

Rule: Make language objective and obvious — never assume technical vocabulary

🍎 Apple example: Apple never says "authenticate your biometric identifier." It says "Use Face ID" or "Enter Passcode." Human. Direct. No jargon. Even their error messages are written in plain, calm language.

💡 Clear language is invisible — users don't notice it. Confusing language is all they notice.

#4 — Reasoning in UX Design

• Users bring existing mental models to your product — don't force them to relearn from scratch
• Connect new patterns to existing background knowledge

Example: The Search Bar Convention

Changing any convention without good reason creates friction — users feel something is "wrong" even if they can't explain why.

🍎 Apple example: When Apple introduced swipe-to-go-back in iOS, it extended the existing tap-back-button mental model — just faster. The gesture connected to what users already understood. Compare this to Android's changing back button placement, which broke mental models repeatedly.

#5 — Problem-Solving in UX Design

A problem space has 3 states:

[Initial State] ──── (journey/path) ──── [Goal State]
  Where user starts       ↑               What user wants
                   Intermediate State
                   (your app's job)

Design goal: Make your app the preferred starting point and ensure the intermediate phase is smooth

🍎 Apple example: Want to send money? Initial state = open Messages. Intermediate = tap the "$" button in iMessage, enter amount. Goal state = money sent. Apple Pay in iMessage removes the need to open a separate banking app entirely. Your app is the initial state.

🗺️ GPS analogy: Your job is to give users a clear route — no dead ends, no U-turns, no "recalculating."

#6 — Decision Making: Hick's Law ⚡

$\boxed{T = b \cdot \log_2(n + 1)}$

Key insight: More options = longer decision time. Linear options = exponential delay.

🍎 Apple example: The original iPhone home screen had 16 icons max per page. The dock had 4. Apple understood that limiting visible choices reduces cognitive load. Compare to early Android where you could put 50 widgets on screen — overwhelming.

🍽️ Restaurant analogy: A 5-item menu is easy to decide from. A 200-item menu causes decision paralysis. Some customers leave without ordering.

12. Color Psychology in UX/UI

Color Preference by Gender

Color → Brand Association

🍎 Apple example: Apple uses black and white as primary brand colors — communicating premium, calm, and minimalist values. When they do use color (Product RED, iPhone colors), it's deliberate and limited — reinforcing the Von Restorff effect.

⚠️ Colors communicate before words do. Wrong palette = brand message undermined before the user reads a single word.

13. Wireframes

Definition: A visual outline — clearly lays out content, functions, and connections between pages. No color, no aesthetics. Pure structure.

🏗️ Analogy: Like an architect's floor plan — no wallpaper or furniture, just walls, doors, and rooms.

Wireframe vs. Mockup (Prototype)

🍎 Apple example: Before building the first iPhone, Apple reportedly had dozens of paper wireframes of the home screen layout — deciding icon grid, dock position, and status bar before writing a line of code.

What a Wireframe Shows:

• Page layout — arrangement of elements
• Information priority — what's most important (bigger = more important)
• A bridge — between abstract ideas and a real prototype

14. Wireframing Technique (5 Steps)

15. Start with Structure & Navigation First

Before drawing any screens, map out the site/app hierarchy:

Index (Home)
├── Product Info 1 / 2 / 3
├── Log In
│   ├── Registration
│   └── Checkout
├── Shopping Cart
└── Customer Service
    ├── FAQs
    ├── Terms & Conditions
    ├── Delivery Policy
    └── Contact Us

🛒 Physical store analogy: Plan the aisles before stocking the shelves. If the hierarchy is wrong, no amount of visual polish fixes a confused user.

🍎 Apple example: Apple.com hierarchy = Apple (home) → Mac / iPad / iPhone / Watch → Each product → Tech Specs / Buy. Completely predictable. Users never get lost because the structure was designed first.

17. Big Picture Summary

UX Design is NOT:          UX Design IS:
───────────────────────────────────────────────────────
UI design              →   The WHOLE system
A step in process      →   The ENTIRE process
About technology       →   About BEHAVIOR
About usability        →   About VALUE
About the user         →   About CONTEXT & BUSINESS
One department         →   ORGANIZATIONAL CULTURE
One discipline         →   A COLLABORATION
A choice               →   A MEANS OF SURVIVAL

How Everything Connects

Psychology + Science + Art
        ↓
  6 Cognitive Areas (Attention, Memory, Language, Reasoning, Problem Solving, Decision Making)
        ↓
  Applied through UX Design Process (Research → IA → Wireframe → Prototype → Test)
        ↓
  Built with 5 Building Blocks (Useful, Usable, Desirable, Sustainable, Social)
        ↓
  Delivered via 5 Layers (Needs → Specs → Interaction → Navigation → Visual)
        ↓
  Result: Users return. Business survives. 🎯

🍎 Final Apple quote to remember: Apple doesn't make the most feature-rich products — they make the most experiential ones. Every decision, from the weight of the device to the font on the screen, is a UX decision. That's why people queue overnight. Good UX is strategy, not decoration.

Cheat sheet for CSS323 Software Engineering — UX/UI Design Chapter UX isn't what you see. It's what you feel. 🎨