User-Centered Web Site Design
Daniel D. McCracken
City College, City University of New York
Rosalee J. Wolfe
DePaul University
Supported by NSF CCLI EMD grant DUE 0088184
Course Outlines
1. Introduction to HCI
Prerequisite: CS1
Level: Intermediate (sophomore or junior)
Format: 14 weeks (one semester)
Students receive an overview of user-centered design principles and tools that help them develop better user interfaces in subsequent courses and in their careers as programmers.
Basic organization: Study HCI for 8 weeks, then apply to Web design.
|
Week |
Topic | Reading | |
|
1 |
Why HCI, Overview of User-Centered Development Cycle | Ch. 1 | |
|
2 |
Human Perception and Memory; Mental Models | Ch. 2 | |
|
3 |
User and Task Analysis | Ch. 3 | |
|
4 |
Content Organization | Ch. 4 | |
|
5 |
Visual Organization | Ch. 5 | |
|
6 |
Navigation | Ch. 6 | |
|
7 |
Prototyping | Ch. 7 | |
|
8 |
User Testing | Ch. 8 | |
|
9 |
Color | Ch. 9 | |
|
10 |
Typography | Ch. 10 | |
|
11 |
Multimedia | Ch 11 | |
|
12 |
Graphic File Compression | Ch. 12 | |
|
13 |
Accessibility | Ch. 13 | |
|
14 |
Globalization | Ch. 14 | |
| Final Exam or Final Project Presentations | |||
2. User-Centered Web Development
Prerequisite: CS1, CS2 and a web authoring course
Level: Upper (junior or senior)
Format: 14 weeks (one semester)
Students choose a Web site they have created previously and improve it by applying the user-centered principles outlined in this course. Assumes knowledge of HTML.
Basic organization: Intersperse HCI and Web design.
|
Week |
Topic | Reading | |
|
1 |
Why HCI, Overview of User-Centered Development Cycle | Ch. 1 | |
|
2 |
Prototyping | Ch. 7 | |
|
3 |
User Testing | Ch. 8 | |
|
4 |
Human Memory and Perception, User and Task Analysis | Ch. 2,3 | |
|
5 |
Content Organization | Ch. 4 | |
|
6 |
Visual Organization | Ch. 5 | |
|
7 |
Navigation | Ch. 6 | |
|
8 |
Planning for final projects | ||
|
9 |
Color | Ch. 9 | |
|
10 |
Typography | Ch. 10 | |
|
11 |
Multimedia | Ch. 11 | |
|
12 |
Graphic File Compression | Ch. 12 | |
|
13 |
Accessibility or Globalization | Ch. 13 or 14 | |
|
14 |
Final Project Presentations | ||
| Optional Final Exam, or Project Evaluations | |||
3. User-Centered Web Development and XHTML
Prerequisite: CS1
Level: Intermediate (sophomore or junior)
Format: 14 weeks (one semester)
Students learn the fundamentals of user-centered Web development, together with XHTML and a selection of Web-related topics. A project ties things together.
Basic organization: like 2, but does not assume (X)HTML background.
|
Week |
Topic | Reading | |
|
1 |
Why HCI, Overview of User-Centered Development Cycle; Human Memory and Perception | Ch. 1, 2 | |
|
2 |
User and Task Analysis | Ch. 3 | |
|
3 |
Prototyping | Ch. 7 | |
|
4 |
User Testing | Ch. 8 | |
|
5 |
XHTML & Cascading Style Sheets, 1 | Appendix | |
|
6 |
Content Organization | Ch. 4 | |
|
7 |
XHTML & CSS, 2 | Appendix | |
|
8 |
Visual Organization & Navigation | Ch. 5, 6 | |
|
9 |
XHTML & CSS, 3 | Appendix | |
|
10 |
Topics in Color & Typography | Ch. 9, 10 | |
|
11 |
Multimedia | Ch. 11 | |
|
12 |
Graphic File Compression | Ch. 12 | |
|
13 |
Accessibility or Globalization | Ch. 13 or 14 | |
|
14 |
Final Project Presentations | ||
| Optional Final Exam, or Project Evaluations | |||
4. Introduction to HCI
Prerequisite: CS1
Level: Intermediate (sophomore or junior)
Format: 10 weeks (one quarter)
Students receive an overview of user-centered design principles and tools that help them develop better user interfaces in subsequent courses and in their careers as programmers.
Basic organization: HCI course, quarter system.
|
Week |
Topic | Reading | |
|
1 |
Why HCI, Overview of User-Centered Development Cycle, Human Perception and Memory | Ch. 1, 2 | |
|
2 |
Mental Models, User and Task Analysis | Ch. 2, 3 | |
|
3 |
Content Organization | Ch. 4 | |
|
4 |
Visual Organization | Ch. 5 | |
|
5 |
Navigation | Ch. 6 | |
|
6 |
Prototyping | Ch. 7 | |
|
7 |
User Testing | Ch. 8 | |
|
8 |
Topics in Color, Graphic File Compression | Ch. 9, 12 | |
|
9 |
Topics in Accessibility, | Ch. 13 | |
|
10 |
Topics in Typography, Multimedia, or Globalization | Ch 10, 11 or 14 | |
| Final Exam or Final Project Presentation | |||
5. User-Centered Web Development
Prerequisite: CS1, CS2 and a web authoring course
Level: Upper (junior or senior)
Format: 10 weeks (one quarter)
Students choose a Web site they have created previously and improve it by applying the user-centered principles outlined in this course.
Basic organization: HCI and Web design interspersed, knowledge of HTML assumed, quarter system.
|
Week |
Topic | Reading | |
|
1 |
Why HCI, Overview of User-Centered Development Cycle | Ch. 1 | |
|
2 |
Prototyping | Ch. 7 | |
|
3 |
User Testing | Ch. 8 | |
|
4 |
Human Memory and Perception, User and Task Analysis | Ch. 2,3 | |
|
5 |
Content Organization | Ch. 4 | |
|
6 |
Visual Organization | Ch. 5 | |
|
7 |
Navigation | Ch. 6 | |
|
8 |
Color, Typography | Ch. 9, 10 | |
|
9 |
Multimedia, Bandwidth | Ch. 11, 12 | |
|
10 |
Accessibility or Globalization | Ch. 13 or 14 | |
| Final Exam or Final Project Presentation | |||