(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print

(:nl:)!! Interaction Design Syllabus

Jump to Week: 1 2 3 4 5 6 ----

'''Week 1:Start-Up Lab / Project Charter'''

''Topics:'' * Principles of Interaction Design * Defining the audience, device, and needs / goals / outcomes * Describing current solutions and weaknesses * Proposing improvements, extensions, and/or variations

''Readings:'' ->''About Face 3.0: The Essentials of Interaction Design'' (Cooper & Reimann, 2007):
Chapter 1: Goal-Directed Design
Chapter 2: Implementation Models and Mental Models
Chapter 3: Beginners, Experts, and Intermediates
Chapter 9: Platform and Posture

->Principles of Interaction Design (Wiki)
Context Scenarios (Wiki)
The Buxton Collection of Interactive Devices (HTML)

''Exercises:'' ->Identify an existing interface and discuss its design in terms of the Principles of Interaction Design. Where does it succeed? Where is it insufficient? Where does it fail? How might it be improved?

->Coffee vending machines were traditionally big, plain machines with a series of push-buttons for selecting coffee (regular or decaf), cream (none, some, lots) and sugar (none, some, lots.) Poor quality but hot coffee (or brown flavored water) was delivered (unceremoniously) in a paper cup through a compartment in the front of the machine. Payment was only coins or maybe dollar bills. The experience and interaction with the machine was less than engaging, did not communicate quality, and did not inspire trust or brand loyalty.

->Using the criteria for the assignment (listed below), work together in groups to discuss how coffee vending machines could be more engaging, more interactive, and more enjoyable. Develop a brief plan or project charter to design a better coffee vending machine.

->'''Concept:''' Smartphones + printed codes, symbol, map, or image recognition (plus geolocation?) to show video and information in an augmented reality (AR) experience on the smart device screen in real-time while aiming it at the product, printed sign, printed page, packaging, object, or location. AR content can be shared, items may be purchased, reminders added to calendars, and links to related/relevant/similar content that may also be interesting.

''Assignment:'' ->Select a new or existing digital interface. It should meet a need or provide a service that has sufficient demand to merit a design project (in other words, do not select something that has no proven value or has little room for improvement or extension.) Write a project charter to define and describe the:

* Audience for the device and interface * Physical device itself * Service(s) and function(s) the device and interface provides and the needs or goals it helps users achieve * Existing devices and interfaces in the same space * Opportunities and plans for improving, varying, and/or extending the service(s) and function(s) of the new device and interface

->Post your project charter to the class wiki, preferably as a PDF, but Word (.DOC) and text (.TXT) files are acceptable.


'''Week 2: Concept Sketches'''

''Topics:'' * Mental models, affordances, and intuition * Input / output mechanisms and devices / sensors * Data entry and retrieval

''Readings:'' ->''About Face 3.0: The Essentials of Interaction Design'' (Cooper & Reimann, 2007):
Chapter 6: The Foundations of Design: Scenarios and Requirements
Chapter 8: Synthesizing Good Design: Principles and Patterns
Chapter 11: Eliminating Excise

->The Web Beyond the Desktop (HTML)
Affordances, Conventions, and Design Part 1 (HTML)
Affordances, Conventions, and Design Part 2 (HTML)
The Secret to Designing an Intuitive UX: Match the Mental Model to the Conceptual Model (HTML)
Signifiers Not Affordances (HTML)
Principles of Animation (Wiki)

''Exercises:'' ->Using the coffee vending machine exercise from last week, create concept sketches for your new coffee vending machine. What is the shape and size of the machine? Where will it be located? How will people approach it? How will it attract attention and invite interaction? How will customers select their coffee preferences? How will they pay? How will the coffee be distributed? Do not design the coffee selection interface (e.g., touchscreen) - focus on the form of the physical machine and show only the initial or default state of the coffee selection interface.

->ALTERNATE: Design a mobile telephone for illiterate users in poor countries. Text-based interfaces and menu systems of current phones are useless and do not convey information to people who cannot read. Address books in phones are based on names and numbers (which cannot be read) and addresses (that may not exist.) Iconography is only meaningful when the icon has abstract, metaphorical meaning to the user - most phone icons are based on western experiences (e.g., phone book icons) and may not be meaningful in poor countries. Design a mobile phone interface for people who cannot read, which does not rely on icons based on sociocultural experiences they may not share, and which allows the user to place calls without the help of others.

''Assignments:'' ->Create initial sketches of the device and its physical interface. We will begin designing the digital interface in the next class, so do not focus on the actual ''screen'' of the device focus on the ''physical'' interface between humans and the machine. Sketches may be hand-drawn or created with a drawing program. If hand-drawn, please scan your sketches and post them to the class wiki; if drawn with a program, be sure to post sketches in a format viewable by all (JPEG, GIF, PNG, or PDF. SVG may not be viewable on all computers at SFSU, so please refrain from using the SVG format.)


'''Week 3: Wireframes I'''

''Topics:'' * Designing to be considerate and smart * Usage environment and circumstances * Navigation * Information structure and presentation

''Readings:'' ->''About Face 3.0: The Essentials of Interaction Design'' (Cooper & Reimann, 2007):
Chapter 12: Designing Good Behavior
Chapter 13: Metaphors, Idioms, and Affordances
Chapter 26: Designing for Different Needs
Touch Gesture Reference Guide (HTML)
Touch Gesture Diagrams (HTML)

''Exercises:'' ->Using the coffee vending machine exercises from the first two classes, outline a typical user experience / scenario using a swim lane diagram to show the sequence of interactions with the device. The swim lane diagram should have three parallel lanes: Environment, Device: Mechanics, and Device: Interface. Illustrate how someone interacts with the device and the interface from the time they approach until they depart.

->Also, sketch wireframes of the digital interface for selecting coffee preferences (and possibly payment processing.) Discuss and explore the interaction design, explore ways to gather and/or present information through channels or methods ''other'' than a monitor, LCD, or touchscreen, and create simple animatics and/or storyboards to illustrate some of the interactions.

->ALTERNATE: Develop initial concept sketches and wireframes for a digital picture frame. The picture frame is controlled by only two buttons, one on the left and one on the right side of the frame. The digital picture frame must have the following functionality:

* Pressing ONE button will move through the pictures forward (right) or backward (left) * Pressing BOTH buttons at the same time will access the control menu for changing the digital picture frame preferences and settings * The main menu must allow settings for transition styles (e.g., fade), transition timing (e.g., every 30 minutes), and reviewing photos (via the gallery) that have been loaded into the digital picture frame

->Remember: All of the control and interactions for the digital picture frame must be done through the two buttons - there is no touchscreen and no other input devices or sensors.

->The Business of Experience (HTML)

''Project Assignment:'' ->Create wireframes for the digital interface of your project device. Focus on primary interface states or screens for the main functions of the device, particularly states or screens for which you are designing improvements and/or extensions. Do not create wireframes for every possible state or screen, only those states or screens that are necessary to illustrate your design and proposed functionality.

Wireframes 1


'''Week 4: Wireframes II'''

''Topics:'' * Information density * Preventing, minimizing, and handling errors * User interface controls for gathering and manipulating information * When does interaction design end and visual design begin?

''Readings:'' ->''About Face 3.0: The Essentials of Interaction Design'' (Cooper & Reimann, 2007):
Chapter 14: Visual Interface Design
Chapter 19: Pointing, Selecting, and Direct Manipulation
Chapter 21: Controls

->Principles of Interface Design

''Exercises:'' -> Using the digital picture frame exercise from the previous class, create storyboards to show the following functionality for the photo gallery of uploaded photos. Users must be able to:

* Review photos in the gallery * Paginate among sets of photos * Mark photos as hidden (i.e., they will not appear in the slideshow) * Delete individual photos * Delete all photos * Re-arrange photos * Undo actions * Save settings before returning to the main menu

->Remember: All of the control and interactions for the digital picture frame must be done through the two buttons - there is no touchscreen and no other input devices or sensors.

->Digital Picture Frame Exercise (PDF)

->ALTERNATE: We will create wireframes for a payment card interface commonly seen in retail locations (e.g., Safeway, Walgreens, etc.) that allows users to pay via credit or debit and to request cash back. We will explore information density, user interface controls, and error handling. Additionally, we will discuss and illustrate ways to anticipate user behavior and needs and provide information and functionality contextually (e.g., being smart and knowing when a particular card does or not have an available cash back option or recognizing the difference between credit and debit cards.)

''Project Assignment:'' ->Select a particular task (or tasks) and create wireframes for your project device that illustrate the user flow from start to end. Focus on error prevention and error handling, alternatives for information dense states or screens, and ways to anticipate user needs and behaviors.


'''Week 5: Functional Specifications'''

''Topics:'' * Capturing and describing concepts, transitions, and motion * Documenting interactions, behaviors, and data transfers with annotations * Motion as information and confirmation * Corner cases: The devil is in the details

''Readings:'' ->''About Face 3.0: The Essentials of Interaction Design'' (Cooper & Reimann, 2007):
Chapter 24: Dialogs
Chapter 25: Errors, Alerts, and Confirmation

''Exercises:'' ->We will create an outline for a functional specifications document based on the concepts and wireframes previously created in class exercises. During the creation of the outline, we will uncover corner cases and discuss ways to capture and describe potentially complex interactions.

''Project Assignment:'' ->Write a functional specifications document for your project device. This document should integrate with and refer to the wireframes previously created to provide a complete and accurate description of how the device operates, is controlled, and provides feedback under different conditions and circumstance. You may need to generate a few additionally wireframes or interface components to illustrate different functions and states being described.


'''Week 6: Project Presentation'''

''Topics:'' * Presenting deliverables: Design as narrative * Turning concepts into "believable reality"

''In-Class Assignment:'' -> Present your project to the class:

* Describe the concept and the need it fulfills * Show wireframes to illustrate the process and interactions * Review the functional specifications to describe how the interface works.

->IxD Project Evaluation Factors (PDF)

-> Come prepared to show your design documents to the class by using the projector; documents may be posted on the class wiki or brought separately on a USB drive. Design documents may be JPEGs, GIFs, PNGs, PDFs, or interactive HTML, Javascript, or Flash. Please do not bring your original source files, because the classroom computer may not have the software you used to generate your deliverables.(:nl:)

Design by N.Design Studio, adapted by solidGone.org and IDUX
Powered by pmwiki-2.2.86