Teaching CS as an Interface Design Problem

In the past years I have dedicated myself to two things at my job: teaching CS and doing research in HCI. It was only recently that I realized that these two things are actually more connected than I thought. I have been teaching CS1 for about 7 years now. Every semester, students who are struggling with programming come to me for help. The thing is, most of the time, they have little problem explaining the overall idea of the program they are trying to write (of course, I’m talking about very basic programming problems here). But I noticed that they usually have the wrong expectations about how the computer will interpret their code.

That’s actually one of the things I love about teaching CS1. I get to see the students’ faces when they get their first AHA moment in programming. It’s like they start to see a whole new world of possibilities. I see that dopamine rush after they finally make the code work. But I digress.

What hit me recently is that we can actually frame the problem of teaching a subject like CS as an interface design problem. Let me explain.

Mental models in HCI

A mental model in HCI is our internal representation of how a system works. We use mental models to predict the outcome of our actions. But the thing is, our mental models are not always correct. Actually they are almost always slightly wrong. When we interact with the system and it behaves differently than we expected, we update our mental model. So we iteratively refine our mental model of the system. The image below shows a diagram of mental models by Nielsen and Norman Group.

Teaching as correcting 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 used different forms of technology since they were born. They have a mental model of how a computer works. But user interfaces have also come a long way. They are more intuitive and hide a lot of the complexity of the system. So when students start programming, their mental model may be farther from the actual model of the computer compared to 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 job is to correct the students’ mental model so that they can predict the outcome of their actions more accurately. Traditionally, this is achieved with lectures. And, 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 using a system, we don’t usually read the manual first. We try to use it and see what happens. We learn by doing, and as we interact with the system, we improve our mental model. So why not apply this to teaching CS?

We could design the learning experience so that it corrects the students’ mental model iteratively. In CS1, the user/student’s action is writing code. The system is the computer. The feedback is the result of the program. Learning happens when they understand why the computer behaved differently than they expected.

A visualization problem

I think a lot of my struggling students may actually have a visualization problem. They write code, but as they execute it, they get an error with a long stack trace. They don’t know how to interpret it. It’s just a scary wall of text.

Running a debugger is often quite useful. In a way, it’s a way to visualize what’s really going on. So it is a visualization of the system’s real model. But debuggers are not always easy to use, especially for beginners.

I believe we need some kind of exploratory interface that helps students visualize what’s going on 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.