HCI 454 Interaction Design and Information Architecture
Summary
Drawing upon design principles illustrated by design patterns, this course will cover the creation of structural (information architecture) and interaction designs for digital interfaces using site maps, user flows, wireframes, and other methods. A focus of the course is how to optimize designs for specific activities and user groups.
Goals
The goals of the course are to enable students to:
- Create appropriately biased structural and interaction designs for user interfaces.
- Understand and apply common design principles.
- Select appropriate design patterns and user controls.
- Document structural and interaction design using methods such as site maps, user flows, and wireframes.
Assignments
The assignments provide an opportunity use the principles, patterns, and methods discussed in lectures and the readings in actual designs. Individual assignments involve designing similar functions with different design biases. Group projects enable more complex design to be created and more involved methods to be used.
Assignment 1 - Project Proposal
In this individual assignment, you will write a design brief for a proposed information architecture project. This design brief will be posted for other students to review and consider as their group project.
Assignment 2 - Project Information Architecture
Your group will design the information architecture for your selected project. Main deliverables include a site map based on a card sort and wireframes showing the high-level organization of the site.
Assignment 3 - User Alert Editor
In this individual assignment, you will create wireframes for an infrequently-used Web interface for a User Alert Editor. The User Alert Editor allows a user to adjust settings for receiving alerts when certain events occur on a checking or CD account.
Assignment 4 - Agent Alert Editor
In this individual assignment, you will create wireframes for a frequently-used Java Swing interface for an Alert Editor.? The Agent Alert Editor allows an agent in a call center to adjust settings for receiving alerts when certain events occur on the caller?s checking or CD account.??
Assignment 5 - Project Interaction Design
Your team will design the interaction of two tasks for your chosen project. The design of one task will be for the desktop while the design of the other task will be for the mobile phone.
Texts
All texts are available online as
Safari Books
through the DePaul Library.
Required Texts
CD
Brown, D. M. (2010). Communicating design: Developing web site documentation for design and planning. (2nd ed.). Berkeley, CA: New Riders. ISBN-13: 978-0-321-71246-2
CS
Spencer, D. (2009). Card sorting: Designing usable categories. New York: Rosenfeld Media. ISBN-13: 978-1-933820-02-6
DI
Tidwell, J. (2010). Designing interfaces. Sebastopol, CA: O'Reilly Media. ISBN-13: 978-1-4493-7970-4
MI
Saffer, D. (2013). Microinteractions: Designing with details. Sebastopol, CA: O'Reilly Media. ISBN-13: 978-1-4919-4592-6
UP
Lidwell, W., Holden, K. & Butler, J. (2010). Universal principles of design. Beverly, MA: Rockport. ISBN-13: 978-1-592-53587-3
Optional Text
DMI
Hoober, S., & Berkman, E. (2011). Designing mobile interfaces. Sebastopol, CA: O'Reilly Media. ISBN-13: 978-1-4493-9463-9
Grading
Tentative Schedule
Wk |
Date |
Topic |
Reading |
Due |
1 |
Sep 15 |
Overview |
DI: Chapter 1 - Users
CS: Chapter 1 - About Card Sorting (optional)
CD: Chapter 9 - Design Briefs (skim)
|
- |
2 |
Sep 22 |
Organization |
UP: Organization Principles*
CS: Chapter 2 - Organizing (optional)
CD: Chapter 2 - Diagram Basics
CD: Chapter 5 - Site Map |
Assign 1 - Proposal |
3 |
Sep 29 |
Card Sorting |
CS: Chapters 4 - 11 |
- |
4 |
Oct 6 |
Navigation |
DI: Navigation patterns**
DMI: Mobile Navigation Patterns'
CD: Chapter 7 - Wireframes
CD: Chapter 8 - Deliverable Basics |
- |
5 |
Oct 13 |
Layout |
UP: Layout Principles*
DI: Page Type Patterns**
DI: Page Layout Patterns**
DMI: Mobile Page Type Patterns'
DMI: Mobile Page Layout Patterns' |
Assign 2 - Project IA |
6 |
Oct 20 |
Content |
UP: Content Principles*
DI: Content Patterns**
DMI: Mobile Content Patterns' |
- |
7 |
Oct 27 |
Interaction |
MI: Chapter 2 - Triggers
MI: Chapter 5 - Modes
UP: Interaction Principles*
DI: Interaction Patterns**
DMI: Mobile Interaction Patterns'
CD: Chapter 6 - Flowcharts
|
Assign 3 - User Editor |
8 |
Nov 3 |
Errors |
MI: Chapter 4 - Feedback
MI: Chapter 5 - Modes
UP: Feedback Principles*
DI: Feedback Patterns**
DMI: Mobile Feedback Patterns'
|
Assign 4 - Agent Editor |
9 |
Nov 10 |
Responsive & Social |
DI: Chapter 9 - Social
DI: Context Patterns**
DMI: Mobile Context Patterns' |
- |
10 |
Nov 17 |
Presentations |
- |
Assign 5 - Project ID |
* See Principles Table below
** See Patterns Table below
' Optional reading. See Mobile Patterns Table below
Assignment-Exam Weighting
Assignment 1 - Project Proposal |
50 pts |
10% |
Assignment 2 - Project IA |
100 pts |
20% |
Assignment 3 - User Alerts Editor |
100 pts |
20% |
Assignment 4 - Agent Alerts Editor |
100 pts |
20% |
Assignment 5 - Project Interaction Design |
100 pts |
20% |
Individual Contribution |
50 pts |
10% |
Grading Scale
A | | 100-93 |
A- | | 92-90 |
B+ | | 89-87 |
B | | 86-83 |
B- | | 82-80 |
C+ | | 79-77 |
C | | 76-73 |
C- | | 72-70 |
D+ | | 69-67 |
D | | 66-60 |
F | | 59-0 |
Group Projects
Group Projects will generally be completed in groups of three, four or five. To form groups, students review individual project proposals and submit preferences to work on them. Based on the preferences that have been submitted, students will be assigned to groups by the instructor on September 24.
Most groups will consist of students from both the on-campus section and the online section. Some class time will be used to coordinate among group members. When possible, online members are encouraged to communicate with the in-class groups using collaborative tools such as Skype and chat programs.
Group presentations occur in the last week of class. All students must contribute to the presentation, although all members do not need to be physically present for the presentation. At the end of the quarter every student is expected to submit a completed evaluation form (on D2L) for each group member.
All group members are jointly responsible for the entire assignment, although the group may assign primary roles to each group member. Generally, each group member will receive the same score on each project. However, in some cases, additional credit may go to those who make an exceptional contribution to a project and reduced credit to those who contribute little to a project. Any adjustment will be based on a variety of indications including group participation in class, contribution summaries in reports, and student feedback at the end of the quarter.
The score for individual contribution to class and group projects is based on contributions to class activities, documented contributions in group reports, observed group activities (in class, email or group message boards) and group member reports at the end of the quarter. Students who make solid contributions to their group projects and regularly participate in class (i.e. weekly contribution) receive at least 90% of the contribution points. Exceptional contributions receive more than 90%.
Prerequisites
- HCI 406
- HCI 440 or HCI 441
Principle and Pattern Readings
Principles - From Universal Principles of Design (UP)
Type |
Principle |
Organization |
Consistency, Five Hat Racks, Hick's Law, Hierarchy, Scaling Fallacy |
Layout |
Advance Organizer, Alignment, Are Alignment, Chunking, Entry Point, Gutenberg Biagram, Horror Vacui, Layering, Ockham's Razor, Rule of Thirds, Signal-to-Noise Ratio |
Content |
Comparison, Desire Line, Exposure Effect, Orientation Sensitivity, Closure, Common Fate, Figure-Ground Relationship, Good Continuation, Law of Pragnaz, Proximity, Similarity, Uniform Connectedness |
Interaction |
Control, Expectation Effect, Factor of Safety, Flexibility-Usability Tradeoff, Forgiveness, Nudge, Recognition over Recall, Constraint, Fitts' Law, Highlighting, Mapping, Progressive Disclosure, Visibility |
Feedback |
Confirmation, Errors, Redundancy, Weakest Link |
Patterns - From Designing Interfaces (DI)
Type |
Chapter |
Patterns |
Navigation |
3 - Navigation |
Clear Entry Points, Pyramid, Escape Hatch, Fat Menus, Sitemap Footer, Sequence Map, Breadcrumbs, Annotated Scrollbar |
4 - Layout |
Module Tabs, Accordion |
5 - Lists |
One-Window Drilldown, Pagination, Jump to Item, Alphabet Scroller |
7 - Showing Data |
Overview Plus Detail |
Page Type |
2 - IA |
Picture Manager, Dashboard, Canvas Plus Palette, Wizard, Settings Editor |
3 - Navigation |
Menu Page |
Page Layout |
2 - IA |
Feature, Search, and Browse, Many Workspaces |
3 - Navigation |
Sign-in Tools |
4 - Layout |
Center Stage, Grid of Equals, Titled Sections, Diagonal Balance |
6 - Actions |
Button Groups, Action Panel, Prominent "Done" Button |
10 - Mobile |
Bottom Navigation |
Content |
2 - IA |
News Stream, Alternative Views, Multi-Level Help |
4 - Layout |
Collapsible Panels, Movable Panels |
5 - Lists |
List Inlay, Tree Table |
7 - Showing Data |
Datatips, Dynamic Queries, Data Brushing, Local Zooming, Sortable Table, Radial Table, Multi-Y Graph, Small Multiples, Treemap |
Interaction |
3 - Navigation |
Modal Panel, Deep-linked State |
4 - Layout |
Right/Left Alignment, Responsible Disclosure, Responsive Enabling |
5 - Lists |
Two-Panel Selector, Thumbnail Grid, Carousel, Cascading Lists, New-Item Row |
6 - Actions |
Hover Tools, Command History, Macros |
7 - Showing Data |
Data Spotlight |
8 - Input |
Forgiving Format, Structured Format, Fill-in-the-Blanks, Input Hints, Input Prompt, Password Strength Meter, Auto-completion |
10 - Mobile |
Vertical Stack, Filmstrip, Touch Tools, Thumbnail-and-Text List, Infinite List, Generous Borders, Text Clear Button, Richly Connected Apps |
Feedback |
6 - Actions |
Preview, Progress Indicator, Cancelability, Multi-Level Undo |
10 - Mobile |
Loading Indicators |
Context |
4 - Layout |
Liquid Layout |
6 - Actions |
Smart Menu Items |
10 - Mobile |
Streamlined Branding |
Mobile Patterns - From Designing Mobile Interfaces (DI)
Type |
Chapter |
Patterns |
Navigation |
1 - Composition |
Scroll, Fixed Menu |
5 - Lateral Access |
Tabs, Peel Away, Pagination, Location Within |
6 - Drill Down |
Link, Stack of Items |
8 - Info Controls |
Location Jump, Search Within |
Page Type |
1 - Composition |
Home & Idle Screens, Lock Screen, Interstitial Screen |
3 - Control |
Sign On |
Page Layout |
1 - Composition |
Annunciator Row, Titles, Advertising |
11 - Input/selection |
Input Areas |
Content |
2 - Display |
Slideshow, Infinite Area |
4 - Reveal |
Returned Results, Window shade, Hierarchical List |
5 - Lateral Access |
Simulated 3D Effects |
6 - Drill Down |
Annotation |
7 - Labels |
Ordered Data, Tooltip |
8 - Info Controls |
Zoom & Scale, Sort & Filter |
12 - Audio |
Voice Read back |
Interaction |
1 - Composition |
Revealable Menu |
2 - Display< More/TD>
| Vertical List, Infinite List, Thumbnail List, Fisheye list, Carousel, Grid, Film Strip, Select List - Checkboxes |
4 - Reveal More |
Pop-up |
6 - Drill down |
Button, Indicator, Icon |
7 - Labels< More |
Reload, Synch, Stop |
9 - Text Input |
Keyboards & Keypads, Pen Input, Mode Switches, Autocomplete & Prediction |
10 - Interaction |
Directional Entry, Press-and-Hold, Focus & Cursors, Dialer, On-screen Gestures, Kinesthetic Gestures, Remote Gestures, Access keys, Other Hardware Keys |
11 - Input/Selection |
Directional Entry, Press-and-Hold, Focus & Cursors, Dialer, On-screen Gestures, Kinesthetic Gestures, Remote Gestures, Access keys, Other Hardware KeyForm Selections, Mechanical Style Controls, Clear Entry |
12 - Audio |
Voice Input |
13 - Screens |
Display Brightness Control |
Feedback |
1 - Composition |
Notifications |
3 - Controls |
Confirmation, Exit Guard, Cancel Protection |
7 - Labels |
Wait Indicator |
9 - Text Input |
Input Method Indicator |
13 - Screens |
LED |
12 - Audio |
Tones, Voice Notifications, Haptic Output |
Context |
3 - Control |
Timeout |
13 - Screens |
Orientation, Location |
Policies
-
Students are expected to attend every class or watch the lecture online.
-
Assignments are due at the beginning of class. Assignments must be submitted via D2L.
-
All assignments and projects may be turned in (at least 3 days) early for feedback. Feedback may not be able to be provided on assignments and projects turned in less than 3 days early.
-
Individual Assignments 1, 3, and 4 may be turned in late without penalty. After receiving your grade, Individual assignments 1, 3 and 4 can be redone without penalty. If assignment 1 is turned in late, it will not be considered a candidate for a group project.
-
Late contributions to group assignments 2 and 5 will be accepted up to 3 days late for a serious documented excuse (e.g. illness, death in the family) and must be arranged as soon as possible. Arrangements involving other excuses require prior permission from the instructor. Late contributions without a documented excuse will be penalized by 5 points. In the case of a late contribution to group assignment 5, the presentation will still be given on November 17 by the remaining group members and the assigned grade will take into consideration the impact of the missing contribution.
-
All submitted work (e.g. project reports, online discussions) must be original work unless its source is clearly referenced. Failure to clearly attribute quotes or designs from other people's work constitutes plagiarism. Violations will generally receive no credit for a given submission.
This syllabus is subject to change as necessary during the quarter. If a change occurs, it will be thoroughly addressed during class, posted under Announcements in D2L and sent via email.
Evaluations are a way for students to provide valuable feedback regarding their instructor and the course. Detailed feedback will enable the instructor to continuously tailor teaching methods and course
content to meet the learning goals of the course and the academic needs of the students. They are a requirement of the course and are key to continue to provide you with the highest quality of teaching. The
evaluations are anonymous; the instructor and administration do not track who entered what responses. A program is used to check if the student completed the evaluations, but the evaluation is completely
separate from the student’s identity. Since 100% participation is our goal, students are sent periodic reminders over three weeks. Students do not receive reminders once they complete the evaluation.
Students complete the evaluation online in CampusConnect.
This course will be subject to the university's academic integrity policy. More information can be found at http://academicintegrity.depaul.edu/ If you
have any questions be sure to consult with your professor.
All students are expected to abide by the University's Academic Integrity Policy which prohibits cheating and other misconduct in student coursework. Publicly sharing or posting online any prior or current materials from this course (including exam questions or answers), is considered to be providing unauthorized assistance prohibited by the policy. Both students who share/post and students who access or use such materials are considered to be cheating under the Policy and will be subject to sanctions for violations of Academic Integrity.
All students are required to manage their class schedules each term in accordance with the deadlines for enrolling and withdrawing as indicated in the University Academic Calendar. Information on enrollment, withdrawal, grading and incompletes can be found at http://www.cdm.depaul.edu/Current%20Students/Pages/PoliciesandProcedures.aspx.
Students who feel they may need an accommodation based on the impact of a disability should contact the instructor privately to discuss their specific needs. All discussions will remain confidential.
To ensure that you receive the most appropriate accommodation based on your needs, contact the instructor as early as possible in the quarter (preferably within the first week of class), and make sure that
you have contacted the Center for Students with Disabilities (CSD) at:
Lewis Center 1420, 25 East Jackson Blvd.
Phone number: (312)362-8002
Fax: (312)362-6544
TTY: (773)325.7296