User Experience

1
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?
• What are the connections between functionality
  and content?

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 cant 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
12
Process Map
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
• Slates 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
• Many effective 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 whats 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
• 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