ITMD 362: Human-Computer Interaction and Web Design

Major Projects

Project One: Onboarding Due Friday, March 3, 11:59pm CT

Project Description

You will create a compelling single-page design that features a sign-up process to get new users to join some type of project, such as an email list, a software beta test, or an open-source community. Focus on designing for an effortless, engaging entry of personal information; and friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information. The goal of this project is to experiment with patterns of interaction that persuade someone to sign up for whatever it is you’re offering, which is not at all an easy task.

Project Goals

Create a touch-friendly, mobile-first responsive web design
Experiment with design and interaction patterns for pleasing user experience
Design and execute a progressively enhanced page focused on system users and tasks
Apply design principles including typography, color, and material design
Engage in agile, iterative web design and development, supported by version control

Deliverables & Milestones

A video presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include the URL to your GitHub repository. Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than February 8, 11:59pm).
Substantive comments critiquing at least three other student projects. (by Febraury 15, 11:59pm CT)
An email to the instructor containing the projects two final deliverables (by March 3, 11:59pm CT):
1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
2. The https:// link to your project’s GitHub repository

Requirements

Project must be built with only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.
All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF)
Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)
HTML, CSS, and JavaScript files should both be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries
HTML requirements:
1. Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.
2. At least three HTML form elements, written in conjunction with <label> tags and the for attribute
3. Semantically structured text-based HTML content to accompany any media elements (image, audio, video)
CSS requirements:
1. CSS file should open with a set of reset styles (such as the minified Eric Meyer resets from class demos)
2. Only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units allowed
3. Use at least two min-width media queries to enhance your mobile-first styles for larger screens
JavaScript requirements:
1. JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)
2. JavaScript that uses function closures and other techniques to avoid polluting the global window namespace
3. JavaScript that uses only asynchronous methods and callbacks
Git requirements:
1. A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
2. Use of the command-line Git program on your computer; no commits made through the GitHub web interface (this isn’t kindergarten)
3. GitHub repository must contain only the files and commits from this project

Project Two: Web-Portal Redesign Due Monday, April 17, 11:59pm CT

Project Description

Some of the very worst designed websites you’ll come across are for banking, credit card payment, HR portals, and other non-optional websites for certain classes of customers or workers. Self-selected teams of 3-4 students will redesign the MyIIT login page, the welcome page/tab, and all necessary steps for achieving a specific student-user task (some examples: generating a class schedule, dropping a class, paying a tuition bill, removing a registration hold, or any other task that students complete through MyIIT). Your redesigned portal should be designed and developed according to sound principles of human-computer interaction, user experience, and emotional design.

Project Goals

Conduct task analysis and apply the information gained to a user-centered design
Build interface modules/elements from a basic design foundation of alignment, contrast, proximity, and repetition
Apply design principles including color/material, typography, accessible media, and grid-based design
Execute a progressively enhanced, touch-friendly, mobile-first responsive design focused on system users and tasks
Write informative text content; catch error conditions and guide users accordingly
Experiment with design and interaction patterns for pleasing user experience
Engage in agile, iterative web design and development within a team-based workflow on GitHub, via pull requests and code reviews

Deliverables & Milestones

Whole team: A screen-by-screen task analysis of your chosen MyIIT task (again, e.g., generating a class schedule, dropping a class, paying a tuition bill, removing a registration hold) posted to Basecamp, with relevant anonymized screen shots (black out any personally identifiable information). Post to Basecamp (due no later than March 22, 11:59pm CT).
Whole team: A video presentation of your team’s work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include the URL to your team’s GitHub repository. Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than April 10, 11:59pm CT).
Each team member: Substantive comments critiquing at least three other team projects (by April 14, 11:59pm CT).
Each team member: an email to the instructor containing the project’s three final deliverables (by April 17, 11:59pm CT):
1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
2. A 2-3 sentence critique of each group member’s work on the project
3. The https:// links to your individual and group GitHub repositories

Requirements

All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF)
Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)
HTML, CSS, and JavaScript files should all be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries
HTML requirements:
1. Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.
2. Valid HTML form elements, written in conjunction with <label> tags and the for attribute
3. Semantically structured text-based HTML content to accompany any media elements (image, audio, video)
CSS requirements:
1. CSS file should open with a set of reset styles (such as the minified Eric Meyer resets from class demos); consider also the Normalize.css styles for forms
2. Only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units allowed
3. Use at least two min-width media queries to enhance your mobile-first styles for larger screens
JavaScript requirements:
1. JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)
2. JavaScript that uses function closures and other techniques to avoid polluting the global window namespace
3. JavaScript that uses only asynchronous methods and callbacks
Git requirements:
1. Whole team: A shared team Git repository with frequent commits from each team member and meaningful commit messages that accurately reflect each set of changes
2. Each team member: An individual Git repository with feature branches, frequent commits, and meaningful commit messages that accurately reflect each set of changes that you make, including experimental work that you ultimately might not push upstream to the shared group repository
3. All GitHub repositories (team and individual) must contain only the files and commits from this project
4. Use of the command-line Git program on your computer; no commits made through the GitHub web interface (this isn’t kindergarten), apart from merge commits created as part of code reviews/pull requests

Project Three: User-Tested, Revised Web Portal Due Wednesday, May 3, 11:59pm CT

Project Description

The final project of the course asks you to subject your group’s Web Portal Redesign project to a series of low-stakes user tests, and to suggest improvements to the Web Portal Redesign project based on what you learn through your user tests.

You should structure your tests around the guidance in Chapter 9 of Krug’s book. You are welcome to use as a starting point his sample script and recording release form available at Krug’s website. However, your script must be modified to match your specific project and tasks, obviously.

Project Goals

Evaluate user interface designs with human subjects.
Demonstrate how user-centered concerns can be incorporated into system development life cycles.
Explain the need to evaluate system usability.
Conduct usability tests on mobile and traditional devices.

Deliverables & Milestones

Unlike previous projects, your deliverables for this assignment should be turned in to the instructor as a Dropbox or Google Drive share URL. Do not use the internal sharing function on Dropbox or Drive with the instructor. Generate a shareable URL that you paste yourself in an email to the instructor. The URL should point to a folder containing thoughtfully named files and folders containing each deliverable listed below.

Testing script (submitted to instructor before testing, by 11:59pm CT on 4/19), which should include a welcome to your participant, an explanation of the process, and an outline of the exact tasks you will be asking participants to complete
A/V release form for each participant to sign (submitted to instructor before testing, by 11:59pm CT on 4/19)
Site plan: location, equipment, setup/arrangement (submitted to instructor before testing, by 11:59pm CT on 4/19)
Video recording of each participant session (due by 11:59pm CT on 5/3)
Testing notes + 3 major issues per observer, per participant (due by 11:59pm CT on 5/3)
A group-authored recommendation report (due by 11:59pm CT on 5/3) on three most pressing issues identified through your testing, including:
- an explanation as to why the issues you’ve selected are most pressing
- possible approach to implementing fixes/improvements to address the issue
- future usability tests you’d run to ensure the quality of the fix
An individually authored 4-5 sentence self-critique of your project and your progress in class this semester in addition to 4-5 sentence critiques for each of your group members, emailed to the instructor (due by 11:59pm CT on 5/3)

Requirements

Test your site with three different participants not in our class. At least one participant should use a mobile device (phone or tablet); at least one should use a traditional device (desktop or laptop)
When possible, have participants use their own devices (but have a backup device ready to use)
Figure out how to best involve online students in your group who cannot be present on campus for testing; include those details in your site plan
Submit all deliverables as an email to the instructor. The email must contain your individual reflection memo and a URL to a shared Dropbox or Google Drive folder to which all group members have read/write access