Stu (Lifted) is copyright of Pixar Inc.

Electronic Visualization Lab Home

CS 422 @ UIC
User Interface Design and Programming

Spring 2015
Instructor: G.Elisabeta Marai (gmarai@uic.edu)
Mon Wed Fri 10am-10:50am
BSB 319




Class Information

Collaboration Policy



Piazza Q&A






Make a Website

Make an Interactive Website

Class Information


According to this chart, the prereqs for cs422 are cs440 (Sw Eng) and cs342 (Sw Design). For this edition of the course, students will be expected to do some web programming (HTML, CSS, PHP, JQuery). The reason is, it's the easiest way we know to program a user interface. If you are not familiar with web programming, you may still take the class. Be prepared, however, to invest a bit of learning effort on your own in the first two weeks, using the tutorials linked under Resources.

While the TA is willing to answer a few web programming questions, TA hours are a valuable resource that we have to devote to teaching user interface design, not teaching web programming. If stuck on a web programming issue, it is fine to use Piazza to ask your question; classmates who answer helpfully such questions will get bonus points on their grade.

2:: Textbooks, Readings and Class Participation

The required textbooks for this class are:

Students are expected to complete each required reading prior to the class meeting it is related to and come prepared to fully participate in class discussions involving the paper/chapter. To help incentivize participation, we require you to:
  • post (using Piazza, watch for instructions) two “discussion items” for each lecture grouping which contains readings (these may be on the same or different papers/chapters if more than one is assigned),


  • post (using Piazza) a short written summary (3-8 sentences) of each paper/chapter.

“Discussion items” can be something you found particularly interesting or noteworthy in one of the readings, a question you would like to discuss in class, a point you disagree with, or a constructive comment on someone else’s posting. All postings must be submitted before class to be counted for credit.

Posts will be graded as pass/fail and two of each will not be counted in the final grade (and so may be skipped without penalty). Accommodations can be made for an extended illness or other excused absence that causes you to miss more than two of these assignments, but please contact the instructor as early as possible in that case.

Students who skip more than two readings (as well as students who are repeatedly late for class) are subject to a Fairness Penalty, in which they are required to prepare a short 5-minute entertaining skit for each reading they missed, for the next class meeting (i.e., reading missed on Wed, skit due on Fri; if the student can't make the next class, the skit gets rescheduled). The skit must cover a technical point from the missed reading, and be amusing (the student may sing a ballad, impersonate Oprah, tell a relevant story from their experience etc.). Skits are a lot of fun for the class, but are a lot more work than reading the chapter and posting a couple of discussion points and a summary. :-)

The class will include several oral presentations from students. These may take the form of very short presentations (1 minute), skits on an entertaining topic related to UI design (5 minutes), or design presentations for final projects and/or assignments (10 minutes or more).

3:: Staff

G.Elisabeta Marai
Email:   gmarai@uic.edu
Office Hours: Wed 10:50am--12pm, in the EVL lab (ERF 2032E)

Graduate Teaching Assistant:
Matteo Palvarini
Email: mpalva2@uic.edu
Office Hours: Wednesdays 11am to 1pm, in 803 SEO, by appointment only.
Please, drop me an email at least one day in advance if you plan to come. As always, I will be available for quick questions right after each class.

4:: Course Grade

The course grade will be decided based on the following factors:

  • Class participation (10%)
  • Assignments (40%)
  • Quizzes (20%)
  • Final project (30%)
Dr. Marai grades on a curve, so you will be graded against the overall class performance. A grade within a standard deviation of the class mean is a pass, anything else is not. We will share the grade histogram for the entire class once an assignment is graded, so that you get a sense of how you are doing with respect to the rest of the class.

5:: Homework Assignments and Final Project

There will be several assignments and in class exercises, plus a final project; most will be design problems, and most will also require programming. Your working solution should be handed in on-line by 11:59 PM on the due date, or the deadline announced; the exact handin procedure will be in the assignment handout. If approached sensibly (i.e., working steadily), you will have sufficient time for each and every one assignment. Good time management will make this course much more enjoyable. The estimated workload is up to 10 hours per week, depending on your programming proficiency.

The final project is perhaps the most rewarding assignment in cs422. Final projects are two or thre-person projects, to be proposed and completed throughout the term. The submitted work must be the student's (or the group's) own work. If working in a group, each member of the team will receive the same grade; the group is responsible for making a fair division of work between its members. It is important that you keep the final project in mind throughout the entire semester. Groups that form and research ideas for topics early will have more time to realize their goals (and an easier time, too) than a group that devises their topic on the night before the project proposal is due.

6:: Absences, Late and Extra Credit Policy

If an absence is unavoidable, you are responsible for making arrangements to ensure that your assignments are turned in on time. You are also responsible for obtaining the materials passed out and the information announced during the missed class. In case of extraordinary circumstances (hospitalization, family emergency) you should contact the course staff as soon as possible so that we may arrange an extension for an assignment or schedule a make-up exam prior to the due date. Group assignments are due on time. To quote from Leilah Lyons, you can only miss a class in which you are due to present either individually or as part of a group if "you can present your own death certificate." :-) Note that many class meetings feature in-class exercises; don't skip class, or you will miss being assigned to a group and not have a solution to present the next class.

We realize that sometimes you may have schedule conflicts -- an exam on the day your assignment is due, etc. Unfortunately, we can't give extensions for academic overload, but in this course we give you three (3) free late days which you can use over the course of the semester to accommodate schedule crunches. Your late days will be optimally assigned by us at the end of the semester.

Other than that, you do have the option of handing an assignment (as long as it is not a group assignment) in late -- with a penalty. If you are forced to hand an assignment in after the due date, your grade will then be subject to a penalty, depending on the lateness of your handin. A percentage of the score you received will be deducted as follows:

Handin By: Penalty:

2 days after original deadline


4 days after original deadline


More than 4 days late

No Credit

The above are guidelines. Consult your assignment handouts and/or the cs422 web pages for specific deadlines for each assignment; they may be different for each assignment. And please be aware that these deadlines are strict: a handin that's ten minutes late is still late.

Remember that you have three (3) free late days which you can use over the course of the semester to accommodate schedule crunches. You do not need to ask for the staff's permission to use your free late days. Simply state how many days you are using in the body of the submission email. Your late days will be optimally assigned by us at the end of the semester.

Sometimes you may think that you have been graded unfairly. Please take this up with the TA who graded your assignment. If there is still a problem, Dr. Marai is the final word in grading and will be happy to hear what you have to say. Also, once the grades have gone out, you will only be given one week to lodge a protest. In the past, students have tried to get points back on all of their assignments in the last week of classes, and though we would like to promote fair grading, we would like to dismiss malintentioned hassling. Our first priority is fairness (both to us and to you), so please do complain about grades if you don't agree with them.

There is ample room for bells, whistles, and other credit-garnering efforts on the part of ambitious designers and programmers. You are most welcome to get creative (we love that!), as long as it does not make you late. Special Ninja skills like D3, Processing, or WebGL come always handy; so if you have a few days to spare at some point, why not go ahead and teach yourself how to use a really cool library? Impress your friends, do something really awesome for your final project.

7:: Getting Your Questions Answered

There are two ways of getting assignment-related questions answered and problems solved. You can talk to the course staff during office hours or send questions to Piazza. Assignment-related questions should be addressed to the TAs; lecture-related questions should be addressed to Dr. Marai. You may not ask the TAs questions when they are not on hours or call the TAs at home. Also, you should not e-mail the TAs with questions specific to your implementation of the assignment -- those kind of questions should be brought to a TA on hours. However, if there are no TA hours which you can attend, let the graduate TA know about this and we will try our best to accommodate you.

If you have a question that won't be of interest to the class at large, you can mail the the course staff about it directly. Please use good judgment when doing this and consider how urgent your problem is so that the course staff won't be swamped. If it's not that urgent, try Piazza first. In general, the course staff will check Piazza daily and will respond as soon as their schedule allows.

If you have administrative questions, or if you disagree with the TA's grading, discuss this first with the graduate TA. You can either show up for TA hours or email the graduate TA directly.

The staff office hour listing will be available from the cs422 home page and TA hours will be held in general in the TA's office. When TA hours are rescheduled or exceptions are made, these will be announced on the cs422 web page and on Piazza. Do not expect the TAs to bring up your code on screen and help you debug :-). This is left up to their discretion, and is not part of their job description.

Aside from the regular office hours, you may request additional appointments with the course staff; however, these appointments must be made at least a day in advance.

8:: Class Conduct

Professional behavior is expected from everyone. Please mute your cell phone during class.  Phone rings are disruptive to lectures because they interrupt everyone's train of thought.  It is apparently a cs422 tradition that cellphone-rings signal pop quizzes :-\. The course laptop policy is covered during the first class meeting.

9:: 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 be used solely for the student's own private use.

Copyrighted Material
All material provided through this web site is subject to copyright. This applies 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.

10:: Students With Disabilities

If you have a disability for which you are or may be requesting an accommodation, you are encouraged to contact both your instructor and Disability Resources and Services, as early as possible in the term. DRS will verify your disability and determine reasonable accommodations for this course.

11:: Finally...

cs422 is a continually evolving course which has been updated again this year. Most of the changes were made in response to comments from last year's students. As such we are bound to have our own `bugs' hiding in the corners. Please read everything we hand out very carefully. If there is something which you do not understand, or which is not stated very clearly, please let us know so we can fix it right away.

This applies to the material discussed in class as well. Give us constructive criticism on all aspects of the course. The more feedback there is, the better we can make this course for you as the semester progresses, and the better we can make it for the next UIC UI design students!

We just went through a lot of heavy talk. Please take all of it seriously, but also remember that we're not trying to scare you: we are here to help you! We're just clearing preliminaries and establishing the ground rules. With that done, we hope you'll have as much fun as we did in our introductory UI design classes.