Tools of the UX Trade

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

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

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

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

Best meeting ever

people, across disciplines a problem worksheets (if you want) pens whiteboard markers

Understand the problem

Discuss no critique, yes stealing

The first 1

Discuss themes emerge

The Last 1

Now, get it validated.

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

http://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.

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.

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…

don’t hate. iterate.

Thanks!

David Panarelli [email protected] @dpan dpan.co

Tools of the UX Trade

Design

Transcript of Tools of the UX Trade