1. Donald Norman‟s model
 Seven stages
◦ user establishes the goal
◦ formulates intention
◦ specifies actions at interface
◦ executes action
◦ perceives system state
◦ interprets system state
◦ evaluates system state with respect to goal
 Norman‟s model concentrates on user‟s view of the
interface
shafyHCI/sem5_KSS

2. execution/evaluation loop
goal
execution evaluation
system
 user establishes the goal
 formulates intention
 specifies actions at interface
 executes action
 perceives system state
 interprets system state
 evaluates system state with respect to goal
shafyHCI/sem5_KSS

3. Ergonomics
 Study of the physical characteristics of interaction
 Also known as human factors – but this can also be
used to mean much of HCI!
 Ergonomics good at defining standards and
guidelines for constraining the way we design
certain aspects of systems
shafyHCI/sem5_KSS

4. Ergonomics - examples
 arrangement of controls and displays
e.g. controls grouped according to function or frequency of
use, or sequentially
 surrounding environment
e.g. seating arrangements adaptable to cope with all sizes
of user
 health issues
e.g. physical position, environmental conditions
(temperature, humidity), lighting, noise,
 use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
shafyHCI/sem5_KSS

5. Common interaction styles
 command line interface
 menus
 natural language
 question/answer and query dialogue
 form-fills and spreadsheets
 WIMP
 point and click
 three–dimensional interfaces
shafyHCI/sem5_KSS

6. Command line interface
 Way of expressing instructions to the computer
directly
◦ function keys, single characters, short abbreviations, whole
words, or a combination
 suitable for repetitive tasks
 better for expert users than novices
 offers direct access to system functionality
 command names/abbreviations should be
meaningful!
Typical example: the Unix system
shafyHCI/sem5_KSS

7. Menus
 Set of options displayed on the screen
 Options visible
◦ less recall - easier to use
◦ rely on recognition so names should be meaningful
 Selection by:
◦ numbers, letters, arrow keys, mouse
◦ combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
◦ sensible grouping is needed
 Restricted form of full WIMP system
shafyHCI/sem5_KSS

8. Natural language
 Familiar to user
 speech recognition or typed natural language
 Problems
◦ vague
◦ ambiguous
◦ hard to do well!
 Solutions
◦ try to understand a subset
◦ pick on key words
shafyHCI/sem5_KSS

9. Query interfaces
 Question/answer interfaces
◦ user led through interaction via series of questions
◦ suitable for novice users but restricted functionality
◦ often used in information systems
 Query languages (e.g. SQL)
◦ used to retrieve information from database
◦ requires understanding of database structure and language
syntax, hence requires some expertise
shafyHCI/sem5_KSS

10. Form-fills
 Primarily for data entry or data retrieval
 Screen like paper form.
 Data put in relevant place
 Requires
◦ good design
◦ obvious correction
facilities
shafyHCI/sem5_KSS

11. Spreadsheets
 first spreadsheet VISICALC, followed
by Lotus 1-2-3
MS Excel most common today
 sophisticated variation of form-filling.
◦ grid of cells contain a value or a formula
◦ formula can involve values of other cells
e.g. sum of all cells in this column
◦ user can enter and alter data spreadsheet
maintains consistency
shafyHCI/sem5_KSS

12. WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
 default style for majority of interactive computer
systems, especially PCs and desktop machines
shafyHCI/sem5_KSS

13. Physical design
 many constraints:
◦ ergonomic – minimum button size
◦ physical – high-voltage switches are big
◦ legal and safety – high cooker controls
◦ context and environment – easy to clean
◦ aesthetic – must look good
◦ economic – … and not cost too much!
shafyHCI/sem5_KSS

14. Personal computing
 1970s – Papert's LOGO language for simple
graphics programming by children
 A system is more powerful as it becomes easier to
user
 Future of computing in small, powerful machines
dedicated to the individual
 Kay at Xerox PARC – the Dynabook as the ultimate
personal computer
shafyHCI/sem5_KSS

15. Window systems and the WIMP
interface
 humans can pursue more than one task at a time
 windows used for dialogue partitioning, to “change
the topic”
 1981 – Xerox Star first commercial windowing
system
 windows, icons, menus and pointers now familiar
interaction mechanisms
shafyHCI/sem5_KSS

16. Metaphor
 relating computing to other real-world activity is
effective teaching technique
◦ LOGO's turtle dragging its tail
◦ file management on an office desktop
◦ word processing as typing
◦ financial analysis on spreadsheets
◦ virtual reality – user inside the metaphor
 Problems
◦ some tasks do not fit into a given metaphor
◦ cultural bias
shafyHCI/sem5_KSS

17. the software lifecycle
 Software engineering is the discipline for
understanding the software design process, or life
cycle
 Designing for usability occurs at all stages of the
life cycle, not as a single isolated activity
shafyHCI/sem5_KSS

18. The waterfall model
Requirements
specification
Architectural
design
Detailed
design
Coding and
unit testing
Integration
and testing
Operation and
maintenance
shafyHCI/sem5_KSS

19. Activities in the life cycle
Requirements specification
designer and customer try capture what the system is expected to
provide can be expressed in natural language or more precise
languages, such as a task analysis would provide
Architectural design
high-level description of how the system will provide the services
required factor system into major components of the system and
how they are interrelated needs to satisfy both functional and
nonfunctional requirements
Detailed design
refinement of architectural components and interrelations to identify
modules to be implemented separately the refinement is governed
by the nonfunctional requirements
shafyHCI/sem5_KSS

20. Verification and validation
Real-world
requirements
and constraints The formality gap
Verification
designing the product right
Validation
designing the right product
The formality gap
validation will always rely to some extent on subjective means of proof
Management and contractual issues
design in commercial and legal contexts
shafyHCI/sem5_KSS

21. The life cycle for interactive
systems
cannot assume a linear
sequence of activities
Requirements
specification as in the waterfall model
Architectural
design
Detailed
design
Coding and
unit testing
lots of feedback!
Integration
and testing
Operation and
maintenance
shafyHCI/sem5_KSS

22. Usability engineering
The ultimate test of usability based on measurement of user
experience
Usability engineering demands that specific usability measures be
made explicit as requirements
Usability specification
◦ usability attribute/principle
◦ measuring concept
◦ measuring method
◦ now level/ worst case/ planned level/ best case
Problems
◦ usability specification requires level of detail that may not be
◦ possible early in design satisfying a usability specification
◦ does not necessarily satisfy usability
shafyHCI/sem5_KSS

23. ISO usability standard 9241
adopts traditional usability categories:
 effectiveness
◦ can you achieve what you want to?
 efficiency
◦ can you do it without wasting effort?
 satisfaction
◦ do you enjoy the process?
shafyHCI/sem5_KSS

24. Iterative design and
prototyping
 Iterative design overcomes inherent problems of incomplete
requirements
 Prototypes
◦ simulate or animate some features of intended system
◦ different types of prototypes
 throw-away
 incremental
 evolutionary
 Management issues
◦ time
◦ planning
◦ non-functional features
◦ contracts
shafyHCI/sem5_KSS

25. Techniques for prototyping
Storyboards
need not be computer-based
can be animated
Limited functionality simulations
some part of system functionality provided by designers
tools like HyperCard are common for these
Wizard of Oz technique
Warning about iterative design
design inertia – early bad decisions stay bad
diagnosing real usability problems in prototypes….
…. and not just the symptoms
shafyHCI/sem5_KSS

26. Design rationale
Design rationale is information that explains why a
computer system is the way it is.
Benefits of design rationale
◦ communication throughout life cycle
◦ reuse of design knowledge across products
◦ enforces design discipline
◦ presents arguments for design trade-offs
◦ organizes potentially large design space
◦ capturing contextual information
shafyHCI/sem5_KSS

27. Design rationale (cont‟d)
Types of DR:
 Process-oriented
◦ preserves order of deliberation and decision-making
 Structure-oriented
◦ emphasizes post hoc structuring of considered design
alternatives
 Two examples:
◦ Issue-based information system (IBIS)
◦ Design space analysis
shafyHCI/sem5_KSS

28. Issue-based information system
(IBIS)
 basis for much of design rationale research
 process-oriented
 main elements:
issues
– hierarchical structure with one „root‟ issue
positions
– potential resolutions of an issue
arguments
– modify the relationship between positions and issues
 gIBIS is a graphical version
shafyHCI/sem5_KSS

29. structure of gIBIS
supports
Position Argument
responds to
Issue
responds to
objects to
Position Argument
specializes
Sub-issue generalizes
questions
Sub-issue
Sub-issue
shafyHCI/sem5_KSS

30. Design space analysis
 structure-oriented
 QOC – hierarchical structure:
questions (and sub-questions)
– represent major issues of a design
options
– provide alternative solutions to the question
criteria
– the means to assess the options in order to make a choice
 DRL – similar to QOC with a larger language and
more formal semantics
shafyHCI/sem5_KSS

31. the QOC notation
Criterion
Option
Question Option Criterion
Option
Criterion
… Consequent …
Question
Question
shafyHCI/sem5_KSS

32. Psychological design
rationale
 to support task-artefact cycle in which user tasks are affected
by the systems they use
 aims to make explicit consequences of design for users
 designers identify tasks system will support
 scenarios are suggested to test task
 users are observed on system
 psychological claims of system made explicit
 negative aspects of design can be used to improve next
iteration of design
shafyHCI/sem5_KSS

33. Summary
The software engineering life cycle
◦ distinct activities and the consequences for interactive
system design
Usability engineering
◦ making usability measurements explicit as requirements
Iterative design and prototyping
◦ limited functionality simulations and animations
Design rationale
◦ recording design knowledge
◦ process vs. structure
shafyHCI/sem5_KSS

34. chapter 2
design rules
shafyHCI/sem5_KSS

35. design rules
Designing for maximum usability
– the goal of interaction design
 Principles of usability
◦ general understanding
 Standards and guidelines
◦ direction for design
 Design patterns
◦ capture and reuse design knowledge
shafyHCI/sem5_KSS

36. types of design rules
 principles
◦ abstract design rules
◦ low authority
◦ high generality
 standards Guide line s
increasing generality
◦ specific design rules
inc reasin g gen eralit y
◦ high authority
◦ limited application
 guidelines Standar ds
◦ lower authority
◦ more general application
increasing auth ority
increasing
authority
shafyHCI/sem5_KSS

37. Principles to support usability
Learnability
the ease with which new users can begin effective interaction
and achieve maximal performance
Flexibility
the multiplicity of ways the user and system exchange
information
Robustness
the level of support provided the user in determining
successful achievement and assessment of goal-directed
behaviour
shafyHCI/sem5_KSS

38. Principles of learnability
Predictability
◦ determining effect of future actions based
on past interaction history
◦ operation visibility
Synthesizability
◦ assessing the effect of past actions
◦ immediate vs. eventual honesty
shafyHCI/sem5_KSS

39. Principles of learnability (ctd)
Familiarity
◦ how prior knowledge applies to new system
◦ guessability; affordance
Generalizability
◦ extending specific interaction knowledge to new situations
Consistency
◦ likeness in input/output behaviour arising from similar
situations or task objectives
shafyHCI/sem5_KSS

40. Principles of flexibility
Dialogue initiative
◦ freedom from system imposed constraints on input dialogue
◦ system vs. user pre-emptiveness
Multithreading
◦ ability of system to support user interaction for more than
one task at a time
◦ concurrent vs. interleaving; multimodality
Task migratability
◦ passing responsibility for task execution between user and
system
shafyHCI/sem5_KSS

41. Principles of flexibility (ctd)
Substitutivity
◦ allowing equivalent values of input and
output to be substituted for each other
◦ representation multiplicity; equal
opportunity
Customizability
◦ modifiability of the user interface by user
(adaptability) or system (adaptivity)
shafyHCI/sem5_KSS

42. Principles of robustness
Observability
◦ ability of user to evaluate the internal state of the system
from its perceivable representation
◦ browsability; defaults; reachability; persistence; operation
visibility
Recoverability
◦ ability of user to take corrective action once an error has
been recognized
◦ reachability; forward/backward recovery; commensurate
effort
shafyHCI/sem5_KSS

43. Principles of robustness (ctd)
Responsiveness
◦ how the user perceives the rate of
communication with the system
◦ Stability
Task conformance
◦ degree to which system services support
all of the user's tasks
◦ task completeness; task adequacy
shafyHCI/sem5_KSS

44. Using design rules
increasing generality
Guide line s
inc reas in g gen eralit y
Design rules
 suggest how to increase usability
 differ in generality and authority Standar ds
increasing auth ority
increasing
authority
shafyHCI/sem5_KSS

45. Standards
 set by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and
slowly changing technology
 hardware standards more common than software
high authority and low level of detail
 ISO 9241 defines usability as effectiveness,
efficiency and satisfaction with which users
accomplish tasks
shafyHCI/sem5_KSS

46. Guidelines
 more suggestive and general
 many textbooks and reports full of guidelines
 abstract guidelines (principles) applicable during
early life cycle activities
 detailed guidelines (style guides) applicable during
later life cycle activities
 understanding justification for guidelines aids in
resolving conflicts
shafyHCI/sem5_KSS

47. Golden rules and heuristics
 “Broad brush” design rules
 Useful check list for good design
 Better design using these than using nothing!
 Different collections e.g.
◦ Nielsen‟s 10 Heuristics (see Chapter 9)
◦ Shneiderman‟s 8 Golden Rules
◦ Norman‟s 7 Principles
shafyHCI/sem5_KSS

48. Shneiderman‟s 8 Golden
Rules
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
shafyHCI/sem5_KSS

49. Norman‟s 7 Principles
1. Use both knowledge in the world and knowledge
in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of Execution
and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and
artificial.
6. Design for error.
7. When all else fails, standardize.
shafyHCI/sem5_KSS

50. HCI design patterns
 An approach to reusing knowledge about
successful design solutions
 Originated in architecture: Alexander
 A pattern is an invariant solution to a recurrent
problem within a specific context.
 Examples
◦ Light on Two Sides of Every Room (architecture)
◦ Go back to a safe place (HCI)
 Patterns do not exist in isolation but are linked to
other patterns in languages which enable complete
designs to be generated
shafyHCI/sem5_KSS

51. HCI design patterns (cont.)
 Characteristics of patterns
◦ capture design practice not theory
◦ capture the essential common properties of good examples of
design
◦ represent design knowledge at varying levels: social, organisational,
conceptual, detailed
◦ embody values and can express what is humane in interface design
◦ are intuitive and readable and can therefore be used for
communication between all stakeholders
◦ a pattern language should be generative and assist in the
development of complete designs.
shafyHCI/sem5_KSS

52. Summary
Principles for usability
◦ repeatable design for usability relies on maximizing benefit
of one good design by abstracting out the general
properties which can direct purposeful design
◦ The success of designing for usability requires both
creative insight (new paradigms) and purposeful principled
practice
Using design rules
◦ standards and guidelines to direct design activity
shafyHCI/sem5_KSS