440 Midterm Review
Midterm in-class
Tuesday, Nov 6
1
Midterm Format



Multiple Choice
Fill in the Blank
Short Essay Answer





Example interface: Here is an example of an interface –
find the flaws
Example situations: Here is an example design process
– find the flaws, or what concepts does it illustrate?
Definitions
Compare and contrast
Process: Perform a heuristic analysis on the following
interface…
2
Midterm Content

You will be expected to know
everything, up to the midterm





Lecture
Individual Homework
Readings
Project processes
(tutorial)
3
Tips for Preparation

During the semester


Keep up with readings
Before the exam




Review readings and notes  esp “Review” sections
List concepts
Group similar concepts together
Make up exam questions
 Why is this concept important?
 How does it fit into the big picture?
 Can I compare this concept to other similar ones? If so,
then how is it different?
 What is a real world example of this concept?
4
Tips for Preparation

During the exam


Read questions carefully
Don’t spend too much time on one section
5
Course Outline











Design
Contextual Inquiry
Task Analysis
Design Sketching
History of HCI
Prototyping
Human Abilities
Conceptual Models / Metaphor
Design Patterns
Heuristic Evaluation
Low fidelity Prototyping
6
Now

Take out a sheet of paper, and be ready to
answer the mini-quizzes
7
So what did we learn, anyway?
?
8
Topics: Design

Intro



Design triangle
Usability Goals and Metrics
Design process



Discovery, exploration, refinement, production
Iterate!
Understanding your user
9
Iteration
At every stage!
Design
Prototype
Evaluate
CSE 440 - Autumn 2008
UI Interface Design, Prototyping, &
Implementation
10
Quiz: Design Triangle
Tasks
Organizational &
Social Issues
Design
Technology
Humans
11
Quiz: Usability Goals







Learnable
Memorable
Flexible
Efficient
Robust
Pleasing
Fun
12
Topics List

Design Concepts




Conceptual Models (Design, User)
Affordances
Metaphors
Visibility
13
Designing / Conceptual Model

Conceptual model


Design model should equal user model



mental representation of how an object works & how
interface controls effect it
mismatches lead to errors
know the user’s likely conceptual model
Design guides make things visible


map interface controls to user’s model
provide feedback
Design Model
User Model
System Image
14
Quiz: Key Terms
1.
2.
3.
4.
5.
6.
7.
8.
Usability
User centered Design
Task Analysis
Contextual Inquiry
Rapid Prototyping
Evaluation
Affordance
ESM
15
Usability
According to the ISO:
The effectiveness, efficiency, and satisfaction
with which specified users achieve specified
goals in particular environments
CSE 440 - Autumn 2008
UI Interface Design, Prototyping, &
Implementation
16
Topics: Contextual Inquiry

Know thy user by ?

involving them in design

Terms: Context, Partnership, Master/Apprentice model

Contextual inquiry is for? How do we do it?




ESM stands for?


way to answer the task analysis questions
interview & observe real customers
use master-apprentice model to get them to teach you
Experience Sampling Method
ESM is used to get self-report data where?

in situ
10/7/2008
User Interface Design, Prototyping, & Evaluation
17
Topics: Task Analysis

Find out





who customers are
what tasks they need to perform
Observe existing work practices
Create scenarios of actual use
This allows us to try out new ideas
building software!

10/7/2008
before
get rid of problems early in the design process
User Interface Design, Prototyping, & Evaluation
18
Quiz: Task Analysis questions











1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Who is going to use the system?
What tasks do they perform now?
What tasks are desired?
How are the tasks learned?
Where are the tasks performed?
What relationship between the user and data?
What other tools does the customer have?
How do customers communicate with each other?
How often are the tasks performed?
What are the time constraints on the tasks?
What happens when things go wrong?
19
Quiz: History of HCI


As we may think:

Vannevar Bush




Grace Hopper
Doug Englebart
Memex,
wearcam,
Autospeech

First Computer Bug

Augmenting human
intellect




Chorded Keyboard
Mouse
Word processing
Groupware
20
Types of Prototypes


Prototypes are concrete representations of a design
Prototype dimensions

representation: form of the prototype



off-line (paper) or on-line (software)
precision: level of detail (e.g., informal or polished)
interactivity: watch-only vs. fully interactive


fixed prototype (video clips)
fixed-path prototype (each step triggered by specified actions)



at extreme could be 1 path or possibly more open (e.g., Denim)
open prototype (real, but limited error handling or performance)
evolution: expected life cycle of prototype

e.g., throw away or iterative
CSE440 - Autumn 2008
User Interface Design, Prototyping, and
Evaluation
21
Sketches & Storyboards

Where do storyboards come from?


film & animation
Give you a “script” of important events


leave out the details
concentrate on the important interactions
CSE440 - Autumn 2008
User Interface Design, Prototyping, and
Evaluation
22
Informal UI Prototyping Tools
Outpost
Denim
Topiary
CSE440 - Autumn 2008
Suede
SketchWizard
User Interface Design, Prototyping, and
Evaluation
23
Topics: Human Abilites

Human Perception






Color sensitivity & physical human eye
Hue, Lightness, Saturation
100 ms
Fitt’s law
LTM, STM, Sensory
Model Human Processor
24
The Model Human Processor
Developed by Card, Moran, & Newell (’83)


based on empirical data
Long-term Memory
Working Memory
sensory
buffers
Visual Image
Store
Eyes
Ears
Perceptual
Processor
Auditory Image
Store
Motor
Processor
Fingers, etc.
Cognitive
Processor
25
Topics List

Design Patterns

Patterns come from successful examples

Not too general & not too specific
Patterns let you focus on the hard, unique problems to
your design situation

26
Design Patterns








Site Branding
Shopping Cart
Cross Selling / Up Selling
High Visibility Action Buttons
Sign in / New Account
Quick Flow Checkout
Process Funnel
Order Summary
27
Quiz: Heuristic Analysis










1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from
errors
10. Help and documentation
28
29
Good Luck!
30