ClassInfo

HCI 454 Interaction Design and Information Architecture

Winter 2016-2017
Class number: 21994
Section number: 810
-
Online Campus

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 devices.

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 and wireframes.

Assignments
The assignments provide an opportunity use the principles, patterns, and methods in lectures and the readings in actual designs. The assignments reflect the different types of deliverables involved in designing the information architecture and interaction of a system.

All assignments can be done individually or in teams of two. Both members of teams receive the same grade.

Assignment 1 - Organization Schemes
The purpose of Assignment 1 is to learn how to identify an optimal organization scheme for a system. In this assignment, you will be a participant in a card sort and create an organization scheme based on the class results.

Assignment 2 - Biased Design
The purpose of Assignment 2 is to learn how to bias the interface of the same system* towards different user groups. In this assignment, you will create two sets wireframes for the same system that will be described in class: One set will be biased towards users that use the system once or twice a year; the second set will be biased towards users that use the system 20-30 times a day.

Assignment 3 - IA Design
The purpose of Assignment 3 is to learn how to design the information architecture for a system. In this in assignment, you will describe system of your own choosing and design the information architecture for the desk-top version of your system.

Assignment 4 - Responsive Design
The purpose of Assignment 4 is to learn how to create a responsive design for different devices. In this assignment, you will create two sets of wireframes for your selected system - one for a desktop and one for a mobile phone.

Assignment 5 - Presentation
The purpose of Assignment 5 is to learn how to present an overview of a design. In this assignment, you will present your system to the class, highlighting the design thinking used.



Texts

All texts are available online as Safari Books through the DePaul Library.

Required Texts
CS
Spencer, D. (2009). Card sorting: Designing usable categories. New York: Rosenfeld Media. ISBN-13: 978-1-933820-02-6

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

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 Texts
DI
Tidwell, J. (2010). Designing interfaces. Sebastopol, CA: O'Reilly Media. ISBN-13: 978-1-4493-7970-4

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 Jan 3 Overview Optional
DI: Chapter 1 - Users
CS: Chapter 1 - About Card Sorting
Assignment 1A:
Participate in card sort
2 Jan 10 Card Sorting Required
CS: Chapters 4 - 11
-
3 Jan 17 Layout Required
UP: Layout Principles*

Optional
DI: Page Type Patterns**
DI: Page Layout Patterns**
DMI: Mobile Page Type Patterns'
DMI: Mobile Page Layout Patterns'
Assignment 1B:
Organization
4 Jan 24 Organization Required
UP: Organization Principles*
CD: Chapter 2 - Diagram Basics
CD: Chapter 5 - Site Map

Optional
CS: Chapter 2 - Organizing
-
5 Jan 31 Navigation Required
CD: Chapter 7 - Wireframes
CD: Chapter 8 - Deliverable Basics

Optional
DI: Navigation patterns**
DMI: Mobile Navigation Patterns'
Assignment 2:
Biased Design
6 Feb 7 Responsive Required
MI: Chapter 2 - Triggers
MI: Chapter 5 - Modes
UP: Interaction Principles*

Optional
DI: Interaction Patterns**
DMI: Mobile Interaction Patterns'
CD: Chapter 6 - Flowcharts
-
7 Feb 14 Interaction Required
MI: Chapter 4 - Feedback
MI: Chapter 5 - Modes
UP: Feedback Principles*

Optional
DI: Feedback Patterns**
DI: Context Patterns**
DMI: Mobile Feedback Patterns'
DMI: Mobile Context Patterns'
Assignment 3:
IA Design
8 Feb 21 Content Required
UP: Content Principles*

Optional
DI: Content Patterns**
DMI: Mobile Content Patterns'
-
9 Feb 28 Social Media Optional
DI: Chapter 9 - Social Media
Assignment 4:
Responsive Design
10 Mar 7 Presentations - Assignment 5:
Presentation
* See Principles Table below
** See Patterns Table below
' See Mobile Patterns Table below

Assignment-Exam Weighting
Assignment 1 - Organization
50 pts
10%
Assignment 2 - Biased Design
100 pts
20%
Assignment 3 - IA Design
100 pts
20%
Assignment 4 - Responsive Design
200 pts
40%
Assignment 5 - Presentation
50 pts
10%

Grading Scale

A100-93
A-92-90
B+89-87
B86-83
B-82-80
C+79-77
C76-73
C-72-70
D+69-67
D66-60
F59-0


Prerequisites

HCI 406
HCI 440 or HCI 441


Principle and Pattern Readings

b>Principles - From Universal Principles of Design (UP)
Type Principle
Organization Consistency, Five Hat Racks, Hick's Law, Hierarchy, Scaling Fallacy
Layout Advance Organizer, Alignment, Area 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.

Assignments 1-4 may be turned in late without penalty. After receiving your grade, assignments 1-4 can be redone without penalty. No assignments will be accepted after Mar 7.

All submitted work 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.


School policies:

Changes to Syllabus

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.

Online Course Evaluations

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.

Academic Integrity and Plagiarism

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.

Academic Policies

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 with Disabilities

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