Post on 22-Nov-2014
description
UX Tools Practice, Process, Skills
David Panarelli NoVA UX September, 17 2014
Carpentry
User Experience Design
User Experience DesignHow people feel when using a product.
A rendering of an intended experience.
Lauralee Alben Jared Spool
the experience is the user’s rendered intent a field, with many disciplines
User Researcher Identifies user behaviors, goals and needs through interviews, studies and surveys
Content StrategistAudits, reviews, creates, and governs the production of content in a system
Information Architect (IA)Defines the structure of a system, how content is described, organized and discovered
Interaction Designer (IxD/UX Designer)Defines interactions, user flows, wireframes, and affordances of a system
UI Developer Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
Visual DesignDesigns and maintains appropriate visual styles in service of the overall experience of a product or service
Who does UX?
Or, just one person
What do people use?
Software tools
Software
Collaboration Tools
Sketch / Whiteboard
Sketch / Whiteboard
That’s how you make the UX, right?
It’s not about the software.
The only important questions: What gets the job done? What works for you? What works for your team?
How the work gets done
Process
ProcessDiscovery Synthesis Interaction Refinement
Learn about a problem. Plan a solution. Validate ideas, internally and externally. Refine a product for launch.
Process
ProcessDiscovery Synthesis Interaction Refinement
DiscoveryStakeholder Interviews
User testing + reporting
Competitive/Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas
Gain clear understanding of problems you want to solve
User Testing
User Testing
• Identify testing needs
• find people to be participants
• write testing script
• conduct the test
• analyze results
• present findings
worst stock photo
User Testing
• Identify testing needs
• find people to be participants
• write testing script
• conduct the test
• analyze results
• present findingsHandbook of Usability Testing Jeffrey Rubin, Dana Chisnell
ProcessDiscovery Synthesis Interaction Refinement
SynthesisSketching Sessions
Taxonomy
Content Strategy
Visual designs? maybe…
HTML prototypes? maybe…
Generate solutions for the problem.
Sketching
Sketching is not “drawing”
Solo Sketching
… and whiteboards, too!
Group sketching
6-1-1
Best meeting ever
people, across disciplines a problem worksheets (if you want) pens whiteboard markers
Understand the problem
The 6
Discuss no critique, yes stealing
The first 1
Discuss themes emerge
The Last 1
Now, get it validated.
ProcessDiscovery Synthesis Interaction Refinement
InteractionsPrototypes
Yes, prototypes
Did I mention prototypes?
Flow Diagrams
Sitemaps
Content Guidelines
Prototyping
• print out your screens
• practice “links”
• Show it to someone else
Prototyping
• Make a few screens
• Make links
• Show it to someone else
flinto.com
Prototyping
• non-production HTML
• non-production CSS
• non-production JS
Prototypes made of paper vs Prototypes made from images vs Prototypes made from code
Stop arguing and make a prototype already.
ProcessDiscovery Synthesis Interaction Refinement
RefinementRefined visual design
Wireframes/Specifications
+ Front End Code
User testing—wait what?
Wireframes
paper-based means… version control revision, revision, revision printing
Use of wireframes is becoming inconsistent, but is sometimes important
wiki-based means… links always current on your computer plays nice
Depends on organizational need.
ProcessDiscovery Synthesis Interaction Refinement
Discovery Synthesis Interactions RefinementStakeholder Interviews
User testing + reporting
Competitive/Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas
Sketching Sessions
Taxonomy
Content Strategy
Visual designs? maybe…
HTML prototypes? maybe…
Prototypes
Flow Diagrams
Sitemaps
Content Guidelines
Refined visual design
Wireframes/Specifications
User testing
+ Front End Code
Discovery Synthesis Interactions RefinementStakeholder Interviews
User testing + reporting
Competitive/Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas
Sketching Sessions
Taxonomy
Content Strategy
Visual designs? maybe…
HTML prototypes? maybe…
Prototypes
Flow Diagrams
Sitemaps
Content Guidelines
Refined visual design
Wireframes/Specifications
User testing
+ Front End Code
What’s under the surface?
User Researcher Identifies user behaviors, goals and needs through interviews, studies and surveys
Content StrategistAudits, reviews, creates, and governs the production of content in a system
Information Architect (IA)Defines the structure of a system, how content is described, organized and discovered
Interaction Designer (IxD/UX Designer)Defines interactions, user flows, wireframes, and affordances of a system
UI Developer Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
Visual DesignDesigns and maintains appropriate visual styles in service of the overall experience of a product or service
Who does UX?
User Researcher research, analysis, written communication, spoken communication
Content Strategistanalysis, written communication, excel. see the big picture
Information Architect (IA)systemic thinking, visualization, written communication, puzzle-oriented, see the big picture
Interaction Designer (IxD/UX Designer)familiar with technology, puzzle-oriented, visualization skills, see the big picture
UI Developer knows the codes, love the code, stay current, see the big picture
Visual Designloves design systems, attention to detail, visualization, typography, color theory
Who does UX?
Build on your strengths.
Process
Active Listening Organization and Project Management Presentation Critical Thinking Visualization Technical Capability Writing with Clarity The Right Meetings
Finally…
Finally…
don’t hate. iterate.
Thanks!
David Panarelli david.panarelli@gmail.com @dpan dpan.co