Teaching CS as an Interface Design Problem

Over the past several years, I’ve focused on two things at my job: teaching computer science (CS) and conducting research in human-computer interaction (HCI). Recently, I realized how closely these two are connected. I’ve been teaching CS1 for about 7 years now, and I’ve noticed something interesting. When students struggle with programming, they often can’t predict how the computer will interpret their code. They understand the program’s logic but have the wrong expectations about the system’s response.

This is one of my favorite aspects of teaching CS1 -— watching students experience their first “Aha!” moment when their code finally works. But it also got me thinking: What if we approached teaching CS as an interface design problem?

Mental models in HCI

A mental model in HCI is how we internally represent a system and predict its behavior. However, these models are often inaccurate, and we refine them as we interact with the system. As Nielsen and Norman Group illustrate, this iterative process of refining our mental models is key to effective interaction -— not just with computational systems, but with any system.

Teaching as Refining Mental Models

Students come with their own mental models. In the case of CS, they have a way of understanding how the computer works. Nowadays, most students have grown up using various forms of technology. As a result, they develop a mental model of how computers work. However user interfaces have evolved significantly. They are more intuitive and hide a lot of the complexity of the system. As a result, when students start programming, their mental model may be even further from how computers actually work than that of older generations, who had to deal with interfaces that were closer to the actual model of the computer (e.g. command line interfaces).

The instructor also has a (hopefully better) mental model of how the computer works. Their role is to help students refine their mental models so they can better predict the outcome of their actions. Traditionally, this is achieved with lectures. Don’t get me wrong — good lectures are great. But I think we can take a different approach.

Teaching CS as an interface design problem

What if we reinterpret teaching as an interface design problem? When we use a new system, we don’t usually start by reading the manual. Instead, we experiment with it and observe what happens. We learn by doing, and as we interact with the system, we improve our mental model. So why not apply this approach to teaching CS?

We could design the learning experience to iteratively refine students’ mental models. In CS1, the user/student’s action is writing code. The system is the computer. The feedback comes from the program’s output. Learning happens when they understand why the computer behaved differently than they expected.

A visualization problem

I believe many of my struggling students actually face a visualization problem. They write code, but when they execute it, they often encounter an error with a long stack trace. They don’t know how to interpret it. It becomes an intimidating wall of text.

Using a debugger can be very helpful. In a sense, it visualizes what’s really happening. So it is a visualization of the system’s real model. However, debuggers are not always beginner-friendly.

I believe we need an exploratory interface to help students visualize what’s happening in their code. I still don’t know what this would look like, but I think reframing teaching as an interface design problem may be a good start.