1. Scope, Structure, Skeleton
User Experience
Scope, Structure, Skeleton

2. Scope = Strategy Applied
How will you achieve the user & application objectives?
Document requirements
What are you building?
What are you not building?

3. What are we going to make?
“Functionality” — what does it do?
“Content” — what information does it present?
For multimedia applications, content may or may not be “traditional” editorial (text, photos, etc.)
What information (data) does it present, and in what way
What is it about this information that requires multimedia?

4. Functional Specifications
What does it do? Quicksilver Example
Access any program or file by typing the some letters from its name
Run persistently in the operating system
Use a keyboard shortcut to access
Create sequences from rapid keystrokes
Search for matches anywhere in the file name
Press Enter to Launch, space to Run With

5. Content Requirements What information does it present? In what way?
Different from traditional content requirements
What kind of data can we get?
In what format?
How should it be presented, or represented?
How should it interact with other data?
What is required to understand, format, and present the data?
What kind of new data format will meet the user needs more efficiently?

6. Content Requirements
What information does it present? Quicksilver example
Index of all files, folders and applications on disk
Algorithm to search disk and create index by object type
Algorithm to match keyed patterns to names in list
Notice that the functional and content requirements bleed into one another

7. Gathering Requirements
What stakeholders say they want vs. what stakeholders actually want
“Imagining” a solution
Organizational politics, team politics (cf. Vicente)
Find the Real Problem
Quicksilver: I can’t find anything!
Etrade: Reduce your budget!
Look at other examples?
What went right?
What went wrong?

8. Writing a Requirements Doc
Be Specific
Use Positive Language: what the system will do
Avoid Subjective Language
Prioritize requirements
Plan to Version
Leave some things out for later releases
Know what you can postpone or eliminate

9. Structure = Scope Organized
How will you organize the features and content?
Categorizing information

10. Information Architecture
Top-down approach: start with the categories, work toward the content
Bottom-up approach: start with the content, work toward the organization
Most multimedia information interfaces are bottom-up: how do we present this information effectively?
Build on the Visual Vocabulary

11. “Sitemap”
PAGE 108

12. “Process Map”
PAGE 108

13. Multimedia Applications…
Typically have more independent flow areas
Often have looser structure
More tightly integrate functionality and content

14. Skeleton = Structure with Form
Interface Design
How the user gets things done
Buttons, fields, interfaces, etc.
Navigation Design
How the user gets from place to place
Links, navigation bars, screens, pages, etc.
Information Design
How the user understands ideas
The principle benefit of multimedia applications

15. The Danger of Metaphors
Conventions help orient users
Door handles
Telephone keypads
Metaphors also help, but risk breaking down
OS “Desktop”
Slate’s “page turn” online magazine
Southwest Airlines ticket counter website

16. Interface Design
Understand user interface controls (standard interface elements)
Checkbox, text field, radio button, etc.
Avoid introducing new controls for purposes that standard controls fulfill
Cf. Hollywood movie websites

17. Navigation Design Some Flash applications are much like websites
Our Tech Bookstore example
The best Flash applications are more like little software programs or games
Etrade quote tool
Navigation is generally deemphasized in these applications

18. Types of Navigation Global Key access points Local
Access what’s nearby
Supplementary
Shortcuts to related content
Contextual
Inside the content
Courtesy
Access to infrequently needed access points
Remote
Backup navigation, like sitemaps or indeces

19. Information Design Common methodologies Visual Organizational
Charts, Icons
Organizational
Sequence, grouping, arrangement
Relational
Key to data in rich media environments
Makes information relevant

20. Wireframes Page (or section, in Flash) Layout
Sometimes called Schematics or Blueprints
Cf. Elements, page 136