UIC Logo

Teaching Staff

Instructor

Debaleena C.
Email: debchatt
Personal Webpage: debaleena.com
Lab Webpage: hci.cs.uic.edu

Teaching Assistants

Anthony Perritano
Email: aperri3

Tejas Sarma
Email: tsarma2

Course Information

Credit Hours 3 (undergraduate hours); 4 (graduate hours)
Class Time Tuesday & Thursday, 2:00pm — 3:15pm
Class Location BH 304 [map]
Instructor's Office 1135 SEO    [map]
Instructor's Office Hours Tuesday & Thursday, 3:15pm — 4:15pm at SEL-W 1032    [map]
TA Office Hours (Anthony) Wed 3:30—4:30pm; Fri 11:30—12:30pm at SEL-W 1032
TA Office Hours (Tejas) Tue & Thurs 5:00pm — 6:00pm at SEL-W 1032
Link to Piazza piazza.com/uic/spring2018/cs422/home

Course Description

User interface design, implementation, and evaluation: user-centered design methodologies, windowing systems, I/O devices and techniques, event-loop programming, user studies. Programming projects.

Prerequisite(s)

CS 342, Software Design, or equivalent software engineering experience, specifically:

  • programming experience in Java, C#, C++, or a similar language (i.e. not only Python and Javascript);
  • building at least one graphical user interface

General Guidelines to Use the Syllabus

Students are responsible for familiarizing themselves with the syllabus. The instructor is responsible for being responsive to the diverse needs of the enrolled students and making necessary modifications to this syllabus, which is to be treated as a living document.

Blackboard will be used to post course grades. Submit individual assignments via Blackboard and email group assignments to the TA (cc-ing group members and instructor).

Piazza will be used to post announcements, FAQs, discussion points, course-related general queries, and detailed instructions when deemed necessary.

The course webpage will contain links to readings, general instructions, and class schedule.

No email policy: Post general doubts publicly on Piazza and private matters anonymously (to classmates). Teaching staff will respond on Piazza. Except extenuating circumstances and emergencies, students should strictly avoid emailing teaching staff with class-related doubts/inquiries/information.

Students are responsible to keep themselves updated with class announcements.

Frequently Asked Questions

What programming languages do I need to use for this class?

Programming in this class will be web-oriented and include frontend UI implementation. A complete backend is beyond the scope of this class. For assignements, students will need to use, at the least, HTML, CSS, JavaScript, and Jquery. We will provide learning materials, links to tutorials, and handouts, but not spend class time covering these technologies.

What is the difference between 422U, 422M, and 422D?

This class consists of three versions that meet together and share many assignments:

  • 422U for undergraduate students
  • 422M for masters students
  • 422D for doctoral students

In general, the two graduate versions are supersets of the undergraduate version, but different supersets:

Course content. All three versions cover the same material on UI design, implementation, and evaluation. Students in 422D have additional material on research methods and human-computer interaction (HCI) literature.

Assignments. There are three types of assignments, one-week problem sets (PS1-5), analytics assignments (AS1-3), and research assignmtns (RS1-3).

  • Students in 422U must submit the problem sets (PS1-5).
  • Students in 422M must submit the problem sets (PS1-5) and the analytics assignments (AS1-3).
  • Students in 422D must submit the problem sets (PS1-5) and the research assignments (RS1-3).

Analytics assignments (AS1-3) are a problem set sequence about A/B testing. AS1 will be implementing a B version of a user interface, given an A version. AS2 will be running the A/B test against other users and collecting data. AS3 will be analyzing and writing up the results. Each assignment is designed as a one-week problem set, but AS1 involves implementation which may be challenging depending on each student's background.

Research assignments (RS1-3) are a problem set sequence about replicating a user study from a published conference paper. RS1 will be implementing the user interface technique and the infrastructure to run the test. RS2 will be running the experiment with users and collecting data. RS3 will be running statistical tests on the data and writing up the results. Each assignment is designed as a one-week problem set, but RS1 may involve challenging implementation depending on each student's background.

Group Projects. Students from 422U, 422M, and 422D may work together in the same group for the group project. Each group will consist of four or more members.

Why take this class?

apple introduce macintosh

With computing reaching ubiquity, along with an applications' utility and safety, what has come to foretell widespread technology adoption and user satisfaction is a good user experience. But what is a good user experience? How do we design for usability without dumbing down utility? Why are some systems easier to use, easy to learn, and easy to remember? All computing tools requiring user interaction needs a user interface (UI). The UI is essential in providing good usability and in turn, a stellar user experience. In this class, we will learn how to design and prototype user interfaces from a user-centered approach.

Upon successful completion of this course, students will be able to:

  • Employ usability engineering principles and concepts when building computing tools.
  • Design user interfaces from a user-centered approach.
  • Prototype user interfaces from a user-centered approach.
  • Ideate, sketch, elaborate, and communicate user experiences and interface designs.
  • Use techniques to improve a UI's efficiency, learnability, and accessibility.
  • Understand the basic principles of human error to design UI safety.
  • Evaluate user interfaces using human-computer interaction principles.
  • Conduct heuristic evaluation of user interfaces.
  • Conduct user testing of computing applications.

Course Texts

There is no required textbook. Recommended books:

Class Schedule

Summary. The class consists of 20 explorations and 10 studios. Explorations are class meetings where the assigned class topic is discussed in the class led by 3-4 students and the instructor. Studios are class meetings dedicated to student introductions, presentations, and project discussions, and facilitated by the instructor and/or TA.

Attendance. Studio attendance is mandatory. Attending half of the explorations is required, i.e., 10/20 class meetings. Students not meeting this course requirement may be penalized upto 10% of their total grade.
Students absent during a group presentation will receive zero for that assignment.

Sign up for leading explorations

Sign up your teams for group projects

The class consists of 5 modules and spans 15 weeks:

  1. Usability basics module
  2. UI prototyping module
  3. Visual design basics module
  4. User testing module
  5. Advanced usability module

Week Module/ Studio Class topic
(with linked readings)
Deliverables
Week 1
Jan 16
Studio 1 Introductions
Jan 18 Module 1: Usability Basics Intro to Usability
class examples
Week 2
Jan 23
Learnability
Jan 25 Efficiency
Week 3
Jan 30
Safety
Feb 1 Accessibility PS1 due
Week 4
Feb 6
Studio 2 Project proposal discussions Feb 5: Group signup due
Problem statement due; see GR1
Feb 8 Module 2A: UI prototyping User-centered design
For 422D:
Experiment Design
Experiment Analysis
Week 5
Feb 13
Prototyping
Feb 15 Studio 3 Student project proposal presentations
upload slides here
GR1 due
Week 6
Feb 20
Module 3: Visual Design Basics Graphic Design
Feb 22 Studio 4 Project discussions see GR2
Week 7
Feb 27
Color PS2 due; GR2 due
Mar 1 Layout
Week 8
Mar 6
Typography
Mar 8 Module 4: User testing Intro to user testing AS1 due; RS1 due
Mar 11: PS3 due
Week 9
Mar 13
Studio 5 Project discussions
testing paper prototypes
see GR3
Mar 15 Studio 6 Student design presentations GR3 due
Week 10
Mar 20
Heuristic evaluation
Mar 22 Module 2B: UI prototyping UI software architecture PS4 due
Week 11
Mar 27 & Mar 29
Spring Break
Week 12
Apr 3
Input
Apr 5 Output
Week 13
Apr 10
Module 5: Advanced usability More on efficiency GR4 due
Apr 12 Studio 7 Project discussion
heuristic evaluations
Week 14
Apr 17
More on learnability PS5 due; AS2 due; RS2 due
Apr 19 Studio 8 Project discussions see GR5
Week 15
Apr 24
More on safety
Apr 26 Studio 9 Student demo presentations GR5 due
Week 16
May 1
Individual differences AS3 due; RS3 due
May 3 Studio 10 Review / Project discussions May 6: GR6 due
Wed, May 9
3:30-5:30 p.m.
SES 230
Finals
Explorations   |   Studio

Assignments

Before attempting any assignment, students are required to review and understand this course's collaboration policy.

Course Collaboration Policy


Problem sets. Short one-week homeworks including programming or problem-solving. All students (422U, 422M, and 422D) must submit 5 problem sets (PS1 -5).

Group project. One semester-long group project with six-part deliverables (GR1-6). Deliverables will include project presentations, demos, or write ups.

Nano quizzes. Each exploration meetings will have a 3-minute quiz at the beginning of the class on recent readings. 15 quizzes will be graded (starting from Week 2).

Reading quizzes. Each week's reading material will include some reading quizzes. Reading quizzes are due before the reading is discussed in class.

Class discussions. All students should actively participate in class discussions. Each student must lead one discussion session to receive class participation points.

Final exam. One comprehensive final exam containing problem-solving questions (open notes).

Makeup credits. Upto 3%
Attend a human-computer interaction talk in the CS Department and submit a brief summary of the talk (no more than 300 words). You will earn 0.5% extra credit for each attendance and summary (NOT just attendance or summary), upto 3% of the total grade.

Upcoming talks:

Wednesday 1/31 11:00 - 12:00 at SEO 1000

Thursday 2/8 11:00 - 12:00 at SEO 1000

Thursday 2/22 11:00 - 12:00 at SEO 1000

Additional problems sets for 422M and 422D students. All 422M students must complete AS1-3 in addition to other assignments. All 422D students must complete RS1-3 in addition to other assignments.

Self and Peer Evaluation.
Self-evaluation form
Peer-evaluation form

When in doubt, always ask the instructor or TA.

Programming Labs

This is optional. Labs will be conducted by the TA to help you ramp up your coding skills and/or research skills.

Lab Date & location
HTML + CSS see Piazza
Javascript + Jquery see Piazza
Javascript + Jquery II
Applied research methods for 422M see Piazza
Applied research methods for 422D see Piazza

Assessment & Evaluation

Problem sets 30%
422U: PS 1-5
422M: PS 1-5; AS 1-3
422D: PS 1-5; RS 1-3
Group project 36%
Final exam (open notes) 10%
Nano quizzes (15 highest scores) 15%
Class participation 9%
reading quizzes 3%
one-time discussion lead 3%
class participation 3%
Total 100%

Grading

89.5—100A
79.5—89.4B
69.5—79.4C
49.5—69.4D
0—49.4F

Letter grades are determined at the end of the semester. The default cutoffs are provided above. These boundaries may be adjusted downwards if necessary because of the difficulty of the assignments or quizzes, but the boundaries will never be adjusted upwards, so a final average of 90 is guaranteed to be an A. The boundary adjustment is done heuristically, and there are no grade quotas, no grade targets, and no centering of the class on a particular grade boundary.

Attendance, Assignment Deadlines, and Late Policy:

Attendance. Studio attendance is mandatory. Attending half of the explorations is required, i.e., 10/20 class meetings. Students not meeting this course requirement may be penalized upto 10% of their total grade.
Students absent during a group presentation will receive zero for that assignment.

Assignment deadlines will be posted (and maybe updated) on the course page.

Lateness and Extensions

To give you some flexibility for periods of heavy workload, minor illness, absence from campus, job interviews, and other occasional (but often predictable) circumstances, you may use limited extensions on problem set deadlines, called slack days. Each slack day is a 24-hour extension on the deadline. You have a budget of 5 slack days for the entire semester, which you may apply to any combination of individual assignments (PS1-5, AS1-3, or RS1-3). You can use at most 2 slack days for a given assignment. Assignments more than two days late will not be accepted. Slack days apply only to individual problem sets, not to group work (GR1-GR6). For group assignments, we will grade whatever you have at handin time.

To use a slack day, just submit the assignment late. You DO NOT need to notify the staff. When we grade your assignment, we will see that you submitted late, and dock you the appropriate number of slack days in our records. You are responsible for keeping track of the slack days you’ve used. If you have used up your slack days, or exceeded the 2-day limit for a single assignment, you will need an instructor’s permission for more extension.

We expect that almost all your needs for extensions will be handled by slack. Only truly exceptional, extreme emergency cases will be considered for extensions after your slack days are exhausted. In particular, to receive said extension you will need to convince the staff that all five of your slack days were used for reasons that would have justified an extension. So use your slack budget wisely. Finally, we want to emphasize that slack days are for emergencies. Plan to submit every assignment on the real due date, and only use a slack day or two if something unexpected comes up last-minute. Do not treat slack days as pre-planned due date extensions. In particular, if you are already using two slack days for an assignment and email us at the end of your second day requesting an extension for a third day, we will probably turn you down.

Supplementary Materials

This course aims at assisting students to achieve an introductory level of mastery in user interface design and development skills. The course requires a variety of skills, including designing user interfaces, conceptualizing ideas, building computing prototypes, user evaluation, data collection, analysis, and interpretation. Because enrolled students may have different exposure to these different skills, this section lists additional materials that can be helpful to be successful in this course.

This is a fast-paced course, with multi-disciplinary reading materials, and students are strongly encouraged to pro-actively use the supplementary materials (freely available online) as deemed necessary.

Website Available support
Stack Overflow
http://stackoverflow.com/
Your one-stop shop for common coding problems.
Coursera
https://www.coursera.org/

Following courses are related to this course:

  • Design Thinking for Innovation
  • Human-Computer Interaction
  • Bayesian Statistics: From Concept to Data Analysis
  • Social Computing
  • Designing, Running, and Analyzing Experiments
  • Interactivity with JavaScript
Lynda.com
http://www.lynda.com
Helpful courses:
  • Introduction to Video Editing
  • Premiere Pro CC Essential Training (2015)

Guidelines & Policies

Attendance Policy. Class attendance is not always mandatory; however, research indicates that students who attend class are more likely to be successful. You are strongly encouraged to attend every class. Lectures may not recorded and there may not be slides. If you are unable to attend class, you should consider asking a classmate to take notes for you.

Academic Misconduct. All students should aspire to the highest standards of academic integrity. Using another student’s work on an assignment, cheating on a test, not quoting or citing references correctly, or any other form of dishonesty, unauthorized collaboration, or plagiarism shall result in a grade of zero on the item and possibly an F in the course. Incidences of academic misconduct shall be referred to the Department Head and pertinent University officials and repeated violations shall result in dismissal from the program.

All students are responsible for reading, understanding, and applying the Code of Student Rights, Responsibilities and Conduct and in particular the section on academic misconduct. Refer to UIC student affairs.

All students are strongly encouraged to read what constitutes plagiarism here and complete this short tutorial here. You must document the difference between your writing and that of others. Use quotation marks in addition to a citation, page number, and reference whenever writing someone else’s words (e.g., following the Publication Manual of the American Psychological Association).

Cheating. Cheating is an attempt to use or provide unauthorized assistance, materials, information, or study aids in any form and in any academic exercise or environment. A student must not use external assistance on any “in-class” or “take-home” examination, unless the instructor specifically has authorized external assistance. This prohibition includes, but is not limited to, the use of tutors, books, notes, calculators, computers, and wireless communication devices. A student must not use another person as a substitute in the taking of an examination or quiz, nor allow other persons to conduct research or to prepare work, without advanced authorization from the instructor to whom the work is being submitted. A student must not use materials from a commercial term paper company, files of papers prepared by other persons, or submit documents found on the Internet. A student must not collaborate with other persons on a particular project and submit a copy of a written report that is represented explicitly or implicitly as the student’s individual work. A student must not use any unauthorized assistance in a laboratory, at a computer terminal, or on fieldwork. A student must not steal examinations or other course materials, including but not limited to, physical copies and photographic or electronic images. A student must not submit substantial portions of the same academic work for credit or honors more than once without permission of the instructor or program to whom the work is being submitted. A student must not, without authorization, alter a grade or score in any way, nor alter answers on a returned exam or assignment for credit.

Fabrication. A student must not falsify or invent any information or data in an academic exercise including, but not limited to, records or reports, laboratory results, and citation to the sources of information.

Plagiarism. Plagiarism is defined as presenting someone else’s work, including the work of other students, as one’s own. Any ideas or materials taken from another source for either written or oral use must be fully acknowledged, unless the information is common knowledge. What is considered “common knowledge” may differ from course to course. A student must not adopt or reproduce ideas, opinions, theories, formulas, graphics, or pictures of another person without acknowledgment. A student must give credit to the originality of others and acknowledge indebtedness whenever: directly quoting another person’s actual words, whether oral or written; using another person’s ideas, opinions, or theories; paraphrasing the words, ideas, opinions, or theories of others, whether oral or written; borrowing facts, statistics, or illustrative material; or offering materials assembled or collected by others in the form of projects or collections without acknowledgment

Interference. A student must not steal, change, destroy, or impede another student’s work, nor should the student unjustly attempt, through a bribe, a promise of favors or threats, to affect any student’s grade or the evaluation of academic performance. Impeding another student’s work includes, but is not limited to, the theft, defacement, or mutilation of resources so as to deprive others of the information they contain.

Violation of Course Rules. A student must not violate course rules established by a department, the course syllabus, verbal or written instructions, or the course materials that are rationally related to the content of the course or to the enhancement of the learning process in the course.

Facilitating Academic Dishonesty. A student must not intentionally or knowingly help or attempt to help another student to commit an act of academic misconduct, nor allow another student to use his or her work or resources to commit an act of misconduct.

Right to revise. The instructor reserves the right to make changes to this syllabus as necessary and, in such an event, will notify students of the changes immediately.

Grievance Procedures. UIC is committed to the most fundamental principles of academic freedom, equality of opportunity, and human dignity involving students and employees. Freedom from discrimination is a foundation for all decision making at UIC. Students are encouraged to study the University’s Nondiscrimination Statement. Students are also urged to read the document Public Formal Grievance Procedures. Information on these policies and procedures is available on the University web pages of the Office of Access and Equality.

Recording and Copyrights. Audio/Video Recording: To ensure the free and open discussion of ideas, students may NOT record classrom lectures, discussion and/or activities without the advance written permission of the instructor, and any such recording properly approved in advance can ONLY be used solely for the student's own private use.

Copyrighted Material: All material provided through this web site is subject to Copyright and Fair Use laws. This applies, but is not limited, to class/recitation notes, slides, assignments, solutions, project descriptions, etc. You are allowed (and expected!) to use all the provided material for PERSONAL use. However, you are strictly prohibited from sharing the material with others in general and from posting the material on the Web or other file sharing venues in particular.

Course Evaluations. Because student ratings of instructors and courses provide very important feedback to instructors and are also used by administrators in evaluating instructors, it is extremely important for students to complete confidential course evaluations online known as the Campus Program for Student Evaluation of Teaching evaluation. You will receive an email from the Office of Faculty Affairs inviting you to complete your course evaluations and will receive an email confirmation when you have completed each one.

For more information, please refer to the UIC Course Evaluation Handbook.

Results for the “six core questions” will be published on the UIC course evaluation website.

Acknowledgement and Share/Reuse Information

Adpated from Prof. Rob Miller's (and collaborators) User Interface Design & Implementation course at MIT. Prof. Debaleena Chattopadhyay is responsible for all the modifications made. This work is licensed under CC BY-SA 4.0.