COGS 121: Human-Computer Interaction Programming Studio (Spring 2014)

Lecture: Tuesdays 3.30pm-4.50pm Solis 104

Lab: Thursdays 3.30pm-4.50pm Solis 104

Discussion Sections
-Design/General (Crane): Mon 3.00pm-3.50pm CSE B270 
(please bring your laptop if possible) 

-Technical #1 (Churen): Fri 1.00pm-1.50pm, WLH 2206 (or CSE B270)
-Technical #2 (Narine): Fri 1.00pm-1.50pm, WLH 2208 (or CSE B270)
-Technical #3 (Narendran): Tue 2.00pm-2.50pm, CSE 4140 (or CSE B270)

Mid-Term Exam
-Tue 05/06 3.30pm-4.50pm

Course related communication (all instructors) (TAs and tutors)


Course website:


Nadir Weibel (Professor)

Office Hours: Wed 9.15am-10am in CSE 3224

Crane Huang (TA)

Office Hours: Mon 4pm-5pm, Atkinson Hall Room 6304 (or by appointment)

Narendran Thangarajan (TA)

Office Hours: Tue 5pm-6pm, CSE B260A (or by appointment)

Chu Shao (Tutor)

Narine Cholakyan (Tutor)

Course Description

Cognitive Science 121 is the second course in the HCI sequence and naturally follows COGS 120 (CSE 170). It focuses on interaction architectures, programming techniques, and cognitive and computational principles for designing effective systems. 

We begin by covering the fundamentals of user interface design for web-based systems and quickly move to larger scale design and implementation activities. A major component of the class is completion of a substantial programming project in which students work together in small teams.

This year, in Spring 2014, COGS 121 students will partner with student groups in COGS 102C and engage in a real-world cross-classes coordination to design and prototype applications. This will give students experience with a real-world-like cycle of data-driven design, development, and evaluation.

The first part of the class (weeks 1-5) will have a dual focus:
  • On Tuesdays Lectures we will learn fundamental concepts, theories and principles for designing effective user interfaces
  • On Thursdays Labs we will create the basis for being able to implement some of these concepts as part of real web-based applications. In particular we will learn about three two different technologies: (a) Facebook/Twitter Social APIs and SDKs, and (b) D3 javascript visualization library. and (c) PhoneGap/Cordova framework for developing cross-platform mobile applications. We will also learn how to use high-fidelity and low-fidelity wire framing tools (e.g. Axure and Balsamiq) to rapidly prototype interactive applications.
The second part of the class (weeks 5-10) will focus on a group project that will leverage the technology learned in the first part. 
We will partner with Cogs 102C (Cognitive Design Studio) and work in collaboration with student groups from that class to implement mobile applications resulting from their analysis and first prototypes. During this second part, class will focus on a variety of topics that will support you in the development of your projects. This will include:
  • Project Management
  • Multidisciplinary Collaboration
  • Agile Software Development
  • Information Visualization
  • ...



book cover
book cover


book cover
book cover
book cover
book cover
book cover

Additional Readings

Selected chapters (see below for every week of class) of the listed books are required readings. I expect everybody to use this as a review of the class content. All required readings are available through the UCSD Library "reserves" system for free. The listed O'reilly books are available in their complete electronic form, although we won't read all of them. However reading additional chapters is highly recommended.

In order to get access to these books through UCSD's library please use this link:

The system will ask you for a password. Please use nw121

WARNING! We just noticed that the library linked the wrong version of the Johnson book. The right version (2014 edition) is available on the links below. The main difference between the two version is the reshuffling of some of the chapters and the addition of a couple of new ones. There should be no impact on the required readings foe week 1-3. Reading for Week 4 (due on Week 5) are only available on the new edition. 

Note that you have to be on UCSD campus network or connected through VPN to be able to access the books. 
Here more information on how to access the resources from an outside location:

Although many books are suggested readings, there is no single book that covers what one needs to know to build modern web, mobile and social applications. This situation is further complicated by the fact that the web environment and development tools are rapidly changing. One of the important skills programmers and designers increasingly need today is to be able to quickly locate relevant current material on the web. Selected links to the topics we cover each week will be provided but everyone is encouraged to share links to other useful resources they discover in the discussion page here:

Course Details and Policies


-COGS 120 (CSE 170) and CSE 8A/8B or CSE 11, or consent of instructor 

Communication, UCSD E-Mail, Piazza Forum Requirement and Class Material

Occasionally we may need to contact you regarding your homework or some pressing matter.  We may use e-mail, and when we do, we will use your official UCSD e-mail address, as registered in TritonLink.  You are responsible for reading course-related e-mails sent to your UCSD account in a timely manner.

This term we will be using Piazza for class discussion. The system is highly catered to getting you help fast and efficiently from classmates, the TA, and myself. Rather than emailing questions to the teaching staff, I encourage you to post your questions on Piazza. If you have any problems or feedback for the Piazza developers, email

Our Piazza page is available here: Spring 2014 Cogs 121 Piazza Forums.  Your should keep yourself subscribed to these forums so that you automatically receive forum posts as an e-mail.  Note that there is a mobile client for Piazza. 

Assignments, lecture slides, etc. will be posted to the Documents page of the Cogs 121 page. You are responsible to retrieve all the content from there.

If you need to communicate with the Cogs 121 staff please always use the prefix [COGS 121] in your email subjects. There are two distributions lists for this class:

  • Use if you need to reach all the instructors
  • Use if you need to reach only TAs and tutors.
  • Additionally the email addresses of the whole team members are listed at the top of this page

Discussion Sections

Discussion section are a special opportunity for all students to catch up, ask questions, and dive into the details of what has been covered during the Tue/Thu classes. Given the different focus of the Tuesday Lecture (concepts/theories/principles) and Thursday Lab (Programming/SDKs, APIs), we will offer two different kind of sections:

  • Design/General Discussion (Mon 3pm-3.50pm, EBU3 B270, Crane Huang, Required; Please bring your laptop is possible): the content covered in the Tuesday class will be discussed and students will have the opportunity to ask questions and catch up. In every Design/General discussion section there will be a "Discussion Reading Quiz" consisting of a few questions about the content covered in the Tuesday class and in the assigned readings. 
  • Technical/Programming Discussion (Fri 1pm-1.50pm, TBD, Chu Shao and Narine Cholakyan, Not required but highly recommended): the more technical content covered in the Thursday classes will be explained in details in these sections. Assignments 1-3 (due Week 3, Week 4 and Week 5) will be presented during discussions.


The initial assignment of week 1 (Assignment 0, not graded) will create the basic infrastructure and setup to get you started. The 3 programming assignments (Week 2/3/4, due Week 3/4/5), will put into practice the more technical content covered on the Thursday lecture. Assignments can be solved in groups to a maximum of two students, and are due Wednesday night at 11:59pm. Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter. Programming assignments will have to be uploaded to heroku and linked through a dedicated Google Form that will be made available for every assignment.

Assignments #1
Assignments #2
  • Group Projects

    In the second part of the quarter (weeks 5-10) students will have to form groups of 3-4 students. The Cogs 121 instructors will oversee the group formation and ensure that there is a good balance in the programming and design skills of all the group members. Projects will be proposed by student groups from the Cogs 102c contextual design class, and Cogs 121 groups will be able to vote on the project they would like to work on. Votes will only be indicative, and the instructors will assign the projects to teams, with no guarantee about the voted projects. Remember this is real-life...

    After being assigned a project, Cogs 121 groups will work in close collaboration with Cogs 102c groups to implement the proposed project. A final combined presentation is scheduled for finals week, where 121 and 102c groups will present their final product. Cogs 121 groups will have to turn-in a report on the implementation of the project and will be graded for that part, independently from the 102c students.

    Team No.Team NameTeam MembersCOGS 102C TACOGS 121 TA
    1se7enKristina Do:
    Chenyu Si:
    Estelita Leija:
    Bryan Canlas:
    Redding Liou:
    Kirsten Van Lagenhoven:
    Sophie Lee:
    April - aprilphuong@gmail.comNarine -
    2Gesture Data Visualization GroupMichael Belcher (
    Colleen Piontek (
    Margaret Paveza (
    Amanda Kelley (
    Kenny Lee (
    Dan - dlenzen@ucsd.eduNarine -
    3JA3KJoei Chou -
    Kelsie Cocom -
    Andrew Nguyen -
    Karla Servillon -
    Kevin Tran -
    Justin - jkli@ucsd.eduNarendran -
    4Awesome COGS102C groupKaili Guo -
    Isabella Sanchez -
    Jenna Fall -
    Wanyi Julia Lu -
    Yunjia Yao -
    Deborah Ahn -
    Jobeth de Jesus -
    Deanna Shinsky -
    Cesar - csrcsnrs@gmail.comChu -
    5EcoCaroline Lau -
    Jen Nguyen -
    Sophia Ziogas -
    Hakon L'orange -
    Melinda Chu -
    Yuling An -
    Adam - acrule@ucsd.eduChu -
    6C.O.G.Junghyun Park (
    Liwen Li (
    Fang-Fang Fei (
    Jeff James (
    Christine Do (
    Tiffany Chen (
    Ryan Chan (
    April - aprilphuong@gmail.comNarine -
    7The Area 6Jin Ho Chung -
    Nico Henschel -
    Felicia Jin -
    Rita Oceguera -
    Tyler Oyakawa -
    Melissa Wong -
    Adam - acrule@ucsd.eduChu -
    8FitBit4LyfeMelissa Cameron (
    Elizabeth Stevens (
    Michael Lee (
    Alex Maher (
    Edgardo Leija (
    Nicholas Anguetta (
    Justin- jkli@ucsd.eduNarendran -
    9TriFriendsErika Rodman:
    Marco Biscarini:
    Justin Wright:
    Alex Arthur:
    Alex Anstead:
    Emily Kent:
    Melody - melodyskim@gmail.comChu -
    10FitbitOptAnkan Bhowmick (
    Robert Asami (
    Yichin Liu (
    Greg Soghoyan (
    Royce Gee (
    Bryant Lim (
    Kendall - kmyoungst@gmail.comNarendran -
    11FlunkLessLucas Medeiros de Paula -
    Vladislav Bakhurinsky -
    Michelle Wang -
    Bella Lee (Hui Ping Lee) -
    Crystal Kwok -
    Jared DeFigh -
    Alexander Peterson -
    Meena Kaushik -
    Melody - melodyskim@gmail.comChu -
    12The FitbittersElaina White -
    Caitlin Brown -
    Jacquelyne Tzarax -
    Ayma Malik -
    Kristin Omori -
    Narine Cholakyan -
    Sean Farris-
    Emily Higgins-
    Kendall - kmyoungst@gmail.comNarendran -
    137A'sThinh Le,
    Chelsey Kwak,
    Elliot Humphrey,
    Jeremy Chen,
    Rachel Kim,
    Mikaela Oen,
    Cesar - csrcsnrs@gmail.comNarine -


    Grading elements [in percent]:
    • Discussion Reading Quizzes [10%]
    • Programming Assignments 1-3 [30%]
    • Mid-Term [30%]
    • Project [30%]
    -Discussion Reading Quizzes:  You are expected to do the reading assigned for each class period. It is recommended to read the assigned chapters before the the Tuesday class, but you still have time until the following the "Design/General" discussion section on the following Wednesday. During the discussion section there will be a simple quiz to check your understanding and preparation on the content that was covered in class and in the readings. We will drop the lowest 2 reading quizzes. 

    -Programming assignments will be graded on a scale from 0-10. Grading will be based on 3 components (adherence to the assignment, working status, design), each delivering up to 3 points. An extra point will be added to exceptional assignments. Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter.

    -The Mid-term Exam will be on Tuesday 06/05 3.30pm-4.50pm (in class) and will test the first 5 weeks of the quarter. It will be a closed book exam and will assess both your knowledge in terms of the theories, concepts and principles of design covered in the Tuesday lectures and Mondays discussions, as well as the theoretical concept related to the more technical aspects of the class explained in the Thursday Labs and integrated in assignments 1-3.

    -The Group Project will be evaluated throughout the course of the second part of the quarter. Every Thursday, starting week 6 every 121 group will present a 3min summary in one single PDF slide of the last week. The 1-slide PDF needs to be sent to by Wednesday night 11.59p and will include: 1) progress since last week, 2) summary of collaboration with 102c group, and 3) one thing that has been solved over the last week that might benefits the other groups. The 3min weekly summaries will be evaluated as v-, v, or v+ depending on the progresses. The weekly evaluations will be integrated with a final evaluation of a final paper describing the technical implementation of the project. The Final paper is due on Fri 06/06 at 11.59pm (EXTENDED through Sunday 06/08, 11:59pm) and must be sent to Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter.

    Academic Integrity

    You are to do your own work in this course. Each student is responsible for knowing and abiding by UCSD's policies on Academic Dishonesty and on Student Conduct. Any student violating UCSD's Academic Integrity Policy will be reported to the Academic Integrity Office for administrative processing, and may result in suspension or dismissal from UCSD, as well an an academic sanction that could result in failing the course (e.g., a grade of zero (0) on a compromised assignment). Committing acts that violate the UCSD Student Conduct Code that result in course disruption will be referred to the Office of Student Conduct, and could result in suspension or dismissal.
    • No student shall provide their assignments, in part or in total, to any other student in current or future classes of this course. No student shall procure or accept assignments from any other student from current or prior classes of this course.
    • All programming code and documentation submitted for evaluation or existing inside the student's computer accounts must be the student's original work or material specifically authorized by the instructor. The course accounts are authorized for course work only.
    • Collaborating with other students to develop, complete or correct course work is limited to activities explicitly authorized by the Instructor. Use of other student's course work, in part or in total, to develop, complete or correct course work is unauthorized. However, students may freely discuss their work with others.
    • Each student must retain intermediate work as proof that submitted work is his or her own. A student may be asked to provide these intermediate copies as evidence that the submitted work is the student's.
    • With regards to the above rules, it is understood that project teams will be sharing code among themselves (but not to other teams) to complete their projects.

    Course Schedule

    Week Date Topic Readings (after class) Assignments Notes
    1 Tue Apr 01 Lecture: Cogs 121 Introduction / Interactive Systems: Usability, Interface Design, and Design Goals [slides] Shneiderman: Ch. 1 & 2

    Johnson: Introduction

    Wed Apr 02 Tutorial: Introduction to Web and Mobile Programming (refresher Cogs120/CSE 170), Churen Shao [slides] [Windows Setup] [Mac Setup]


    CSE 4140
    Thu Apr 03 Lab: Introduction to Web technology [slides]

    Assignment 0: Environment setup [ass #0]

    2 Tue Apr 08 Lecture: Design principles [slides]
    Shneiderman: Ch 5

    Johnson: Ch 1 + Appendix

    Narendran (Monday) Discussion slides : [here]

    Thu Apr 10 Lab: Social Media and Data Mining [slides]

    Assignment 1: Social Media [ass #1] [Boilerplate] (Due: 4/18/14 11:59pm) Chu Discussion Notes: [here]
    Narine Discussion: [slides]
    3 Tue Apr 15 Lecture: The Art of Web and Visual Design [slides]
    Shneiderman: Ch 6

    Johnson: Ch 2, 3, 4, 5, 6

    Thu Apr 17 Lab: Interactive Information Visualization [slides]

    Assignment 2: D3 Visualization [ass #2]
    (Due: 4/23/14 11:59pm)
    D3 tutorial : [link]
    Chu Discussion Program: [link]
    4 Tue Apr 22 Lecture: Interaction Devices [slides]
    Shneiderman: Ch8
    Johnson: Ch13, 14

    Thu Apr 24 Lab: Rapid Prototyping and Wireframing [slides]

    Assignment 3: Wireframing [ass #3]

    5 Tue Apr 29 Cogs 121 Projects "Get-Together"

    Prof. Weibel at the CHI Conference in Toronto
    Thu May 01 Preparation for Mid-Term (Crane Huang)

    Prof. Weibel at the CHI Conference in Toronto
    6 Tue May 06 Mid Term Exam

    Mid-Term Answers available [pdf]
    Thu May 08 Lab: Project organization, collaboration and timeline [slides]

    7 Tue May 13 Lecture: Project Management [slides]
    The Agile Project Manager [pdf]
    Statistics about mid-term
    Thu May 15 Lab: Projects Summaries / Troubleshooting
    3-min 1-slide group presentations (send by Wed 11:59pm)[slides]
    8 Tue May 20 Lecture: Extreme Programming [slides] Extreme Programming and Agile Software development [pdf] [url]

    Thu May 22 Lab: Projects Summaries / Troubleshooting
    3-min 1-slide group presentations (send by Wed 11:59pm)
    Week 10 Deadlines [slide]
    9 Tue May 27 Lecture: Final Project Reports / Final Presentations [slides]

    Presentation Tips
    Thu May 29 Lab: Projects Summaries / Troubleshooting
    3-min 1-slide group presentations (send by Wed 11:59pm)

    10 Tue Jun 03 Lecture: Extreme By Design Documentary [web]

    Discussion at the end of the documentary.
    Thu Jun 05 Lab: Projects Summaries / Troubleshooting
    3min. Demo

    11 Mon Jun 09 Final Project Presentation

    4.00-4.20 Group 2 

    4.25-4.45 Group 5 

    4.50-5.10 Group 6 

    5.15-5.35 Group 13 

    5.40-6.00 Group 10 

    6.05-6.25 Group 11

    CSE 1202
    Wed Jun 11 Final Project Presentation

    3.00-3.20 Group 3 

    3.25-3.45 Group 1 

    3.50-4.10 Group 4 

    4.15-4.35 Group 7 

    4.40-5.00 Group 9 

    5.05-5.25 Group 12

    5.30-5.50 Group 8 

    CSE 1202