Chapter 5: UI Design Guidelines & Principles

🎯 Learning Objectives

By the end of this study session, you’ll be able to:

Explain Donald Norman’s 7-stage interaction model and understand how users mentally process their interactions with systems
Identify and bridge the “gulfs” - those tricky gaps between what users want to do and what the system allows
Apply Shneiderman’s 8 Golden Rules to create more user-friendly interfaces
Implement Norman’s 6 Design Principles (visibility, feedback, constraints, mapping, consistency, affordance) in your designs
Choose the right techniques to grab users’ attention effectively
Design clear, helpful error messages that actually help instead of frustrate users
Distinguish between slips and mistakes and know how to prevent each type of error
Evaluate existing interfaces using these established principles and guidelines

🌟 The Big Picture

Think about the last time you struggled to use a website, app, or even a physical device like a microwave. Frustrating, right? That frustration usually happens because there’s a mismatch between how you think something should work and how it actually works.

This entire topic is about bridging that gap between human thinking and system design. We’re learning to create interfaces that feel natural, predictable, and helpful to the people using them. The goal isn’t just to make things “look pretty” - it’s to make technology that truly serves human needs and capabilities.

The principles we’ll cover aren’t just theoretical - they’re battle-tested guidelines that can make the difference between a product people love and one they abandon in frustration.

📚 Core Concepts

🧠 Understanding How People Interact with Systems: Norman’s Model

Before we can design great interfaces, we need to understand what goes on in a user’s head when they interact with any system. Donald Norman gave us a fantastic framework for this.

The 7-Stage Interaction Cycle

Every time you interact with a system - whether it’s sending a text message, using an ATM, or adjusting your car’s AC - your brain goes through these seven stages:

The Execution Side (Planning & Acting):

User establishes the goal - “I want to invite my friend to lunch”
Formulates intention - “Should I text, call, or email?”
Specifies actions at interface - “I’ll pick up my phone, unlock it, open messages…”
Executes action - Actually performing those physical actions

The Evaluation Side (Checking & Understanding):

Perceives system state - Seeing what happened on the screen
Interprets system state - Understanding what those visual changes mean
Evaluates system state with respect to goal - “Did I successfully send that message?”

Visual Reference (Slides 5-6):

The cycle diagram shows these 7 stages flowing in a circle around the user (represented as “The Observer”) with the system at the bottom.

It illustrates how execution flows from goal → intention → action, while evaluation flows back from system state → interpretation → goal evaluation.

Key Insight: Goals vs. Intentions vs. Actions

Here’s something crucial to understand: Goals don’t specify particular actions, and goals can be achieved through multiple intentions.

For example:

Goal: Delete some text
Intention Option 1: Use the Edit menu
Intention Option 2: Use the Delete key
Each intention involves its own sequence of actions

This flexibility is actually what makes interface design challenging - we need to support multiple ways people might want to accomplish the same goal.

🌉 The Two Critical “Gulfs” That Make or Break User Experience

Norman identified two major problem areas where interfaces commonly fail users:

Gulf of Execution

The Problem: The user knows what they want to do, but the system doesn’t provide a way to do it (or makes it unclear how to do it).

Example: You want to adjust the volume on a device, but there’s no visible volume control or the control doesn’t work the way you expect.

Gulf of Evaluation

The Problem: The user performs an action, but the system doesn’t clearly communicate what happened or whether it worked.

Example: You click “submit” on a form, but nothing happens - no confirmation message, no loading indicator, no feedback at all.

Visual Reference (Slides 7-8):

The gulf diagram shows these as two large gaps on either side of Norman’s model. The Gulf of Execution sits between “Forming the intention” and “Executing the action,” while the Gulf of Evaluation sits between “Perceiving the state of the world” and “Evaluating the outcome.”

The Seven Critical Questions

To check whether your interface successfully bridges these gulfs, ask yourself:

For Gulf of Execution:

How easily can users determine the function of the device?
How easily can they tell what actions are possible?
How easily can they determine mapping from intention to physical movement?
How easily can they perform the action?

For Gulf of Evaluation:

How easily can they tell if the system is in the desired state?
How easily can they determine mapping from system state to interpretation?
How easily can they tell what state the system is in?

Our job as designers is to make all these questions easy to answer.

📋 Shneiderman’s 8 Golden Rules: Your Practical Design Toolkit

Ben Shneiderman gave us eight concrete, actionable rules that you can apply to almost any interface design. Think of these as your checklist for creating user-friendly systems.

1. Strive for Consistency 🔄

What it means: Similar situations should require similar actions, and you should use identical terminology throughout your interface.

Why it matters: Consistency reduces the mental load on users. Once they learn how something works in one part of your system, they can apply that knowledge everywhere else.

Visual Reference (Slides 14-15):

The slides show great examples of consistency in action:

Mac Applications: Notice how Keynote, OmniFocus, Safari, Transmit, and Logic Pro all use the same menu structure (File, Edit, View, etc.) and the same color-coding for similar functions
Microsoft Office Suite: Word, Excel, and PowerPoint share the same ribbon structure and visual design language

Pro tip: Create a style guide early in your design process and stick to it religiously.

2. Enable Frequent Users to Use Shortcuts ⚡

What it means: As people become more experienced with your system, give them ways to work faster and more efficiently.

Examples you see every day:

Keyboard shortcuts (Ctrl+C for copy)
Right-click context menus
Drag-and-drop functionality
Macro capabilities

Visual Reference (Slide 17):

The slide shows three levels of user interaction:

Level 1: Using the right-click context menu (beginners)
Level 2: Keyboard shortcuts like ⌘C / ⌘V (intermediate)
Level 3: Advanced workflows like automation tools (experts)

3. Offer Informative Feedback 💬

What it means: For every action a user takes, the system should respond in some way.

The feedback should be proportional:

Frequent, minor actions: Subtle feedback (like button hover effects)
Infrequent, major actions: More substantial feedback (like confirmation pages)

Visual Reference (Slide 19):

The slide shows visual feedback examples like progress indicators and system status changes that help users understand what’s happening.

Real-world examples:

Button changes color when you hover over it
Loading spinners during file uploads
Success messages after completing a purchase
Sound effects when you send a message

4. Design Dialog to Yield Closure ✅

What it means: Group related actions together with a clear beginning, middle, and end. Users should feel a sense of completion when they finish a task.

Why this matters: Closure gives users psychological satisfaction and confidence that they’ve completed their task successfully.

Visual Reference (Slide 22):

The slide shows a perfect example of closure in e-commerce:

Beginning: Cart page
Middle: Checkout process with clear steps (cart → checkout → receipt)
End: “Thank you for your order!” confirmation page

5. Offer Simple Error Handling 🛠️

What it means: When errors happen (and they will), your system should detect them and provide clear, actionable guidance for fixing them.

Visual Reference (Slides 23-24):

Good example: “Drive z: does not exist. Check the drive and try again.” (Clear problem, clear solution)
Bad example: Complex technical error codes that mean nothing to users

The two-part approach:

Prevent errors when possible (using constraints, validation)
When errors occur, make recovery easy

6. Permit Easy Reversal of Actions ↩️

What it means: Users should be able to undo their actions easily.

Why this is crucial: When people know they can undo something, they’re more willing to explore and learn your interface. Fear of making irreversible mistakes makes users hesitant and anxious.

Visual Reference (Slide 25):

The Dropbox example shows an “Undo” option appearing immediately after deleting a file, giving users confidence they can reverse the action if needed.

Common examples:

Undo/Redo in document editors
“Restore from Trash” functionality
“Are you sure?” confirmation dialogs for destructive actions

7. Support Internal Locus of Control 🎮

What it means: Users should feel like they’re in control of the system, not the other way around. They should initiate actions rather than just respond to the system.

Visual Reference (Slides 26-27):

The slide contrasts internal vs. external locus of control with thought bubbles: “I control my destiny” vs. “They control my destiny.”

Bad example: Forced Windows 10 updates that interrupted users’ work without permission (Slide 27-28 shows a real news story about this causing problems for wildlife researchers in Africa!)

Good examples:

Giving users choices about when to install updates
Allowing users to customize their workspace
Providing multiple ways to accomplish the same task

8. Reduce Short-Term Memory Load 🧠

What it means: Don’t make users remember information from one screen to use on another screen.

Design principles that help:

Chunking: Group related information together
Recognition over recall: Show users options to choose from rather than making them remember what to type
Keep displays simple and uncluttered
Consolidate multiple-page displays when possible

🎨 Norman’s 6 Design Principles: Making Interfaces Intuitive

While Shneiderman’s rules are more about interaction patterns, Norman’s principles focus on making individual interface elements clear and intuitive.

1. Visibility 👁️

What it means: Important functions should be visible and obvious. If users can’t see it, they can’t use it.

Visual Reference (Slide 30):

Microsoft Word ribbon: All the formatting tools are visible and organized by category
Hand dryer sensor: The sensor activation zone is clearly marked so users know where to place their hands

Design tip: If you have to hide functionality (due to space constraints), make sure there are clear visual cues about where to find it.

2. Feedback 📢

What it means: The system should constantly communicate with users about what’s happening, what’s been accomplished, and what’s possible.

Visual Reference (Slide 31):

Shows a feedback character with a megaphone, emphasizing that good feedback is like clear communication.

Types of feedback:

Visual: Color changes, animations, progress bars
Audio: Sounds, beeps, spoken confirmations
Haptic: Vibrations, tactile responses

3. Constraints 🚧

What it means: Limit the possible actions users can take to prevent errors and confusion.

Visual Reference (Slide 32):

Brilliant comparison of USB connector designs:

USB-A (old): Can be inserted upside down (bad constraint)
USB-C (new): Only fits one way (good constraint)

Types of constraints:

Physical: The shape only allows one correct action
Logical: Graying out unavailable options
Cultural: Using familiar conventions (like red for stop)

4. Mapping 🗺️

What it means: The relationship between controls and their effects should be obvious and intuitive.

Visual Reference (Slide 33):

Stove example: The control knobs are arranged to match the layout of the burners - if the burners are in a 2x2 grid, the controls should be too
Arrow keys: The physical arrangement matches the directional movement they control

Visual Reference (Slide 34):

Shows excellent examples of good mapping:

Arrow keys on keyboard: Physical layout matches the directions they control
Elevator buttons: Arranged vertically to match floor locations
Payment form: Fields are organized in a logical, top-to-bottom flow

5. Consistency 🔁

What it means: Similar operations should work the same way throughout the interface.

Visual Reference (Slide 35):

Shows three mobile app screens with consistent design elements:

Same color scheme and typography
Consistent button placement and styling
Similar navigation patterns across screens

Levels of consistency:

Internal consistency: Within your own product
External consistency: Following platform conventions (iOS vs. Android)
Industry consistency: Following established patterns users expect

6. Affordance 🔧

What it means: Objects should clearly suggest how they’re meant to be used.

Visual Reference (Slides 36-37):

Physical affordances: Door handles suggest pulling, buttons suggest pushing, shape-sorting toys show children exactly where each piece belongs
Virtual affordances: Buttons that look clickable, sliders that look draggable, links that are clearly distinguished from regular text

In digital interfaces:

Buttons should look pressable (with shadows, borders, or 3D effects)
Links should be visually distinct (color, underline, hover effects)
Interactive elements should change appearance when you hover over them

🎯 Techniques for Drawing User Attention

Sometimes you need to guide users’ attention to specific elements. Here are your main tools, ranked roughly from most to least intrusive:

1. Blinking/Flashing ⚡

Best for: Urgent notifications only
Avoid for: Long messages (hard to read while blinking)
Caution: Becomes annoying quickly if overused

Visual Reference (Slide 40):

Shows LED indicators on devices - different colors communicate different states (charging, fully charged, notification, low battery).

2. Bold Text 💪

Best for: Headings, important keywords, warnings
Easy on the eyes and doesn’t distract from reading flow

3. Underlining ___

Best for: Links (users expect underlined text to be clickable)
Use sparingly - can reduce readability if overused

4. Sound 🔊

Best for: Error alerts, notifications
Always provide a way to turn off - sound can be intrusive
Consider accessibility - some users may not hear audio cues

5. Color 🌈

Most versatile tool for organizing and highlighting information

Visual Reference (Slide 42):

Shows excellent examples of color coding:

Topographic map: Colors represent elevation (green for low, brown for high)
Weather map: Color scale shows temperature variations

Color is most effective for:

Highlighting differences between types of information
Grouping related information together
Coding simple messages (red = error, green = success)
Drawing attention to important elements
Indicating status or state

Color meanings that users expect:

Red: Stop, danger, error, hot
Yellow: Caution, warning, slow
Green: Go, success, safe, vegetation
Blue: Cold, water, calm, neutral, information

⚠️ Understanding and Preventing User Errors

Not all mistakes are created equal. Understanding the difference helps you design better solutions.

Slips vs. Mistakes: What’s the Difference?

Slips: User knows what they want to do and how to do it, but accidentally does something else.

Example: Clicking “Quit” when you meant to click “Save” (they’re next to each other)
Solution: Better interface design

Mistakes: User makes an incorrect decision based on wrong understanding.

Example: Using Microsoft Word to design a business card (wrong tool for the job)
Solution: Better user education and clearer system boundaries

Visual Reference (Slide 46):

Shows Norman’s 7-stage model with the question: “Slip and mistake happen in which stage of Norman Model?”

Answer:

Slips happen during execution (stages 3-4) - right intention, wrong action
Mistakes happen during planning (stages 1-2) - wrong intention from the start

Solutions for Slips:

Provide adequate separation between clickable elements
Minimize typing by offering menus and selections
Provide clear feedback so users immediately know if they did something wrong

Solutions for Mistakes:

Clearer system communication about what the tool does
Better onboarding and user education
Constraints that prevent inappropriate actions

💬 Designing Effective Error Messages

When errors do happen, your error messages can either help users recover quickly or make them want to throw their device out the window. According to Nielsen, good error messages are:

The 5 Essential Qualities:

1. Explicit - Clearly indicate that something went wrong

Visual Reference (Slide 47):

Bad: “Unknown error” (tells user nothing)
Good: “Drive z: does not exist. Check the drive and try again.” (specific and clear)

2. Human-Readable - Use plain language, not technical jargon

Visual Reference (Slide 48):

Shows a terrible error message full of technical codes that mean nothing to users. Instead of “Error 1402.Could not open key: UNKNOWN\Components\95993B6958792283A526B94B781CF2F9\A7870…” use language like “We couldn’t install this software. Please check that you have administrator permissions.”

3. Polite - Don’t blame users or make them feel stupid

Bad: “Invalid input. Try again.”
Good: “We need a few more details to complete your request.”

4. Precise - Describe the exact problem, not vague generalities

Bad: “Something went wrong.”
Good: “Your password must contain at least 8 characters.”

5. Constructive - Provide specific advice on how to fix the problem

Visual Reference (Slide 49):

Perfect example: “Can’t rename ‘Pictures’ because a file or folder with that name already exists. Specify a different name.”

✅ Tells you exactly what’s wrong
✅ Tells you exactly how to fix it
✅ Uses polite, clear language

🔄 Connections and Review

All of these principles work together to create interfaces that feel natural and helpful rather than frustrating and confusing. Here’s how they connect:

Norman’s 7-stage model gives us the foundational understanding of how people think when using systems. The gulfs of execution and evaluation show us where problems commonly occur.

Shneiderman’s 8 Golden Rules provide practical, actionable guidelines for addressing those common problems. They’re like a checklist you can use to evaluate any interface.

Norman’s 6 Design Principles zoom in on making individual elements clear and intuitive. They help you design components that immediately communicate their purpose and state.

Attention techniques and error handling are specialized tools for guiding users and helping them recover when things go wrong.

Remember: The goal isn’t to memorize these lists, but to internalize the thinking behind them. Great interface design comes from genuinely caring about the people using your systems and consistently applying human-centered design principles.

Every time you design or evaluate an interface, ask yourself: “Am I bridging the gulfs? Am I being consistent? Are my affordances clear? Will users feel in control?” These questions will guide you toward creating technology that truly serves human needs.

Note51

Explorer

0.0 by Claude