Introduction to user experience design + usability
Describe the field of UX + how it relates to other disciplines
Identify the different roles within UX + the responsibilities of each
UX Process: Traditional [“Waterfall”], Agile, Lean
Learn to conduct UX research
Introduction to user experience documentation + deliverables + software
Learn about personas, user flows, sitemaps, wireframes
Determine when to use which documentation
Discover new tools and frameworks for creating deliverables
Introduction to usable web forms
Identify the different elements of forms and how to use them effectively
Learn what makes a strong user experience with forms
Identify expected outcomes
Curated list of UX resources
Recommended blogs, books, experts to follow, companies of note, local organizations and recommended conferences
5. ‣ Introduction to user experience design + usability
‣ Introduction to user experience documentation + deliverables + software
‣ Introduction to usable web forms
WHAT WE’LL COVER TODAY
7. ‣ Describe the field of UX + how it relates to other disciplines
‣ Identify the different roles within UX + the responsibilities of each
‣ UX Process: Traditional [“Waterfall”], Agile, Lean
‣ Learn to conduct UX research
LEARNING OBJECTIVES
8. WHAT IS USER EXPERIENCE DESIGN [UXD]?
“User experience design (UXD or UED) is the process of enhancing user
satisfaction by improving the usability, ease of use, and pleasure provided in the
interaction between the user and the product.” — Wikipedia
“The design of anything independent of medium or across [device] with human
experience as an explicit outcome and human engagement as an explicit goal”
— Jesse James Garrett, co-founder of Adaptive Path
“User experience encompasses all aspects of the end-user's interaction with the
company, its services, and its products.” — Nielsen Norman Group
9. WHAT IS USABILITY?
“Usability is a quality attribute that assesses how easy user interfaces are to use.
The word "usability" also refers to methods for improving ease-of-use during the
design process.” — Nielsen Norman Group
“Usability is the ease of use and learnability of a human-made object. The object
of use can be a software application, website, book, tool, machine, process, or
anything a human interacts with.” — Wikipedia
11. UX JOBS + RESPONSIBILITIES: BLUEPRINT
‣ UX Designer
‣ Experience Designer
‣ Interaction Designer [IxD]
‣ Information Architect [IA]
12. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
13. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
14. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
15. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
16. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
17. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
18. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
19. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
20. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
21. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
22. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
23. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
24. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
25. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
26. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
27. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
28. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
29. INTERACTION DESIGNER [IXD]
‣ Focus only on the interaction between the human + the computer
‣ Designing for affordances
30. ‣ Structure
‣ What are all the things a user is able to do / places a user can visit?
‣ Taxonomy
‣ User Flows
INFORMATION ARCHITECT
31. ‣ Structure
‣ What are all the things a user is able to do / places a user can visit?
‣ Taxonomy
‣ User Flows
INFORMATION ARCHITECT
+ + + + + +
2
Saved
Search
Starre
d
Followin
g
Recen
t
Popula
r
Nearb
y
Filte
r
Searc
h
Result
s
Projec
t
Galler
y
Submi
t
New
Project
My
Profile
Setting
s
Edit
Profile
Adv
Options
Edit
Notification
Edit
Sharing
Users
Starred
User
Profile
Users
Submits
My
Projects
Share
Logi
n
Home
Launch
Users
Projects
Edit
Projec
t
Download
Other
User
Not
Logge
d In
Hel
p
+
My
Submit
s
32. UX JOBS + RESPONSIBILITIES: BUSINESS STRATEGY
‣ UX Strategist
‣ UX Architect
‣ UX Product Manager
‣ UX Analyst
33. UX ANALYST
‣ Responsible for configuring metrics for products
‣ Carry out usability tests
‣ Assists teams to make data driven decisions
34. UX ANALYST
‣ Responsible for configuring metrics for products
‣ Carry out usability tests
‣ Assists teams to make data driven decisions
35. UX JOBS + RESPONSIBILITIES: VISUAL DESIGN
‣ Visual Designer
‣ UI Designer
‣ Digital Designer
‣ Designer
36. UX JOBS + RESPONSIBILITIES: VISUAL DESIGN
‣ Responsible for the “pretty” part of the product
37. UX JOBS + RESPONSIBILITIES: VISUAL DESIGN
‣ Responsible for the “pretty” part of the product
38. UX JOBS + RESPONSIBILITIES: VISUAL DESIGN
‣ Responsible for the “pretty” part of the product
47. ENGINEERING / IMPLEMENTATION
‣ Works closely with UX to implement designs
Carrier 12:00 PM
MediaTask
Title
Description
#
Submit
sNew Task ProfileFeed
Title
Description
#
Title
Description
#
Title
Description
#
T7 Profile Page
Tap to view Profile
Page. Transitional
animation: no
animation
T8 Create Project
Tap to Create a New
Project. Transition: display
cut to new view w same
footer and new highlight
state, no animation
T2 Feed
Tap to view Feed Page (Home
Page). Transition: display cut to
new view w same footer and new
highlight state, no animation. Until
page contents loads display
header, footer, and a loading
spinner w message.
T5 Project Page
Tap to view Project Page.
Transitional animation: slide
left from right When a
project has no submissions
display a Submit button that
takes users directly to the
camera capture step. See
T5
Project List Item
Includes Image
from project
creator, Title,
Description, # of
Submissions, and
up to 5 of the most
recent submission
images.
Drag list down to refresh feed.
Display with animating arrow
or spinner and message:
"Pull down to Refresh"
"Release to Refresh"
"Updating"
"Not Connected to Interent"
T1 Info
Tap to view Info
page.
Transitional
animation: slide
up from bottom
T10 Search
Tap to view Search Page.
Transitional animation: slide
left from right When a project
has no submissions display a
Submit button that takes
users directly to the camera
capture step. See T5
M3 Filter
Tap to view Info
Filters.
Transitional
animation: slide
up from bottom
Carrier 12:00 PM
Title
Category ## photos ## videos submitted
User Name
My Projects Recent Popular
MediaTask
T8 Create Project
Tap to Create a New
Project. Transition: display
cut to new view w same
footer and new highlight
state, no animation
Pull down
to refresh.
Search
Title, by User Name
0/100
Category | ## | ## | ## Days left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
Swipe to navigate, tap to
select Feeds . Default feed is
Recent.
T5 Project Page
Tap to view Project Page.
Transitional animation: slide
left from right When a
project has no submissions
display a Submit button that
takes users directly to the
camera capture step. See
T5 This is a project with
no submissions.
M1 Project List Item
Includes Title, User Name,
Project Image, Category,
# of photos, # of videos, #
days left till project close,
Description, Goal Gauge,
optional gallery.
Drag list down to expose
search, and then refresh feed.
On release without reaching
refresh threshold keep search
visible. Upon reaching refresh
threshold display with
animating arrow or spinner
and message:
"Pull down to Refresh" >
"Release to Refresh"
"Updating"
"Not Connected to Interent"
T3 Profile Page
Tap to view Profile Page.
Transitional animation: no
animation
M3 Filter
Tap to view Filters.
Transitional animation: slide
down from top
For projects with
submissions, swipe
anywhere on a list item to
navigate a gallery of up to
10 recent entries. Swiping
also displays the
submissions button. See
M1 for full specification.
Feeds
My Submissions
Starred
My Projects
Following
Recent
Popular
Nearby
T10 Search
Tap to view Search.
Transitional animation: slide
keyboard up; expand the
height of search to include
the location field, slide up list
of recent searches. see
animation from Yelp Search.
61. WHY UNDERSTAND OUR USERS?
‣ So you don’t build a snow machine for an eskimo
‣ Ensures you’re solving a problem that exists in peoples lives
‣ Key to building a product that is tailored to its audience
62.
63. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ Why?
‣ Who?
‣ What?
‣ Where?
‣ When?
‣ How?
65. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ Why are they coming to us?
‣ Goals?
‣ What are their needs?
66. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ Who are our users?
‣ Businesses vs. consumers?
‣ Demographics?
‣ Background knowledge?
‣ Understanding of terminology?
67. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ When are they visiting?
‣ Morning or evening?
‣ When they’re in a crisis?
‣ Daily?
‣ Monthly?
68. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ What are their habits?
‣ Do they use social networks?
‣ Content producers or consumers?
‣ What you ask depends on the product
69. WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?
‣ How are they accessing?
‣ Desktop or mobile?
‣ Tablet?
‣ Over the phone or in person?
71. HOW DO WE GET THAT INFORMATION?
‣ Research, Observe!
‣ Surveys
‣ User Interviews
‣ Focus Groups
‣ Existing data
72. UX RESEARCH: SURVEYS
‣ + Gather large numbers of responses very quickly
‣ + Get quantitative or qualitative feedback immediately
‣ - Hard to get rich responses
‣ - Often learn about problems but not why they occur
73. UX RESEARCH: USER INTERVIEWS
‣ + One-on-one discussion
‣ + Can gather rich targeted information
‣ + Flexible; can explore tangents or unexpected areas
‣ - Time consuming to organize, run + analyze
75. FINDING PARTICIPANTS
‣ Where to find them:
‣ Coffee shops
‣ Asking your network
‣ Social networks and forums
‣ Craigslist / Gumtree ads
76. HOW TO ASK QUESTIONS
‣ Be wary of priming
‣ Don’t ask leading questions
‣ Never ask about intention, always probe behavior
‣ - “How many times do you plan to go to the gym?”
‣ + “How many times have in the last 3 months?”
77. FOCUS ON SPECIFIC INSTANCES
‣ + “Have you ever had ________ problem”?
‣ + “Tell about the last time you ....”
‣ Avoid generalizations:
‣ - “What do you usually ...”
78. KEEP THEM TALKING
‣ + “Tell me more about that”
‣ + “What do you mean by...”
‣ + “Help me understand better..”
‣ Never put words into their mouth
‣ - “So do you mean...”
79. PREPARING AN INTERVIEW
‣ Record interviews if possible
‣ Always ask permission
‣ Explain why + that it’s for private use
‣ Take notes but remain focussed on participant
‣ Focus on topics rather than list of questions
‣ Should be a conversation
‣ If you divert off topic: “That’s really interesting. Can you tell me more
about ...”
81. TOPIC MAP EXERCISE! - 50 MINUTES
‣ You are going to do a user interview about online shopping in order to
better understand users’ fears + desires
‣ Prepare a topic map covering all subjects you want to know [20m]
‣ Split into groups of 3
‣ 1 person will interview, 1 will record notes on post it notes, 1 person
will be interviewed
‣ We will rotate every 10 minutes
‣ Be prepared to share!
83. CAPTURING INSIGHTS
‣ Straight after interview
‣ Write down or identify the 3 most important insights
‣ When reviewing recording/notes
‣ Write out each interesting point on individual post it
84. IDENTIFYING TRENDS BY CREATING AFFINITY MAPS
‣ Once you have all of your data, it’s time to analyze
‣ Goal is to extract common trends / themes
‣ Post-Its are your friends
85. AFFINITY MAP EXERCISE! - 30 MINUTES
‣ Everyone should have a pile of post it notes
‣ One group will place their notes on the wall + read out the insight
‣ If another group has a similar insight they will place it on top
‣ Repeat until all the post it notes are placed on the wall
‣ Create themes from the grouped insights
88. PERSONAS
‣ An example, generally
fictional, of a person within
your user base
‣ Created by conducting user
research + summarizing
trends into one or more
archetypes
89. PERSONAS: WHY THEY’RE IMPORTANT
‣ Communication tool
‣ Useful for summarizing what you know about your user
‣ Will help to highlight pain points + opportunities to tailor your product to
your user
‣ Keep your product focused on your key users rather than building for the
whole world.
‣ [Keep in mind it’s just a framework, not a roadmap]
90. PERSONAS: WHAT SHOULD BE INCLUDED
‣ Root it in reality not your imagination
‣ Goals / Needs
‣ Behaviors
‣ Biographical information [name, age, gender, location, income, etc]
‣ Optionally assign it personality traits [again, based on your research]
91. PERSONAS: SCENARIOS
‣ Short stories about a person using you product to achieve a goal
‣ Describes what they would do + why they would do it
‣ Independent of interface
‣ Gives the context in which its used
96. PROVISIONAL PERSONAS
‣ Provisional Personas are personas created without primary research
‣ They can be created through empathy mapping techniques
‣ They need to be validated as soon as possible with real users as part of
the build, measure, learn loop
99. PROVISIONAL PERSONAS EXERCISE! - 30 MINUTES
‣ Treat your table as a team
‣ Draw an empathy map on your table
‣ Based on insights from your interviewing exercise, project yourself into
the mind of someone making a large purchase online
100. PROVISIONAL PERSONAS: EMPATHY MAP
‣ What does she Think or Feel? [What matters?]
‣ What does she See? [environment, friends, solutions in the market]
‣ What does she Say + Do? [appearance, activities, behaviors]
‣ What does she Hear? [What do friends, boss, colleagues say?]
‣ Pain [fears, frustrations, obstacles]
‣ Goals [wants, needs, desires]
102. CHALLENGES OF PERSONAS
‣ They can be artificial / abstract / fictitious
‣ They are a composite sketch of 10 people all rolled into 1
‣ They don’t have opinions
‣ They can’t talk back, answer questions, or give feedback
105. ‣ Learn about personas, user flows, sitemaps, wireframes
‣ Determine when to use which documentation
‣ Discover new tools + frameworks for creating deliverables
LEARNING OBJECTIVES
116. TOOLS + SOFTWARE: MIND MAPS
‣ Xmind
‣ Mind Node
‣ Mindjet
‣ FreeMind
117. TOOLS + SOFTWARE: ANALYTICS + METRICS
‣ Crazy Egg
‣ Good Data
‣ KISSmetrics
‣ Mix Panel
‣ Google
Analytics
‣ Lucky Orange
‣ Live Person
‣ Myna Web
‣ HiConversion
‣ Tableau
‣ Maxymiser
‣ App Annie
‣ Flurry
‣ Woopra
‣ Quantcast
‣ Piwik
‣ Clicky
‣ Attention Wizard
‣ Click Density
‣ Click Tale
‣ Inspectlet
‣ FullStory
118. SOFTWARE EXERCISE! - 60 MINUTES
‣ Divide into pairs
‣ Research assigned software tool + report back to the group
‣ Things to look for include:
‣ Is there a free trial?
‣ Pricing
‣ Features
‣ Download / cloud?
‣ Be prepared to share!
120. ‣ Identify the different elements of forms + how to use them effectively
‣ Learn what makes a strong user experience with forms
‣ Identify expected outcomes
LEARNING OBJECTIVES
121. WEB FORMS: PRINCIPLE
‣ Reward, acknowledge, explain + reassure
‣ This principle applies to all UX, not just forms
‣ The user is King Baby, a god, or a small child
‣ No attention span
‣ Can only process one idea at a time
‣ Impatient
‣ Demanding
‣ Insecure
‣ Anticipate their every need + concern
‣ Play a game with lots of little “wins” to keep them motivated
122. WEB FORMS: PRACTICE
‣ Filling out a form is work + users are lazy
‣ The goal is to reduce the amount of work
‣ Secondarily, reduce the appearance of how much work it really is
‣ Use selectors wherever possible; avoid reliance on free text input
‣ Free text is the most work + the most error-prone
123. WEB FORMS: INDICATE PROGRESS
‣ For longer forms, there should be some visualization of overall
completeness
‣ Progress bar, % complete, green checkmarks, etc.
‣ For shorter forms this is less important
‣ Field-by-field validation is still a nice thing to do
124. WEB FORMS: PROVIDE REASSURANCE
‣ Over-explain why you’re asking for this information
‣ This goes double for sensitive info such as financial or medical
‣ If there are any in-depth questions, be sure to address them in the form
‣ Amazon’s “What’s this?” or “Why we ask” links
125. WEB FORMS: KEEP ON SELLING
‣ Abandonment is most likely to
happen during form completion
‣ Remind the user why it’s valuable to
complete the process
126. WEB FORMS: FORGIVE ERRORS
‣ Don’t lose their data!
‣ User error cannot be allowed to break the system
‣ Make sure you have in-line methods of dealing will all error types
‣ Misspellings, skipped fields, wrong data type, etc.
‣ Alert the user visually with color + clearly explain what’s needed
127. WEB FORMS: ALLOW CONFIRMATION
‣ When possible, use a confirmation page
‣ With longer forms, allow user to navigate back through form
‣ Use this approach when repeating the data would require a very
large/complex interface
128. WEB FORM COMPONENTS: SINGLE SELECTORS
mm/dd/yyyyDate:
- Select One -Select Field:
Radio Button Array:
Option 2
Option 1
Option 4
Option 3 Option 5
Slider:
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 27 28
29 30 31 1 2 3 4
5 6 7 8 9 10 11
26
Su Mo Tu We Th Fr Sa
July 2007 ><
129. WEB FORM COMPONENTS: MULTI SELECTORS
Full List My Items
>
<
Item 1
Item 2
Item 3
Item 4
none
Multi-select:
Checkbox Array:
✔ Option 2
Option 1
Option 4
✔ Option 3 ✔ Option 5
131. WEB FORM COMPONENTS: FREE INPUTS
Error Title
Recovery instructions
appear in this space
Field Label:
Instructional text associated with this field
Field Label:
Instructional text associated with this field
Textarea
Editor Controls
iB u 1
2
3
A abFormat Font Size
enter text
File input text Browse
133. WEB FORMS: TYPES + OUTCOMES
‣ Contact Form
‣ Lead Generation Form
‣ Order Form
‣ Event Registration Form
‣ Survey
134. WEB FORMS: CONTACT FORM
‣ The simplest of web forms
‣ Purpose: to take users’ input and delivers it to your inbox
‣ Typically it contains no more than three fields – Name, Email + Message
‣ Two main advantages over displaying your email id publicly:
‣ If you go sharing your email address all around you make yourself
the victim of spammers.
‣ It’s way easier for a visitor to contact you just by filling in a couple of
fields
135. WEB FORMS: CONTACT FORM
‣ The simplest of web forms
‣ Purpose: to take users’ input and delivers it to your inbox
‣ Typically it contains no more than three fields – Name, Email + Message
‣ Two main advantages over displaying your email id publicly:
‣ If you go sharing your email address all around you make yourself
the victim of spammers.
‣ It’s way easier for a visitor to contact you just by filling in a couple of
fields
136. WEB FORMS: LEAD GENERATION FORM
‣ “Money is in the mailing list" mindset
‣ Purpose: to collect contact information of prospects
‣ A web form to collect people’s emails
‣ When a user signs up or subscribes to your mailing list, you are granted
permission to email him/her regularly
‣ Can also be used on landing pages of company websites to capture
contacts for the sales cycle
‣ Best practices: offer an incentive when you ask for people’s contact
details
137. WEB FORMS: LEAD GENERATION FORM
‣ “Money is in the mailing list" mindset
‣ Purpose: to collect contact information of prospects
‣ A web form to collect people’s emails
‣ When a user signs up or subscribes to your mailing list, you are granted
permission to email him/her regularly
‣ Can also be used on landing pages of company websites to capture
contacts for the sales cycle
‣ Best practices: offer an incentive when you ask for people’s contact
details
138. WEB FORMS: ORDER FORM
‣ PayPal, Google Checkout forms
‣ Purpose: to collect payment for online purchases
‣ This form lets you sell products online without setting up a laborious
shopping cart
‣ Can be integrated with online payment gateways
139. WEB FORMS: ORDER FORM
‣ PayPal, Google Checkout forms
‣ Purpose: to collect payment for online purchases
‣ This form lets you sell products online without setting up a laborious
shopping cart
‣ Can be integrated with online payment gateways
140. WEB FORMS: EVENT REGISTRATION FORM
‣ Eventbrite, nvite
‣ Purpose: to find out how many people will actually turn up to your event
‣ Gathers attendants’ contact data + other requested info
141. WEB FORMS: EVENT REGISTRATION FORM
‣ Eventbrite, nvite
‣ Purpose: to find out how many people will actually turn up to your event
‣ Gathers attendants’ contact data + other requested info
142. WEB FORMS: SURVEY FORM
‣ Market research, user research
‣ Purpose: allows you to survey customers to get feedback
‣ Can be used with prospective or current customers
143. WEB FORMS: SURVEY FORM
‣ Market research, user research
‣ Purpose: allows you to survey customers to get feedback
‣ Can be used with prospective or current customers
145. RESOURCES: READING
‣ UX Booth
‣ UX Magazine
‣ UX Matters
‣ UX Zeitgeist
‣ Smashing Magazine
‣ UIE
‣ A List Apart
‣ Transitioning Careers
‣ Medium Collection
‣ Boxes and Arrows
‣ Hints from the Lazy Bear
‣ 52 Weeks of UX
‣ UX Apprentice
‣ Usability First Glossary
‣ UX Beginner
146. RESOURCES: BOOKS
‣ Smashing UX Design
‣ Don’t Make Me Think, Revisited
‣ The Elements of User Experience
‣ The User Experience Team of One: A Research and Design Survival
Guide
‣ It's Our Research: Getting Stakeholder Buy-in for User Experience
Research Projects
‣ Designing Together: The collaboration and conflict management
handbook for creative professionals
147. RESOURCES: UXERS YOU SHOULD KNOW
‣ Jakob Nielson
‣ Jared Spool
‣ Alan Cooper
‣ Dana Chisnell
‣ Nate Bolt
‣ Peter Morville
‣ Stephen Anderson
‣ Steve Krug
‣ Luke Wroblewski
148. RESOURCES: COMPANIES OF NOTE
‣ Nielsen Norman Group
‣ Adaptive Path
‣ IDEO
‣ Smart Design
‣ Frog Design
‣ Cooper Design