Course Overview

The course introduces fundamental methods, principles and tools for designing, programming and testing interactive systems with a special focus on mobile user interfaces.
Prerequisite: CS111 or CS112 or CS115

Topics List

Brief history of HCI
Usability
• Computer abilities – Moor’s law
• Human capabilities
• The cost of getting it wrong
• Usability dimensions
Guidelines & Principles
User-Centered Design
• Usability Engineering Process
• User-centered design
User and Task Analysis
Prototyping
Design patterns
Graphic & Color Design
UI Software Architecture
User Testing and Evaluation at Scale

Direct Manipulation & Mental Models
Reality-Based Interfaces
HCI for AI

Reading Materials

The course has a textbook:

We will also follow two books about HTML5 programming for mobile applications:

  • Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress (Available as e-book in Wellesley library). (LHTM5L)
  • Freeman & Robson, Head First HTML5 Programming, O'Reilly (HFHTML).

Additional reading materials will be available on the course shared e-reserve collection (Google Drive).

Course Requirements

There are 4 homework assignments in this course that explore conceptual and technical aspects of develping interactive computing systems.

In addition, the course has a final project that requires students to work in teams to design, implement and evaluate a mobile user interface. Teams for the project will be assigned by the istructor.
As part of your team project, you will be expected to do the following:

  • Identify a problem that could be addressed through the development and deployment of a mobile application. Use the project design briefs as a starting point for choosing a topic for your appliction.
  • Develop a conceptual design for a novel mobile user interface, and build a paper prototype.
  • Implement the mobile user interface you have designed using HTML 5, CSS 3, and JavaScript. This is an iterative process in which you will re-design, build, and evaluate.
  • Document your user interface with pictures, video, diagrams, and text in a web page that will remain a part of the Human-Computer Interaction course online gallery.
  • Present the mobile interface you have built in class.

There are three quizes about topics discussed in lecture and readings, and a final exam.

Grading

Grades for the course will be determined by five factors:
Active participation during class - %5
Homework assignments - %25
Final project - %20
Quizzes - %20
Exam - %30

This course complies with the Wellesley College grading policy. While that policy asks faculty to hold each 100- and 200-level course with 10 or more students to an average of no higher than 3.33, it does not require faculty to grade on a "curve." There is no arbitrary limit on the number of A's, B's, C's etc., and every student will be assigned the grade they earn and deserve according to the grading standards of the college.

Collaboration Policy

We strongly encourage you to get to know all of your classmates and to collaborate extensively with them. Because of the interdisciplinary nature of this course, you may be strong in some areas but weak in others. Please share your strengths, and feel free to ask others for help.
In your individual homework assignments and quizzes, all observations, reflections, code, and documentation should be in your own.

Here is a summary of our collaboration policy:

  •  Assignments: Individual or rotating pairs of students
  •  Project: Teams of 3 students
  •  Quizes and exam: Absolutely no collaboration

Laboratory and Computing Environment

Classes will be held in the Science Center room E125 (HCI Lab).
During the course we will use iPhone or iPod devices (will be available for check out from the HCI lab).
If possible, bring your laptop to class.

We will be using the following tools and APIs:
Mockups - Balsamiq
Mobile web app - jQuery Mobile
Information visualization - Google Charts
Conversational UIs - Motion AI
VR content - A-Frame, Google Cardboard

Google CS220 Group

We will use a google group for communication purposes.
Reading materials are available on Google Drive. Homework assignments will be submitted on Google Drive.

Students with Special Needs

If you have any disabilities, including learning disabilities, you are encouraged to meet with an instructor to discuss accommodations that may be helpful to you.