Human Computer Interaction

Interface Design Process

Four basic activities in the design process
1. Establishing requirements
2. Designing alternatives (options)
3. Prototyping
4. Evaluating
 Designing
a street rubbish bin

• Must be big –  To take all the rubbish

• Must be small –  To avoid blocking the
pavement (roadway)
• Must be light –  So it can be lifted and
emptied easily
• Must be heavy –  So it doesn’t blow over
in a strong wind
• Must be open on top –  So easy to put
rubbish in
• Must have a close–  So rubbish doesn’t
blow away
 What is design?
• “ process of creative and critical thinking
that allows information and ideas to be
organized, decisions to be made,
situations to be improved, and
knowledge to be gained ”
• Design involves finding solutions that fit
the user, task, and context of use.
• A discipline that explores the dialogue
between products, people, and contexts
• A process that defines a solution to help
people achieve their goals
• An artifact produced as the result of
solution definition
Good Design
Bad Design
 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
 Types of design rules
• principles
– abstract design rules
– “an interface should be easy to navigate”
• standards
– specific design rules
– advice on how to achieve principle
– “use colour to highlight links”
 What are Design Principles?
• Abstract design rules to help with the design
process

• Learnability
– Support for learning for users of all levels
• Flexibility
– Support for multiple ways of doing tasks
• Robustness
– Support for recovery
 Design Principles - Overview
• Apply at multiple levels of design

• Have experience or common sense

• Become obvious to user of poorly-designed

Uis
 Good Design (our goal!)
“Every designer wants to build a high-quality
interactive system that is accepted by
colleagues, celebrated by users, circulated
widely, and imitated (Reproduce) frequently.”
(Shneiderman, 1992, p.7)

…and anything goes!…

 Levels of Consideration
• Meta-display level
– Apply to the whole system, across media & across displays
– Focus on this in Basic Layout Stage
• Display Layout
– Apply to groups of elements in a display
– Focus on this in Prototyping and Redesign
• Element level
– Details about specific parts of a display
– Colors, sound attributes, symbols
 UI Design Principles
• Learnability
– Support for learning for users of all levels
• the ease with which new users can begin effective interaction and
achieve maximal performance
• Flexibility
– Support for multiple ways of doing tasks
• the multiplicity of ways the user and system exchange information
• Robustness
– Support for recovery
• the level of support provided to the user in determining successful
achievement and assessment of goal-directed behaviour
 1. Learnability Principles
• Ease with which new users can begin effective
interaction and achieve maximal performance
– Predictability
– Synthesizability
– Familiarity
– Generalizability
– Consistency
 1.1 Predictability
• Determinism and operation visibility
• I think that this action will do….
– System behaviour is observably (Clearly)
deterministic (Repeatable) :
– Non-deterministic delays should be
avoided
– Operation effect determinable by
interaction history

• Mental model can help

 Operation visibility
• user actions should be matched by a response
• affordance/logical constraints should be used to
• indicate available actions:
– Menus vs. command shell
– Grayed menu items provide context
Visibility Minimizes User Memory Load

• Recognition is better than recall

• Make visible!
• Describe required input format, include
example and default
• Date: _ _ - _ _ - _ _ (DD-MM-YY)
• Also avoids errors
 1.2 Synthesizability
• Can assess (review) effect (outcome) of past
actions.
– Direct Manipulation interfaces promise immediate
honesty.
– Command line interfaces are never honest:
1.3 Familiarity (matching users’ expectations)

• How prior knowledge applies to new system

• Knowledge of task and of other systems
• Really relevant to first impressions

– Are there limitations on familiarity?

 1.4 Generalizability
• Can knowledge of one system/UI be extended
to other similar ones?
– Example: cut & paste in different
applications

– Does knowledge of one aspect of a UI apply

to rest of the UI?
– UI standards and guidelines assist/enforce
generalizability.
 1.5 Consistency
• Likeness in behavior between similar
tasks/operations/situations/terminology
– Interaction sequences
– Output
– Screen layout
• Many forms of consistency:
– Consistent sequences of actions in similar situations.
– Identical terminology across: prompts, menus, help screens.
– Consistent colour, layout, capitalization, fonts.
• Exceptions:
– Echoing of passwords.
– Confirmation of the delete command.
 Consistency (cont’d)
• Avoid special cases and special rules
• Supports generalization by user, avoids
frustration.

• For command line systems - consistent syntax

(In)Consistency - Example
 2. Flexibility Principles
• Multiplicity of ways that users and system exchange
information
– Dialog Initiative
– Multithreading
– Task migratability
– Substitutivity
– Customizability
 2.1 Dialog Initiative
• Who controls dialogue flow
– User pre-emptive (relating to the purchase of goods or
shares by one person or party before the opportunity is
offered to others).
• User initiates actions
• More flexible, generally more desirable
– System pre-emptive
• System does all prompts, user responds
• Sometimes necessary
 2.1 Dialog Initiative
• Freedom from system imposed constraints on input dialogue.
• User should be able to abandon, suspend or resume tasks at any point
• Modal dialog boxes (A modal dialog is a window that forces the user
to interact with it before they can go back to using the parent
application) are system pre-emptive.
• Direct manipulation (is of a virtual world representing the real world
and is a human–computer interaction style which involves continuous
representation of objects of interest and rapid, reversible, and
incremental actions and feedback) is user pre-emptive
• Minimize system pre-emptive dialogue and maximize user pre-
emptive dialogue .
 2.2 Multithreading
• Allowing user to perform more than one task at a
time
• Two types
– Concurrent
• Input goes to multiple tasks simultaneously
– Interleaved
• Many tasks, but input goes to one at a time
 2.3 Task Migratability
• How easily functions can be moved between user
and system.
• Passing responsibility for task execution between
user and system
– example: spell checking
 2.4 Substitutivity
• Flexibility in details of operations
– Allow user to choose suitable interaction methods
– Allow different ways to
• perform actions, specify data, configure
– Allow different ways of presenting output
• to suit task & user
 2.4 Substitutivity
• Drafting & page layout systems
– Indicate positions with cursor
or
– By typing in coordinates
• Point at spreadsheet cell vs enter name
• Give temperature via slider or by typing
• Other examples???
 2.5 Customizability
• Ability of user to modify interface
– By user - contributing or adaptability
• Is this a good thing?

– By system - contributing adaptively

• Is this a good thing?
Q&A