Design Issues

1
Design Issues

• Managing Design Processes
• Design Tools
• Direct Manipulation
• Course 5, CMC, 30/09/03

2
Design Process 1

• Observation of users
• Analysis of task frequences
• Analysis of task sequences
• Prototype validation
• Usability tests

3
Design Process 2

• Direct interaction with users
• design phase
• development process
• system lifecycle
• Iterative design methods
• early testing of prototypes
• revisions based on feedback from users
• refinements suggested by usability tests

4
Usability Engineering

• Attention to usability
• shortened learning times
• faster performance
• lower error rates
• Organizational design to support usability
• The 3 pillars of succesful user-interface
  development

5
The 3 Pillars
6
Guidelines

• Text and Icons
• Screen-layout issues
• Input and Output devices
• Action Sequences
• Training

7
Development Methodologies

• Logical User-Centered Interaction Design method
  (LUCID)
• develop product concept
• perform research and needs analysis
• design concepts and key-screen prototype
• do iterative design and refinement
• implement software
• provide rollout support

8
High Concept DefinitionExample

• The new home banking system will provide
  customers with with unified access to their
  accounts. It will support balance inquiry,
  management of credit accounts and loans, transfer
  of funds among accounts, electronic bill payment,
  and investment in the banks family of mutual
  funds. The system will provide the customer with
  year-end accountingfor tax purposes.

9
Scenarios of UsageExample National Digital
Library

• A seventh-grade social-studies teacher is
  teaching a unit on the Industrial Revolution. He
  wants to make use of primary source material that
  would illustrate the factors that facilitated
  industrialization, the manner in which it
  occurred, and the impact that it had on society
  and on the built environment. Given his teaching
  load, he only has about 4 hours total to locate
  and package the supplementary material for
  classroom use.

10
User-Interface Software Tools

• Simple and quick sketching to identify needs and
  preferences of clients
• precise working out of details with clients
• coordinating with graphic designers and technical
  writers
• telling software engineers what to do

11
Specification Methods

• Natural language specifications
• Formal and Semiformal languages
• Menu-tree structures
• Transition Diagrams
• Statecharts
• User-action notation

12
StatechartExample simplified bank transaction
system
13
User-Action NotationExample Task Delete a File

• User Actions
• file Mv
• x,y
• trash
• M

• Interface Feedback
• file!, for all (file!) file -!
• outline(file) gt
• outline(file)gt , trash!
• Erase(file), trash!!

14
Interface-Building Tools

• User-interface prototyping vs. System development
• Design Tools
• visual editing/development tools (HyperCard, VB,
  Delphi, Cafe)
• Software Engineering Tools
• general-purpose programming languages
  (Toolkits)(C/C, Motif, Tcl/Tk, Galaxy, Java)

15
Evaluation and Critiquing Tools

• Simple metrics
• Menu-tree depth redundancy consistency
  transitions spell checkers concordances
• Task-dependent metrics (run-time logging
  software NGOMSL)
• Website analyzers

16
Direct Manipulation

• In signs one sees an advantage for discovery
  that is greatest when they express the exact
  nature of a thing briefly and, as it were,
  picture it then, indeed, the labor of thought is
  wonderfully diminished
• Leibniz

17
Examples Direct-Manipulation

• Text editors (line editor-display editor-WYSIWYG
  word processors)
• Spreadsheets (VisiCalc-Excel)
• Spatial data management
• Video games
• Computer-aided design
• Office Automation

18
Direct Manipulation 3 integrated principles

• Continuous representation of objects and actions
  of interest with meaningful visual metaphors
• Physical actions or presses of labeled buttons
  instead of complex syntax
• Rapid incremental reversible operations whose
  effect on objects of interest is visible
  immediately

19
OAI model
20
Problems with Direct Manipulation

• Visual representations too large for screen, too
  detailed
• Visual representations without obvious meaning
• Misleading metaphors
• Shift hardware devices

21
Visual Thinking and Icons

• Commercial graphic designers, semiotically
  oriented academics, data-visualization gurus
• Preferences vary by user and by task
• Icons or Text?
• How to design icons?
• Sound and Animation