Transcript User Experience - Georgia Institute of Technology

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?
– What are the connections between functionality and
content?
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”
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
“Process Map”
QuickTi me™ and a
T IFF (Uncompressed) decompressor
are needed to see thi s pi cture.
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
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
• Many effective 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
• 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