Scope, Structure, Skeleton User Experience Scope, Structure, Skeleton

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

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?

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

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?

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

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?

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

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

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

“Sitemap” PAGE 108

“Process Map” PAGE 108

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

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

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

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

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

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

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

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