CS147 Introduction to Human-Computer Interaction (Fall 2012)

Scott Klemmer

We used Coursera to host the CS147 site. That site can be found here.


Term: Fall 2012
Lecture: Monday, 2:15 pm - 3:45 pm
Lab: Wednesday, 2:15 pm - 3:45 pm
Studio: Fridays 8:30-9:45, 9:30-10:45, 11-12:15p, and 2.15-3:30p


In this course, you will learn how to design technologies that bring people joy, rather than frustration. You'll learn several techniques for rapidly prototyping and evaluating multiple interface alternatives — and why rapid prototyping and comparative evaluation are essential to excellent interaction design. You'll learn how to conduct fieldwork with people to help you get design ideas. How to make paper prototypes and low-fidelity mock-ups that are interactive -- and how to use these designs to get feedback from other stakeholders like your teammates, clients, and users. You'll learn principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn principles of perception and cognition that inform effective interaction design. And you'll learn how to perform and analyze controlled experiments online. In many cases, we'll use Web design as the anchoring domain. A lot of the examples will come from the Web, and we'll talk just a bit about Web technologies in particular. When we do so, it will be to support the main goal of this course, which is helping you build human-centered design skills, so that you have the principles and methods to create excellent interfaces with any technology.

Through a series of weekly assignments, you will complete a quarter-long project in teams of three. Each week, in small design studios, you present and discuss work with peers. The setting for the course is mobile web applications. The constraints of this small form factor make this an exciting challenge.


CS106B or equivalent programming experience is a prerequisite for this course. The prerequisite exists because all students will need some fluency in building interactive systems to complete the project. Every student must make a significant contribution to their team's implementation; students who are unable to do so should not take the class. That said, some may do more of the programming work, and others more of the user testing work. Project teams will benefit from being multidisciplinary. Students with less programming experience (and e.g., more design experience) should consider partnering with students who with complementary strengths. Additionally, we presume that all students will have access to a digital camera for use in assignments.

Teaching Assistants

There are 11 Teaching Assistants for the fall offering of CS147 and its smaller equivalent, CS77. Office hours are now posted on the sidebar.


Week Monday Wednesday Assignment
1 September 24
Course introduction [slides]
September 26

Revision control, HTML(5) + CSS(3)

Slides and code examples
Assignment 0: Waiting in Line
Due Thursday, 9/27/2012, 11:59 pm PDT
2 October 1
Lecture: Needfinding
  • 2.1 Participant Observation
  • 2.2 Interviewing
  • 2.3 Additional Needfinding
October 3


Slides and code examples
Assignment 1: Needfinding
Due Thursday, 10/4/2012, 11:59 pm PDT
3 October 8
Lecture: Rapid Prototyping
  • 3.1 Paper Prototyping and Mockups
  • 3.2 Wizard of Oz
  • 3.3 Video Prototyping
  • 3.4 Creating and Comparing Alternatives
October 10


Slides and code examples

Quiz 1

Assignment 2: Prototyping
Due Thursday, 10/11/2012, 11:59 pm PDT
4 October 15
Lecture: Heuristic Evaluation [slides]
  • 4.1 Heuristic Evaluation — Why and How?
  • 4.2 Design Heuristics (Part 1/2)
  • 4.3 Design Heuristics (Part 2/2)
October 17

PHP continuation, AJAX

Slides and code examples

Assignment 3: Heuristic Evaluation
Due Thursday, 10/18/2012, 11:59 pm PDT
5 October 22
Lecture: Mental Models and Distributing Cognition [slides]
  • 5.1 Mental Models
  • 5.2 Representations Matters
  • 5.3 Distributing Cognition
October 24

jQuery Mobile

Slides and activity sheet

Assignment 4: Skeleton and a Plan
Due Thursday, 10/25/2012, 11:59 pm PDT
6 October 29
Lecture: Visual Design and Information Design [slides]
  • 6.1 Visual Design (Part 1)
  • 6.2 Visual Design (Part 2)
  • 6.3 Information Design (Part 1)
  • 6.4 Information Design (Part 2)
Quiz 2
October 31


Slides and activity sheet

Assignment 5: Meat on the Bones
Due Thursday, 11/1/2012, 11:59 pm PDT
7 November 5 [slides]
Lecture: Designing experiments
  • 7.1 Designing Studies That You Can Learn From
  • 7.2 In-Person Experiments
  • 7.3 Comparing Rates
November 7

Smorgasbord edition

Slides and activity sheet

Assignment 6: Ready for Testing
Due Thursday, 11/8/2012, 11:59 pm PDT
8 November 12 [slides]
November 14

Smorgasbord edition II

Slides and activity sheet

Assignment 7: User Test Results and Online Test Proposal
Due Thursday, 11/15/2012, 11:59 pm PDT
9 November 26 [Slides]
Quiz 3
November 28

Video lecture

Assignment 8: Results!
Due Thursday, 11/29/2012, 11:59 pm PDT
10 December 3
December 5
Assignment 9: Final Presentation
Due Thursday, 12/6/2012, 11:59 pm PDT

Final Presentations
Friday, 12/07/2012, 4-6 pm

About Scott Klemmer

Scott Klemmer is an Associate Professor of Computer Science at Stanford University. He co-directs the Human-Computer Interaction Group and holds the Bredt Faculty Scholar development chair. Organizations around the world use his lab's open-source design tools and curricula; several books and popular press articles have covered his research and teaching. He has been awarded the Katayanagi Emerging Leadership Prize, Sloan Fellowship, NSF CAREER award, Microsoft Research New Faculty Fellowship, and several best paper awards at the premier HCI conferences (CHI and UIST). His former PhD students are leaders at top universities, research organizations, in Silicon Valley, and social entrepeneurship. He has a dual BA in Art-Semiotics and Computer Science from Brown University, Graphic Design work at RISD, and an MS and PhD in Computer Science from UC Berkeley. He is the program co-chair of UIST 2011.

Office Hours: Wednesdays, 3:45‑5:30pm at Gates 384

Lab Curriculum

This is the lab curriculum for CS147. This class will be taught on Wednesdays from 2:15pm to 3:45pm. Since time is extremely limited -- we're basically covering CS142 sans Rails -- I will start exactly on time. Please bring a laptop and be ready to participate. The format will be fast-paced but will also involve student participation. By the end of the course, I'm hoping that you will be confident enough to pick up any web-app project and with the help of some scaffolding, make a decent app or site.

If you know already most of the material in this class, we'll be asking you to help other students by acting as helpers during the class. We'll be contacting you directly based on your responses to the survey. We want to make lab exciting and relevant for everyone, including those who might already have the technical skills to do well.

If you have any questions, please add them to the forum. We fully expect that if you're not sure about something, there's someone else who will have the same questions, and it's more fair when everyone gets the same response.

To do before Wednesday, September 26:

Sign up for web space

Set up a GitHub account


Revision control, HTML(5) + CSS(3)

Slides (PDF) and code examples

We'll be using GitHub and LiveWeave online live editing of HTML and CSS

More resources

Download XCode and the iPhone simulator, if you're on a Mac.

Color palettes for hexadecimal colors


Slides (PDF) and code examples



Slides (PDF) and code examples


Fetch Serial Number

Serial Number Name: Stanford University
Serial Number: FETCH55001-UX8A-F6JH-DTVW-6GQG-F9P8

I've switched things around a little bit because databases are pretty crucial to storing user data in an app.


PHP continuation, AJAX

Slides (PDF) and code examples


jQuery Mobile

Slides (PDF) and activity sheet



Slides (PDF) and activity sheet


Smorgasbord edition

Slides and activity sheet

This lab covered jQuery UI Touch Punch, storing and accessing mobile sessions, mobile grids, and a start to A/B testing


Slides and activity sheet

This lab covered redirecting users to mobile editions of pages as well as creating helpful overlays as introductions to your application.





This lab covered the basics for making a video for your project.


Open topic/group hack sessions


CS147 GitHub page

SFTP for Mac: Fetch or WinSCP for Windows

Smultron, a good free text editor for Mac.

Notepad++, a good free text editor for Windows.

Grading, Logistics, and FAQ

Course Deliverables & Submitting work

You'll have a weekly design project, submitted online by Thursday 11.59pm and shared in studio on Friday. Your project work culminates in a presentation and poster on December 7th in front of invited design jurors. Your team will share its quarter-long design project.

You will use Coursera to submit your work. Your assignments will be submitted online as a body of plain text and a series of digital photograph attachments. Do not spend time "beautifying" your submission. Submit early! Late assignments will not be accepted! There are three reasons that assignments need to be submitted on time. First, to be able to provide you with rapid feedback about your work, the teaching staff meets on friday afternoon to grade. Second, you'll present your work in studio every week, and you need to be prepared for that. Third, after the submission deadline, students can view each others' assignments, so that you can learn from each other. We encourage you to see what your peers are up to.

There are rubrics beneath each assignment that explain how you and the staff will grade your submission. Different columns represent different scores.


The course grade is out of 500 points, comprising:

  • Ten weekly assignments (30 to 50 points each) total 375 points.
  • Three in-class quizzes total 50 points.
  • Completing your self-assessments in studio yields 15 points.
  • Class / studio participation is worth 40 points.
    • For Monday/Wednesday lectures, you are allowed to miss 3 days for free (you won't lose participation points for these days).
    • You are allowed one excused absence as long as you notify your TA at least 24 hours in advance. Missing one studio beyond that one excused absence means you can only earn at most 32 points in this category. Missing two means that you only earn at most 20 points. Missing three means you can earn at most 0.
  • The individual team assessment is worth 10 points.
  • Having close (within 5%) self-assigned and staff-assigned grades is worth 10 points (1 point per assignment).

Credit/No credit: CS147 students will receive a letter grade—the "credit/no credit" option is not available. (CS77 is graded S/NC.)

Grade Cutoffs for 2012

  • A: 470
  • A- : 450
  • B+:435
  • B: 415
  • B-:400
  • C+:385
  • C: 365
  • C-:350

Regrade policy

It is very important to us that all assignments are properly graded. The teaching staff works extremely hard to grade fairly and to turn around assignments quickly. We know what you work hard, and we respect that. Occasionally, mistakes happen, and it's important to us to correct them. If you believe there is an error in your assignment or exam grading, please submit an explanation in writing to your studio TA within 7 days of receiving the grade. We will regrade the entire assignment to insure quality. No regrade requests will be accepted orally, and no regrade requests will be accepted more than 7 days after receipt of the assignment. Regrade requests must be respectful; we will not consider any regrade requests containing disrespectful language.

Self & Team Assessment

Every week in studio you will submit a self-assessment of your work for that week's assignment. You will receive the max of your grade and the TA's grade if the two grades are within 5% of each other, otherwise you will receive the TA's grade. Submitting a self-assessment is a prerequisite for receiving a grade. (Even if you miss studio, you are still responsible for submitting a self-assessment.) For team projects, you'll submit a self-assessment as a team and then individually assess your own and teammates performance. In general, everyone on the team will earn the same grade. However, if a majority of the team reports that an individual was more/less successful in achieving their goals, that individual's grade will be adjusted accordingly.

Why this approach? Being able to successfully assess your own performance in comparison to a given criterion is a skill that you will draw benefit from, both as a student and in your professional career. This is not always an easy task and we hope that this exercise will help you improve your self-assessment skills and get you start thinking about how to evaluate your own work using the yardstick of the setting.

Attendance & On-time work policy

Design is a contact sport, and studio is where the action is. Sharing your work and discussing designs with others is an important part of your design education. Therefore, attendance of all studios is mandatory. To receive credit for attendance, you must arrive on time. You are allowed one excused absence for the quarter without penalty; thereafter you will receive zero credit for the missed studio. To receive an excused absence, you must ask your studio leader in advance, and receive an acknowledgment from the studio leader.

Late policy: If you are more than 5 minutes late (or leave early), you will be marked as absent. Because of the number of group activities that we do in studio, it's important that everyone comes on time.

  • Excusable absences include family emergencies, job interviews, and presenting at a conference. It does not include wanting to leave early for long weekend or vacation. Wanting to leave early for Thanksgiving (or return late) does not count as an excuse. A few years ago, Stanford lengthened Thanksgiving to a full week to provide more time for students to go home. The student half of the deal is to be present and engaged for the entire week before and after Thanksgiving.
  • Attending another class during lecture or studio is not an excusable absence.
  • Varsity athletes who would like to miss more than one studio to participate in athletic competitions must make any request before the study list deadline (the first day of class). No exceptions will be granted after the study list deadline.
  • No late assignments will be accepted, but you may submit them early. If there is a problem with the website that makes it so you cannot submit your assignment, you must email your TA by 1am or else it’s a 0. You can only do this once.
  • The participation grade comprises both lecture and studio participation.

Frequently asked questions

What's the amount of time involved in the class?

There's a healthy amount of work involved. As with any design experience, you get out what you put in. Great projects explore broadly and dive deep, and needfinding, design, implementation and evaluation take time to do well. A decent project usually takes 5-10 hours of out-of-classroom collaboration time throughout the quarter - just remember not to leave things to the last minute!

What's the distribution of engineering, designing thinking and psychology ?

There's a healthy balance of all three. Mondays will be lectures and principles (or sometimes activities) which supplement the videos. Wednesday is purely engineering. Friday is the time you'll have to share and give feedback on your progress.

The class teaches PHP & Javascript. Can our group use other technologies, like Ruby or a native app?

We recommend against it. Most group problems arise when one person strongarms their teammates into using another technology. Late in the quarter, it turns out that only one person can really do the work, and that causes all the problems you can imagine. If you use PHP & Javascript, lab will teach you key techniques and the TA's will help you if you get stuck. With other technologies, you're off-piste: we can't save you, and it can get awfully cold when the sun goes down. With that information, the choice is yours.

If I'm familiar with the course materials, should I still attend lab?

Yes. We'll be asking you to pitch in and help other students during the lab.

Do I have to go to studios?

Yes. Attendance to studios is mandatory.

Can I have an extension? I have a lot of work in other classes, I'll be out of town, I'm generally overwhelmed...

No. It's not because wer're callous -- we've all been in your shoes. Two reasons: 1) because sharing work in studio is integral to the class, there's no practical way to offer extensions. 2) Psychology teaches us that people consistently believe they'll have more time in the future than in the present -- and that it's a fallacy. When you pick classes for the quarter, make sure not to overcommit. In our experience, you'll learn more and have a better resume by doing a great job in a smaller of classes, rather than trying to take as many units as humanly possible and doing a mediocre job with all of it.

Are there any midterms or finals?

Nope! (There are 3 in-class quizzes. The quizzes are closed-note, so you may not use any outside resources.)

Are there any readings?

Nope. (There are assigned videos that you'll watch to prepare for class and project work.)

What is the 'out of the box' column in the rubric?

Design can excel in many ways, and often the best designs are unanticipated. To acknowledge and encourage this, each assignment offers a few points for this truly out-of-the-box work. Great design is also rare. So these points can only be achieved by at most 5% of submissions. If it helps, you can think of this as kind of like an A+.

When do we form groups?

You will form groups in the studio on the second Friday of the quarter. You can form and sign up for studios as a group but they have to be groups of 3. We'll be encouraging everyone to form groups as soon as possible so that you can pool resources. In the second studio, during team formation make sure to ask your potential teammates 2 questions. 1) When are you available to meet? 2) What level of performance to you intend to achieve? This will help you find like-minded teammates.

One or more of my teammates aren't pulling their weight...

In classes as in life, some team problems are inevitable. As soon as you encounter subpar performance by a teammate: talk to them and accurately record their performance in your team assessment. There are many benefits to speaking up early. First, you've made your expectations clear so your teammate can adjust their performance. Second, it's on record in case things get worse later. Past performance is the best predictor of future performance, and transparency is the best management tool. If you speak up early, we can help. If you wait until late in the quarter to speak up, you share responsibility for the problem -- and there's little we can do.

...Can I fire them or quit?

If you have a serious problem with your teammate(s), email them with your concerns, cc'ing Scott, and requesting that the team attend office hours to discuss the issue. If this discussion doesn't ameliorate the issue, you may notify your teammate(s) via email (cc'ding Scott) of your intention to quit/fire them unless performance improves. Finally, if performance doesn't improve, you may email your teammate(s) (cc'ing Scott) with your resignation/firing. A teammate who quits or is fired is responsible for future assignments on their own. This short essay by Oakley et al. provides great advice on diagnosing 'hitchhikers' and dealing with them effectively.

I was signed up for 77 but I want to do the programming too for 147. Can I switch?

Definitely! The Wednesday labs will introduce (mobile) Web application programming, so if you feel up for the challenge (and have at least a cs106b-level programming background), join us in the lab!

I was thinking of designing for tablets - is this okay?

It's fine as long as you can make a compelling case that your application benefits from being on a tablet and that those benefits don't extend necessarily to a desktop app or browser.

Do the video quizzes count for my grade?

The video quizzes will not count towards your grade -- they are there to help you think about the material as you watch the lectures.

I would like to take another class that overlaps this class. What should I know?

Class attendance is required because the in-class material and exercises connect the principles taught through videos to the design project work. Often, you'll submit work in class that will count toward your participation grade. Arriving late or leaving early may prevent you from doing so. Because of the large number of students enrolled, these exercises must be done during class -- we don't have the resources to make individual exceptions. However, we understand that life happens -- you might have a family event, job interview, attend a conference, or get sick. Consequently, cs147 students may miss 3 days of Monday/Wednesday class without penalty. (cs77 students may miss 2 days of Monday class without penalty.)

A personal issue (health, family event, other commitment) will take me away from class. What should I do?

Most importantly, let your studio leader and your team know ASAP. The sooner we hear from you, the more we can help. If you give your team a heads-up quickly, they're sure to be empathetic. If you just disappear for a few weeks, they'll be unlikely to want you back. Even if you have a good reason, no one likes being left out in the cold.

Fairness requires us to grade on performance, not desire. Think about if this issue came up when you were about to take the SAT -- or if it came up in a job. Realistically, if you're away for more than a week, you have two choices: you can push forward and accept lower performance, or you can drop the class and retake it when you have more time. We recommend the second option whenever possible.

I have a question that's not answered here. How do I contact the teaching staff?

If you have a question, post it to the forum -- don't send email. This includes *all* questions about assignment clarifications and class requirements. The reason: you may think you're the only one with this question. With 300 students, someone else is bound to be interested. Answering all questions in a public place means that every student has access to the same information. It's both efficient and fair. If you missed class (or will miss class) and would like to find out what's covered, review the syllabus materials then ask a fellow student to fill you in. Do not send email -- it's your responsibility. Also, you're welcome to come to office hours and ask any question you want. You can ask questions about classes, internships, design, graduate school, jobs, or simply come to say hi, listen to other students questions, or share your background and interests. Office hours are for you, and Scott and the teaching staff really value your presence and questions. With 300 students, we unfortunately cannot accomodate requests to meet outside of office hours. We trust that if your question is important, you can find a way to make the time to come to office hours.

What's the difference between cs77 and cs147?
cs147 cs77
Prerequisites cs106b or equivalent
(co-requisite for graduate students)
Units 4
(3 for grad students w/cap)
Grading ABC S/NC
Required Attendance MWF
(“lecture”, lab, studio)
(“lecture”, studio)
Counts Toward Major Yes No
Participation Grading Rubric
(maximum points. scaled to max points listed above if too many unexcused absences.)

Out of the box (38-40). Was the most helpful participant in studio and top 5% in lab and class in terms of participation. Always came, Arrived early/on time, sat up front, asked great questions, and helped other students. Always engaged; never obnoxious. Lab submissions were awesome.

Above & Beyond (32-37). Asked good questions in class and provided valuable peer feedback in studio. Arrived on time and helped other students in lab and studio. Lab submissions were strong.

Satisfactory (22-31). Asked some (but few) questions in class and didn't sit up front. Lab submissions were fine but unremarkable. Occasionally arrived late or left early. Provided reasonable but unremarkable peer feedback in studio.

Minimal (12-21). Didn't really engage in class/lab/studio. Asked few questions. Peer feedback not substantial or helpful. Probably sat towards the back. Lab submissions showed little work.

Unsatisfactory (1-11). Often arrived late or left early. Said little to nothing in studio/lab/lecture. Sat in back. Possibly doing other activities during class/lab/studio (other coursework, facebook).