SE 616 – Introduction to Software Engineering
12: User Interface Design
User in Control
- Define interaction in such a way that the user is not
forced into performing unnecessary or undesired actions
- Provide for flexible interaction (users have varying
- Allow user interaction to be interruptible and reversible
- Streamline interaction as skill level increases and allow
customization of interaction
- Hide technical internals from the casual user
- Design for direct interaction with objects that appear on
User Cognitive (Memory) Load
- Reduce demands on user's short-term memory
- Establish meaningful defaults
- Define intuitive short-cuts
- Visual layout of user interface should be based on a
familiar real world metaphor
- Disclose information in a progressive fashion
- Allow user to put the current task into a meaningful
- Maintain consistency across a family of applications
- If past interaction models have created user expectations,
do not make changes unless there is a good reason to do so
Interface Design Models
- Design model (incorporates data, architectural, interface, and
procedural representations of the software)
- User model (end user profiles - novice, knowledgeable intermittent
user, knowledgeable frequent users)
- User's model
or system perception (user's mental
image of system)
- System image (look and feel of the interface and supporting media)
Interface Design Process (Spiral Model)
task, and environment analysis and modeling
o Where will the interface be located physically?
o Will the user be sitting, standing, or performing other tasks
unrelated to the interface?
o Does the interface hardware accommodate space, light, or noise
o Are there special human factors considerations driven by
o define a set of interface objects and actions (and their screen
representations) that enable a user to perform all defined tasks in a manner
that meets every usability goal defined for the system
o the ability of the interface to implement every user task
correctly, to accommodate all task variations, and to achieve all general user
o the degree to which the interface is easy to use and easy to
o the users' acceptance of the interface as a useful tool in their
Analysis and Modeling
tasks users must complete to accomplish their goal without the computer
and map these into a similar set of tasks that are to be implemented in
the user interface
existing specification for computer-based solution and derive a set of
tasks that will accommodate the user model, design model, and system
Interface Design Activities
1. Establish the goals and intentions of each task
2. Map each goal/intention to a sequence of specific actions
(objects and methods for manipulating objects)
3. Specify the action sequence of tasks and subtasks (user
4. Indicate the state of the system at the time the user scenario
5. Define control mechanisms
6. Show how control mechanisms affect the state of the system
7. Indicate how the user interprets the state of the system from
information provided through the interface
Interface Design Issues
response time (time between the point at which user initiates some control
action and the time when the system responds)
help facilities (integrated, context sensitive help versus add-on help)
information handling (messages should be non-judgmental, describe problem
precisely, and suggest valid solutions)
labeling (based on user vocabulary, simple grammar, and have consistent
rules for abbreviation)
User Interface Implementation Tools
toolkits or user-interface development systems (UIDS)
components or objects that facilitate creation of windows, menus, device
interaction, error messages, commands, and many other elements of an
- managing input devices (such as a mouse or keyboard)
- validating user input
- handling errors and displaying error messages
- providing feedback (e.g., automatic input echo)
- providing help and prompts
- handling windows and fields, scrolling within windows
- establishing connections between application software and
- insulating the application from interface management functions
- allowing the user to customize the interface
Interface Evaluation Cycle
1. Preliminary design
2. Build first interface prototype
3. User evaluates interface
4. Evaluation studied by designer
5. Design modifications made
6. Build next prototype
7. If interface is not complete then go to step 3
User Interface Design Evaluation
and complexity of written interface specification provide an indication of
amount of learning required by system users
of user tasks and the average number of actions per task provide an
indication of interaction time and overall system efficiency
of tasks, actions, and system states in the design model provide an indication
of the memory load required of system users
style, help facilities, and error handling protocols provide a general
indication of system complexity and the degree of acceptance by the users
Norman's The Design of Everyday Things
common objects (door, toaster, VCR, telephone)
of Good/Bad Design
properties of an artifact that determines how it can be used (e.g
cultural, and logical factors that encourage proper actions
Mental model of
system which allows users to:
- understand the system
- predict the effects of actions
- interpret results
relationship between controls and their effects on system
The system shows
you the conceptual model by showing its state and actions that can be taken
effects of user's actions
Stages of Action that explain how people do things:
the state of the world
the state of the world
Norman's Prescription for User-Centered Design:
- Make it
easy to know what actions are possible at any time
it easy to evaluate the current state of the system
actions and effects
visible information and interpretation of system state
Norman's Questions about artifacts:
is the system's function?
system actions are possible?
are the mappings from intention to execution?
the device inform the user about what state it is in?
the user determine tell what state the system is in?
Design and Evaluation of Software
· Interactive Design?
- Existing System
- Current Work
Practices and Products
Prototypes and Mockups
- Alpha &
skills are required to design for users?
- Cognitive Psychology
- Human Factors
- Graphics Design
Discipline of Human-Computer Interaction Design
· How can knowledge of technology and user's needs
be synthesized into an appropriate design?
· What process should be used?
· How can it be done effectively?
Answers: Found In:
· Principles - collection of statements that advise
designer how to proceed
· Guidelines - collections of tests that can be
applied to interface to determine if OK.
· Methodologies - Formalized procedures that are
believed to guide and structure process of effective design.
Hansen(1971) - Four Principles
- Know the user
- Optimizes operations
- Minimize memorization
- Engineer for errors
& Herry (1984) - 93 principles
Heckel (1991) - 30 design elements
Shneiderman (1992) - Eight golden rules:
- Strive for consistency
- Enable frequent users to use
- Offer informative feedback
- Design dialogues to yield closure
- Offer simple error handling
- Permit easy reversal of actions
- Support internal locus of control
- Reduce short-term memory load
and Lowes (1985) - Principles:
- Early focus on users
should have direct contact with intended or actual users
- Early - and continual - user
- Only feasible
approach to successful design is empirical through observation
- Interactive design
implementation, testing, feedback, evaluation, change iterative.
methodology - 4 Phases:
- gearing up
- learn about
related systems for good starting points
- learn about
user interaction standards, guidelines, and development procedures
specification of user interface
information about users and work
testable behavior goals
- organize work
to be done
evaluation and feedback based on user feedback
- techniques for
installing, introducing, marketing , etc.
have design processes all are variations on theme.
Nielsen (1993) Develops "usability
engineering lifecycle model" - 11 stages:
- Know the user
Setting usability goal &
Financial impact analysis
Coordinated design and total
Apply guidelines and heuristic
Iterative design to capture
Collect feedback from field use
- each user's
- user's current
& desired tasks
- evolution of
user and job
- Competitive analysis can be cost
effective way of studying and evaluating approaches to product functioning
and interface design
- Set quantitative usability goals
- (e.g. number of
user errors per hour
- level of
satisfaction expressed by users)
- Parallel design useful in brainstorming
- Participatory design - users become
- Constancy of UI achieved through
corporate standards and GUI guidelines
& Rieman (1993) - shareware/internet book - Task-centered design process
- figure out who's going to use the
system to do what
- choose representation tasks for
- rough out design
- think about it
- create a mockup or prototype
- test it with users
- build it
- tweak it
- change it
- Suggest that designers work
within existing interface frameworks
- Incorporate existing applications
within their solutions
- Copy interaction techniques from
to know users and their tasks
Lewis & Rieman -
- Close personal contact
- Profile user's:
- computer task
literacy and experience
- reading and
- Choose representative tasks that
provide functional coverage
- Profile jobs
- structure and
- Level of
training and support provided
- Nature of
system use (e.g. regular, mandatory)
- Produce scenarios
- analysis of
social setting (usually requires questionnaires interviews)
HCI did not come first - human factors came first - task analysis - a study of
what an operator is required to do in terms of actions and/or cognitive
processes, to achieve a goal
- scenario crations
- free association
- searching for patterns
- "lateral thinking"
interfaces - the formulation and exploration of system and interface, ideas and
metaphors at a very early stage of the design process.
Methods of envisionment - stories, scenarios,
storyboards, flipbooks, animated drawings, cutout animation, animation of real
objects, computer animation, computerscripted interactive prototypes.
The Role of Metaphor
Def: a figure of speech in which a word or
phrase denoting one kind of object or action is used in place of another to
suggest a likeness or analogy between them
Metaphors help users understand a target
domain they don't understand in terms of a source domain they already
typewriter - wordprocessors)
systems and their user interfaces
Joseph McGrath (1994) - framework for
understanding methods of evaluation:
of interest involves states and actions of human systems - of individuals,
group, organizations, and larger social entities - and by products of those
- "generalizability" of
- Over population of
- "precision" of
- of the "behaviors"
- "realism" of the
- or "context" where
evidence is gathered
- correlation vs. causation
- randomization, true experiment
and statistical inference
of research strategies
- Field strategies - studies
systems in use on real talk, real work settings
- Field studies - observing
- observe impact of changing aspect of environment of system (e.g. beta
- Experimental Strategies - carried
create real system in lab for experimental purposes by real users
- controlled experiments used to study impact of particular parameter.
- Respondent strategies
responses from small set of judges - designed to give information about
stimulus (e.g. Delphi methods)
- Sample surveys - responses
from large set of respondents about respondents (e.g. questionnaires)
- Theoretical strategies
- Formal theory -
gives qualitative insights (e.g. theory of vision)
simulation - run on computer to derive predictions about computer
approaches to system & interface evaluation
- Heuristic evaluation with
- Must make
guidelines so they are testable.
difficult to apply guidelines to real design problems
- Difficult to
deal with large set of guidelines
(1994) - 10 Design Heuristics:
on factor analysis of 249 usability problems on 11 projects)
- Visibility of System State
- Match between system and real world (e.g. speak
- User Control and Freedom (e.g. easy exit, undo)
- Consistency and standards (e.g. same words mean
same thing in different contexts)
- Error prevention
- Recognition rather than recall (e.g. options and
actions should be visible)
- Flexibility and efficiency of use (e.g.
accelerators, short cuts, customization)
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from
errors (e.g. error messages in plain language)
- Help and Documentation
- Cognitive Walkthroughs
- Inspired by
structured code walkthroughs
- Here - a set of
representative tasks is selected and stepped through -
keystroke-by-keystrokes, menu selection-by-menu selection.
- Developers fill
out forms that require them to specify information about user's goals,
tasks, subtasks, knowledge, visible state of the
interface, and relations and changes analysis.
Questions to ask:
- Will users try
to achieve the right effect?
- Will users
notice that the correct action is available?
- Will users
associate the correct action with th effect
trying to be achieved?
- If the correct
action is performed, will the user see that progress is being made
toward solution of the task?
underlying cognitive walkthroughs based on psychology of inexperienced
- Approach is
intended to evaluate a design for ease of learning
walkthroughs suggest specific psychological explanations for problems
thereby pointing developers toward solutions.
- Usability testing
walkthroughs rely on intuition of interface specialists
- Need to be
augmented with experience
- Make interface
users trying to use system
User testing that is more
formal in the sense that interface specialists set explicit quantitative
performance goals known as metrics
e.g. new users must be
able to create and save forms in first 10 mins.
Arguments for explicit
Human factors engineers
taken more seriously in engineering setting because they adopt quantitative,
objective goals familiar to engineers
Progress can be charted and
- Controlled Experiments
individual behavior without influence of groups
- Focus on
studying low-level perceptual cognitive or motor activities
- Types of
each subject experiences the different options being tested
each subject just tries one of the alternatives
best methods are:
- Heuristic evaluation with empirical
- Cognitive walkthrough can be helpful
Uses of Evaluation Methods in a Development Process:
- Information Collection - e.g.
interviews and questionnaires
- Concept Design - e.g. interviews,
usability testing, controlled testing
- Functionality and Interface
Design - usability testing, human information processing simulations
- Prototype Implementation -
usability testing, heuristic evaluation
- Deliverable System Implementation
- usability testing
- System Enhancement and Evolution
- interaction analysis, interviews and questionnaires, field studies
- Most methods ad
hoc need solid theory
- Theories exist
but are they fundamental?
Recording the design history of its rationale
could serve several purposes:
- Lead better design by looking at
the process of considering alternatives
- Useful when modifications
Design Process (Gould)
General Observations about system Design:
- Nobody gets it right the first
- Development is full of surprises.
- Developing user-oriented systems
requires living in a sea of change.
- Developers need good tools.
- Even with the best-designed
system, users will make mistakes using it.
in Designing a Good System
- Define problem customer wants to
- Identify tasks user wants to be
- Learn user capabilities.
- Learn hardware/software
- Set specific usability targets.
- Sketch out user scenarios.
- Design and build prototype.
- Test prototype.
- Iteratively identify,
incorporate, and test changes until:
Measure customer reaction and
targets are met
deadlines are reached.
of Usability Design
Principle 1: Early and Continual Focus on
- Decide who users will be &
what they will be doing with system
- Methods to carry this out:
- Talk with users
- Visit customer
Learn about the
- Find out
problems, difficulties, worries
- Show them what
you had in mind for design
- Assume the
intended users are the experts
user think out loud during actual work
Make user part
of design team
Use surveys and
behavior target goals
- (might have to
match system design with corporate design)
Twenty experimental participants familiar
with the IBM PC but unfamiliar with query languages will receive 60 minutes
training using the new online query training system for novice users. They will
then perform nine experimental tasks.
task 1, 85% of tested users must complete it successfully in less than 15
minutes, with no help from the experimenter. They must use all reference and
help materials, but no quick help. Task 1 consists of 6 steps:
- Create a query
on the displayed query panel using the table SCHOOL.COURSES.
- Delete all
column names except COURSE and TITLE.
- Save the
current query with the name CTITLE.
- Run the query
- Get current
query panel displayed.
- Clear current
query panel so it contains nothing.
for Achieving Early and Continual Focus on Users
defined a major group of potential users.
talked with the users about the good and bad points of their present job and
preliminary system design discussions always kept in mind the characteristics
of these users.
watched these users performing their present jobs.
asked them to think aloud as they worked.
tried their jobs.
did a formal task analysis.
developed testable behavioral target goals for our proposed system.
Principle 2: Early - And Continual - User
- First Design is not perfect.
- Must make measurements.
- Methods to carry this out:
- Printed or
- Exact details:
- exact layout
and wording on screen
- What keys to
press, system's response
- Early user
- Simulations -
paper and pencil or computer
processing - get people to work with system
- Early demos
- Think aloud
- Make videos of
workers using system
methods - put in situ
- Online forums
prototype tests with formal behavioral methods
- Try to destroy
- Field studies
for Achieving Early User Testing
made informal, preliminary sketches of a few user scenarios -- specifying
exactly what the user and system messages will be -- and showed them to a few
have begun writing the user manual, and it is guiding the development
have used simulations to try out functions and organization of the user
have done early demonstrations.
invited as many people as possible to comment on the on-going instantiations
of all usability components.
had prospective users think aloud as they use simulations, mock-ups, and
use hallway-and-storefront methods.
used computer conferencing forums to get feedback on usability.
did formal prototype user testing.
compared our results to established behavioral target goals.
met our behavioral benchmark targets.
let motivated people try to find bugs in our system.
did field studies.
did follow-up studies on people who are now using the system we made.
Principle 3: Iterative Design
- Identify required
- Make changes
- Methods to carry this out:
Software Tools (e.g. UIMS)
- Need to make
changes in UI possible and easy
- Brings UI
within control of human factors people not programmers
- Makes work
- Tools have
inherent conceptual, semantic, and procedural ways of doing things
for Carrying out Iterative Design
aspects of usability could be easily changed, i.e., we had good tools.
regularly changed our system, manuals, etc., based upon testing results with prospective
Principle 4: Integrated Design
- ALL Design work evolves in
for Achieving Integrated Design
considered all aspects of usability in our initial design.
person had responsibility for all aspects of usability.
for subsidiary groups (e.g. operators, trainers, etc.)
of required functions.
adequate system reliability and responsiveness.
programs (e,g, help system, training materials,
hot-lines, videotapes, etc.)