View
233
Download
0
Tags:
Embed Size (px)
Citation preview
What is Design?
Professor: Tapan Parikh ([email protected])TA: Eun Kyoung Choe ([email protected])
Lecture #2 - January 24th, 2008
213: User Interface Design and Development
Today’s Outline
1) Definitions of Design
2) The Design Process
3) Norman’s Take on Design
4) Show & Tell
Design:
1) to create, fashion, execute, or construct according to plan
2) a: to conceive and plan out in the mind
b: to have as a purpose
c: to devise for a specific function or end
Source: http://www.merriam-webster.com/dictionary/design
Design…
is consciouskeeps human concerns in centeris a conversation with materialsis creativeis communicationhas social implicationsis a social activity
- T. Winograd, Bringing Design to SoftwareSlide from Jake Wobbrock
Design is about How
How to do something, as opposed to
specifying what to do
Learn general methods and tools to
envision, implement and evaluate
Allows for re-use across a number of
applications and operating contexts
Design Phases (IDEO)
Understand
Observe
Visualize & Predict
Evaluate & Refine
Implement
Slide from Scott Klemmer
Design Phases (IDEO)
Understand
Observe
Visualize & Predict
Evaluate & Refine
Implement
ContextualInquiry
PersonasPrototyping
HeuristicEval Usability
Testing
Scenarios
Contextual Inquiry
CONTEXT - See the work where it unfolds
PARTNERSHIP - Make yourself and the user
collaborators in understanding the work
INTERPRETATION - Assigning meaning to
design team’s observations
FOCUS - Shared starting point, orienting the
team and user towards a common goal
Scenarios and Personas
Task and Person-based caricatures of common
usage contexts
Keep design team members aligned after the
inquiry phase is completed
Serves as concrete yet flexible representation
of a design situation or solution
Prototyping
Developing rough versions of interfaces for
ideation and initial testing
Ranging from paper or cardboard cutouts to
simple programming environments like Flash
Allows design team to evaluate feasibility of a
solution, and gather feedback from users
Heuristic Evaluation
Assessment of an interface prototype by a
small group of evaluators based on
established design principles
Low-cost method to evaluate early prototypes
as part of iterative design process
Usability Testing
Testing the performance of a candidate
interface with potential users
Including factors like efficiency, accuracy,
learnability, memorizability and accessibility
Results can be statistically analyzed to assess
difference between interface alternatives
Donald Norman
Trained in CS and Psychology, later a professor
of Cognitive Science at UCSD
Cognitive approach to user-interface design
Focuses on aspects like affordances,
constraints, models, feedback and visibility
Less emphasis on aesthetics
Affordances
“actual and perceived properties… that
determine how the thing could be used.”
Based on J.J. Gibson’s term in psychology -
Norman really meant “perceived” affordance
Focused on immediate cognitive aspects of the
environment, as opposed to memory-based
information processing
Mapping
Relationship between controls, their
movements and results in the World
Natural mappings draw upon physical
analogies and cultural standards, leading to
immediate comprehension
Feedback
“Sending information back to the user about
what action has been done, what result has
been accomplished”
Allows the user to understand the incremental
results of his actions
Source: Donald Norman, Design of Everyday Things
Constraints
Physical constraints limit the set of possible
actions by the user
This allows the designer to guide the user
towards specific action sequences useful for
achieving a particular task
Visibility
Make the important functions immediately
visible to the user
Becomes more difficult when the number of
functions exceeds the number of controls
Paradox of Technology
Technologies start off complex, while
designers struggle to balance user needs
and technical capabilities
Eventually, a simple and elegant design
captures the market
Competitors introduce new features, at the
expense of added complexity…
Conceptual Models
People like to understand why things are the way
they are
A conceptual model allows users to understand
and remember the mapping between actions
and the resulting effects
Affordances, Mapping, Feedback, Constraints and
Visibility can help users establish such a model
Designing for Errors
When a task appears simple or trivial, users will most
often blame any errors or mistakes on themselves
When this happens repeatedly, the user may decide
that they are incapable of performing this task
(Norman calls this learned helplessness)
Designers should account for errors in their designs
Action Cycle
Perceive
WORLD
Interpret
Evaluate
Execution
Sequence
Intention
Goals
EV
ALU
ATIO
N
EX
EC
UTIO
NEXECUTION: Doing something to the World
EVALUATION: Compare what happened with what we wanted
Example: Turning on a Lamp
GOAL: Increase light in the room
INTENTION: Turn on the lamp
SEQUENCE: Walk to lamp, turn knob
EXECUTE: [Walk to lamp, turn knob]
PERCEIVE: [Hear “click”, see light]
INTERPET: Lamp clicked and started emitting light
EVALUATE: Light in the room increased. Success!
Slide from Jake Wobbrock
Gulf of Execution
“What do I do now?”
By providing affordances, constraints, visibility
and a good conceptual model, designers can
bridge the Gulf of Execution
Gulf of Evaluation
“Did I succeed?”
By providing feedback and a good conceptual
model, designers can bridge the Gulf of
Evaluation