For UX Professionals and people new to the UX Practice. Our February 2017 TC UX Meetup looked at a number of different UX Tools and Technologies, and gave an overview of pros and cons of use, plus looked at how to make informed choices about selecting one tool vs another.
2. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
ABOUT US
Margaret Bossen
User Experience Strategist,
Architect, and Designer
RBA Consulting
Miriam Block
Director of
User Experience Planning
McCann WorldGroup
3. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
What do UX and
UI people do?
4. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
We Make Technology
EASIER AND
MORE ENJOYABLE
for People to Use
7. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
What is User-Centered Design (UCD)?
A philosophy that places the
people who will be using what
we are creating at the center of
attention throughout the project
A process that actively seeks
out and accounts for users’
cognitive, emotional &
behavioral factors
8. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
What do we DO?
9. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
UX: User Experience
Architects
• Evaluate the current state
• Conduct user research
• Develop a UX strategy/vision
• Design the interactions between
a person and a machine
10. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
UI: Visual
Designers
• Establish the creative vision
• Breathe life into the user
interface through the use of
color, type, space, image &
interactions.
• Define the style guide
11. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
UX Research Techniques
Competitive
Audit
UX
Analysis
Competitive
Analysis
Brand
Review
Stakeholder
Interviews
UX Audit
Feature
Benchmarking
EVALUATION
Assess current state and the
competitive landscape
12. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Web Metrics
Review
UX Research Techniques
Contextual
Interviews
Focus
Groups
Surveys
Task Analysis
Tree Testing
User
Interviews
Persona
Workshop
Card
Sorting
Usability
Testing
USER RESEARCH
Observe our audiences and
validate our decisions
19. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
User Research Suite
OptimalSort
• Use this to perform
card sort exercises
TreeJack
• Test information architecture,
labeling and design of a
website or intranet
Chalkmark
• Run “first-click” tests on
wireframes and prototypes to
identify usability issues
Questions
• Survey Tool
Pros
One of the most popular sets of tools for
UX research
Online and tech support is wonderful!
(Even though they are based in New
Zealand)
Cons
To do any real in-depth work, you will
need to upgrade to the paid version
Some of the analysis tools have a fairly
steep learning curve
22. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Simple User Surveys
• The best-known online survey tool for doing user or
market research.
UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
Pros
Much love for this tool in the UX
community
Survey Monkey has a lot of power, even in
the free version
Clear and understandable user interface
makes it easy to build surveys and easy
for users to engage
Pre-scripted surveys and question sets
can get a project jump-started
Cons
Customers sometimes have a hard
time taking the name “Survey Monkey”
seriously
Paid version required to do in-depth
analysis
Some limitations to customization and
logic for more advanced surveys
Starts to get costly when adding “white-
label” options
23. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Online User Testing Service
• Excellent tool for doing fast, focused user
testing on digital projects
• Many methods to choose from
UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
Pros
Logistics of testing set-up are handled by
the service
Cost is known up front
Testing process can be quickly initiated
and executed
Lower time commitment than in-person
user testing
Captures user’s device actions and their
voice and face.
Can do studies on competitors.
Cons
You may miss out on valuable details
that are caught during in-person testing
Requires planning to configure the tests
Paradox of choice can be
overwhelming
Quality control of responses can vary
25. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
User Research Suite
OptimalSort
• Use this to perform
card sort exercises
TreeJack
• Test information architecture,
labeling and design of a
website or intranet
Chalkmark
• Run “first-click” tests on
wireframes and prototypes to
identify usability issues
Questions
• Survey Tool
Pros
One of the most popular sets of tools for
UX research
Online and tech support is wonderful!
(Even thought they are based in New
Zealand)
Cons
To do any real in-depth work, you will
need to upgrade to the paid version
Some of the analysis tools have a fairly
steep learning curve
EXPERIENCE
STRATEGY
Define audiences
Articulate approach
26. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Mind Mapping Tool
• Create immediate, on-the-spot site maps
• Brainstorm new ways to connect pieces of
content, site elements, or user journeys
• Illustrate relationships between complex
ideas/events
Pros
Good features for both UX/UI and
developers
Easy installation
Inexpensive
Cons
Menus are not super intuitive
Can be slow to load/refresh
Interface can be jarring if you are doing
live, in-workshop mind mapping
EXPERIENCE
STRATEGY
Define audiences
Articulate approach
28. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Guerrilla Research (In-person, Email, etc.)
Try more casual methods to run simple UX and
UI tests
• Email: Use email to send out questions to family,
friends or colleagues
• Social media: can be used to great effect to explore
prototypes, get opinions, or ask questions
• In-Person: “Man-on-the-street” interviews, Friends
and family user testing, in-office prototype reviews,
etc.
EXPERIENCE
STRATEGY
Define audiences
Articulate approach
30. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Wireframes, systems, content/site trees & sitemaps
• Create immediate, on-the-spot site maps
• Brainstorm new ways to connect pieces of content, site
elements, or user journeys
• Illustrate relationships between complex ideas/events
Omnigraffle
(www.omnigroup.com/omnigraffle)INTERACTION
DESIGN
Create structures
Shape behaviors Pros
Built for creating UX documents--site
maps, flows, wireframes.
Easy to build a template that teams can
share for consistency.
Many free downloadable stencils
specifically creating UX documents.
Available on iOS to sketch from your
iPhone or iPad
Can import Visio documents
Cons
Mac platform only, (although this feels
like a pro).
Challenging to create interactive, hi-fi
prototypes.
A few options take a while to decipher.
32. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
All-in-one prototyping program
• Post prototypes in a secure website
• Illustrate relationships between complex ideas/events
• Highly interactive – ability to create complex interfaces
and logic-driven experiences
Pros
Drag & drop interface provides for quick
and easy designing
Online libraries of icons, widgets,
templates
Include interactions for hi-fidelity,
functioning prototypes
Export prototypes as images, word docs,
or PDFs making it easy to present and
share with stakeholders or others
Cons
Best for prototyping. Using tools like
OmniGraffle first to define flow, sitemap and
base wireframes is often necessary.
Dynamic panels can be complex, and may be a
steep learning curve
Editing shapes can be difficult, often requiring
external libraries of shapes or images
Collaboration with others on the same project is
only available from a professional account
Needs more CSS options
INTERACTION
DESIGN
Create structures
Shape behaviors
Axure RP (www.axure.com)
34. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
UXPin (www.uxpin.com)
Intuitive prototyping tool
• Related sketchbooks/notepads for manual prototyping
• Embedded image editing
Pros
Enables a smooth transition between
paper and web prototyping.
Big library of ready-made components
including bootstrap elements.
Team collaboration is fairly straightforward
Images can be edited within UXPin:
correct brightness, contrast, sharpness
and transparency, etc.
Export prototypes can be exported to PDF,
html or PNG
Cons
Similar to Axure but not as many
features
Users remark on some instability with
this tool
Some confusion about length of free
trial
INTERACTION
DESIGN
Create structures
Shape behaviors
36. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Visio (from Microsoft)
Diagramming and wireframing software
• Sitemaps, User Flows
• Software diagrams
• Wireframes
Pros
Is often readily available in large corporate
or enterprise environments
Many developers, BAs, and other team
members may be Visio users
Cons
No Mac version
Visio is very expensive compared to
other wireframing and prototyping tools
INTERACTION
DESIGN
Create structures
Shape behaviors
37. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Protoshare (www.protoshare.com)
Online prototyping tool for wireframes, sitemaps,
and interactive prototypes
• Collaborative wireframing and prototyping
• Technical foundation – allows deep customization
Pros
Sitemap panel allows easy method to
move pages around in the hierarchy
Templates allow streamlined start to
wireframe creation
Offers tools for increased wireframe fidelity
for the more technically capable – A strong
CSS/HTML platform, cutom CSS
capabilities, etc.
Cons
Javascript engine makes page resizes
and refreshes slow
Export and sharing are not as
straightforward as other online tools
No option to output to PDF or other
more shareable formats
Requires log-in to share prototypes (no
public URL)
INTERACTION
DESIGN
Create structures
Shape behaviors
38. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Balsamiq (www.balsamiq.com)
Rapid prototyping tool
• Online tool for low-fidelity prototypes
Pros
Mockups created in Balsamiq are “low
fidelity”, similar to freehand sketches
Over 500 icons built in to the app
Many basic ready-made items stored in
the UI libraries
Cons
Basic interactions only
Intentionally low-fi look and feel
More challenging to get to truly
interactive hi-fi prototypes
INTERACTION
DESIGN
Create structures
Shape behaviors
40. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Adobe Creative Suite (www.adobe.com)
VISUAL
DESIGN
Engage audiences
Elevate brands
Pros
I do not know of a single serious UI effort
that does not use one or more of these
tools
Cons
Can be expensive
Steep learning curve for many of these
tools
All the things!
• Adobe’s fundamental apps for photography, design
& illustration, video, and web & mobile workflows
41. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
InVision (www.invisionapp.com)
Simple, design-driven prototyping tool
• Very user-friendly, fast prototyping tool with best in
class on-device app preview. Great for client review.
• Deep links with Sketch and Slack
• Enterprise edition allows code inspect and direct asset
download
VISUAL
DESIGN
Engage audiences
Elevate brands Pros
Very intuitive and simple prototyping tool.
Upload projects in psd or png format and
add hotspots
Clickable, interactive prototypes with
gestures, transitions and animations.
Allows team collaboration and comments
on work progress.
Boards feature for shareable mood boards
Cons
Limited interactions, although more are
added on a regular basis
Motion design tool has been promised
for over a year
43. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Sketch (www.sketchapp.com)
New industry standard digital design software
• User friendly, powerful, lightweight and affordable
• Multiple pages, artboards, CSS shared styles
• Highly customizable export for all assets, including
quality CSS styles
• Cloud based asset and style libraries for team syncing.
VISUAL
DESIGN
Engage audiences
Elevate brands Pros
Use of Symbols, Shared Styles and live
data feeds make app/site design updates
a snap
Files are a fraction the size of PSD and
pixel perfect
Open framework for community developed
external plugins
$99 for outright purchase, deep integration
with Invision.
Cons
Limited image editing
Mac only (or pro?)
45. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Adobe Experience Design
All-in-one tool for UX designers from Adobe
• Design and prototype websites and mobile apps
• Elegant interface
VISUAL
DESIGN
Engage audiences
Elevate brands
Pros
Elegant, minimal interface
Design, and create interactive prototypes
of websites and mobile apps.
Switching between design and prototype is
super smooth.
Copy/paste elements from other Adobe
programs, such as Illustrator and edit them
directly in XD.
Cons
Mac platform only
Sketch is rapidly overtaking this tool as
go-to choice for UX
46. TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
Other Tools
• Collaboration Tools
• Google Docs for collaborating on spreadsheets (content outlines,
consolidating user research) and slide shows (user research, pattern
libraries)
• Basecamp
• GoToMeeting
• JoinMe
• Concept InBox
• Storyboard That