THE ELEMENTS OF USER EXPERIENCE Jesse James Garret
Concrete Product as Product as Completion
Functionality Information
Sensory design Surface
Interface design Navigation design
Skeleton
Information design
Information
Interaction design Structure
architecture
Functional Content
Scope
speci cation requirements
User needs
Strategy
Product objectives
Abstract Conception
In reality the lines between these areas are not clearly drawn. Some problems require attention in
several areas at once, and some seem to straddle the borders identi ed in this model.
The elements must work together to accomplish that plane’s goals.
All the elements on every plane have a common function in determining the larger user experience
even if they perform that function in di erent ways.
Additional factors that go into shaping the nal user experience:
• content is king. The content that is available to you will a huge role in shaping your site
• technology, the nature you can provide your users is largely determined by technology
Subjective / qualitative
Focused on experiences
(people, activities, context)
MEANINGFUL
Has personal signi cance
PLEASURABLE
Emotions, friendly language, aesthetics, humor
CONVENIENT
Super easy to use, works like I think
USABLE
Can be used without di culty
RELIABLE
Is available and accurate
FUNCTIONAL (USEFUL)
Works as programmed
Focused on tasks
(products, features)
Objective / quanti able
fi fifi ffi ff fi fi
, Challenge of this model: if you want to truly create a revolutionary product, you have to shift
your thinking from a bottom-up task force to a top-down focus that starts with the experience you
want people to have.
Another takeaway: in mature markets, where you have stable, usable products, taking it to the
next level means focusing on more experiential things like emotions, clever language, and
aesthetics.
PATTERNS
Patterns are structural and behavioral features that improve the “habitually” of something. They
make things easier to understand or more beautiful; they make tools more useful and usable.
Patterns can be a description of best practices within a given design domain. You need to have
congaing elements in a design process:
• Field research to nd out what the intended users are like and what they already do
• Goal and task analysis to describe and clarify what users will do with what you’re building
• Empirical testing of the design at various points during development, like usability testing
and in situations observations of the design used by real users
• Enough time to irate over several versions of the design, because you won’t get it right the
rst time
Good design can’t be reduced to a recipe. It’s a creative process.
Ways to use the patterns:
• Learning, expanding your interface design vocabulary helps you create more expressive
designs
• Examples, you may nd wisdom in the examples that is missing in the text of the pattern
• Terminology, use the pattern names as a way of communicating and discussing ideas
• Inspiration, each design project has a unique context, and even if you need to solve a common
design problem, a given pattern might be a poor solution within that context
User Interface — the way that you accomplish tasks with a product, what you do and how it
responds, that’s the interface - Jef Raskin
It’s about the interaction between the user and the application or device, and in many cases, it’s
about the interaction between multiple users through that device. HOW IT WORKS. CHOOSING
THE RIGHT TOOLS FOR THE JOB
What makes a great user interface (eight):
• Clarity, the interface avoids (dubbelzinnigheid) by making everything clear through language,
ow, hierarchy and metaphors for visual elements
• Concision, make it concise and clear at the same time
• Familiarity, something is familiar when you recall a previous encounter you’ve had with it
• Responsiveness, speed and good feedback about what’s happening and if the action is
successfully proceed.
• Consistency, it allows users to recognize usage patterns
• Aesthetics, making something look good will make the time users spend using your application
more enjoyable
• E ciency, productive through shortcuts and food design
• Forgiveness, how your application handles mistakes will be a test of its overall quality. It should
not punish users for mistakes.
Designing a user interface that incorporates all characteristics is tricky because working on one
often a ects others.
To design is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to
dramatize, to persuade, and perhaps even to amuse - Paul Rand
flfi ffi
ff fi fi
Concrete Product as Product as Completion
Functionality Information
Sensory design Surface
Interface design Navigation design
Skeleton
Information design
Information
Interaction design Structure
architecture
Functional Content
Scope
speci cation requirements
User needs
Strategy
Product objectives
Abstract Conception
In reality the lines between these areas are not clearly drawn. Some problems require attention in
several areas at once, and some seem to straddle the borders identi ed in this model.
The elements must work together to accomplish that plane’s goals.
All the elements on every plane have a common function in determining the larger user experience
even if they perform that function in di erent ways.
Additional factors that go into shaping the nal user experience:
• content is king. The content that is available to you will a huge role in shaping your site
• technology, the nature you can provide your users is largely determined by technology
Subjective / qualitative
Focused on experiences
(people, activities, context)
MEANINGFUL
Has personal signi cance
PLEASURABLE
Emotions, friendly language, aesthetics, humor
CONVENIENT
Super easy to use, works like I think
USABLE
Can be used without di culty
RELIABLE
Is available and accurate
FUNCTIONAL (USEFUL)
Works as programmed
Focused on tasks
(products, features)
Objective / quanti able
fi fifi ffi ff fi fi
, Challenge of this model: if you want to truly create a revolutionary product, you have to shift
your thinking from a bottom-up task force to a top-down focus that starts with the experience you
want people to have.
Another takeaway: in mature markets, where you have stable, usable products, taking it to the
next level means focusing on more experiential things like emotions, clever language, and
aesthetics.
PATTERNS
Patterns are structural and behavioral features that improve the “habitually” of something. They
make things easier to understand or more beautiful; they make tools more useful and usable.
Patterns can be a description of best practices within a given design domain. You need to have
congaing elements in a design process:
• Field research to nd out what the intended users are like and what they already do
• Goal and task analysis to describe and clarify what users will do with what you’re building
• Empirical testing of the design at various points during development, like usability testing
and in situations observations of the design used by real users
• Enough time to irate over several versions of the design, because you won’t get it right the
rst time
Good design can’t be reduced to a recipe. It’s a creative process.
Ways to use the patterns:
• Learning, expanding your interface design vocabulary helps you create more expressive
designs
• Examples, you may nd wisdom in the examples that is missing in the text of the pattern
• Terminology, use the pattern names as a way of communicating and discussing ideas
• Inspiration, each design project has a unique context, and even if you need to solve a common
design problem, a given pattern might be a poor solution within that context
User Interface — the way that you accomplish tasks with a product, what you do and how it
responds, that’s the interface - Jef Raskin
It’s about the interaction between the user and the application or device, and in many cases, it’s
about the interaction between multiple users through that device. HOW IT WORKS. CHOOSING
THE RIGHT TOOLS FOR THE JOB
What makes a great user interface (eight):
• Clarity, the interface avoids (dubbelzinnigheid) by making everything clear through language,
ow, hierarchy and metaphors for visual elements
• Concision, make it concise and clear at the same time
• Familiarity, something is familiar when you recall a previous encounter you’ve had with it
• Responsiveness, speed and good feedback about what’s happening and if the action is
successfully proceed.
• Consistency, it allows users to recognize usage patterns
• Aesthetics, making something look good will make the time users spend using your application
more enjoyable
• E ciency, productive through shortcuts and food design
• Forgiveness, how your application handles mistakes will be a test of its overall quality. It should
not punish users for mistakes.
Designing a user interface that incorporates all characteristics is tricky because working on one
often a ects others.
To design is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to
dramatize, to persuade, and perhaps even to amuse - Paul Rand
flfi ffi
ff fi fi
