UI Design: Key Concepts and Methods
Here’s a concise cheat sheet summarizing the key definitions and concepts from your notes:
Direct Manipulation and Invisible Interfaces
Direct Manipulation
– The user interacts directly with the task, reducing the interface’s role as an intermediary.
– Key principle: The user should feel like they are controlling the object, not the interface.
– Reduces the gulf of execution & evaluation, making interactions more intuitive.
– Examples: Dragging files with a mouse vs. typing commands; touchscreen gestures.
– Distance Types:
– Semantic Distance: How hard it is to know what to do.
– Articulatory Distance: How hard it is to execute an action.
Invisible Interfaces
– Interfaces that “disappear” between the user and the task.
– Users focus on the task, not the interface itself.
– Design Tips:
– Use affordances (e.g., buttons should look pressable).
– Adapt to user expertise (novices need clarity, experts need efficiency).
– Let the interface teach (e.g., showing keyboard shortcuts in menus).
– Gather feedback to minimize user focus on the interface.
Human Abilities
Three Main Human Abilities
1. Perception (input) – How users sense and interpret stimuli.
2. Cognition (processing) – How users think, remember, and decide.
3. Action (output) – How users physically interact with the system.
Perception in UI Design
– Vision: Focus on central view, avoid relying solely on color.
– Hearing: Use sound sparingly for alerts, as it’s not directional.
– Touch: Haptic feedback helps provide physical response.
Cognition and Memory in UI Design
– Memory Types:
– Perceptual Store (less than a second).
– Short-Term Memory (4–5 chunks).
– Long-Term Memory (requires repetition to retain).
– Design Implications:
– Recognition over recall (e.g., showing options vs. asking users to remember them).
– Chunking information improves recall.
– Reduce cognitive load with clear layouts and minimal distractions.
Motor System & Interaction Design
– Speed & Precision: Design for users’ physical capabilities.
– Consistency: Align with familiar interactions to reduce learning effort.
– Mapping: Ensure intuitive relationships between controls and actions.
– Error Tolerance: Allow users to correct mistakes easily.
Design Alternatives
Importance of Exploring Multiple Designs
– Biggest Mistakes:
1. Designing without understanding users or tasks.
2. Settling on a single idea too early.
– Exploring alternatives helps better define the problem and improve the final design.
– The design process is iterative: brainstorming, combining, revising, and improving ideas.
Brainstorming Methods
Individual Brainstorming
– Start alone to encourage divergent thinking.
– Generate at least 20 ideas across different categories (e.g., interaction types, interfaces, audiences).
– Tips:
– Keep the core problem visible to stay focused.
– Use constraints to spark creativity (e.g., expensive or impossible ideas).
– Take breaks to allow fresh ideas to emerge.
– Divide large problems into smaller ones.
Group Brainstorming
– Should follow individual brainstorming to avoid early idea convergence.
– Challenges:
– Social loafing: Less effort in groups.
– Conformity: Agreement on popular ideas.
– Production blocking: Some voices dominate.
– Performance matching: Energy levels align with the group.
– Power dynamics: Senior members may overshadow others.
– Osborn’s Rules for Effective Group Brainstorming:
– Expressiveness: Share any idea, no matter how odd.
– Non-evaluation: No criticism during brainstorming.
– Quantity: Generate as many ideas as possible.
– Building: Build on others’ ideas.
Exploring Design Alternatives
– Use personas: Define different types of users and their needs.
– Timelines (Journey Maps): Map out user experiences over time.
– Scenarios & Storyboards: Outline specific interactions visually.
– User Models (GOMS): Compare alternatives based on cognitive effort.
Prototyping
Role in the Design Lifecycle
– Goal: Create testable versions of ideas for user feedback.
– Types:
– Early prototyping: Quick sketches, paper prototypes.
– Late prototyping: Refined designs for usability testing.
Prototype Fidelity Spectrum
– Low-Fidelity (LF):
– Quick, easy to modify (e.g., sketches, paper prototypes).
– Good for testing basic functionality and workflow.
– High-Fidelity (HF):
– More detailed and closer to final product (e.g., wireframes, interactive prototypes).
– Useful for testing performance and aesthetics.
Types of Prototypes
– Verbal: Describing the design concept.
– Paper: Hand-drawn UI mockups.
– Wizard of Oz: Simulated interactions controlled by a human.
– Wireframing: Digital low-fidelity UI layouts.
– Physical: 3D models for tangible interactions.
Prototyping Best Practices
– Keep it easy to change: Enables rapid iterations.
– Make it clear it’s a prototype: Avoid superficial feedback.
– Prototype for feedback: Focus on core design aspects.
– Evaluate risks early: Reduce wasted effort on bad designs.
Prototype Evaluation
– LF: Best for assessing broad functionality and usability.
– HF: Best for measuring detailed performance and user behavior.
Prototype Scope
– Vertical Prototypes: Deep detail on a small feature.
– Horizontal Prototypes: Broad but shallow coverage of the entire system.
Iterative Design Process
1. Needfinding → 2. Brainstorming → 3. Prototyping → 4. User Testing → Repeat & Refine