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.
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.
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, supported by version control.
- Write useful, descriptive messages attached to granular commits in a version control system.
Books and Technologies
My policy for assigning books: they are all required in the edition indicated; the total retail pricetag for the entire course should be less than $100 (this one is $84 on the high end, assuming you opt for the electronic editions); and each book should be worthy of a place on your bookshelf or electronic device of choice long after the class has ended. My aim is to help you build your professional library, while also being sensitive to your personal finances.
- Clark, Josh. Designing for Touch. New York: A Book Apart, 2015.
- Jehl, Scott. Responsible Responsive Design. New York: A Book Apart, 2014.
- Krug, Steven. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability, 3rd ed. Berkeley, CA: New Riders, 2014.
- Lupton, Ellen, ed. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students. New York: Princeton Architectural Press, 2014.
- Wroblewski, Luke. Mobile First. New York: A Book Apart, 2011.
- Other readings linked from the course calendar and otherwise made available electronically
Required Materials and Technologies
- A blank, bound paper sketchbook of 100 pages or more
- An email account that you check regularly
- A Dropbox account
- A browser- or cloud-based bookmarking scheme to aid your information management
- A Basecamp account (invite will arrive via email); Basecamp, not Blackboard, will be where we coordinate our work and communication in- and outside of class.
- A GitHub account (see note about anonymity in the course technology policy below)
- The domain of your name (e.g., karlstolley.com belongs to the instructor) or, if privacy is a concern, the domain for your public alias
A personal computer, ideally Unix-based (Linux, BSD, OS X), with the following
- A plain-text editor capable of syntax highlighting; set up to use UTF-8/Unicode character encoding and Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
- Firefox Developer Edition (free)
- Git (free)
- Node.js (free)
- Image-editing software (such as the free and open-source GIMP)
- As many different browsers as your operating system supports (e.g., Chrome, Opera, Firefox, Vivaldi; all free)
- Project 1: 20pts
- Project 2: 20pts
- Project 3: 20pts
- Weekly Production Problems: 20pts
- Basecamp Participation: 20pts
- TOTAL: 100pts
A = 90+ pts; B = 80-89pts; C = 70-79pts; D = 60-69pts; E =< 59 pts
- 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.
All major projects for this course will be submitted via email to the instructor, at email@example.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.
I do not accept late work. All work must be submitted before the date and time specified in each project description. Weekly work is due before the start of the first class meeting each week.
Your active participation in class and especially in online discussions and chats on Basecamp 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 on Basecamp.
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.
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 firstname.lastname@example.org
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.