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
-cogs121@hci.ucsd.edu (all instructors)
-cogs121-ta@hci.ucsd.edu (TAs and tutors)

Piazza


Course website: http://thiscourse.com/ucsd/cogs121/sp14/

Instructors

Nadir Weibel (Professor)

http://weibel.ucsd.edu

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
  • ...

Books

Required

book cover
book cover

Suggested

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: http://libraries.ucsd.edu/resources/course-reserves/course-reserves-from-off-campus.html

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: http://thiscourse.com/ucsd/cogs121/sp14/discuss/

Course Details and Policies

Prerequisites

-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 team@piazza.com.

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 cogs121@hci.ucsd.edu if you need to reach all the instructors
  • Use cogs121-ta@hci.ucsd.edu 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.

Assignments

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
  • https://tabkeeper.herokuapp.com/
  • http://letsgetsocialagain.herokuapp.com
  • http://bookalyzr.herokuapp.com/
  • http://facebirthday.herokuapp.com/
  • http://facebookd3visual.herokuapp.com/
  • http://contempo.herokuapp.com/
  • http://sherbookholmes.herokuapp.com/
  • http://facebooklikemap.herokuapp.com
  • http://scatter-my-friends.herokuapp.com
  • http://facebookbandaid.herokuapp.com/
  • http://prhofish.herokuapp.com
  • 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: kdo@ucsd.edu
    Chenyu Si: c1si@ucsd.edu
    Estelita Leija: esleija@ucsd.edu
    Bryan Canlas: bpcanlas@ucsd.edu
    Redding Liou: reliou@ucsd.edu
    Kirsten Van Lagenhoven: kvanlang@ucsd.edu
    Sophie Lee: sml007@ucsd.edu
    April - aprilphuong@gmail.comNarine - narinearraul@gmail.com
    2Gesture Data Visualization GroupMichael Belcher (mbelcher@ucsd.edu)
    Colleen Piontek (cpiontek@ucsd.edu)
    Margaret Paveza (mpaveza@ucsd.edu)
    Amanda Kelley (ackelley@ucsd.edu)
    Kenny Lee (kel004@ucsd.edu)
    Dan - dlenzen@ucsd.eduNarine - narinearraul@gmail.com
    3JA3KJoei Chou - jwc025@ucsd.edu
    Kelsie Cocom - kcocom@ucsd.edu
    Andrew Nguyen - atn035@ucsd.edu
    Karla Servillon - kservill@ucsd.edu
    Kevin Tran - knt004@ucsd.edu
    Justin - jkli@ucsd.eduNarendran - naren@cs.ucsd.edu
    4Awesome COGS102C groupKaili Guo - kguo@ucsd.edu
    Isabella Sanchez - issanche@ucsd.edu
    Jenna Fall - jfall@ucsd.edu
    Wanyi Julia Lu - walu@ucsd.edu
    Yunjia Yao - y2yao@ucsd.edu
    Deborah Ahn - dhahn@ucsd.edu
    Jobeth de Jesus - jldejesu@ucsd.edu
    Deanna Shinsky - dshinsky@ucsd.edu
    Cesar - csrcsnrs@gmail.comChu - cshao@eng.ucsd.edu
    5EcoCaroline Lau - cal025@ucsd.edu
    Jen Nguyen - jen021@ucsd.edu
    Sophia Ziogas - sziogas@ucsd.edu
    Hakon L'orange - hakonlorange@gmail.com
    Melinda Chu - mec016@ucsd.edu
    Yuling An - y2an@ucsd.edu
    Adam - acrule@ucsd.eduChu - cshao@eng.ucsd.edu
    6C.O.G.Junghyun Park (jup022@ucsd.edu)
    Liwen Li (lil015@ucsd.edu)
    Fang-Fang Fei (ffei@ucsd.edu)
    Jeff James (jwjames@ucsd.edu)
    Christine Do (cvd001@ucsd.edu)
    Tiffany Chen (thchen@ucsd.edu)
    Ryan Chan (r8chan@ucsd.edu)
    April - aprilphuong@gmail.comNarine - narinearraul@gmail.com
    7The Area 6Jin Ho Chung - jhc074@ucsd.edu
    Nico Henschel - nhenschel@ucsd.edu
    Felicia Jin - fyjin@ucsd.edu
    Rita Oceguera - roceguer@ucsd.edu
    Tyler Oyakawa - toyakawa@uscd.edu
    Melissa Wong - maw030@ucsd.edu
    Adam - acrule@ucsd.eduChu - cshao@eng.ucsd.edu
    8FitBit4LyfeMelissa Cameron (mccamero@ucsd.edu)
    Elizabeth Stevens (eksteven@ucsd.edu)
    Michael Lee (mil039@ucsd.edu)
    Alex Maher (amaher@ucsd.edu)
    Edgardo Leija (eleija@ucsd.edu)
    Nicholas Anguetta (nanguett@ucsd.edu)
    Justin- jkli@ucsd.eduNarendran - naren@cs.ucsd.edu
    9TriFriendsErika Rodman: erodman@ucsd.edu
    Marco Biscarini: mbiscari@ucsd.edu
    Justin Wright: jdwright@ucsd.edu
    Alex Arthur: abarthur@ucsd.edu
    Alex Anstead: aanstead@ucsd.edu
    Emily Kent: erkent@ucsd.edu
    Melody - melodyskim@gmail.comChu - cshao@eng.ucsd.edu
    10FitbitOptAnkan Bhowmick (abhowmic@ucsd.edu)
    Robert Asami (rasami@ucsd.edu)
    Yichin Liu (yil061@ucsd.edu)
    Greg Soghoyan (gsoghoya@ucsd.edu)
    Royce Gee (rgee@ucsd.edu)
    Bryant Lim (b7lim@ucsd.edu)
    Kendall - kmyoungst@gmail.comNarendran - naren@cs.ucsd.edu
    11FlunkLessLucas Medeiros de Paula - ldepaula@ucsd.edu
    Vladislav Bakhurinsky - vbakhuri@ucsd.edu
    Michelle Wang - miw027@ucsd.edu
    Bella Lee (Hui Ping Lee) - hpl002@ucsd.edu
    Crystal Kwok - c2kwok@ucsd.edu
    Jared DeFigh - jdefigh@ucsd.edu
    Alexander Peterson - abpeters@ucsd.edu
    Meena Kaushik - mkaushik@ucsd.edu
    Melody - melodyskim@gmail.comChu - cshao@eng.ucsd.edu
    12The FitbittersElaina White - emwhite@ucsd.edu
    Caitlin Brown - cnb001@ucsd.edu
    Jacquelyne Tzarax - jtzarax@ucsd.edu
    Ayma Malik - afmalik@ucsd.edu
    Kristin Omori - komori@ucsd.edu
    Narine Cholakyan - ncholaky@ucsd.edu
    Sean Farris- sfarris@ucsd.edu
    Emily Higgins- ehiggins@ucsd.edu
    Kendall - kmyoungst@gmail.comNarendran - naren@cs.ucsd.edu
    137A'sThinh Le, thinh9393@gmail.com
    Chelsey Kwak, chelskwak@gmail.com
    Elliot Humphrey, elliot.v.humphrey@gmail.com
    Jeremy Chen, jeremy.chen93@gmail.com
    Rachel Kim, rayykim@yahoo.com
    Mikaela Oen, mikalala94@gmail.com
    Cesar - csrcsnrs@gmail.comNarine - narinearraul@gmail.com


    Grading

    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 cogs121-ta@hci.ucsd.edu 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 cogs121@hci.ucsd.edu. 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


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


    1p-1.50p 

    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

    Quiz3_answers
    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