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