teaching_web_development

HCI principles and universal accessibility

Human-Computer Interaction (HCI) is a multidisciplinary field focused on the design and use of computer technology, particularly the interfaces between people (users) and computers. The goal of HCI is to create systems that are efficient, effective, and satisfying for users.

Key Principles of HCI

  1. User-Centered Design: Designing systems with the needs, preferences, and limitations of end-users in mind.

  2. Consistency: Ensuring that similar operations and elements behave in similar ways across the system to reduce the learning curve.

  3. Feedback: Providing users with clear and immediate feedback on their actions to help them understand the results of their interactions.

  4. Affordance: Designing elements in a way that suggests their functionality (e.g., buttons should look clickable).

  5. Error Prevention and Recovery: Designing systems to minimize the chances of user errors and providing easy ways to recover from them.

  6. Flexibility and Efficiency of Use: Allowing users to customize their interactions and providing shortcuts for experienced users.

  7. Aesthetic and Minimalist Design: Keeping interfaces clean and uncluttered to avoid overwhelming users with unnecessary information.

Universal Accessibility

Universal accessibility refers to the design of products, devices, services, or environments for people with disabilities. The goal is to ensure that everyone, regardless of their abilities or disabilities, can access and use technology effectively.

Principles of Universal Accessibility

  1. Perceivable: Information and user interface components must be presented in ways that users can perceive, regardless of their sensory abilities (e.g., providing text alternatives for images).

  2. Operable: User interface components and navigation must be operable by all users, including those with motor impairments (e.g., ensuring that all functionality is available from a keyboard).

  3. Understandable: Information and the operation of the user interface must be understandable to all users (e.g., using clear and simple language).

  4. Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies (e.g., ensuring compatibility with screen readers).

Best Practices for Universal Accessibility

UX design

Interaction Design

Wireframing and Prototyping

Information Architecture

Sitemaps and Navigation Design

Storyboarding

Design Patterns

Accessibility

The elements of user experience

Duality of Web as document and application

Human centered design

Design thinking

User experience design process

  1. Research: Understand the users, their needs, and the context of use through methods such as interviews, surveys, and observations.
  2. Define: Synthesize research findings to define user personas, scenarios, and requirements.
  3. Ideate: Generate a wide range of ideas and potential solutions through brainstorming and other creative techniques.
  4. Prototype: Create low-fidelity and high-fidelity prototypes to visualize and test design concepts.
  5. Test: Conduct usability testing with real users to gather feedback and identify areas for improvement.
  6. Implement: Work with developers to bring the design to life, ensuring that the final product meets user needs and design specifications.
  7. Evaluate: Continuously assess the user experience post-launch and make iterative improvements based on user feedback and analytics.

A diagram of the process can be found here.

Usability 101 by Jakob Nielsen

đź“ť See PDF here, page 15

Prototyping (A powerful tool for HCI)

Prototyping process

Wooden mockup

🎮🛠️ Activity (power of prototypes)

Usability studies

Dynabook prototype

đź“šđź“ť Software

Birth of HCI

Memex device

Participant observation

Video lecture on participant observation

Experience economy

Interviewing participants

_ Silence is golden. Listen to the users and give them time to reflect and respond.

Interview techniques

Creating design goals

Lecture by Scott Klemmer

Storyboarding

Video by Scott Klemmer on storyboards

comic

star

story

🎮 Exercise

In Python, we can simulate this “sketching” phase by having students create a Story Skeleton. Instead of rendering complex charts immediately, they define the “Panels” of their story using a data structure. This ensures the narrative holds up before they spend hours on formatting.

Here are three ways we could structure a Python-based storyboarding exercise:

  1. The Metadata Map 🗺️: Students write a Python script that defines a StoryFrame class. They must “instantiate” 4-5 frames of their story, specifying the Sequence, the Persona (the “Star Person” 👤 viewing the data), and the Key Takeaway.
  2. The Skeleton Plotter 🦴: Students use Matplotlib to create “Blank” plots. Instead of data, they use plt.text() to describe what the chart will show and where the annotations will go. This mimics the Paper Prototype 📝 approach.

  3. The Narrative Audit 📋: Students take an existing set of charts and write a Python “wrapper” or function that prints out the transition logic between them (e.g., “Because we see [X] in Frame 1, we must investigate [Y] in Frame 2”).

  4. The Metadata Map (Focus on planning and personas)
  5. The Skeleton Plotter (Focus on visual layout and placeholders)
  6. The Narrative Audit (Focus on flow and transitions)

A Narrative Audit focuses on the “connective tissue” between your data visualizations. In storyboarding, this ensures that the transition from one chart to the next feels like a logical progression rather than a random jump.

Think of it like a comic strip 🎞️: if Panel A shows a character at home and Panel B shows them on Mars, the reader needs a “transition” panel (the rocket ship 🚀) to understand how they got there. In data, this means explaining why a specific insight in Chart 1 leads us to investigate the metric in Chart 2.

Exercise: The “Logic Leap” Audit

In this exercise, students are given a Python script that generates three correct but disconnected charts. Their job is to perform an “audit” and write the narrative bridge that connects them.

1. The Setup (The Disconnected Code)

Provide students with this “broken” narrative. The charts are technically fine, but the story is missing.

import matplotlib.pyplot as plt
import seaborn as sns
import pandas as pd

# Sample Data: Website Traffic and Sales
data = pd.DataFrame({
    'Day': range(1, 8),
    'Visitors': [1000, 1100, 1050, 1200, 1500, 1600, 1550],
    'Bounce_Rate': [40, 42, 41, 39, 65, 68, 70],
    'Conversion_Rate': [5, 5, 4.8, 5.2, 2.1, 1.8, 1.5]
})

def plot_narrative_gap():
    # Chart 1: Traffic is growing
    plt.figure(figsize=(5, 3))
    sns.lineplot(data=data, x='Day', y='Visitors', marker='o')
    plt.title("Total Website Visitors")
    plt.show()

    # Chart 2: Bounce rate spiked
    plt.figure(figsize=(5, 3))
    sns.lineplot(data=data, x='Day', y='Bounce_Rate', color='red')
    plt.title("Bounce Rate Percentage")
    plt.show()

    # Chart 3: Conversion dropped
    plt.figure(figsize=(5, 3))
    sns.barplot(data=data, x='Day', y='Conversion_Rate')
    plt.title("Sales Conversion Rate")
    plt.show()

plot_narrative_gap()

2. The Student Task: The Transition Script

Students must create a Python dictionary called narrative_audit. For each transition, they must identify:

  1. The Observation: What did we just see?
  2. The Question: What does this make us wonder?
  3. The Transition: How does the next chart answer that question?

Example Structure for Students:

narrative_audit = {
    "Transition_1_to_2": {
        "Observation": "Traffic is hitting record highs in the second half of the week.",
        "The Question": "Is this high-volume traffic actually high-quality traffic?",
        "Bridge": "To find out, we need to look at the **Bounce Rate** to see if people are sticking around."
    },
    "Transition_2_to_3": {
        "Observation": "Bounce rates nearly doubled as traffic increased.",
        "The Question": "How did this inability to retain users impact our bottom line?",
        "Bridge": "We will now examine **Conversion Rates** to quantify the cost of this technical friction."
    }
}

3. Grading the “Flow”

Instead of checking if the code runs, you are checking for Causality.

How do you think your students would react to critiquing “broken” stories like this versus building their own from scratch? Would they find it easier to spot logic gaps in someone else’s work first?

A bad diagram (how not to communicate)

Complex diagram

AI prototyping tools

Wizard of Oz prototyping

Video prototyping

Creating alternatives

Discuss in a group. Draw your device on a piece of paper (hand out paper) or use Gemini

🤔❓ Is there a part of the world where just dropping an egg from a third floor window would not break it?

image

🎮 Exercise on Design Heuristics

Progress bar from the 90s

error

Affordances

Don Norman, the author of the seminal book The Design of Everyday Things. He is the one who took the term “affordance” from psychology and applied it to design.

image

1. What is an Affordance?

In the context of HCI, an affordance is a relationship between an object and a person. It is not a “property” of the object itself, but rather a description of the actions that are possible.

Perceived vs. Real Affordances

Don Norman eventually clarified that in screen-based interfaces, we are mostly dealing with perceived affordances. A button on a smartphone screen doesn’t actually “push” down physically; it’s a flat piece of glass. We use signifiers (like shadows or borders) to tell the user that the affordance of “clicking” exists.

2. The Sony Walkman: Affordance through Constraint

The story of the original Sony Walkman (TPS-L2, released in 1979) is a masterclass in intentional constraint.

At the time, tape recorders were common, but they were bulky and used primarily for business dictation or journalism. When Sony co-founder Akio Morita requested a portable stereo player, the engineers initially wanted to include a recording feature because “that’s what tape machines did.”

Morita famously insisted on removing the recording head and the record button. ### Why this worked for Affordances:

  1. Clarity of Purpose: By removing the ability to record, Sony narrowed the device’s “actionable possibilities.” The device now only afforded listening.
  2. Removing Cognitive Load: A “Record” button creates anxiety. “Am I recording over my favorite tape?” By removing the button, the user’s mental model was simplified: This is a device for consumption, not production.
  3. Social Affordance: The original Walkman even had two headphone jacks. This “afforded” shared listening, signaling that music was a social experience even when it was portable.

“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.” — Don Norman

3. Key Concepts

To help your class grasp how to use affordances in their own designs, you might want to highlight these three pillars:

Term Definition Example
Affordance What an object can do. A chair affords sitting; a link affords clicking.
Signifier The signal that tells you where to act. A blue underlined text (signifier) tells you the link is clickable (affordance).
Constraint Limiting actions to prevent error. Greying out a “Submit” button until the form is filled correctly.

4. Why it Matters Today

In an era of gesture-based interfaces (swiping, pinching) and Voice UIs, affordances are becoming “invisible.” Without physical buttons, designers have to work harder to provide signifiers—like a small bar at the bottom of an iPhone screen—to let users know that a “swipe up” affordance exists.

The Walkman lesson remains relevant: sometimes, the best way to improve a user’s experience isn’t by adding features, but by restricting actions to make the primary affordance crystal clear.

Reading Materials

This site is open source. Improve this page.