Post

HCI Overview Week 40 - Evaluating user interfaces 1 Analytical & CSSFrameworks

Posted Updated
By Wei Xiong
8 min read
HCI Overview Week 40 - Evaluating user interfaces 1 Analytical & CSSFrameworks

TRACK - A

1. Why Evaluate User Interfaces?

Evaluation of user interfaces is essential for several reasons:

  • Determine Success:
    • Assess Project Fulfillment: Ensures that the design meets the project’s requirements and promises.
    • Understand Project Completion: Helps identify when a project is complete based on achieved goals.
  • Integral Part of the Design Process:
    • Formative Evaluation: Conducted before or during the project to understand user needs and inform design choices.
    • Summative Evaluation: Conducted after the design cycle to assess system performance against specific criteria.
  • Professional Standards:
    • Avoid Costly Errors: Prevents significant financial or life-threatening mistakes by validating designs.
    • Early User Involvement: Increases adoption rates and creates better solutions by involving users early in the process.

2. What Are the Goals of Evaluating a User Interface?

The primary goals of evaluating a user interface include:

  • Ensure Usability and User Satisfaction:
    • Make sure the interface is easy to use and meets user expectations.
  • Identify and Address Potential Issues Early:
    • Detect problems during the design process to allow for timely fixes.
  • Improve Overall Design and User Experience:
    • Enhance the functionality and aesthetic aspects of the UI to provide a better experience.
  • Validate Design Decisions:
    • Confirm that the design choices made are effective and align with user needs.
  • Reduce Development Costs and Time:
    • Prevent expensive revisions by identifying issues early, thereby saving time and resources.

3. The Difference Between Formative and Summative Evaluation

Formative and summative evaluations serve different purposes in the design process:

  • Formative Evaluation:
    • Timing: Conducted before or during the design process.
    • Purpose: Aims to improve the software by identifying problems and informing design decisions.
    • Examples: Understanding user needs, preferences, and contexts.
  • Summative Evaluation:
    • Timing: Conducted after the system is built.
    • Purpose: Measures the system’s performance against predefined benchmarks or certifications.
    • Examples: Testing if the software meets accessibility standards.

4. The Difference Between Qualitative and Quantitative Methods for Evaluation

Note: While the provided materials extensively cover other evaluation distinctions, they do not specifically detail the differences between qualitative and quantitative evaluation methods. However, based on standard HCI practices:

  • Qualitative Methods:
    • Nature: Focus on understanding user behaviors, motivations, and experiences.
    • Techniques: Interviews, observations, and think-aloud studies.
    • Outcomes: Provide in-depth insights and rich descriptions.
  • Quantitative Methods:
    • Nature: Focus on measuring user interactions and performance.
    • Techniques: Surveys, usage statistics, and keystroke-level analysis.
    • Outcomes: Provide numerical data that can be statistically analyzed.

5. The Difference Between Analytical and Empirical Evaluation

Analytical and empirical evaluations differ in their approaches to assessing user interfaces:

  • Analytical Evaluation:
    • User Involvement: Does not involve users.
    • Basis: Relies on theoretical models, rules of thumb, principles, or heuristics.
    • Use Case: Useful for early detection of usability issues.
    • Examples: Heuristic Evaluation, Cognitive Walkthrough, Keystroke-Level Model.
  • Empirical Evaluation:
    • User Involvement: Involves users interacting with the system.
    • Basis: Based on observations, experiments, and user feedback.
    • Use Case: Provides insights into real-world use and user satisfaction.
    • Examples: Usability Testing, Think-Aloud Studies, Field Studies.

6. What’s a Heuristic Evaluation and How to Do It

Heuristic Evaluation is an analytical method used to assess the usability of a user interface by evaluating it against established usability principles (heuristics).

How to Conduct a Heuristic Evaluation:

  1. List Typical Operations:
    • Document the steps required to perform typical tasks within the interface.
  2. Focus on System Interactions:
    • Examine how users interact with the system during these operations.
  3. Apply Usability Heuristics:
    • Use established heuristics such as:
      • Visibility of System Status
      • Match Between System and Real World
      • User Control and Freedom
      • Consistency and Standards
  4. Identify Usability Issues:
    • Look for violations of these heuristics to find potential usability problems.

Pros and Cons:

  • Pros:
    • Cost-effective, quick, and easy to implement.
  • Cons:
    • Can be error-prone, not exhaustive, and lacks a user-centered perspective.

Specialized Heuristic Evaluation:

  • Involves expert participants who bring specialized knowledge, increasing the likelihood of identifying deep problems. It serves as a hybrid between empirical and analytical evaluations.

Example Exercise:

  • Task: Write down the steps to send an email using your favorite app.
  • Evaluation: Identify any violations of usability heuristics.
  • Findings: Most email apps had minor nuisances but no critical issues.

7. What’s a Cognitive Walkthrough and How to Do It

Cognitive Walkthrough is an analytical evaluation method that involves simulating how users think to identify usability issues related to learnability and ease of use.

How to Conduct a Cognitive Walkthrough:

  1. Define User Goals and Tasks:
    • Clearly outline what the user aims to achieve and the tasks required to do so.
  2. Step Through the Tasks:
    • Simulate the user’s interaction with the interface step-by-step.
  3. Ask Key Questions at Each Step:
    • Will the user try to achieve the right effect?
    • Will they notice that the correct action is available?
    • Will they associate the correct action with the effect?
    • If they perform the correct action, will they understand that the task is progressing?

Inputs Required:

  • User interface design
  • Task scenarios
  • Assumptions about users and usage contexts
  • Sequence of actions derived from task analysis

Effectiveness:

  • Can predict approximately 50% of learnability-related problems, especially for novice users.

Purpose:

  • To evaluate a system’s learnability and ensure that new users can effectively navigate and use the interface.

Example:

  • Evaluating a patient portal where users might be unsure which action to take due to ambiguous options.

8. What’s Keystroke-Level Analysis, and What Can It Be Used For?

Keystroke-Level Model (KLM) is an analytical method used to predict the time it takes for an experienced user to perform a task without errors.

Components of KLM:

  • Physical Actions: Keystrokes, mouse movements, and other input actions.
  • Mental Operations: Time spent thinking.
  • System Response Time: Delays caused by the system’s processing.

How to Conduct Keystroke-Level Analysis:

  1. Break Down Tasks into Primitive Operations:
    • Decompose the overall task into individual, basic actions.
  2. Assign Standard Times to Each Operation:
    • Use established time estimates for each primitive operation (e.g., pressing a key, moving a mouse).
  3. Sum the Times to Predict Total Task Time:
    • Add up the times for all operations to estimate the total time required to complete the task.

Use Cases:

  • Performance Prediction: Estimating how long expert users will take to perform specific tasks.
  • Design Evaluation: Identifying bottlenecks or inefficiencies in the interface.
  • Example: Calculating the time to perform a ‘Find and Replace’ operation in a text editor.

9. What’s a Think-Aloud Study, How Is It Done, and What Can It Be Used For?

Note: The provided materials do not explicitly cover Think-Aloud Studies. However, based on standard HCI practices, here is an overview:

Think-Aloud Study is an empirical evaluation method where users verbalize their thoughts while interacting with a user interface, providing insights into their cognitive processes.

How to Conduct a Think-Aloud Study:

  1. Recruit Participants:
    • Select users representative of the target audience.
  2. Define Tasks:
    • Assign specific tasks for users to perform using the interface.
  3. Encourage Verbalization:
    • Instruct users to speak their thoughts, feelings, and reasoning as they navigate the interface.
  4. Observe and Record:
    • Monitor user interactions and record verbalizations for analysis.
  5. Analyze Data:
    • Identify common issues, misunderstandings, and areas for improvement based on user feedback.

Use Cases:

  • Usability Testing: Understanding how users perceive and interact with the interface.
  • Identifying Cognitive Bottlenecks: Revealing where users may struggle or become confused.
  • Improving User Experience: Gaining insights to enhance design elements based on user thought processes.

TRACK - B

What is a CSS Framework, and what is it used for?

A CSS framework is a pre-prepared library that simplifies and streamlines the process of designing websites by providing pre-written, reusable CSS code. These frameworks often include:

  1. Grid Systems: Predefined layouts to manage responsiveness and alignment of content.
  2. Pre-styled Components: Buttons, modals, navigation bars, and forms.
  3. Utilities: Ready-to-use classes for margins, padding, colors, typography, and more.

Purpose:

  • Accelerate web development by reducing the need to write CSS from scratch.
  • Ensure consistent styling across a project.
  • Simplify responsive design with built-in support for multiple screen sizes.
  • Allow developers to focus more on functionality and less on design specifics.

Popular CSS frameworks include Bootstrap, Tailwind CSS, Bulma, and Foundation.

Pros and Cons of Using a CSS Framework

Pros:

  1. Faster Development:
    • Pre-designed components and utility classes reduce time spent on styling.
    • Built-in responsiveness saves effort in designing for different screen sizes.
  2. Consistent Design:
    • Enforces a uniform look and feel across the project, ensuring design consistency.
  3. Cross-Browser Compatibility:
    • Frameworks are tested extensively to work well across different browsers.
  4. Community Support:
    • Large user bases provide extensive documentation, tutorials, and support.
  5. Ease of Use for Beginners:
    • Developers with limited design expertise can produce professional-looking websites.

Cons:

  1. Bloat:
    • Frameworks often include many unused styles and features, increasing CSS file size and potentially slowing down page loads.
  2. Learning Curve:
    • Requires learning the framework’s syntax and class names, which may differ from standard CSS practices.
  3. Lack of Originality:
    • Sites may look generic or similar to others using the same framework, reducing uniqueness.
  4. Overhead for Customization:
    • Heavily modifying a framework to meet specific design requirements can be more time-consuming than writing custom CSS.
  5. Dependency:
    • Projects become reliant on the framework, which might create issues if the framework is deprecated or significantly updated.
Human Computer Interaction, Overview
This post is licensed under CC BY 4.0 by the author.