Usability & Design Principles for Digital Interfaces

Posted on Nov 29, 2024 in Other subjects

Heuristic Evaluation

Jakob Nielsen’s heuristic evaluation involves experts judging an interface’s compliance with usability principles.

Process

1. Recruit 3–5 usability experts.
2. Individual interface inspection.
3. Merge and prioritize findings.
4. Report key issues and fixes.

10 Usability Heuristics

1. Visibility of system status: Provide feedback (e.g., email “swoosh” sound).
2. Match between system and real world: Use familiar concepts (e.g., shopping cart).
3. User control and freedom: Offer undo/redo options.
4. Consistency and standards: Follow platform conventions (e.g., trash icon).
5. Error prevention: Design to avoid errors (e.g., password strength feedback).
6. Recognition rather than recall: Minimize memory load (e.g., dropdown menus).
7. Flexibility and efficiency of use: Allow accelerators (e.g., shortcuts).
8. Aesthetic and minimalist design: Keep interfaces clutter-free.
9. Help users recognize, diagnose, and recover from errors: Provide helpful messages (e.g., “Forgot password?”).
10. Help and documentation: Offer accessible resources (e.g., tooltips).

Severity Ratings

Pros

• Inexpensive and intuitive
• Effective in early design stages
• Can be used frequently

Cons

• Might miss deeper issues
• Can result in false positives
• Might discourage user testing

Design Thinking

A user-centered problem-solving approach involving understanding needs, ideating solutions, and prototyping.

Phases

1. Empathize: Research users (e.g., contextual inquiries).
2. Define: Identify key problems (e.g., affinity diagramming).
3. Ideate: Generate creative ideas (encourage wild ideas).
4. Prototype: Develop minimal solutions (low-fidelity prototypes).
5. Test: Evaluate prototypes and gather feedback.

Affinity Diagramming

Organize qualitative data by clustering similar insights.

1. Start with disorganized notes.
2. Group similar notes.
3. Identify common themes.

Ideation Techniques

• Defer judgment.
• Encourage wild ideas.
• Build on others’ ideas.
• Focus on one conversation.
• Go for quantity.

• Sketching and storyboarding: Visual tools for ideation.

Visual Design Principles

Elements

1. Space: Positive (subject) and negative (surrounding).
2. Line: Divides space and organizes content.
3. Shape: Outlined contours (organic or geometric).
4. Size: Relative extent of elements.
5. Pattern: Systematic repetition.
6. Texture: Tactile or visual quality.
7. Value: Intensity of expression.

Principles

1. Focal Point: Area drawing attention.
2. Contrast: Juxtaposition of differing elements.
3. Balance: Visual stability (symmetry or asymmetry).
4. Movement: Guides the eye.
5. Rhythm: Organized movement.
6. Perspective: Creates depth.
7. Unity: Consistency and coherence.

Typography

• Typefaces: Old Style, Modern, Slab Serif, Sans Serif, Script, Decorative.
• Font parameters: Style, weight, caps.
• Hierarchy: Guides attention.

Color Theory

• Primary, Secondary, Tertiary Colors: Color wheel basics.
• Color Palettes: Analogous, complementary, monochromatic.
• Color and Emotion: Evokes emotions (e.g., blue for trust).

Web Design Fundamentals

Desktop vs. Web Design

Desktop apps are dynamic and persistent; web pages are interconnected and navigated.

Key Concepts

• WIMP Paradigm: Windows, Icons, Menus, Pointers.
• Navigation Aids: Primary (menus) and secondary (sidebars).
• Pagination vs. Infinite Scroll: Content loading methods.

Layout Techniques

1. Golden Ratio: Aesthetic composition (1:1.618).
2. Rule of Thirds: 3×3 grid with focal intersections.
3. Grids: Organize content.
4. Negative Space: Visual breathing room.

Organizing Content

• The Fold: Visible area on load.
• Breadcrumbs: Retrace steps.
• Search: Direct content finding.

Interaction Design

Defines system behaviors engaging user perception, cognition, and movements.

Five Dimensions

1. 1D: Words: Language used.
2. 2D: Visual Representations: Images, typography, icons.
3. 3D: Physical Objects/Space: Interaction devices.
4. 4D: Time: Interaction over time (animations).
5. 5D: Behavior: System response to actions.

Interaction Paradigms

• Implementation-Centric Design: Maps interactions to functions.
• Metaphorical Design: Uses real-world metaphors.
• Idiomatic Design: Builds on learned methods.

Affordances

• Perceptible Affordances: Clear and intuitive.
• Hidden Affordances: Not immediately visible.
• False Affordances: Misleading interactions.

Navigation Principles

1. Wayfinding: Guides users (signage).
2. Cost: Reduces effort.
3. Navigation Aids: Menus, utility navigation, associative links.
4. Models: Hub-and-spoke, stepwise, pyramid.