17.02.2015
User Experience Design
Kullanıcı Deneyimi Tasarımı
What is User Experience (UX)?
Understanding the basics
DERS NOTU
User interface (UI)
The means by which a person interacts with a website
or application
– What does it look like?
– How do I use it?
User experience (UX)
Evaluate how users feel about a system, looking at;
–
–
–
–
ease of use,
perception of the value of the system,
utility,
efficiency in performing tasks and so forth.
– The system could be a website, a web application or
desktop software.
– How do I feel?
by Dr. Donald Norman
User experience design (UXD)
The multi-disciplinary approach of designing online
experiences with a focus on user.
– Who is using this?
– What does the user need?
– How will the user respond?
User experience design (UXD)
User experience design (UXD) is the process of
enhancing customer satisfaction and loyalty by
improving the usability, ease of use, and pleasure
provided in the interaction between the customer and
the product
1
17.02.2015
UXD is NOT
web analytics
stakeholder interviews
storyboards
sketching
A/B testing
surveys
prototyping
User Experience Design is
not just about designing good looking websites
or interfaces
flow diagrams
What we usually talk about
when we talk about UXD
wireframes
scenarios
sitemaps
personas
card sorts
usability testing
heuristic evaluation
user research
1. The experience belongs to the user
10 Principles of UXD
1. The experience belongs to the user
• Since experience is subjective it cannot be designed
in quite the same way that a physical product can.
• If our framework is solid, then great experiences will
be a common occurrence.
• Designers do not create experiences, they create
artifacts to experience.
2. UX is holistic
• The experience is not just the product anymore.
• It is made up of all touch-points of a larger system,
from the product to the support to the way your
neighbor talks about it.
– Not all of these things are designable in the same way, but
all can be designed for on some level.
2
17.02.2015
3. Great user experiences are invisible
• When people are having a great experience, they
rarely notice the hard work that has been put into
place to make it happen.
• This is as it should be…our job as UX professionals
is to be so successful that nobody talks about us.
4. UX is a lifecycle
• People experience the world over time…nothing
happens at once.
– As such, people don’t immediately have a good experience
with most things.
• There is a lifecycle that must be gone through,
starting with awareness, building up to first-time use
and going into regular use and even decline.
– These steps are relatively stable.
Response time
• Long response times lead users to view websites as less
interesting and of lower in quality
• Longer response times also negatively impact users’ views of
the company (not just the website)
Number of people
who rated the site
as “High quality”
Response time benchmarks
• HCI response time rules of thumb
•
•
•
•
>10 seconds = significant attention loss
<2 seconds = noticeable and disruptive
<1 second = perceptible delay but not disruptive
<1/10 second = feels immediate
• Modern response time benchmarks: Even miniscule delays
have measurable effects
•
•
•
•
1/10 second delay = 1% lost sales. Amazon, 2006
>3 seconds load time = 40% abandonment. Forrester, 2009
1/5 second delay = .2% fewer searches per user. Google, 2009
1/4 second delay = users visit competitor sites more often. Microsoft
Research, 2012
Ramsay, Barbesi, & Preece. (1998). A psychological investigation of long retrieval times on the World Wide Web. Interacting with Computers 10,
77-86.Bouch, Kuchinsky, & Bhatti(2000). Quality is in the eye of the beholder: Meeting user requirements for internet quality of service.15
Proc.
CHI 2000 Conference, 297-304.
5. Context is king
• In an age when it is easy to create products and
content quickly, the missing piece becomes context:
– how does what we create fit into the lives of the people we
create it for?
• Discovering the ins and outs of context is why UX
professionals do so much user research, as the
subtleties of context are a sharp blade.
16
6. Great experience is about control
• The worst feeling in the world is to feel out of
control.
• When people feel out of control, they simply don’t
have a good time.
• This doesn’t mean that you can’t surprise people or
provide serendipity for them, it means that users
need to feel like they are always able to take the
next step (or bow out) at their request.
3
17.02.2015
8. Psychology is primary
• Software is getting easier to use all the time.
• The one with the psychological edge will win.
• This means that we have to dive deeply into the
psychology of use, play, product adoption, and social
interaction to create the best experiences.
9. UX is a conversation
• UX, like marketing, is a conversation.
– As UX professionals we are creating a dialog with users in
which the goal is to find out how we can best help them
do what they want to do.
• UX becomes a service, not a one-off product, that is
constantly reacting to the changing needs of our
audience.
– The conversation is both how we deliver and how we find
out how to make it better.
10. Great experiences are simple
• Simplicity is much more than the trite “less is more”
we so often hear.
– Simplicity is not about volume; it’s about clarity.
Why UXD is Important?
• If people can understand or use something with little
difficulty, then you’ve made something simple.
Why UXD is important?
• We could simply say,
– “It’s important because it deals with our users’
needs - enough said,”
and everyone would probably be satisfied with that.
4
17.02.2015
Why UXD is important?
Why UXD is important?
• Websites have become more ubiquitous
– the Web had at least 1.83 billion users globally in 2009
– 26,4 million in Turkey
• Websites have become so complex and
feature-rich that, to be effective, they must
have great user experience designs.
•
•
•
•
•
Increased customer satisfaction
Increased user productivity/efficiency/accuracy
Increased service/site usage and adoption
Decreased support and training costs
Reduced development time and costs
– Create only the features users need
• Reduced maintenance costs
~42 M in Turkey in 2014
– Do it right the first time
UX & Return on investment
• Usability can be doubled with dedicated resources
and attention to site architecture and design
• 10% of project budget for “usability”
The Elements of User Experience
• More for entire design process
Key Performance Indicator
Average Improvement
Across Web Projects
Sales/conversion rate
87%
Traffic/visitor count
91%
User performance/productivity 112%
Use of specific (desired)
174%
features
NN/g Report: Usability Return on Investment (ROI)
User Experience is Built From Dependent Layers
The Surface Layer Describes Finished Visual
Design Aspects
Surface
Skeleton
Structure
Scope
Strategy
5
17.02.2015
The Skeleton Describes Screen Layout and
Functional Compartments in the Screen
Structure Defines Navigation from Place to
Place in the User Interface
Surface
Surface
Skeleton
Skeleton
Structure
Structure
Scope
Scope
Strategy
Strategy
task panes
modal dialogs
modal wizards
The Places in the User Interface are Built to
Support User Task-Centric Scope
Surface
Skeleton
Structure
Scope
user tasks:
• enter numbers
• enter text
• enter formulas
• format cells
• sort information
• filter information
• aggregate information
• graph data
• save data
• import data
• export data
• print
• …..
Strategy
Business Goals Drive User Constituencies
and Contexts Supported to Form Strategy
Surface
Skeleton
Structure
Scope
Strategy
Understanding the Relationship Between Goals,
Tasks & Tools is Critical
Let’s Look at a Product We All Use: The Place
We Live
Surface
Software Product
Features
Tools
Skeleton
Structure
Tasks
one or more users engaged in
many tasks in support of a
common high level goal is often
referred to as workpractice
Scope
Strategy
Goals
business goals:
• displace competitive products
• motivate sale of other
integrated products
• establish file format as default
information sharing format
• …
user constituencies:
• accountant
• business planner
• housewife
• …
usage contexts:
• office desktop
• laptop on airplane
• pda in car
• …
goals:
• live comfortably
• eat well
• stay clean
• be healthy
• keep up with Jones’s
• …
user constituencies:
• me
• spouse
• child
• …
usage contexts:
• suburban neighborhood
• near good schools
• near shopping
• …
6
17.02.2015
What might I do to reach my goals?
Surface
Skeleton
Structure
user tasks:
• store food
• prepare food
• eat food
• sleep
• bathe
• store changes of clothing
• stay out of rain
• entertain guests
• entertain self
• …
Arranging tasks by affinity allows me to think about contexts
that best support tasks. Contexts in a home have common
names we all know.
Surface
Skeleton
Structure
Scope
Scope
Strategy
Strategy
When designing a particular interaction context such as a
“kitchen,” I optimize layout and tool choices to support tasks
I’ll do there
I’m going to spend a lot of time here, I want my
experience to be as pleasant as possible…
Surface
Surface
Skeleton
Skeleton
Structure
Structure
Scope
Scope
Strategy
Strategy
Tool Design to UX Designers is as Snow is to
Eskimos (or Cross Country Skiers)
• As we move up layers in Garrett’s model it’s easy to see how
each layer validates the previous layer
• This doesn’t mean that decisions on each layer must be made
before moving on to the next – that’s often impractical
Surface
Skeleton
Structure
Tools
• Navigation Map
• Page Wireframes
• UI Design Guidelines
Scope
Tasks
Strategy
Goals
Each Layer Validates the Next
– When making a decision on one layer, consider the assumptions that
must be true on the next layer down
– When information changes on lower layers – information such as
business or user goals, or our understanding of tasks, consider the
implications on layers above
• User Tasks & Activities, or Use Cases
• Technology Independent
• Business Goals
• User Model with
User Goals
• Architectural Goals Based
On Context of Use
7
17.02.2015
so what should you do about all this?
start by understanding your users!
Both are built on understanding user needs
Ideal project trajectory
Implementation of UX
START
How projects normally go
GOAL
With research, course correction
Focus Group
Usability
Test
START
GOAL
Branding
Review
START
GOAL
A/B
Testing
Prototype
Walkthrough
8
17.02.2015
Desired implementation of UX
Implementation of UX in real life
Detailed user-centered R&D process
UX R&D with agile
User Stories
1. User
Research
2. Prototype
Design
Market Research
User
Surveys/Intervie
ws
Field Studies
Focus Groups
Profiles and
Personas
Site
Assessments
Card sorting
Non-Functional
Reqs
Paper Prototypes
Wireframes
Clickable
Prototype
Site Map
Process Flows
Analytics
Strategy
Research
3. User
Validation
Usability Testing
Reverse Card
Sorting
Eye Tracking
Prototype
Revisions
4. UX Design
Delivery
Verify
Design
Wireframe Spec Design Defect
Error Matrix
Log
Clickable
Prototype
Graphic Design
Comps
SEO and Content
Spec
Analytics Design
Spec
Design
Development Sprints
QA Test
Releases
5. Usage
Analysis
Analytics Reports
SEO Reports
A/B Testing
1. User
Research
2. Prototype
Design
Market Research
User
Surveys/Intervie
ws
Field Studies
Focus Groups
Profiles and
Personas
Site
Assessments
Card sorting
Non-Functional
Reqs
Paper Prototypes
Wireframes
Clickable
Prototype
Site Map
Process Flows
Analytics
Strategy
Research
3. User
Validation
Usability Testing
Reverse Card
Sorting
Eye Tracking
Prototype
Revisions
4. UX Design
Delivery
Verify
Design
Wireframe Spec Design Defect
Error Matrix
Log
Clickable
Prototype
Graphic Design
Comps
SEO and Content
Spec
Analytics Design
Spec
5. Usage
Analysis
Analytics Reports
SEO Reports
A/B Testing
Design
Iterative and incremental development
Development iterations (aka “timeboxes” or “sprints”)
Organizational Maturity
8 stages to a great user-centered organization
UX iterations
9
17.02.2015
Early stages
Advanced maturity levels
“Corporate Usability Maturity: Stages 5-8”, Jakob Nielsen Alertbox,
www.nngroup.com/articles/usability-maturity-stages-5-8/
10