Week 2

Week 2: Schematics / Wireframes IV
Topics:

•Interaction Design (IxD)
•Storyboarding I
•Animatics
Readings:

Ten Principles for Designing Rich Internet Applications (Wiki)
Rich Internet Application Screen Design (HTML)
Exercises:

Using animatics and storyboards to illustrate the changing states of a dynamic page or application for online banking. Annotating animatics and storyboards to describe and define the dynamic behaviors. Review the interactions found on the following sites and discuss how they could be represented in wireframes and storyboards:
The Gap
NikeID
MarketWatch
Yahoo!
Ace Hardware
DIY Network
Oli LookBook
Use animatics and/or storyboards to illustrate complex interface behaviors and transitions that could be utilized on a banking web site. Create sketches that illustrate a BillPay web application (e.g., select Payee, a Payee, select Pay by date, specify payment amount, mark eBill as paid, perform transfer of funds to debit account, etc.) and include information and indicators for how the different components might behave.
Interaction Annotations (PDF)
Assignment:

Create animatics to illustrate the transitions and behaviors of the main page components of the project site. Include the transitions and behaviors of conditional page components (e.g., elements that only appear under certain conditions, such as calendars for date selection.)

- - -

Designing RIAs

--------------------------------------------------------------------------------

Ten Principles for Designing Rich Internet Applications (RIAs)
1.Visibility of system status (FEEDBACK)
2.Match between system and the real world (METAPHOR)
3.User control and freedom (NAVIGATION)
4.Consistency and standards (CONSISTENCY)
5.Error prevention (PREVENTION)
6.Recognition rather than recall (MEMORY)
7.Flexibility and efficiency of use (EFFICIENCY)
8.Aesthetic and minimalist design (DESIGN)
9.Help users recognize, diagnose, and recover from errors (RECOVERY)
10.Help and documentation (HELP)
From: Designing Interfaces: Tips for a Great Flex UI (HTML)

- - -