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

story

🎮 Exercise

Storyboarding for data visualization is like writing a script 📽️ before filming a movie. It helps us map out the Sequence—the logical flow of insights—so stakeholders don’t get lost between charts. It moves the focus from “how do I code this?” to “what am I trying to say?”

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

Reading Materials

This site is open source. Improve this page.