An introduction to the user experience design process and "guerilla" user testing, intended to help explain UX to other stakeholders in an organizational context.
An introduction to the user experience design process and "guerilla" user testing, intended to help explain UX to other stakeholders in an organizational context.
Melanie Lindahl, Web designer at UT AthleticsThis is just what I'm looking for! I'm trying to put together my own UX strategy, and I'm definitely referencing your presentation on my UX blog: www.curiousfoxdesign.com/blog11 months ago
Are you sure you want to
kankipatikDear Kandy can it accessible for offline reading.11 months ago
Scott Sehlhorst, President at Tyner Blain LLCReally fantastic overview, and will definitely help an organization with figuring out the right balance / ownership / reporting between Product Mgmt, UX, and Project Mgmt.
A video of your talk would be awesome.
Also - what is the licensing for this content? Many of the readers of my blog would benefit from what you've put together - so I'm likely to write an article about it. I'd definitely embed the presentation - is it ok to include images from some of the individual slides as well (so that I can 'talk to them')?
Thanks again for the great stuff!2 years ago
Are you sure you want to
A.J. Kandy, User Experience Designer at PSL Consulting Group, MontrealBen: thanks! I think it's not an exact parallel, because there's that intermediate stage between raw wireframing and pixelly-gradienty-jQuery perfection that represents the visual structure of pages or UI screens. They're both important, though, in defining a complete user experience.
Suso: I'll see if I can put together a condensed version, but I wanted to preserve the individual transitions for the purposes of a slidecast.3 years ago
Are you sure you want to
suso zhang@ajkandy I think it can be reduced to 30pages,that is enough,^_^3 years ago
An Introduction to UX Design & TestingPresentation Transcript
An Introduction to
User Experience Design
& User Testing
AJ Kandy • Marks & Pixels marksandpixels.com
On today’s agenda....
On today’s agenda....
What is User Experience Design?
On today’s agenda....
What is User Experience Design?
Why should we care?
On today’s agenda....
What is User Experience Design?
Why should we care?
Where can we apply UX processes?
On today’s agenda....
What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we measure its effectiveness?
On today’s agenda....
What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we measure its effectiveness?
Who needs to be involved?
On today’s agenda....
What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we measure its effectiveness?
Who needs to be involved?
What is user experience design?
What is user experience design?
Usually, some or all of the following
What is user experience design?
Usually, some or all of the following
Information design
What is user experience design?
Usually, some or all of the following
Information design
Information architecture
What is user experience design?
Usually, some or all of the following
Information design
Information architecture
Interaction design
What is user experience design?
Usually, some or all of the following
Information design
Information architecture
Interaction design
Visual Design
What is user experience design?
Usually, some or all of the following
Information design
Information architecture
Interaction design
Visual Design
Human Factors / Cognition
What is user experience design?
Usually, some or all of the following
Information design
Information architecture
Interaction design
Visual Design
Human Factors / Cognition
Usability / Accessibility
What is user experience design?
The User Experience Honeycomb, Peter Morville, 2004
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
Web as Task-Oriented
Software Interface
Graphic Treatment of
interface elements
(the “look” in “look-and-feel”)
Design of UI elements to facilitate
user interaction with functionality
Information presentation to
facilitate understanding
Feature set: detailed description
of functionality to meet user needs
Externally derived goals identified
through user research, ethnography,
psychographics, etc.
Business, creative or other
internally derived goals for the site
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
Web as Task-Oriented Web as Information-
Software Interface Oriented Content
Destination
Graphic Treatment of Visual treatment of text, graphic
interface elements page elements and navigational
(the “look” in “look-and-feel”) components
Design of UI elements to facilitate Design of UI elements to facilitate
user interaction with functionality user’s movement through the IA
Information presentation to Information presentation to
facilitate understanding facilitate understanding
Feature set: detailed description Content elements required in
of functionality to meet user needs the site to meet user needs
Externally derived goals identified Externally derived goals identified
through user research, ethnography, through user research, ethnography,
psychographics, etc. psychographics, etc.
Business, creative or other Business, creative or other
internally derived goals for the site internally derived goals for the site
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
All creative endeavours follow...
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
On the web, this translates to:
The development cycle
1 2 3 4 5 6
Needs Specs Information Interaction Visual Coding,
Architecture Design Design Testing
& QA
The development cycle
1 2 3 4 5 6
Needs Specs Information Interaction Visual Coding,
Architecture Design Design Testing
& QA
Market &
user
esearch User
r
Experience
Team
ent
opm s
de vel eam
A t
& Q
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
You can’t start from the surface
You can’t start from the surface
There’s something
cool on the Web!
We’ve gotta
have that!
You can’t start from the surface
There’s something
cool on the Web!
We’ve gotta Start your photocopier Paste and then
have that!
You can’t start from the surface
There’s something
cool on the Web!
curs
Start your photocopier Paste and then
C oc
We’ve gotta
MAGI
have that!
here
The development cycle
1 2 3 4 5 6
Needs Specs Information Interaction Visual Coding,
Architecture Design Design Testing
& QA
Market &
user
esearch User
r
Experience
Team
ent
opm s
de vel eam
A t
& Q
What, and who, is your product for?
What, and who, is your product for?
Business
or user
needs
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
“A thousand songs in your pocket.”
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
“A thousand songs in your pocket.”
“Provide voting info to US seniors”
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
“A thousand songs in your pocket.”
“Provide voting info to US seniors”
“Teach students how to trade stocks”
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
“A thousand songs in your pocket.”
“Provide voting info to US seniors”
“Teach students how to trade stocks”
External: “Play a fun online game”
What, and who, is your product for?
Business Research, abstract, big-picture goals
or user
needs
“A thousand songs in your pocket.”
“Provide voting info to US seniors”
“Teach students how to trade stocks”
External: “Play a fun online game”
No decisions are being made
about form or design yet
What, and who, is your product for?
Business
or user
needs
How do you address those needs?
Business
or user
needs
How do you address those needs?
Business Specs
or user
needs
How do you address those needs?
Business Specs Decisions about form
or user
needs
How do you address those needs?
Business Specs Decisions about form
or user
needs
...An MP3 player & software
How do you address those needs?
Business Specs Decisions about form
or user
needs
...An MP3 player & software
...A find-your-voting-office tool
How do you address those needs?
Business Specs Decisions about form
or user
needs
...An MP3 player & software
...A find-your-voting-office tool
...Tutorials and articles
How do you address those needs?
Business Specs Decisions about form
or user
needs
...An MP3 player & software
...A find-your-voting-office tool
...Tutorials and articles
...A stock market contest
How do you address those needs?
Business Specs Decisions about form
or user
needs
...An MP3 player & software
...A find-your-voting-office tool
...Tutorials and articles
...A stock market contest
Still no design decisions here
How do you address those needs?
Business Specs
or user
needs
Function and content organization
Business Specs
or user
needs
Function and content organization
Business Specs Information
Architecture
Structure & taxonomy
or user
needs SURVIVOR U - SITEMAP 1.2
Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login
Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support
Survivor
U landing
page
Aggregate feed with all new posted official content
Financial Feature Columnists Expert Newsletter Learn Survivor U Survivor U FAQs Glossary Register
News articles Picks Home Trading Video Video Home Home / Forgot
home Channels Tutorials Login
Home Home
Individual Individual Beginner, Newsroom, FAQ Topic Alphabet
news news news
Intermediate news
INO TV and
news news news
news
Columns news
Experts news news
Groups news
Lettergroup
articles articles articles
and Advanced articles
ClipSyndicate
articles articles articles
pages (skip
articles articles articles
sections channel pages articles articles
letters with
no content)
news
news Feature
news individual
news Individual
Blogs
news Individual
news Individual
news
news Individual
news Individual
news Individual Individual
news
news news news news news
Newsletters news news news
news news
articles
articles articles
articles column
articles Expert
articles articles Lessons
articles video posts
articles Tutorials
articles Q + As Glossary
articles
articles articles articles articles articles articles articles articles articles
articles articles
articles Articles with Tran- Terms
scripts
comments feed comments feed comments feed comments feed comments feed comments feed
per post per post per post per post per post per post
Ideally, on-page
What’s
news
news
Ajax popups with This? info
articles
articles
explanatory notes items
for things like RSS
feeds, etc.
Card-Sorting Exercises
How people will actually use your site / software
Business Specs Information
or user Architecture
needs
How people will actually use your site / software
Information
Architecture
How people will actually use your site / software
Information
Architecture
How people will actually use your site / software
Information
Architecture
Interaction
Design
Thinking about user flows
High-level process flow
How people will actually use your site / software
Information
Architecture
Interaction
Design
Thinking about user flows
Detailed process flowchart
Wireframe Sketches
Wireframes - Paper Prototypes
High-fidelity wireframes
and clickable prototypes
Wireflows
EightShapes Unify Modular Template System
Approaching the surface, Captain
Information Interaction
Architecture Design
Approaching the surface, Captain
Information Interaction Visual
Architecture Design Design
Approaching the surface, Captain
Information
Architecture
Interaction
Design
Visual
Design
Look & Feel
Approaching the surface, Captain
Information
Architecture
Interaction
Design
Visual
Design
Look & Feel
This isn’t just about
decoration, slickness,
or branding
Approaching the surface, Captain
Information
Architecture
Interaction
Design
Visual
Design
Look & Feel
This isn’t just about
decoration, slickness,
or branding
How it looks
is how it works.
Typographical grids & hierarchy
Typographical grids & hierarchy
Typographical grids & hierarchy
Header and nav {
Typographical grids & hierarchy
Header and nav {
image {
Typographical grids & hierarchy
Header and nav {
image {
first item {
Typographical grids & hierarchy
Header and nav {
image {
looks like date and time
first item {
Typographical grids & hierarchy
Header and nav {
image {
looks like date and time looks like content summaries
first item {
Typographical grids & hierarchy
Header and nav {
image {
looks like date and time looks like content summaries looks like archive or search?
first item {
Typographical grids & hierarchy
Header and nav {
image {
looks like date and time looks like content summaries looks like archive or search?
first item {
looks like more info?
Typographical grids & hierarchy
Header and nav {
Site layout conforms
to our expectations
based on our experiences
image {
looks like date and time looks like content summaries looks like archive or search?
first item {
looks like more info?
Visual design of user affordances
unclear relationships obvious relationships
(Mac System 6) (Mac System 7)
Making functionality more obvious
Action 1 Action 2
inactive Active
Cancel Submit
® Cancel ‘ Submit
® Cancel ‘ Submit
Attractive things work better.
Don Norman, Nielsen Norman Group
Which do you feel would work better?
How it looks is how well it works.
Affective design
•Aesthetic pleasure
•Practical needs
•Emotional benefits
Building actual working products
Information Interaction Visual
Architecture Design Design
Building actual working products
Visual
Design
Building actual working products
Visual
Design
Building actual working products
Visual Coding,
Design Testing
& QA
Building actual working products
Visual
Design
Coding,
Testing
This deserves its own slideshow
& QA
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
Double-checks
your assumptions.
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
Double-checks
your assumptions.
If done well, helps
nail low-hanging
fruit to improve
usability
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
Double-checks
your assumptions.
If done well, helps
nail low-hanging
fruit to improve
usability
Can be done for
“10 cents a day”
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
“Guerrilla” usability
testing
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
“Guerrilla” usability
testing
3-4 users. once
a month, is all it takes
Building actual working products
Visual
Design
Coding,
Testing
A note on user testing
& QA
“Guerrilla” usability
testing
3-4 users. once
a month, is all it takes
Test on paper
prototypes, use
simple apps like
Silverback
Budget usability testing with Silverback.app
Tracking clicks with Google Analytics
A/B Testing with Google Website Optimizer
Multi-variate testing with Google Website Optimizer
Play our Options Game,
Make Friends & Win Cash!
Become an Options Master
Absolutely FREE!
You’ve got nothing to lose.
Sign up today!
Win Big!
Options Are Fun!
Learn Options Today
Fourscore and
seven years ago....
Multi-variate testing with Google Website Optimizer
Multi-variate testing with Google Website Optimizer
The development cycle
1 2 3 4 5 6
Needs Specs Information Interaction Visual Coding,
Architecture Design Design Testing
& QA
One more thing...
1 2 3 4 5 6
Needs Specs Information Interaction Visual Coding,
Architecture Design Design Testing
& QA
One more thing...
1 2 3 4 5 6 7
Needs Specs Information Interaction Visual Coding, Rinse
Architecture Design Design Testing & Repeat
& QA
The circle of life(cycle), Simba
1 2 3 4 5 6 7
Needs Specs Information Interaction Visual Coding, Rinse
Architecture Design Design Testing & Repeat
& QA
The circle of life(cycle), Simba
1 2 3 4 5 6 7
Needs Specs Information Interaction Visual Coding, Rinse
Architecture Design Design Testing & Repeat
& QA
In reality, feedback is constant
1 2 3 4 5 6 7
Needs Specs Information Interaction Visual Coding, Rinse
Architecture Design Design Testing & Repeat
& QA
Critical Path
The Nine Pillars
of Successful Web Teams
project management
Where do you sit
Jesse James Garrett <jjg@jjg.net>
9 July 2003
on this map?
The most successful Web teams build their team structures and their
processes on these nine essential competencies:
Project Management: The hub that binds all the tactical competencies
together as well as the engine that drives the project forward to completion,
project management requires a highly specialized set of skills all its own. concrete
Neglecting this area often results in missed deadlines and cost overruns.
d i
design
Concrete Design: Before the abstract design can become a fully realized
user experience, you must determine the specific details of interfaces,
navigation, information design, and visual design. This realm of concrete
design is essential to creating the final product.
tactical
Content Production: Knowing what content you need isn't enough. You also technology content
need to know how you'll produce it. Gathering raw information, writing and
editing, and defining editorial workflows and approvals are all part of content
implementation production
production.
Technology Implementation: Building technical systems involves a lot of
hard work and specialized knowledge: languages and protocols, coding and
debugging, testing and refactoring. The more complex your site, the more
important a competency in technology implementation becomes. abstract
bstra
Abstract Design: Information architecture and interaction design translate
d
design
strategic objectives into a conceptual framework for the final user
experience. These emerging disciplines addressing abstract design are
strategic
increasingly recognized for their value in the Web development process.
Content Strategy: Content is often the reason users come to your site. But
what content can you offer to meet your users' expectations? How much technology content
content is appropriate, and what form should it take? What style or tone
should it have? Before you can produce that content, you need to answer
strategy strategy
fundamental content strategy questions such as these.
Technology Strategy: Web sites are technologically complex, and getting
more intricate all the time. Identifying the technology strategy for the site –
platforms, standards, technologies, and how they can all interoperate – is
essential to avoiding costly mistakes. site
Site Strategy: Defining your own goals for the site can be surprisingly
strategy
trateg
tricky. Arriving at a common understanding of the site's purpose for your
organization, how you'll prioritize the site's various goals, and the means by
which you'll measure the site's success are all matters of site strategy.
User Research: User-centered design means understanding what your
users need, how they think, and how they behave – and incorporating that
understanding into every aspect of your process. User research provides the
raw observations that fuel this insight into the people your site must serve.
user research
adaptive path http://www.jjg.net/ia/pillars/
http://www.adaptivepath.com/
adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
The Nine Pillars
of Successful Web Teams
project management
Where do you sit
Jesse James Garrett <jjg@jjg.net>
9 July 2003
on this map?
The most successful Web teams build their team structures and their
processes on these nine essential competencies:
Project Management: The hub that binds all the tactical competencies
together as well as the engine that drives the project forward to completion,
project management requires a highly specialized set of skills all its own. concrete
Neglecting this area often results in missed deadlines and cost overruns.
d i
design
Probably in
Concrete Design: Before the abstract design can become a fully realized
user experience, you must determine the specific details of interfaces,
navigation, information design, and visual design. This realm of concrete
more than one
design is essential to creating the final product.
tactical
Content Production: Knowing what content you need isn't enough. You also technology content
need to know how you'll produce it. Gathering raw information, writing and
editing, and defining editorial workflows and approvals are all part of content
implementation production
neat, tidy area
production.
Technology Implementation: Building technical systems involves a lot of
hard work and specialized knowledge: languages and protocols, coding and
debugging, testing and refactoring. The more complex your site, the more
important a competency in technology implementation becomes. abstract
bstra
Abstract Design: Information architecture and interaction design translate
d
design
strategic objectives into a conceptual framework for the final user
experience. These emerging disciplines addressing abstract design are
strategic
increasingly recognized for their value in the Web development process.
Content Strategy: Content is often the reason users come to your site. But
what content can you offer to meet your users' expectations? How much technology content
content is appropriate, and what form should it take? What style or tone
should it have? Before you can produce that content, you need to answer
strategy strategy
fundamental content strategy questions such as these.
Technology Strategy: Web sites are technologically complex, and getting
more intricate all the time. Identifying the technology strategy for the site –
platforms, standards, technologies, and how they can all interoperate – is
essential to avoiding costly mistakes. site
Site Strategy: Defining your own goals for the site can be surprisingly
strategy
trateg
tricky. Arriving at a common understanding of the site's purpose for your
organization, how you'll prioritize the site's various goals, and the means by
which you'll measure the site's success are all matters of site strategy.
User Research: User-centered design means understanding what your
users need, how they think, and how they behave – and incorporating that
understanding into every aspect of your process. User research provides the
raw observations that fuel this insight into the people your site must serve.
user research
adaptive path http://www.jjg.net/ia/pillars/
http://www.adaptivepath.com/
adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
UX
Design What’s usable, useful & desirable
Product
Management What’s needed & therefore valuable
Engineering What’s possible, and what’s not
UX
Design
Product
Management Engineering
A constant cycle of design and testing
UX
Design
Product
Management Engineering
A constant cycle of design and testing
adapted from ‘Sharing Ownership of UX,” Pabini Gabriel-Petit, 2007
So what does all this get us?
So what does all this get us?
Clearer direction from the start - saves time
So what does all this get us?
Clearer direction from the start - saves time
Design process driven by knowledge
So what does all this get us?
Clearer direction from the start - saves time
Design process driven by knowledge
Documentation of planning & design decisions
So what does all this get us?
Clearer direction from the start - saves time
Design process driven by knowledge
Documentation of planning & design decisions
Improved functioning between teams
So what does all this get us?
Clearer direction from the start - saves time
Design process driven by knowledge
Documentation of planning & design decisions
Improved functioning between teams
Better products, and happier users
Questions? Comments?
ajkandy@marksandpixels.com
AJ Kandy • Marks & Pixels marksandpixels.com
Byeongseong Kwon
A video of your talk would be awesome.
Also - what is the licensing for this content? Many of the readers of my blog would benefit from what you've put together - so I'm likely to write an article about it. I'd definitely embed the presentation - is it ok to include images from some of the individual slides as well (so that I can 'talk to them')?
Thanks again for the great stuff! 2 years ago
Suso: I'll see if I can put together a condensed version, but I wanted to preserve the individual transitions for the purposes of a slidecast. 3 years ago