Golden Rules of Interface Design Quiz

Introduction to Human-Computer Interaction (IT110)

• Course: Introduction to Human-Computer Interaction (IT110)
• Semester: 1st Semester, AY 2024-2025
• Instructor: Mary Joy P. Canon
• Slides by: Luigi De Russis
• Focus: Design Theory, Principles, and Guidelines

Hall of Fame or Shame?

• Interactive survey assessing user experience.
• Scale: 0-10, measuring likelihood of recommendation.
• Visual representation of user feedback (emojis).

The Four Pillars of Design

• Framework for successful UI design.
• Pillars include user requirements, guidelines & process, interface software tools, expert reviews and testing, theoretical models and algorithms, controlled experiments, and ethnographic observation.

Goals

• Generating design solutions: utilizing guidelines, principles, and theories.
• Evaluating generated designs: employing expert reviews, heuristics, usability testing, and controlled experiments.

Generating Design Solutions

• Guidelines: Practical, low-level advice on good practices and hazards to avoid.
• Principles: Mid-level strategies and rules to evaluate and compare design alternatives.
• Theories: High-level, widely applicable frameworks for design and evaluation, aiding communication and teaching.

Design Theories

• Theoretical frameworks for foundational research.
• Classifications include:
  • Descriptive theories: focusing on UI elements, terminology, semantics, event sequences and relationships, guidelines, decisions, and predictive comparisons based on performance figures.
  • Explanatory theories: emphasizing user's mental model, task language, articulation, interface language, core system language and performance.

Abowd and Beale Model (Explanatory)

• Model illustrates user interaction stages:
  1. Goal formulation.
  2. Planning actions.
  3. Specifying action sequence.
  4. Performing actions.
  5. Perceiving.
  6. Interpreting.
  7. Comparing results with goals.
• Shows gulf of evaluation and gulf of execution.

Foley and van Dam Four-Level Approach (Descriptive)

• Four levels describing interactive systems for descriptive analysis.
• Levels include: conceptual, semantic, syntactic, and lexical.

Consistency Theories (Prescriptive)

• Consistency in nouns (objects) and verbs (actions) is key to reduce learning time and errors.
• Consistent colors, layouts, icons, fonts, and button sizes are critical.
• Minor inconsistencies can be strategically used to direct attention.

Design Principles

• Key aspects considered for designing user interfaces (UI) design.
• The "What" in UI design—not the "How."
• Fundamental principles more functional and effective than guidelines.

Interaction Styles

• Direct Manipulation: Present concepts visually, easily learned, retains information well, avoids errors, encourages exploration. (Strengths & Disadvantages noted for each).

• Menu Selection: Learning is short, reduces keystrokes, structures decision-making, accommodates error handling. (Strengths & Disadvantages noted for each).

• Form Fill-in: Simplifies data entry, requires modest training, useful assistance, permits form management tools.(Strengths & Disadvantages noted for each).

• Command Language: Highly flexible, useful for power users, promotes user initiative, accommodates custom macros.(Strengths & Disadvantages noted for each).

• Natural Language: Least learning burden, relieves syntax burden (Strengths & Disadvantages noted for each).

Norman's Principles from Action Models

• Good design principles:
  • Visibility: Action alternatives and current state are revealed.
  • Conceptual Model: A coherent, consistent system image, including intuitive relationships.
  • Mappings: Clear relationships between actions and results.
  • Feedback: Continuous feedback of progress, such as with a download bar.

The 8 Golden Rules of Interface Design

• Consistency: Similar situations lead to similar actions.
• Universal Usability: cater for diverse users.
• Informative Feedback: Immediate and relevant feedback.
• Dialog Closure: Clear signals of completion.
• Preventing Errors: Minimize possibility of wrong actions.
• Easy Reversal of Actions: Undo/Redo options vital for correcting mistakes.
• Control and Control over Tasks: Give users control.
• Reduce Memory Load: Minimize short-term memory demand.

Consistency - Action Items

• Maintain internal (within a single product family) and external (industry-standard) consistency.

Internal Consistency

• Microsoft Office applications (365 Suite).

Consistency with Mental Models

• Elevator buttons (consistent across multiple buildings).

Consistency of Interpretation

• Order timing (designing interface displays for current/future statuses).

Inconsistency for Drawing Attention

• Varying colors (e.g., in error areas) for attracting attention.

Prevent Errors - Action Items

• Prioritize major errors to be less frustrating.
• Use helpful constraints.
• Reduce memory burdens (use undo).
• Provide solutions for problems.

Error Prevention

• Examples of error prevention in login fields.
• Preventing accidental errors: clear error messages.

Permit Reversal of Actions – Action Items

• Support undo and redo, with a clear "cancel" choice.
• Avoid interfering with work processes.

Keep Users in Control – Action Items

• Focus interface content on essentials.
• Prevent unnecessary distractions.
• Prioritize necessary actions and features.
• Allow easy quit/cancel actions.

Offer Informative Feedback – Action Items

• Users should always be aware of current status.
• Convey results immediately.
• Present feedback relevant to the current task
• Use clear communication for confidence building.

Informative Feedback - Examples

• Example of good vs bad feedback.
• Displays the current status to the user (e.g., file downloading, login).

Design Dialogs to Yield Closure – Action Items

• Simplify language
• Apply user research for familiarity with terms and technology
• Supply users with clear options for next steps.

Dialogue

• The "Copying files…" progress bar during installations.

Prevent errors

• Avoid possible errors, disable unusable buttons, prevent illegal character entry.

Guidelines for Augmented Reality

• The user should be able to use the entire display to display the surroundings and the application's virtual objects.
• Realistic 3D assets to visually enhance the reality of interactions
• Minimizing visual text, showing only necessary information for interactions.

Design Principles by Benyon (1)

• Learnability: Helping others learn the system.
• Visibility: Making elements and options evident in the app.
• Consistency: Consistency in use of terms, objects, and actions.
• Familiarity: Use familiar terminology and objects for users.
• Affordance: Allow actions to be clear from the object appearance (e.g., buttons to be pushed).

Design Principles by Benyon (II)

• Effectiveness: Making the task easily understood and manageable.
• Navigation: Using maps, directional signs to assist users within the GUI environment.
• Control: Provide clear control for interactions; ensuring clear mappings and actions.
• Feedback: Ensuring feedback and feedback mechanisms are present.

Design Principles by Benyon (III)

• Safety and Security: Provide recovery and constraints to limit errors.
• Accommodation: Provide flexibility to accommodate users needs.
• Flexibility: Providing a user experience suitable to the user.
• Style: Visually appealing to users, creating a comfortable interaction design.
• Conviviality: Ensuring the system is friendly and welcoming to the users.

Norman's Seven Principles

• Use both knowledge to aid the user experience (world and head).
• Task structuring.
• Making tasks or things visible.
• Correct Mapping of objects to actions in the app or software.
• Exploiting constraints (natural and artificial).
• Design for errors that can be easily fixed.
• Standardizing to provide consistent experiences.

First Principles of Interaction Design

• Aesthetics, anticipation, autonomy, color, consistency, defaults, discoverability, efficiency, explorable interfaces, Fits's law, human interface objects, latency reduction, learnability, metaphors, protect user's work, readability, simplicity, state track-it, visible interfaces are considered essential in the creation of a user interface.

Design Guidelines Shared Language

• Shared language for terminology usage, appearance, and action sequences for consistency.

Design Guidelines Concrete Suggestions

• Concrete suggestions on implementing the principles for best practice
• Often rule-based and based on best practices

Design Guidelines Encapsulating Experience of Expert Designers

• Experienced designers' shared knowledge embedded in guidelines.

Web Style Guide

• Provides detailed guidelines for typography, images, layouts, etc.

Web Content Accessibility Guidelines (WCAG)

• International standard for web accessibility.

U.S. Government Mobile User Experience Guidelines

• Providing mobile user experience.

U.K. Government Design System

• Design system for consistency across GOV.UK services

Italian Government Guidelines and Design System

• Guidelines for Italian government websites and design.

Apple HIG (Human Interface Guidelines)

• Apple's guidelines for designing user interface for all Apple product platforms

Microsoft «Fluent» Design System

• Design system for simplicity and coherence across Microsoft platforms.

Google Material Design

• Open-source design system for designing and building attractive, usable products.

Guidelines for Human-Al Interaction

• Guidelines for designing systems for Human-Al interaction; examples presented.

Guidelines for Augmented Reality

• Creating a comfortable and engaging user experience with specific tips on using the entire display, convincing illusions, auditory and haptic feedback, and minimal text

References and Acknowledgments/Project Credits

• Citations for concepts used and credits for contributing to the project.
• Supporting documents to acknowledge all contributions.

Activity 1-Application of Guidelines in HCI

• Applying HCI principles to specific tasks.

Activity 2 -Design Guidelines for Chosen Solution

• Using design guidelines to guide solution implementation.