uxcellence: the importance of human-centered design
DESCRIPTION
For many creatives getting out of college and into the field, it's hard to know what career best fits them. UXcellence: The Importance Of Human-Centered Design is meant to be a quick education to - What UX is - Why it is important - When it's thought about - Why it is important in today's society - And a quick overview of how to do itTRANSCRIPT
UXcellenceThe Importance of Human-Centered Design
by Mike Townson
Mike TownsonUX Designer
I work at projekt202 and focus on user research and software design.
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
AUSTIN DALLAS SEATTLE
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
UXWhat is UX? Who is it? When is UX done?
Why is UX important? How do I do UX?
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
User Experience DefinitionThe overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.
User Experience Definition"If a website degrades the user experience too much, people will simply stay away."
WTF?
Before iPhone After iPhone
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
Who?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
CD
DRIXD
VD
FET
BET
The UX Family Tree
CD UX Creative DirectorCould also be known as “Art Director, UX Lead, UX Manager”
• Kicks off the project
• Removes “road blocks”
• Attends milestone meetings
• Mentors design team
• Takes the heat
• Buys the tacos
DR Design ResearcherCould also be known as “UX Researcher”, “Anthropologist”
• Creates questionnaires
• Performs observations
• Collects & synthesizes data
• Identifies problems and opportunity
• Helps create project roadmap
• Presents findings
• Sometimes travels a lot
IXD Interaction DesignerCould also be known as “Information Architect”, “UX Lead”, “Strategist”
• Attends user observations
• Helps Design Researcher
• Creates presentation materials
• Creates app flow, site map, wireframes,
interaction diagrams, other planning materials.
• Follows project from beginning to end.
VD Visual DesignerCould also be known as “User Interface Designer”, “Pixel Pusher”
• Works with the team to create visual designs.
• Follows interaction diagrams
• Produces UI Toolkits
• Makes ready to use slices for FET
• Guides client in the right direction for colors,
textures, fonts, sizing, overall look & feel.
CD
DRIXD
VD
FET
BET
The UX Family Tree
FET Front-End TechnologistCould also be known as “Front-End Dev”, “Web Developer”, “App Dev”
• Builds the codebase for all the user facing
parts of the application.
• Works with the team to make sure the end
product matches the interaction diagram and
color compositions.
• Magic
BET Back-End TechnologistCould also be known as “Back-End Dev”, “System Architect”
• Makes sure the needed data can be delivered
from the technology stack.
• Black Magic
Who are we leaving out?
Users
These peopleare users.
(or models)
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
When?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
When is the best time to involve UX
• At the beginning of a project planning
• During the testing of a product
• Any UX is better than no UX
The UX ProcessDiscover
Analyze Existing
User Observations
UX Strategy Ideation &User Validation
Detailed Design& Development
System Testing
UserTesting
Design Specs &UX Pattern Library
Ideate Design & Build
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
Why?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
This is the core of who we design for and the people we work/live with...
...and someone needs to fight for them.
USER
“Let’s totally make an elephant slide.”
Just because it’s pretty...
..doesn’t mean it’s good.
Sony Remote for Google TV Nokia N-Gage
Windows 8Reliant Robin
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
How?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
CD DR IXDVD FET BET
More like “Boy Meets World” Less like “Family Guy”
How does this family work together?
Research
Start Launch
CD
DR
Ideation Design Development
IXD
VD
FET
BET
Basic UX Schedule
Stakeholder InterviewsHeuristic EvaluationContextual Inquiries
SynthesisAnalysis
Opportunity DefinitionRoadmap
Start Launch
CD
DR
Site-MapUser Flow
Framework DesignWireframes
Interaction DocumentFunctional Specs
Color TheoryKey Screen Design
Unique Screen CompsUI Toolkit
FrameworkContent Creation
StylesContent Management System
Middle-WareDB CreationMagic Stuffs
IXD
VD
FET
BET
Basic UX Schedule
Project Example:
Video Watching Thing
Kick Off + Stakeholder Interview
Contextual Inquiries(User Observations)
Synthesis
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote
Workflow Diagrams
Opportunity Matrix & Roadmap
Low Risk
Low Effort
High Effort
High Risk
Key
Impa
ct o
n R
esou
rces
to D
esig
n &
Dev
elop
Current Understanding of Features
MED IMPACT
HIGH IMPACT
VERY HIGH IMPACT
Robust Help FAQ
User-generated custom reports
Drag & drop sorting lists
Breadcrumbs
Color coding
Best practice examples
Wizards for common actions (drug
testing, background checks)
DW branding like DISA
Role based navigation
Consistent labeling
Custom UI views for different types of
users.Chat functionality
Support ticketing
Tutorials for advanced tasks.
Real-time edit tracking
File loading bars
Preview of uploaded files
Notes option on data
Clear text hierarchy
Promote useful data
Progressive disclosure of
data on page load
Mark as viewed
Notifications on completion
Error messaging and system
feedback
Have a "favorite" feature for areas the user goes to
often.
Tool Tips
New notification systems (SMS in app notifications)
Employee Photographs
Cross Browser Compatibility
User-set logout timer
Robust filtering and
sorting
User notifications on data edits
Faster, cleaner, smarter
searches.
Landing pages with
progressive content
Match digital forms to paper order of forms
View uploaded records for employee
Daily digest email
Role-specific actions other users cannot
undertake
Responsiveness
Session memory to
remember last states
Descriptive call outs when
compliance not met
User-defined views (drag &
drop dashboards)
Creating buckets of
tasks based on employee management
Employee and
paperwork search
Batch editing
Avoid DISA-specific
acronymsCleaner
iconography
Increase readability on all
form factors
LOGO SEARCH USER ACCOUNT
RECENT ACTIVITY
WATCH AGAIN
SUGGESTED
POPULAR
WHAT TO WATCH SUBSCRIPTIONS
NAVIGATION
LOGO USER ACCOUNT
WATCH AGAIN
WHAT TO WATCH SUBSCRIPTIONSWhat to Watch
My Channel
My Subscriptions
History
Watch Later
Play Lists
Favorite Videos
Liked Videos
Recently Watched Video
Recently Watched Video
Recently Watched Video
Video Watched Video Watched Video Watched Video Watched
Description Description Description Description
Suggested Video
Description
Suggested Video
Description
Suggested Video
Description
Suggested Video
Description
Popular Video to Watch
Description
Popular Video to Watch
Description
Popular Video to Watch
Description
Popular Video to Watch
Description
Popular Video to Watch
Description
Search
UI Toolkit(Library of Visual Elements)
Get to Dev’n(Code up the front end - Hook up the back end)
Get to Dev’n(Code up the front end)
All done?
Rinse & Repeat
Detailed Design& Development
System Testing
UserTesting
Design Specs &UX Pattern Library
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
UXWhat is UX? Who is it? When is UX done?
Why is UX important? How do I do UX?
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
Questions?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014