forked from dkriegls/itmd-362-spring2018
/
syllabus.html
326 lines (325 loc) · 16.7 KB
/
syllabus.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en" id="policies">
<head>
<meta charset="utf-8" />
<title>ITMD 362: Human-Computer Interaction and Web Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="icon" type="image/x-icon" href="http://web.iit.edu/sites/web/themes/iit_web/favicon.ico">
</head>
<body>
<div id="page">
<header id="header">
<h1><small>ITMD 362</small> Human-Computer Interaction and Web Design</h1>
<p class="tagline">
Principles and practices of HCI through a mobile-first approach to web design and development.
Taught by <a href="#instructor">Professor Daniel Krieglstein</a>. Course developed by IIT Professors
<a href="https://humansciences.iit.edu/faculty/karl-stolley">Dr. Karl Stolley</a>, & Daniel Krieglstein.
</p>
<nav id="navigation">
<ul class="nav">
<li id="nav-cal"><a href="index.html">Calendar</a></li>
<li id="nav-pro"><a href="projects.html">Projects</a></li>
<li id="nav-pol"><a href="#">Syllabus</a></li>
<li id="nav-lnk"><a href="index.html#links">Links</a></li>
</ul>
</nav>
</header>
<main id="content">
<article class="primary">
<h2 class="label">Syllabus</h2>
<section id="general">
<h3>Course Catalog Description</h3>
<p>
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.
</p>
<h3>Course Outcomes</h3>
<p>
Students completing this course will learn to:
</p>
<ul class="indent">
<li>Describe the diversity of information system users and tasks, and their impact on design.</li>
<li>Describe the core concepts, applicability, and cost benefits of user-centered design.</li>
<li>Demonstrate how user-centered concerns can be incorporated into system development life cycles.</li>
<li>Explain the need to evaluate system usability.</li>
<li>Describe and apply general principles of design.</li>
<li>Describe and execute touch-friendly, mobile-first responsive web design.</li>
<li>Understand and apply core theories from human-computer interaction to web design and development.</li>
</ul>
<h3>Course Objectives</h3>
<p>At the conclusion of this course, successful students will be able to:</p>
<ul class="indent">
<li>Recall, describe and apply principles of user-centered design.</li>
<li>Conduct task analysis & apply the information to user-centered design.</li>
<li>Evaluate user interface designs with human subjects.</li>
<li>Recall, explain, and apply the design principles of alignment, contrast, proximity, and repetition.</li>
<li>Design and build a user-centered website applying HCI methods and good principles of design.</li>
<li>Apply color and typography in web design to optimize the interface.</li>
<li>Engage in agile, iterative web design and development, supported by version control.</li>
<li>Write useful, descriptive messages attached to granular commits in a version control system.</li>
</ul>
</section>
<section id="location">
<h3>Lecture Days, Time, & Place</h3>
<p>Tuesdays 6:25pm to 9:05pm</p>
<p>Robert A. Pritzker Science Center, Room 121</p>
<p>3105 S Dearborn St, Chicago, IL 60616</p>
<p>Or online via IIT Online</p>
</section>
<section id="overview">
<h3>Course Overview</h3>
<p>
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.
</p>
</section>
<section id="schedule">
<h3>Schedule of Topics∕Readings</h3>
<p>See <a href="index.html">Calender</a></p>
</section>
<section id="materials">
<h3>Textbook(s)</h3>
<section id="books">
<p>
The follwing books are required for this course. Retail price tag for the entire course
should be less than $100 and each book should be worthy of a place on your bookshelf or
electronic device of choice long after the class has ended.
</p>
<ul class="indent">
<li>Clark, Josh. <i>Designing for Touch</i>. New York: A Book Apart, 2015.</li>
<li>Jehl, Scott. <i>Responsible Responsive Design</i>. New York: A Book Apart, 2014.</li>
<li>Krug, Steven. <i>Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability</i>, 3rd ed. Berkeley, CA: New Riders, 2014.</li>
<li>Lupton, Ellen, ed. <i>Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students</i>. New York: Princeton Architectural Press, 2014.</li>
<li>Wroblewski, Luke. <i>Mobile First</i>. New York: A Book Apart, 2011.</li>
<li>Other readings linked from the course calendar and otherwise made available electronically</li>
</ul>
</section>
<section id="technologies">
<h3>Technology Requirements</h3>
<ul class="indent">
<li>An email account and personal computer</li>
<li>A Basecamp account (invite will be sent to your IIT email);
<ul>
<li>Basecamp, not Blackboard, will be where we coordinate our work and communication in and outside of class.</li>
</ul>
</li>
<li>
A <a href="https://github.com/">GitHub</a> account (see note about anonymity in the
<a href="#technology-policy">course technology policy</a> below)
</li>
<li>
A personal computer with the following software installed:
<ul>
<li>
A plain-text editor capable of syntax highlighting. Recommended: Notepad++ (Windows),
TextWrangler (mac), or Sublime Text 2 (multi-platform).
</li>
<li>Git or GitHub Desktop</li>
<li>Node.js</li>
<li>Image-editing software (such as the free and open-source GIMP)</li>
<li>At least three different browsers (e.g., Chrome, Opera, Firefox, or Edge)
</li>
</ul>
</li>
</ul>
</section>
</section>
<section id="readings">
<h3>Readings ∕ Videos</h3>
<p>
Readings for the class will be assigned from the textbooks as well as in the form of
on-line readings. On-line resources and videos will be linked from or embedded in a
Blackboard page. It is essential that you do all readings before coming to class on
the assigned date. These materials are a necessary and integral part of the class and
will form the basis for any class discussions on the topic. Specific readings are
assigned by topic on the calender.
</P>
</section>
<section id="notes">
<h3>Course Notes</h3>
<p>
PDF copies of the course lectures will be provided for each student on Basecamp.
This should be useful if you must miss a class. You should be aware that note taking is
encouraged and will help your understanding of the material.
</p>
</section>
<section id="websites">
<h3>Course Web Site(s)</h3>
<p>https://dkriegls.github.io/itmd-362-spring2018/</p>
</section>
<section id="blackboard">
<h3>Blackboard</h3>
<p>
This class will only use Blackboard to communicate student grades. All other class material
will be distributed via Basecamp.
</p>
</section>
<section id="guests">
<h3>Guest Lectures</h3>
<p>There will not be any guest lectures in this class</p>
</section>
<section id="Attendance">
<h3>Attendance</h3>
<p>
Attendance to live lectures is not required in this class. Students are responsible for watching class videos
in a timely manner before assignments are due.
</p>
</section>
<section id="assignments">
<h3>Assignments</h3>
<p>
All major projects for this course will be submitted via Basecamp.
Submissions should <b>not</b> include attachments, but rather URLs
pointing to your project’s GitHub repository and live link.
Examples will be demonstrated in class.
</p>
<p>
<b>All HTML and CSS in projects and lab submissions must pass validation</b> with the
<a href="https://validator.w3.org/">W3C HTML validator</a> and <a href="https://jigsaw.w3.org/css-validator/">W3c CSS validator</a>.
Any work whose HTML does not validate will receive a 50%-point reduction, failing grade. Get in the habit early of validating
each time before you commit your work to GitHub.
</p>
<p>
I do not accept late work. All work must be submitted before the date and time specified
in each project description.
</p>
<p>
I will check to see that you are adding proper summaries of your GitHub commits. You are also expected to help other students on Basecamp.
This means polite give-and-take discussions of code. Do not discuss anything else on basecamp. Practice professional and supportive critiquing.
</section>
<section id="quizzes">
<h3>Quizzes</h3>
<p>There will not be any quizzes in this class</p>
</section>
<section id="examinations">
<h3>Examinations</h3>
<p>There will not be any examinations in this class</p>
</section>
<section id="extra-credit">
<h3>Extra-Credit</h3>
<p>There will not be any extra credit in this class</p>
</section>
<section id="academic-honesty">
<h3>Academic Honesty</h3>
<p>
As with any course at IIT, you are expected to uphold
<a href="https://web.iit.edu/student-affairs/handbook/fine-print/code-academic-honesty">the Code of Academic Honesty</a>
as described in the
<a href="https://web.iit.edu/student-affairs/handbook">IIT Student Handbook</a>). 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.
</p>
<p>
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.
</p>
</section>
<section id="grading">
<h3>Grading</h3>
<h4>The final grade for the class will be calculated as follows:</h4>
<table>
<tr>
<td>Project 1</td>
<td>20 points</td>
</tr>
<tr>
<td>Project 2</td>
<td>20 points</td>
</tr>
<tr>
<td>Project 3</td>
<td>20 points</td>
</tr>
<tr>
<td>Labs</td>
<td>25 points</td>
</tr>
<tr>
<td>Comment</td>
<td>9 points</td>
</tr>
<tr>
<td>Commits</td>
<td>6 points</td>
</tr>
<tr>
<td>Total</td>
<td>100 points</td>
</tr>
</table>
<h4>Grading standards for undergraduate and professional learning students</h4>
<p>A = 90+</p>
<p>B = 80-89
<p>C = 70-79</p>
<p>D = 60-69</p>
<p>E =< 60 points</p>
</section>
<section id="other">
<h3>Other Class Resources</h3>
<p>All course work can be found through the class website</p>
</section>
<section id="our-contract">
<h3>Our Contract</h3>
<p>
This syllabus is my contract with you as to what I will deliver and what I expect from you.
If I change the syllabus, I will issue a revised version of the syllabus; the latest version will
always be available on Basecamp. Revisions to readings and assignments will be communicated via Basecamp.
</p>
</section>
<section id="special-needs">
<h3>Special Needs Statement</h3>
<p>
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 accommodations, students must obtain a letter of
accommodation from the Center for Disability Resources. The <a
href="https://web.iit.edu/cdr">Center for Disability Resources</a> 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
</p>
<p>
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.
</p>
</section>
</article>
</main>
<footer id="footer">
<p class="fineprint">
Course site design by <a href="https://karlstolley.com/">Karl Stolley</a> and Daniel Krieglstein.
Syllabus licensed under
<a href="http://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons</a>.
Source hosted on GitHub. Big thanks to
<a href="https://basecamp.com">Basecamp</a> and
<a href="https://www.addevent.com/">AddEvent</a> for donating resources to further
the educational goals of this class.
</p>
</footer>
<!--#page-->
</div>
</body>
</html>