Principles and practices of HCI applied to test-driven, mobile-first web design and
development. Taught by Professor Karl Stolley, Spring 2022.
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
responsive web design and development, with special attention to the challenges of
designing touch-screen interfaces. Students will learn test-driven development methods
supported by prototyping, rapid iteration, version control, and low-stakes user-testing.
The design principles the course will emphasize include color, rich web typography, and
responsive grid-based page layout, executed in modern CSS (Flexbox and Grid).
Accessibility, progressive enhancement, and inclusive design will be treated as guiding
principles throughout the course. Student work is organized around active participation
in electronic discussions, and three major projects, completed both individually and in
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,
Design and build a user-centered website applying HCI methods and good principles of
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
Students completing this course will learn to:
Describe the diversity of information system users and tasks, and their impact on
Describe the core concepts, applicability, and cost benefits of user-centered design
Demonstrate how user-centered concerns can be incorporated into system development
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
Clark, Josh. Designing for Touch. New York: A Book Apart, 2015. $15
(eBook), ISBN 9781937557287
Jehl, Scott. Responsible Responsive Design New York: A Book Apart,
2014. $15 (eBook), ISBN 9781937557164
Kalbag, Laura. Accessibility for Everyone. New York: A Book Apart,
2017. $15 (eBook), ISBN 9781937557614
Krug, Steven. Don’t Make Me Think, Revisited: A Common Sense Approach to Web
Usability, 3rd ed. Berkeley, CA: New Riders, 2014. $36 (eBook), ISBN
Samara, Timothy. Making and Breaking the Grid, 2nd ed. Beverly, MA:
Rockport Publishers, 2017. $37 (paperback), ISBN 9781631592843
A blank, bound sketchbook of 100 pages or more
A wide-tipped black marker, like a Sharpie
An email account that you check daily
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 during and outside of class.
A GitHub account (see note about anonymity in the course technology policy below)
A personal computer, running a Unix-based operating system, such as Linux, BSD, or
MacOS. A Linux running virtualized on Windows is fine, but Windows itself is not—you
will need access to a variety of dev tools that are hard to come by on Windows. Your
computer should also have the following software installed:
A plain-text editor capable of syntax highlighting and configured for
UTF-8/Unicode character encoding and Unix-style line endings (LF), entabbed with
spaces (two spaces per tab)
Firefox Developer Edition (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)
I make it my very top priority to create courses that are welcoming and accessible to all
students. I will make additional reasonable accommodations for students with documented
disabilities. In order to receive 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 - 3F3-1 (third floor, in the northwest corner across from the
Student Health and Wellness Center). 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 successfully participate in and complete the class should contact me privately
at the start of the semester or as a difficulty arises. That includes difficulties with
housing, internet access, and anything that otherwise compromises your sense of safety,
security, and support—especially if it impacts your ability to complete this class.
Please reach out.
I will adjust methods, materials, or deadlines as necessary to ensure equitable
participation for all students.
Mental Health and Well-Being
It’s no secret that attending school while managing and balancing other life concerns is
incredibly stressful and at times completely overwhelming. And that’s when there’s not a
global pandemic raging, disrupting all aspects of our lives. All of us, no matter how
outwardly strong, successful, or put-together we might appear, struggle sometimes.
Illinois Tech provides all students with a variety of free counseling services. I
encourage all students to seek support and help from the Counseling Services unit of
the Student Health and Wellness Center. Students facing a crisis situation, especially
outside of the Counseling Services unit’s operating hours, may wish to call the National Suicide Prevention Lifeline at
1-800-273-8255. The Student Health and Wellness Center maintains a list of other
emergency resources worth bookmarking.
Illinois Tech’s Policy on Sexual Harassment and Discrimination
Illinois Tech prohibits all sexual harassment, sexual misconduct, and gender
discrimination by any member of our community. This includes harassment among students,
staff, or faculty. Sexual harassment of a student by a faculty member or sexual
harassment of an employee by a supervisor is particularly serious. Such conduct may
easily create an intimidating, hostile, or offensive environment.
Illinois Tech encourages anyone experiencing sexual harassment or sexual misconduct to
speak with the Office of Title IX Compliance for information on support options and the
You can report sexual harassment electronically at iit.edu/incidentreport, which may be completed
anonymously. You may additionally report by contacting the Title IX Compliance
Coordinator, Virginia Foster, at email@example.com, or
the Deputy Title IX Compliance Coordinator, Molly Fleck, at firstname.lastname@example.org.
For a comprehensive list of resources regarding counseling services, medical assistance,
legal assistance and visa and immigration services, you can visit the Office of Title IX
Compliance website at https://www.iit.edu/title-ix/resources.
Attendance & Participation
Your active participation on Basecamp is required both for your own success and for the
success of the class as a whole. Attendance at live class meetings does not impact your
participation grade, but I do hope that everyone who is able joins those meetings, either
in person or via Google Meet.
I do not squander students’ time with reading quizzes (I am way more interested in giving
you the opportunity to ask questions about the reading), but I do assign a lot
of reading. Seriously, ask around. And I expect you to be prepared to discuss that
reading on the Reading Discussions board on Basecamp.
In your reading-discussion posts, be sure to highlight your questions about the readings
or on topics related to the readings. If you have no questions, you probably didn’t read
very carefully. None of the assigned readings are easy. If you genuinely have no
questions, you had better dazzle us all with your fresh insights and superior analysis of
the readings. Under no circumstance should you post a summary of the reading. No one
wants to read your summary. And no one will respond to it either. Neither will the
instructor. So ask questions.
Beyond the reading discussions, there will be weekly threads on the Questions & Answers
board, too. Take advantage of those. Any question related to the course, however
tenuously, is fair game. You are also 100% welcome and encouraged to start your own
discussion thread if you have a large or complicated question—or just don’t want to risk
your question getting lost in the shuffle.
Additionally, you should be posting to Basecamp about your individual and group progress,
questions, and challenges as you complete the course’s major projects. You are also
responsible for responding to the work and questions of others in the class. Yes, you
might not yet be an expert in this material (that’s why you’re in the class, right?), but
you have a lot to offer in terms of pointing to readings, course videos, or just spotting
typos and goofs that make their way into the code of every developer, regardless of
experience. Learning happens through discussion, not by sitting quietly and feeling
Students intending to earn an A for Participation should be posting substantively on
the Discussion & Announcements Basecamp four times or more per week (64+ posts over the
sixteen-week semester), with contributions appearing multiple days per week, all
semester long. Students earning a B will post three to four times (at least 48 posts
for the semester), and students earning a C will post two times, every week (at least
32 posts). Fewer than an average of two discussion contributions per week will result
in a failing Participation grade.
Participation points are incredibly easy points to earn, and likewise incredibly easy
points to miss out on. They will be tallied at three checkpoints this semester:
sometime around Week Four (20% of the total participation points), sometime around Week
Nine (40% of the total participation points), and sometime around Week Fourteen (the
remaining 40% of the total participation points; 20% + 40% + 40% = 100%).
Sometime around… means plus or minus one week. The exact date will not be
announced ahead of time, and point-totals for the percentage in question will not be
adjusted after the tally. So if you’re the kind of student who’s only motivated by
points, there’s your reason to stay on top of Basecamp. For everyone else, good
discussions rely on both timeliness and interesting content. No one wants to be
notified about, let alone read, a random post about stuff we read seven weeks ago, and
no one posting such a thing will earn credit for it, either.
Class Meeting Expectations and Etiquette
If you are able to attend our class meetings on the Mies Campus, here are some
important but simple guidelines:
In keeping with the University’s
masking policy, everyone in the classroom, including all students and the
instructor, must wear a mask, regardless of vaccination status. Changes to
University policy will be reflected here.
If you are sick or even just think you’re sick, stay home. You can
watch class live via Google Meet or later on YouTube. Stay home. There is no penalty
for missing an in-person class, and definitely no reward for trying to be heroic and
showing up if you’re unwell. Seriously, stay home. Your health—and the health of
those around you—is the top priority. So again: stay home. But do check in with me so
that you keep on track as you are able.
If you are able to attend our class meetings via Google Meet, or if our class has any
online-only meetings, here are just a few simple guidelines:
You do not have to broadcast your camera. For any reason. The choice
is yours. It’s helpful for me to be able to glance at faces and see how at least some
of you are reacting, but it’s totally up to you whether to broadcast your camera or
Please mute your mic if you’re not speaking. Self-explanatory. Muted
mics cut down on ambient noise and occasional echo that can be real problems for
people who have hearing difficulties. I encourage you to turn on the live closed
captioning when we’re in Google Meet, too.
Neither you nor our Meet room will appear in class videos. I will
always teach class with our Google Meet room on a second screen that will not be
recorded. If you opt to speak, your voice may be in the video, of course. But you
also have the option of messaging in the Meet room by text; I will keep an eye on
that as class is going, in case you wish to raise questions, drop a corny joke, or
ask for clarification that way.
If my Internet connection fails, I will still record and post class.
That kind of thing does happen: sometimes before class, sometimes during. If I’ve got
Internet troubles, I’ll try post to Basecamp somehow and let everyone know what’s
All class meetings will be posted to YouTube. You’ll be able to
watch class on your own time if you’re unable to attend the live class. I invite
students to contribute markers to index the videos on YouTube, too, to help anyone
who needs to go back and find and rewatch something. Again, I will take great care
not to accidentally record our chat room. I will share a playlist link for all of our
videos on Basecamp and on the course website.
All major projects for this course will be submitted initially in draft form via Basecamp
for instructor and peer feedback.
If you do not post a draft by the stated deadline for each project, you will
receive a zero for the entire project. Because drafts are by their nature
imperfect and incomplete, there is no excuse for not at least posting whatever you have
by the deadline. Learn to start early and work as you have time. You will get feedback
from me and from your peers at the draft stage—at which point you’ll actually have time
and opportunity to act on that feedback. Put simply, draft submission is in many ways
more important than the final-project submission. Plan accordingly.
Some project deliverables, such as final versions of projects and critiques of team
members, will be submitted via email. See each major project’s description for exact
submission requirements and instructions.
Weekly work should be pushed to GitHub and posted about on Basecamp, as described in the
weekly work’s instructions.
All work must be submitted before the date and time specified in each project
description. Weekly work, including reading discussions, is due by the start of the first
class meeting each week. The deadlines in this class, including for draft work,
are no different from exam dates in classes that have exams. I expect you to do
your best to treat them accordingly.
If you believe you are in danger of missing a deadline, you must contact me ahead of the
deadline so we can work something out. To receive an extension, you must have some work
completed to show at the time you request an extension. If you have nothing to show, you
will not receive an extension. If the deadline has already passed, you will likewise not
receive an extension.
Project One: 20 points
Project Two: 20 points
Project Three: 15 points
Production Problems: 25 points
Basecamp Participation: 20 total points, tallied at three Checkpoints:
Checkpoint One (~ Week Four): 4 points (20% of 20 total points)
Checkpoint Two (~ Week Nine): 8 points (40% of 20 total points)
Checkpoint Three (~ Week Fourteen): 8 points (40% of 20 total points)
Everybody knows that professors sit atop a mountain of extra-credit points, just
waiting to distribute them to students who screwed up when it came time to earn the
run-of-the-mill credit in the class. As a bonus, that extra credit is
just extra, extra sweet. Way better than just doing the actual credit-bearing work of
the class. Amiright?
Bad news: there is no extra credit in my classes. Period. Tell your
friends: Stolley is a big mean jerk, keeping all of that extra credit for himself. Like
he even needs it.
If you’re the kind of troubled student who really loves extra credit that much, create
your own: consider yourself as having a zero-point, failing grade in this class. Tough
news on the first day, I know. Your grade is in real, serious trouble. Is there
anything you can do to possibly pass? Yes! It’s your lucky day: There are 100 points of
“extra” credit for you to earn, all enumerated above: three projects, production
problems, and participation. You can do it, champ! Earn those points!
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
E - Student has not turned in all required components of a project, or student has
not turned in work, including drafts, by the deadline without contacting the instructor
ahead of time.
Technology is an essential part of this class. You are just as responsible for learning
to configure, command, and troubleshoot various technologies as for any other course
content. Difficulty with technology is not an acceptable excuse for being unprepared for
class or for submitting late, incomplete, or substandard work.
If you are having trouble with technology or any other material covered in this course,
it is your professional responsibility to find supplemental materials to troubleshoot and
solve your problems. Ask questions on the weekly Q&A threads on Basecamp, too. Just
make use of the search feature on Basecamp first: it’s entirely possible that someone has
experienced your same difficulty and gotten an answer from someone else in the class or
the instructor. Don’t earn yourself a reputation for asking the same question that’s
already been asked and answered. And yes: you absolutely should monitor the Q&A
threads. You’ll find students asking questions that might not have even occurred to you.
You are discouraged in the strongest possible terms from using Windows in this class.
Running Windows in a development class is like showing up to a cooking class with
an Easy-Bake Oven. Windows is
not suited to professional development, other than perhaps developing Windows
applications. This class uses professional-grade, POSIX-compliant environments and tools.
If your operating system doesn’t support something as basic and ancient as the
ls command, you need to get an
operating system that does. Immediately.
If you think you know better and opt to run Windows, you are 100% on your own when it
comes to getting the required tools and technologies to run on your machine. And even if
you’re successful at that, know that by continuing to use Windows, you are hamstringing
your education and growth as a developer—as well as your future career prospects.
Dual-boot into or at least virtualize a POSIX-style operating system.
Git and GitHub
We will be running a number of important tools from the command line in this class.
That includes Git. You must make all commits and manage branches, etc. from the command
line. It is neither good nor acceptable professional practice to use GUI-based Git
software or to make commits directly on GitHub itself. Your primary interactions with
GitHub will be pushing, fetching, and pulling via the command line.
Speaking of GitHub, 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
similar account. That being said, 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.
All work you submit for this course must be your own original effort. That includes all
code, scripts, stylesheets, data structures, and visual designs.
Any use of open-source code libraries and media not of your own making, as well as
summarizations and quotations of text, should be clearly cited as legally and ethically
warranted and rhetorically appropriate. Accessing, storing, disseminating, and otherwise
making use of data from third-party sources must conform to the source’s terms of
service, licensing, and other applicable 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 well before the work is
due to discuss it.
The consequences of academic dishonesty are severe. Any student found in violation of the
Code of Academic Honesty will earn a zero on the project in question, and may be subject
to expulsion from this course with a failing grade. I report all incidents of academic
dishonesty to the Chair of the Information Technology and Management Department, who may
take additional disciplinary action, including reporting violations to the Dean of the
College of Computing as well as the offices of Undergraduate or Graduate Academic
Office hours via Basecamp Chat or Pings on Tuesdays, 4pm to
5pm Central Time (America/Chicago), or by appointment or chance. If you’d like to
audio or video chat, we can of course do that, too. Just message me first. I’m always
signed into Basecamp and closely monitor my notifications. Message or email any time—I
make students a priority, and I will respond as soon as I am able.
Anthea Gonzalez (an-THAY-ah GON-za-lez), Co-terminal Student in Information
Technology and Management, Cyber Forensics and Security