Human-Computer Interaction and Web Design

Course Description

From the Catalog: Students in this course will learn the importance of human-computer interaction design and the effectiveness of user-centered design. The course will cover a survey of methods frequently used by the HCI profession, such as usability testing and prototyping, as well as general design principles and how to use design guidelines. A particular emphasis will be placed on usability for Web site engineering, and students will apply knowledge from the field in the design and construction of user-centered Web sites.

Extended Description: Additionally, this course favors a mobile-first approach to web design and development, with special attention to the challenges of designing touch-screen interfaces. Students will learn development methods based on prototyping and rapid iteration, supported by version control and low-stakes user-testing. The design principles the course will emphasize include color, material design, rich web typography, and responsive grid-based page layout. Accessibility, progressive enhancement, and thoughtful, thoroughly researched use of edge technologies and polyfills will be treated as guiding techniques throughout the course. Student work is organized around projects of varying size and scale, emphasizing the course’s hands-on, theory-grounded approach to web design and development.

Course Outcomes

Students completing this course will learn to:

• Describe the diversity of information system users and tasks, and their impact on design.
• Describe the core concepts, applicability, and cost benefits of user-centered design.
• Demonstrate how user-centered concerns can be incorporated into system development life cycles.
• Explain the need to evaluate system usability.
• Describe and apply general principles of design.
• Describe and execute touch-friendly, mobile-first responsive web design.
• Understand and apply core theories from human-computer interaction to web design and development.

Course Objectives

At the conclusion of this course, successful students will be able to:

• Recall, describe and apply principles of user-centered design.
• Conduct task analysis & apply the information to user-centered design.
• Evaluate user interface designs with human subjects.
• Recall, explain, and apply the design principles of alignment, contrast, proximity, and repetition.
• Design and build a user-centered website applying HCI methods and good principles of design.
• Apply color and typography in web design to optimize the interface.
• Engage in agile, iterative web design and development individually and in teams, supported by version control.
• Write useful, descriptive messages attached to granular commits in a version control system.

Books and Technologies

Grading Policy

• Project 1: 20pts
• Project 2: 20pts
• Project 3: 20pts
• Production Problems: 20pts
• Basecamp Participation: 20pts
• TOTAL: 100pts

A = 90+ pts; B = 80-89pts; C = 70-79pts; D = 60-69pts; E =< 59 pts

Grading Criteria

• A - Student has turned in all required components of a project, the work is exceptional in quality, and reflects the student’s dedication to adjusting the project to his or her own interests.
• B - Student has turned in all required components of a project, and the work is exceptional for undergraduate work.
• C - Student has turned in all required components of a project and submitted work that is acceptable as undergraduate level.
• D - Student has turned in all required components of a project, but the work is below undergraduate level.
• E - Student has not turned in all required components of a project.

Assignment Submission

All major projects for this course will be submitted via email to the instructor, at karl.stolley@gmail.com, as will your initial Production Problem (thereafter, the instructor will directly check your fork of the Production Problems repository for your work). Emails should not include email attachments, but rather URLs pointing to your project’s Git repository or, for certain assignments as indicated, Dropbox Share URLs. Examples will be demonstrated in class.

All HTML in project and Production Problem submissions must pass validation with the W3C HTML validator. Any work whose HTML does not validate will receive a zero-point, failing grade. In the unlikely event that you discover a validation error or warning that is a genuine bug in the validator, you must acknowledge that bug in the email that accompanies your project, and point to the relevant documentation, such as specifications or an existing reputable bug report, that your source is in fact correct. Get in the habit early of validating your HTML each time before you commit your work to Git.

Late Work

I do not accept late work. All work must be submitted before the date and time specified in each project description. My deadlines, including for draft work, are no different than test dates in classes that have tests. Treat them accordingly. Weekly work is due before the start of the first class meeting each week.

Participation

Your active participation in class and in online discussions and chats is required both for your own success in the class, and for the success of the class as a whole. I do not give reading quizzes, but I assign a lot of reading. And I expect you to be prepared to discuss that reading, especially on Basecamp. A participation grade of A means you're posting an average of 3 or more times per week, and that your posts include good questions. A grade of B means you're posting 1-2 times a week. A C is a post per week, and anything less than that is a failing, zero grade for participation.

Course Technology Policy

Technology is an essential part of learning and day-to-day living. It is therefore essential to this class. You are just as responsible for learning to command various technologies as for any other course content. Difficulty with technology is not an acceptable excuse for being unprepared for class or late with assignments.

If you are having trouble with technology or any other material covered in this course, it is your professional responsibility to do research beyond the resources and guidance provided in class and find supplemental materials that work for you. I also encourage all students to meet with me during my office hours or at another arranged time. I prefer that you contact me via Basecamp Ping, email, or GChat well in advance of assignment and project deadlines.

Note that coming to class with broken or malfunctioning work is far better than showing up with nothing but an excuse like “I just didn’t get it.” For most of the semester, it is expected that you’ll show up with broken work. When you’re learning, effort is more important than perfection. Just be sure to put in the effort early, and not the night before a project is due.

Also, I have asked you to sign up for a GitHub account for this class. Note that GitHub accounts are public, as are most social-type accounts. To protect your privacy you are certainly allowed to use a pseudonym/alias for GitHub and any other account. You may also push to repositories that you keep private, so long as you add the instructor as a collaborator, for grading purposes. At the same time, you might want to think about the high value of establishing GitHub and other accounts under your own name or professional alias. Public accounts where you conduct yourself professionally might well be an asset to your online presence, improving the search results that future schools or employers turn up when they look for you on Google and elsewhere.

Academic Integrity

As with any course at IIT, you are expected to uphold the Code of Academic Honesty as described in the IIT Student Handbook. All work for this course must be your own original effort, including print and digital page design and computer code. Summarizations and quotations of text, as well as any use of open-source code libraries and images not of your own making, should be clearly cited as legally and ethically warranted and rhetorically appropriate. Access, storage, dissemination, and other use of data from third-party sources must conform to the source’s terms of service, licensing, and other relevant legal and ethical restrictions.

If you are at all uncertain as to whether you are submitting work that in whole or in part may violate the Code of Academic Honesty, please contact me immediately and before the work is due. The consequences of academic dishonesty are severe. Any student who violates the Code of Academic Honesty will be subject to expulsion from this course with a failing grade, and I will report the student to the Dean of the School of Applied Technology, who may take additional disciplinary action, including reporting violations to the relevant offices of Undergraduate or Graduate Academic Affairs.

Special Needs Statement

I place a very high value on developing courses that are welcoming and accessible to all students. I will make additional reasonable accommodations for students with documented disabilities. In order to receive formal accommodations, students must obtain a letter of accommodation from the Center for Disability Resources. The Center for Disability Resources is located in IIT Tower, 3424 S. State Street - 1C3-2 (on the first floor). Contact the Center by telephone at 312-567-5744, by TDD at 312-567-5135, or via email at disabilities@iit.edu

Students who have any difficulty (either permanent or temporary) that might affect their ability to perform in class should contact me privately, either in person or electronically, at the start of the semester or as a documented difficulty arises. Methods, materials, or deadlines will be adapted as necessary to ensure equitable participation for all students.