BBuckley - 1
CSc 238
Human Computer Interface
Design
ABOUT FACE
The Essentials of Interaction Design
Cooper, Reimann, Cronin, and Noessel
BBuckley - 2
Questions
If “achieving the user’s goals” drives the design
process, won’t the user be satisfied and happy
with the product?
If the users are happy, won’t they pay money for
the product and spread the word to others?
If you make the user happy, won’t your products
be a success?
What happened?
“The absence of design”
BBuckley - 3
Cooper - Introduction
Products that exhibit complex behavior
“Techie” ovens and complex behavior
Buttons for non-cooking related things
“Start, Cancel, Program… Bake, Broil”
Press any button… what happens depends on the
state of the oven and the buttons already pushed
Interaction Design – designing the behavior of
complex systems.
… design affects behavior (in fact, it defines the behavior)
Design (Victor Papanek)
The conscious and intuitive effort to
improve meaningful order…
Human-oriented design activities:• Understanding the desires, needs, motivations, and
contexts of people using products
• Understanding Business, technical, and domain
opportunities, requirements, and constraints
• Using this knowledge as a foundation for plans to
create products whose form, content, and behavior
are useful, usable, and desirable, as well as
economically viable and technically feasible
BBuckley - 4
Consequences of Poor Product Behavior
Digital products
• Are rude
• Require people to think like computers
• Have sloppy habits
• Require humans to do the heavy lifting
BBuckley - 5
BBuckley - 6
Brief History
• 1970s and 1980s: Xerox PARC
• “Consumers… want good technology”
That is, Technology that has been designed to
provide a compelling and effective user experience.
• Not just interface design… and the arrangement of
widgets on the screen.
• Influencing people’s experiences by designing the
mechanisms for interacting with a product
(IxDA: Interaction Design Association – www.ixda.org)
BBuckley - 7
User Experience (UX) Design
• Interaction Design focus
– Designing to effect the experience of users
– Relating behavior to form and content
• Information architecture focus
– Structure of content
– The way content is provided to users
• Industrial Design & Graphic Design focus
– Form of products and services
– Ensuring that form supports use (requiring attention to behavior and content)
BBuckley - 8
Three overlapping concerns…
Behavior
Interaction designers
ContentInformation architects
Copywriters
Animators
Sound designers
FormIndustrial designers
Graphic designers
BBuckley - 9
Interaction Design and the Product Team
Division of responsibilities:
• Design team
Users’ satisfaction
• Engineering team
Implementation and fabrication
• Marketing team
Convincing customers to purchase product
• Management
Profitability of the product, effecting what others work on
BBuckley - 10
Effective & Practical Tools
for Interaction Design
• Principles
Ideas about the practice of design
Rules & hints on use of user interface and interaction design idioms
• Patterns
Common ways to address user req’ts & design concerns
• Processes
How to understand & design user req’ts
How to apply design principles & patterns
BBuckley - 11
“Goal”
• “Understand how users comprehend and
interact with your digital product, and how to
use this knowledge to drive your design”
• No such thing as an objectively good user
interface … it depends
Who is the user
What is the user doing
What are the user’s motivations
• One size does not “fit all”
BBuckley - 12
You want good design?
• Understand the people who will interact with
your product
• Understand there are no fixed guides to style
or interface standards!
Four main steps to designing interactive systems:
1. Researching the domain
2. Understanding users & their req’ts
3. Defining the framework of a solution
4. Filling in the design details
BBuckley - 13
Part I Understanding
Goal-Directed Design
CHAPTERS:
1. Goal-Directed Design
2. Implementation Models & Mental Models
3. Beginners, Experts, and Intermediates
4. Understanding Users: Qualitative Research
5. Modeling Users: Personas and Goals
6. The Foundations of Design: Scenarios & Req’ts
7. From Req’ts to Design: The Framework &
Refinement
BBuckley - 14
CSc 238
Human Computer Interface Design
A Design Process for Digital
Products
Cooper – Chapter 1
BBuckley - 15
Need - Better Design Methods• Technologically focused solutions… difficult to use and control.
• Unsatisfied users… products are difficult to use and control.
Design(viewed as a conscious & intuitive effort to impose meaningful order)
• Understanding users’ desires, needs, motivations, & context.
• Understanding business, technical, and domain opportunities,
req’ts, and constraints.
• Using this knowledge to create products whose form, content &
behavior are useful, usable, and desirable, as well as economically
viable & technically feasible.
BBuckley - 16
Developer and Marketers
What marketers bring:
• Understanding & quantifying of market opportunities.
• Lists of req’ts based on:
“Chasing the competition”
Managing IT resources with “to do” lists
Making guesses based on market surveys – what
people say they will buy.
• However… we know few users can clearly articulate
their needs!
• Adding “easy to use” to the list of req’ts doesn’t help.
BBuckley - 17
What we get…
• Products that irritate, reduce productivity, and do not meet user needs.
• Interactions patched on at the end
“lipstick on the pig”
• Digital products are rude!
Where did you hide that file?
Are you sure?
Did you really want to delete that file or did you have some other reason for pressing the Delete key?
BBuckley - 18
Figure 1-2
“Thanks for sharing.
Why didn’t the program notify the library?
What did it want to notify the library about?
Why is it telling us?
And what are we OK-ing?
It is not OK that the program failed!”
BBuckley - 19
“People” – listen up!
Just think as if you are the computer!
MS Word –
User wants to rename a document they are editing:
Close the document, then rename it (or)
Use “Save AS…” with new name and then delete the file with the old name
Save it!
You save a document & then print & then close
But… you are asked if you want to “Save it”
Excel has a different approach!
BBuckley - 20
Work interrupted
• Software requires you to “stop” what you are
doing.
• How much work are you forced to do in order
to manage the operation of software?
What about you?
• Think… discuss and write down some
examples…
BBuckley - 21
Why products are so bad?1. Misplaced priorities
Focus on functionality, not how it is to be provided
User’s goals are not “front and center” to the design (see Figure 1-2)
2. Ignorance about users
What will make users happy?
How will users use the product?
What will they be using the product to do?
Why choose our product?
2. Conflicting interests
Tradeoff between ease of coding & ease of use
Programmers cannot advocate for the user, the business, and the technology - simultaneously
3. The lack of a process
A repeatable, predictable & analytic process
Transforms understanding of users into products that meet their needs & excite their imaginations
Especially when buyers are not users
Evolution of the Software
Development Process(Figure 1-2)
BBuckley - 22
Developers
Build / Test Ship
Managers Developers
Initiate Build / Test Ship
Managers Developers QA Designers
Initiate Build Test "look & feel" Ship
Mandate Specs Code Product
Managers Designers Developers QA
Initiate Design Build Test Ship
UsersFeasibility,
Feedback
Bug
ReportUser Input
BBuckley - 23
What about Agile?
The “mantra” is to ensure that the customer is an
integral part of the team and the development
process.
Intent: Shared design responsibility for solving
human interface design problems.
Domain knowledge they have!
Accomplishing their work with an interaction,
so it works for them!
Solving the design problem is problematic.
BBuckley - 24
Analogy
Patient goes to the doctor – has horrendous
stomach ache.
“It really hurts. I think it’s my appendix. You
have to take it out as soon as possible.”
The patient is good at explaining symptoms.
The patient has no skills to make the correct
diagnosis.
BBuckley - 25
Now enter the computer
• Allows for limitless behavior
• Alters the nature of the products it touches
• User focus is on the screen, keyboard and mouse… it
is this interactive behavior that is important!
• Design requires understanding the user’s relationship
with product – before purchase
• How will the user use the product, in what ways, and
to what ends?
BBuckley - 26
Evolution of Design
Product development concerns:
1. Desirability
2. Viability
3. Capability
All three must be addressed…
… to achieve user goals via appropriately
designed behaviors
Figure 1-3
Building successful
digital products.
User model
motivations
behaviors
attitudes & aptitudes
Business model
funding model
income/expense
projections, etc
Technology model
core technologies
technology components
build vs. buy
Product design
design schedule
form and behavior
spec.
Business plan
marketing plan
launch plan
distribution plan
Technology plan
engineering schedule
engineering spec
Successful product
is desirable and
viable and
buildable
Desirability
What do people
need?
Viability
What will sustain a business?
Capability
What can we
build?
Designers Management Technologies
User effectiveness &
Customer adoption
Sustainable
Business
Product
Delivery
Overall Product Success
Companies that have struggled to find the balance
Apple
… emphasized desirability but has made many business
blunders. Nevertheless, it is sustained by the loyalty created
by its attention to user appearance
Microsoft
… is one of the best run businesses ever, but it has not been
able to create highly desirable products. This provides an
opening for competition
Novell (now part of )
… emphasized technology and gave little attention to
desirability. This made it vulnerable to competition
BBuckley - 28
BBuckley - 29
User’s Goals?
• Are goals the tasks users do?
• Are they the same for all users?
Authors’ example:
Accounting clerk
Processing invoices?
Employer’s goal
Employee goals… but maybe
Appearing competent
Keeping engaged in work while doing routine and repetitive tasks
BBuckley - 30
Business Goals – the driver?
• Not necessarily aligned with user’s goals
• Satisfy user’s goals and the Business Goals have a
better chance of being achieved
Reminder:
What commercial software does?
Makes users feel stupid
Causes users to make big mistakes
Requires too much effort to operate effectively
Does not provide and engaging or enjoyable experience
BBuckley - 31
The Message
• Goals are not the same as tasks or activities!
• Goals motivate people to perform activities.
• Understand the goals, you understand user
expectations & aspirations.
• You need to understand the meaning of the
activities to the user.
• Task and activity analysis is needed for
detail… after user goals are understood.
BBuckley - 32
Goal versus tasks and activities?
• Goals change slowly… tied to motivation
• Change in activities & tasks … tied to current
technology
• Concentrate only on activities & tasks…
May leave you with a design embedded in the existing technology
May meet corporate goals but not the users’
• User goals allow you to use the technology to eliminate
irrelevant tasks and transform the users’ work
environment.
BBuckley - 33
Designing to meet goals
Context is important
Good design makes users more effective
Does not make users look or feel stupid
Improves business throughput & ease of use
“Software that enables users to perform their tasks without addressing their goals rarely helps them be truly effective.”
“good design makes users more effective”
Computer Literacy
“Some have it… some don’t
… but it is needed in an information economy”
Really?
“It’s a euphemism for forcing human beings to
stretch their thinking to understand the inner
workings of application logic…
… rather than having software-enabled products
stretch to meet people’s usual ways of thinking.”
BBuckley - 34
Striving toward perfection…
Software has a behavioral face it shows to the world…
that is created by the developer or designer.
What the user sees is the representation of the
computer’s executed code.
(the developers code in implementation model)
How the computer “gets the job done” is hidden from
the user. (the user interacts with the represented model)
BBuckley - 35
Implementation Mental Model
Model (reflects user's vision)
(reflects the technology)
worse better
Represented Models
DESIGN User interfaces should be based on user
PRINCIPLE mental models rather than implentation models
BBuckley - 36
A Goal-Directed Design Process
• Identifies user req’ts
• Defines a plan for behavior and appearance of
products
• Design provides for Product Definition:
Goals of users
Needs of business
Constraints of technology
BBuckley - 37
Problematic Design Process
Research
Performed by market
analysts and ethnographers
Design of Form
Performed by graphic / GUI
and industrial designers?
Traditionally, research and design have been separated, with
each activity handled by specialists. Research has, until recently,
referred primarily to market research, and design is too often
limited to visual design or skin-deep industrial design. More
recently, user research has expanded to include qualitative,
ethnographic data. Yet, without including designers in the
research process, the connection between research data and
design solutions remains tenuous at best.
The Gap
Figure 1-6
BBuckley - 38
What about empathy?
“Direct and extensive exposure to users (that
proper user-research entails) immerses
designers in the users’ world, and gets them
thinking about users long before they propose
solutions.”
“One of the most dangerous practices in product
development is isolating designers from the
users because doing so eliminates empathic
knowledge.”
BBuckley - 39
The Goal Directed Design Process
Six Phases
Three primary activities close the gap.
A process of modeling that synthesizes research results into design
tools, a process of synthesizing and defining requirements from
these models, and a process of translating the knowledge captured
in the models and requirements into a design framework that
reflects the goals and needs of users, while also addressing
business and technical imperatives.
Figure 1-7
Research Modelling Requirements Framework Refinement Supportusers and of users and definition of user, definition of of behaviors, development
the domain use context business, and design structure form, and needs
technical needs and flow content
Ch.2 Ch.3 Ch.4 Ch.5 Ch.5
BBuckley - 40
Research
• You need to understand the behavior patterns
of potential and/or actual users of the product.
• Research informs the creation of personas in
the Modeling phase.
• Stakeholder interviews, literature reviews, and
product audits…
BBuckley - 41
Modeling
• Domain models
Information flow and workflow diagrams
• Personas
Detailed, composite user archetypes representing
grouping of behaviors, attitudes, goals, and
motivations observed and identified during
research
More coming in Chapter 3
BBuckley - 42
Requirements Definition
• Scenario-based – a day-in-the life
• Focus on meeting goals and needs of specific
user personas
… not on user’s codable tasks
• Understanding which tasks are truly important
and why.
• A balance of user, business, and technical
req’ts.
BBuckley - 43
Framework
• The overall product concept… defining product’s behavior and visual design, (and physical form, if that fits).
• Uses:
Interaction design principles
Interaction design patterns
• Interaction framework definition
Principles help identify design elements
Principles and patterns guide the development of design sketches and behavior descriptions
BBuckley - 44
Refinement
• Focus on detail and implementation
• Focus on task coherence
• Use walkthroughs and validation scenarios
Storyboarding paths through the interface in high
detail
• Form and behavior specification is produced
BBuckley - 45
Development Support
• “Help” resources needed to answer developers’ questions… real-time as they occur.
• The developers should not be left alone to…
Prioritize the work
Make trade-offs to meet deadlines
Adjust design requiring scaled-down design solutions
The detailed look at Goal-Directed Design
ACTIVITY
CONCERNS
STAKEHOLDER
COLLABORATION
DELIVERABLES
Research Scope
Define project goals & schedule
Audit: Review existing work & product
Stakeholder Interviews: Understand
product vision & constraints
User interviews & observations:
Understand user needs and behavior
Objectives, timelines, financial constraints, process,
milestones
Business & marketing plans, branding strategy, market
research, product portfolio plans, competitors, relevant
technologies
Product vision, risks, constraints, opportunities, logistics,
users
Users, potential users, behaviors, attitudes, aptitudes,
motivation, environment, tools, challenges
Meetings
Capabilities & Scoping
Interviews
Stakeholders & users
Check-in
Preliminary
Research findings
Document
Statement
of work
Modeling Personas: User & customer archetypes
Other Models: Represent domain factors
beyond individual users & customers
Patterns in user & customer behaviors, attitudes, aptitudes,
goals, environments, tools, challenges
Workflows among multiple people, environments, artifacts
Check-in
Personas
Req’ts
Definition
Context Scenarios: Tell stories about ideal
user experiences
Req’ts: Describe necessary capabilities of
the product
How the product fits into the persona’s life &
environment, and how it helps them achieve their goals
Functional & data needs, user mental models, design
imperatives, product vision, business req’ts, technology
Check-in
Scenarios & Req’ts
Presentation
User & domain
Analysis
Document
Uses & Domain
Analysis
Design
Framework
Elements: Define manifestations of
information & functionality
Framework: Design overall structure of user
experience
Key path & Validation Scenarios: Describe
how the persons interact with the product
Information, functions, mechanisms, actions, domain
object models
Object relationships, conceptual groupings, navigation
sequencing, principles & patterns, flow, sketches,
storyboards
How the design fits into an ideal sequence of user
behaviors, & accommodates a variety of likely conditions
Check-in
Design Framework
Presentation
Design Vision
Design
Refinement
Detailed Design: Refine & specify details Appearance, idioms, interface widgets, behavior,
information, visualization, brand, experience, language,
storyboards
Check-ins
Design
Refinement
Document
Form & Behavior
Specification
Design
Support
Design modification: Accommodate new
constraints & timeline
Maintaining conceptual integrity of the design under
changing technology constraints
Collaborative
Design
Revision
Form and
Behavior Spec.
Figure 1-8: A more detailed look at the Goal Directed Design process
BBuckley - 47
Goals, not features
• Developers build software function by function.
• A list of features is one way to explain the product’s
value to customers.
• But what do you know about how effective and happy
users will be using the software?
• What’s your job?
Orchestrating technological capability to serve human needs
and goals.
“Too often the features … are a patchwork of nifty technological
innovations structured around marketing req’ts or the
organization of the development team…”
Where do we attend to the overall user experience?
BBuckley - 48
The important questions!
• Who are the users?
• What are my users trying to accomplish?
• How do my users think about what they’re trying to accomplish?
• What kind of experiences do my users find appealing and rewarding?
• How should my product behave?
• What form should my product take?
• How will users interact with my product?
• How can my product's functions be most effectively organized?
• How will my product introduce itself to first-time users?
BBuckley - 49
.. more questions
• How can my product put an understandable,
appealing, and controllable face on technology?
• how can my product deal with problems that users
encounter?
• How will my product help infrequent and
inexperienced users understand how to accomplish
their goals?
• How can my product provided sufficient depth and
power for expert users?
“The remainder of this book is dedicated to answering
these questions.”
BBuckley - 50
Designer’s job
Look beyond the task… identify who the most
important users are… what are their goals and
why…
that’s Chapter 1