Exam Tuesday, November 5

1
Exam Tuesday, November 5
2
Interface Contents and Navigation
From Larry L. Constantine and Lucy A.D. Lockwood,
Software for Use A Practical Guide to the Models
and Methods of Usage-Centered Design,
Addison-Wesley, Reading, MA, 1999.
3
Workplaces

• Work takes place in context
• Different tasks in different places with suitable
  contexts
• Access to tools and materials needed to complete
  a given task
• Examples
• Change oil in car
• garage, wrenches, drip pan, oil, new oil filter
• Prepare dinner
• kitchen, pans, utensils, stove, food ingredients
• Efficient performance takes place in a context in
  which the necessary tools and materials are
  immediately available
• Dentist assistant provides different tools
  depending on procedure
• Plumber and carpenter have different tools in
  their toolboxes

4
Interaction Contexts

• Good user interfaces are organized to provide a
  set of distinct interaction contexts
  appropriately equipped for carrying out the tasks
  of interest to the user
• Provide the tools and materials needed for
  completing the use cases being supported
• Functions, containers, and information
• Designing a good user interface involves
  specifying the tools, materials, and the spaces
  to hold these
• Distribute the interface contents over a number
  of distinct but interconnected interaction spaces
• In implementation, each interaction space becomes
  a part of the user interface (a window, screen,
  dialog box, tabbed dialog page, etc.)
• Populated by specific interaction components
  (toolbars, datagrids, command buttons, selection
  lists, etc.)
• Performing tasks usually involves transitions
  between contexts

5
Abstract Prototype

• Determine user interface contents and
  organization APART FROM the appearance and
  behavior of the actual interface components
• Think about what is on the interface before
  worrying about how it will look and behave
• This is abstract prototyping

6
Modeling the Interface Contents

• Modeling technology paper and Post-it Notes
• Consider Post-it Software Notes
• Separate sheet of paper for each interaction
  space
• Name
• broad purpose or function they serve
• the way users think of that portion of the
  application
• not main screen or workspace
• Post-it notes represent tools and materials
  supplied to the user
• Abstract components are placeholders for the
  actual visual components in the implemented
  interface
• NOT low-fidelity
• a high-fidelity abstract model that faithfully
  and accurately represents in the abstract the
  tools and materials to be distributed on the user
  interface
• do NOT draw pictures
• do NOT select GUI widgets
• continue to focus on user and usage needs

7
(No Transcript)
8
Reorganization

• Explore alternative organizations of information
  and tools
• Put this tool here or there? Both?
• Duplicate this information in both places?
• Split this group and add an extra interaction
  space?
• Simplify
• Generalize

9
Content Lists

• Capture the contents of each interaction space as
  a list of components (tool, material) and
  description
• House Hunter Dialog
• housePicture
• expandable photo
• floorPlan
• expandable blueprint
• etc.

10
Setting the Context

• In general, one interaction context for each use
  case
• If two use cases are closely related, consider
  one common interaction context
• Think through the consequences for the users in
  the supported roles
• For lengthy or complex use cases, split across
  more than one interaction context
• Balance complexity of one with the user confusion
  of shifting contexts for a task
• Extension use cases should be available in the
  same space as the basis use case or on an
  adjacent space
• Included use cases should be in the same space as
  the including use case or in an adjacent space
• These are initial groupings
• Experimentally enact the use cases
• Reorganize the spaces to fit the specific goals
  and tasks

11
Tools and Materials

• Abstract tools
• Supply the functions and active capabilities
• hot-colored Post-it notes indicate active
• pink, yellow, orange
• Abstract materials
• data, containers, displays, or work areas upon
  which the tools can operate
• cool-colored Post-it notes indicate passive
• blue, green

12
(No Transcript)
13
Content Modeling Process

• Examine the validated use case narratives line by
  line
• For each use case, what tools and materials will
  have to be supplied within a given interaction
  space in order for the user to enact the use
  case?
• User and domain language
• Identify information
• data and data containers
• label and brief description characterizing the
  data or container
• Identify tools
• functions or operators
• label and brief description characterizing the
  general function performed or purpose served

14
Content Modeling Process

• Identify optional contents beyond essential
  interaction
• Make implicit items explicit
• Components that will ease use or simplify a task
• Avoid feature creep
• Explore grouping options
• Collect tools into a tool box
• Associate materials with the tools that
  manipulate them
• Arrange in the order in which they will be used
• Multiple groupings may be appropriate
• Grouping, not screen layout
• Good design ideas can be captured as annotations
  on abstract components
• Avoid getting too deep into design, though
• Simplify and generalize

15
Context Navigation Map

• For a task, trade-off between complex interaction
  space vs. context switch between simpler
  interaction spaces
• Inexperienced user simple interaction space
• Experienced user fewer context switches
• Context navigation map represents the overall
  architecture of the user interface by modeling
  the relationships among interaction contexts

16
Navigation Map Notation
any interaction context
action
context transition triggered by action
screen or display
context transition with implied return
window
ad hoc extensions as needed
Web page
xxx
dialog or message
xxx
yyy
embedded link
zzz
panel or page within tabbed or other compound
dialog
navigation group (frame)
Menu select action
View Toolbars
Command button action
Apply
Icon or tool select action
ltpage widthgt
17
Example Windows 3.11 for Workgroups

• How does a typical user change network logon
  settings?
• ltNetwork Setupgt and ltWindows Setupgt are wrong
  choices, leading to dead-ends
• ltControl Panelgt is the correct path
• Network Startup Settings and Network Setup are
  semantically related, so put them together or
  interconnect them

Program Manager
ltWindows Setupgt
ltControl Panelgt
Options Change System Settings
Change System Settings
Control Panel
Windows
ltNetwork Setupgt
ltNetworkgt
Options Change Network Settings
MS Windows Network
Network Setup
Startup
Network Startup Settings
18
Solution
Program Manager
ltWindows Setupgt
ltControl Panelgt
Options Change System Settings
Change System Settings
Control Panel
Windows
ltNetwork Setupgt
Options Change Network Settings
ltNetworkgt
Another Issue
MS Windows Network
Network Setup
ltNetwork Setupgt
Solution
Startup
Network Startup Settings
Startup Settings
19
Behavioral and sequential views

• Behavioral view the interaction contexts
  associated with enacting a single use case
• The starting point for architectural design
• Combine all behavioral view (across all use
  cases) ? architectural view
• Sequential view
• When enacted, some use cases will carry the user
  back to the same interaction space repeatedly,
  but, on each return, the state of the system has
  changed
• Sequential view show each instance of the
  interaction space separately
• Strings out interaction like a storyboard

20
Using Navigation Maps

• Evaluate alternative distributions of information
  and tools
• Serves as a check on the interaction space
  portion of the content model
• Check on how tasks are distributed over
  interaction spaces
• Architecture view overall complexity
• Overly long chains of transitions ? consolidate
  and simplify interaction spaces
• Explosion of transition from a given interaction
  context ? re-distribute contents
• Trial use-case enactment
• All information and tools are available
• Identify superfluous layers of interposed dialogs
• Document and understand existing software
• Especially helps new users get a system overview
  and find specific features
• Use actual screen shots

21
Example Keyboard Extender

• (Continued from role and task analysis example)
• Consider supporting insertingSymbol,
  insertingPhrase, and tryingSymbol (the focal use
  cases) within one interaction space

insertingSymbol
insertingPhrase
tryingSymbol
translatingCodes
translatingSymbols
reviewingShortcuts
extends all
specifyingSymbolCollection
extends all
extends
browsingSymbols
22
insertingSymbol
User Intention
System Responsibility
Request symbols
Show specified symbols
Select symbol
Insert symbol Leave
insertingPhrase
User Intention
System Responsibility
Request symbols
Show specified symbols
Select symbol or type character
Add to phrase
Repeat until complete
Insert phrase Leave
23
tryingSymbol
User Intention
System Responsibility
Request symbols
Show specified symbols
Select symbol
Insert it
Optionally retry/reposition until satisfied
Leave
24
Identify Information and Tools

• Display specified symbols symbolCollection
• Hold a phrase being built phraseBin
• Implementation consideration the document
  holding the symbol is the placeholder for the
  phrase being built (build it in-place)
• All the use cases deal with selecting a symbol
  symbolSelector
• Some symbols are hard to distinguish (e.g.,
  ì,í,î,ï) symbolViewer to enlarge symbols, making
  supported tasks easier for many users

25
Identify Information and Tools

• Viewing and selecting symbols are closely
  related, so place their Post-its together
  (Structure Principle)
• Probably view and select with mouse pointer, so
  capture this as an annotation, but reconsider in
  design
• Need to tell the system when done inserting a
  phrase or trying a symbol phraseOrTryEnder
• Layout phraseBin at the top, Ender at the end
  (bottom)

Structure Principle Organize the user
interface purposefully, in meaningful and useful
ways that put related things together and
separate unrelated things based on clear,
consistent models that are apparent and
recognizable to users.
26
Inserting Interaction Context
27
Validation

• Does this interaction context support the three
  essential use cases?
• Enact the use cases
• Missing repositioning or manipulating the symbol
• These are functions of the application our
  utility is collaborating with, not of the
  keyboard extender utility

28
Inserting Interaction Context
29
Continuing to other use cases

• browsingSymbol use case extension
• Closely related to the focal use cases, so add it
  to the current interaction context
• Information symbolCollection already exists
• tool symbolBrowser
• Evaluate whether it should be another interaction
  context when creating the navigation map

30
Continuing to other use cases

• specifyingSymbolGroup use case extension
• Include in current interaction context?
• If in doubt, start with a separate context
• Also observe that specifyingSymbolGroup is a
  setup or customization function, conceptually
  distinct from normal operation
• Further design may identify a creative compromise
  between fully separate and fully combined
  interaction contexts

31
Specifying Interaction Context

• Note need two containers of symbols one for
  those being specified, one for all symbols
• Structure Principle ? two instances of the same
  (or similar) visual components (symbolCollection)

32

• And so on for remaining use cases
• Now, consider a navigation map

33
Navigation Map
extendingKeyboard insertingSymbol
insertingPhrase tryingSymbol
browsingSymbols reviewingShortcuts
Define Group
specifyingSymbols
Options
Set Keystrokes
settingOptions
settingShortcuts

• Iterate between modeling the content and context
  navigation and modeling the roles and use cases
• New need specify or change shortcuts
• Generalizing, identify an interaction context to
  set all options

34
Design is next
35
Extender Design What we are replacing
36
Extender Design First Iteration
37
Spin list selection widget?

• The symbols in the left pane need to be
  synchronized with the font selection in the right
  pane
• When scrolling through a list of fonts, the
  current selection tends to scroll out of view,
  and the user forgets what was selected
• To scan the contents of a series of fonts or
  sets, each must be separately selected in turn
• scroll, select, look scroll, select, look
• Want to have the selection point in view and have
  it change automatically as the list is scrolled
• Consider a spin list selection widget

38
Specifying Symbols
39

• Recall the functional overlap between selecting
  symbols and specifying symbol groups
• Consider adding Define Symbol Group as a
  drop-down panel (companion window) to the main
  application window

40
KeyboardExtender