User Centered Design:
An Introduction to the Design, Prototyping, and
Evaluation of User Interfaces
IS 485, Professor Matt Thatcher
Interface Hall of Shame
Milltronics' Dolphin Plus
(a configuration package for industrial level and flow sensors)
2
Interface Hall of Shame
3
A Proposed Redesign
4
Interface Hall of Shame
5
Agenda

Who am I?

HCI introduction

Usability defined

Iterative, user-centered design

Waterfall vs. prototyping

UI designer as architect
– a discussion of the analogy
– an overview of methods and tools

Course administration
6
Who am I?

Associate Professor of MIS

The Wharton School, University of Penn
– Ph.D and M.S. in Information Technology / Economics
– B.S. in Finance and Decision Sciences

Research interests
– economic impact of IT on firms/industry
– IT value
– software patent policy design

Course information
– http://faculty.unlv.edu/thatcher/is485/
7
What is HCI?

Human
– the end-user of the program

Computer
– the machine that the program runs on

Interaction
– the user tells the computer what she wants (inputs)
– the computer communicates the results (outputs)
8
Where Does HCI Occur?
User
User Interface
Applications Software
Systems Software
Data base and Telecommunications
Hardware
9
User Interfaces (UIs)

Part of the program that allows
– users to interact with the computer
– users to carry out their tasks

User vs. customer vs. client
– user is a term not used in many industries
– customer – the person who will use the product you build
– client - the person/company that is paying you to build it

The UI is the system to the user
– everything the user hears, sees, touches, etc.
– metaphors, organization, navigation, appearance, interaction

HCI = designing, prototyping, and evaluating UIs
10
What Do Users Want?
Well designed software applications exhibit
Functionality
Technical
Soundness
Usability
11
What’s the Difference?
Functionality
It works as the specs
say it will
Technical
Soundness
It is available and
reliable (it works the
same way every time)
Usability
People can perform
their tasks quickly
and easily
12
Why is Usability So Important?
User
User Interface
Applications Software
Systems Software
Data base and Telecommunications
Hardware
13
Measuring Usability

Easy to learn
– how long does it take for typical users to learn relevant tasks?

Easy to remember
– how easy is it to remember from one session to the next?

Efficient to use
– how long does it take to perform benchmark tasks?

Minimal error rates
– how many and what kinds of errors are commonly made?
– if they occur, is good feedback provided so users can recover

High user satisfaction (subjectively pleasing)
– confident of success
– visually pleasing
14
Keys to Designing and Building
Successful, Highly Usable UIs



User-centered design
Task analysis
Iterative UI design cycle
–
–
–
–


design
rapid prototyping
evaluation
iteration
Programming
Implementation...
15
User-Centered Design (UCD)
(Part 1)

A highly structured, comprehensive
software development methodology driven
by
– clearly specified, task-oriented business objectives
– recognition of user needs, limitations, and preferences
– not technology-centered
16
UCD (Part 1):
Task Analysis
Tasks
Organizational &
Social Issues
Design
Technology
Humans
17
User-Centered Design (UCD)
(Part 2)

Information collected using task analysis
is scientifically applied in the design,
prototyping, evaluation, and
implementation of products and services
18
UCD (Part 2):
The Prototyping Model
Design
Prototype
Evaluate
19
GUI Screen Design

Metaphors
– essential concepts conveyed through words and images

Organization of content (data and functions)
– screen layout and screen sequencing
– screen controls/widgets (e.g., check boxes, option buttons)

Navigation
– efficient movement along the content via menus, icons, dialog boxes,
buttons, windows, hyperlinks, commands, etc.

Appearance (the look)
– visual (typefaces, fonts, size, typesetting, color, etc.), auditory,
ornamental background, etc.

Interaction (the feel)
– effective input and feedback sequencing (physical I/O devices)
20
What is a Prototype?

Smaller representation of the system
– a way to see what something will look like before it is built
– less reliable, robust, and complete than final systems


Communicates a physical representation of the
proposed design to the user
Built with tools, not production code
– different construction materials than the final system
– much faster and cheaper to develop

Keeps the design centered on the user
– allows user involvement in testing design ideas
– supports iterative design based on user feedback
21
A Prototype of a
Palm Banking Application

Web-based (html) representation of a software application for a
handheld technology
22
Rapid Prototyping


Build a mock-up of the UI design
Low-fidelity techniques
– paper-based sketches and storyboards
– chauffeured prototypes
– Visio, SmartDraw, drawing tools, etc.

High-Fidelity techniques
– interactive, computer-based prototypes
– Access, Dreamweaver, Frontpage, GoLive, HTML,
Visual Basic, Director, Flash, HyperCard,
PowerPoint, Excel, etc.
23
Evaluation

Test with real users (participants)
– user testing

Expert reviews (evaluations w/o users)
–
–
–
–
–
heuristic evaluations
cognitive walkthroughs
pluralistic walkthroughs
consistency checks
and many more…
24
Iterate!
Design
Prototype
Evaluate
25
Waterfall vs. Prototyping
Prototype
Initiation
Application
Description
Evaluate
Analysis
Requirements
Specification
System
Design
Design
Design
Implement
Product
26
Problems with WF

WF lacks user’s perspective
– technology-driven
– focus is on the “client”, not the “user”
– does not involve user until “implementation” stage
» sees user role as finding “bugs” in the code or other minor problems

WF has no feedback (sequential, not iterative)
– groups “hand off” discrete deliverables to the next group in the
WF process
» functional specs are frozen early in the process
– high cost of fixing errors
» increases by factor of 10 at each stage
» iterative design finds these earlier
27
User-Centered Design (UCD)

When rigorously applied, a UCD approach
– keeps the design centered on users (not technology)
– keep users involved throughout process (early and
often)
– meets both user needs and the business objectives of
the sponsoring organization
28
Why Do Iterative
User-Centered Design?

Nearly 25% of all applications projects fail.
Why?
– overrun budgets & management pulls the plug
– others complete, but are too hard to learn/use

Solution is iterative user-centered design. Why?
– easier to learn & use products sell better
– can help keep a product on/ahead of schedule
– reduces training costs, technical support, maintenance
efforts, product updates
– satisfied users leads to reputation effects (or better
employee retention)
29
Who Builds Interfaces?

A team of specialists (ideally)
–
–
–
–
–
–
–
–
–
–
graphic designers
interaction / interface designers
technical writers
marketers
technical support
test engineers
software engineers
customers/users
client
and more…
30
UI Designer as Architect
(Clarifying UCD)

Design
–
–
–
–

users (home buyers)
tasks (functions, activities, or units of work)
environment (where are tasks performed?)
technology (construction materials)
Prototyping and evaluation
– low-fi sketches (blueprints)
– high-fi representations (small-scale models)


Iterate
Programming (construction)
– don’t commit to “brick-and-mortar” too fast

Implement (move-in)
31
What Does An Architect Want to Know
Before Designing a Home?
Tasks
Environment
(e.g.,climate)
Design
Construction
Materials
Home Buyer
32
The Architect’s Prototyping Model
Design
Small-scale
models
Evaluate
Construction only after
sufficient iterations
33
Summary

UI design is about:
– creating a user experience that is easy to understand
– keeping human concerns at the center of the design process
– focusing on usability

Task analysis
– method of identifying and characterizing the users, their
tasks, and the context

Prototyping model
– iterative, user-centered approach that involves users early
and often
34
Goals of the Course

Learn to design, prototype, and evaluate UIs
– the importance of human factors in the design of interactive
software applications
– cognitive / perceptual constraints that affect UI design
– task analysis and contextual inquiry to identify software
requirements
– technology tools used to prototype UIs
– techniques used to evaluate a UI design
– importance of iterative design for usability
– real-world applications of course concepts and tools
– how to work together on a team project
– how to communicate your results to a group
35
How IS 485 Fits Into the MIS
Curriculum?

Most courses focus on learning technology
– programming languages, data structures, databases,
telecommunications

IS 485 is concerned with design and
evaluation
–
–
–
–
focus on human factors
assume you can program and learn new languages
technology as a tool to evaluate via prototyping
skills will be important in any career you choose
36
Administrivia - Class Structure

Registration
– everyone registered?

Syllabus
– look over very carefully

Readings
– electronic reserves
– internet readings
– downloadable documents
37
Administrivia - Class Structure

Teaching style
–
–
–
–
–

lectures
case studies (design, prototyping, and evaluation)
interactive, in-class assignments
student presentations
computer demonstrations and tutorials
Grading
– project milestones (50%)
– mid-term exam (30%)
– attendance/participation (20%)
38
Administrivia - Class Structure

Course web-site
– http://faculty.unlv.edu/thatcher/is485/
– course materials, notes, announcements, etc.


Regarding missed exams
Honor code
39
Responsibilities

Me
– make sure you understand
– keep you amused and interested in coming to class
– make this class useful to you for getting and
keeping a job

You
–
–
–
–
do the readings
come to class ready to participate
find help when you need it
tell me if I am going too fast/slow
40
The “Quality Circle”


Feedback from YOU is critical to the success
of the course
1 student -> liaison bet. the class and me
– have lunch w/ me 4 times during the semester
– students in the class can approach (or email) the
representatives to discuss problems or concerns
– responsible for passing the anonymous feedback to me

Volunteers
– your name and email address will be posted to the website
41
Any Questions or Comments?
42
Next Time


Team project
Read through the course web site
–
–
–
–
–
schedule
syllabus
project
milestones
team meetings [look at “Team Feedback 1”]
43
Teams

One member from each team should:
– go to the left side of the white board
– write down the name of each team member as of
now

Students without a team should:
– go to the board
– write your name on the right hand side of the board


Let’s figure this out
I need to take pictures and get emails
44