The Right Tools for the Job: Designing Your UX Approach
•Download as PPTX, PDF•
1 like•205 views
You've gotten to the point where you realize you need to take steps to improve the user experience on your website, but, if UX isn't your "main gig," you might be thinking, "now what?" How do you get started? Do you know all the tools that are available to you? How do you identify the ones that will return the most bang for your precious budget buck? In this presentation, we first look at the compelling case for investment in UX, and then review a selection of commonly used UX design tools and approaches. Because not every tool is created equal, you'll also get tips on when to introduce them into your process and what benefits you might expect.
1 of 32
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
26
27
28
29
30
31
32
More Related Content
The Right Tools for the Job: Designing Your UX Approach
3. I’m skipping these first few slides.
UX design no longer really needs an introduction.
4. Why do we focus on UX?
It’s good for business.
It’s good for customers.
It’s basically expected these days.
5. UX is good for business.
It has measurable ROI.
It reduces costs and development inefficiencies.
It increases customer adoption and loyalty.
It feeds your bottom line.
6. UX is good for customers.
At minimum, it reduces friction.
If it’s really clicking, it introduces delight.
7. Good UX is expected.
It’s no longer a luxury.
Attention spans are short. Patience is thin.
You are (usually) not the only option.
8. But UX is also a really big topic.
Where and how do you start?
How much is enough?
How do you define an approach?
9. I like “pragmatic UX.”
Every little bit helps.
It doesn’t have to be pretty.
It doesn’t have to be expensive.
Leave cults of personality at the door.
There’s no rulebook; there’s a toolkit.
10. The well-stocked UX toolkit.
Things that help us learn; things that help us build.
Not every tool is right for every job.
A toolkit is never complete (keep learning).
Consider tools for user research, design, and testing.
11. User research
Ideally, the starting point for any project.
Adds context and insight to our design process.
Reduces uncertainty and facilitates better decisions.
You are not your user.
12. Key tools for user research
Interviews
Card sorting
Personas
Usability testing
14. Card sorting
Write words or phrases on cards; ask user to categorize them
Reveals users’ mental models
Can be done face-to-face or with online tools
Open, closed, or hybrid
Easy for users to understand
Low effort and inexpensive
Tool tips: OptimalSort, UserZoom
15. User personas
Fictional representation of expected users of the system
Focus on goals, characteristics, attitudes, and expectations
Usually have a name and a story
Help create empathy
Tool tips: Xtensio
16. Usability testing
One-on-one interviews where you ask a user to perform tasks on-screen.
Can be done at varying points of the project.
During research phase, can identify key issues with current site/app.
Flexible, many methods to choose from.
Well-suited to guerrilla tactics.
Tool tips: Silverback, Peek, UserTesting.com,
Monosnap, Vysor, Google Hangouts, Ethnio
17. Design
Distills research findings into design deliverables
Should be iterative, but draw a line in the sand
Patterns are your friends
Offers great opportunities to test and validate
18. Key tools during design
Customer journey map
User flows
Sketches & wireframes
Information architecture
Microcopy
19. Customer journey map
Diagram of the multiple phases users go through engaging with a product
Frames user motivations/needs/pain points at each step
Shows interplay between tasks/goals and emotions
Helps drive design solutions
Extends into digital marketing
20. User flows
Visual representation of user’s flow to complete tasks
Should be clearly tied to user and business objectives
Helps prioritize flows that drive most value
Focus on conversion funnels
Tool tips: Visio
21. Sketches & wireframes
Start to lay out screens and explore user interface decisions
Quick, inexpensive, good for exploring lots of options
Wireframes are your blueprint
Prototyping is better for high interactivity
Great for testing before development
Tool tips: UXPin, Axure, Visio, Balsamiq, PowerPoint
22. Information architecture
Hierarchical site map
Implements findings from research (e.g. card sorting)
Can be evolved for SEO or content planning/implementation purposes
Helps to identify content-to-template decisions
Tool tips: Visio, Google Sheets
23. Microcopy
The small bits of copy that help a user do stuff
Error messages, field labels, call to action button text, help text
Scannable, with natural language
Changes are often easier to implement
Can have big impact on conversions
24. Testing
Validate design decisions before implementation
Facilitate informed choices between options
Test early, test often
Doesn’t have to be complex or expensive
25. Key tools for testing
Usability testing
First-click testing
A/B testing
Tree testing
26. Usability testing (again)
Useful throughout design process
Testing pre-development is better than testing pre-launch
Test against design deliverables (interactivity optional)
27. First-click testing
Examines what a user would click on first in the interface to complete a task
Can be performed on a wireframe, a prototype, or a working website
Helps validate goal orientation of site
Can be done in person or with online tools
Tool tips: Chalkmark (Optimal Workshop)
28. A/B testing
Find out which alternative version of a solution performs better
Great for optimizing funnels, landing pages, calls to action, microcopy
Can be applied to many page elements
Different options for testing variations
Can help increase conversions
Tool tips: Virtual Website Optimizer, Optimizely,
Good UI Evidence
29. Tree testing
Also called “reverse card sorting”
Evaluates findability of content within information architecture
Users are given a task and asked to identify where they’d find the answer
Doesn’t incorporate visual elements
Great counterpart to card sorting
Tool tips: TreeJack, UserZoom
30. Designing a UX approach
Think in terms of research, design, and validation
Start with what you’d ideally do
Evaluate against constraints
Adjust as needed, while meeting objectives
31. How do you get started?
Read and learn – get familiarized
Start small and try something
Hire a professional
Was going to do a few slides introducing UX, but decided to skip them.
Is anyone here truly unfamiliar with UX design at this point?
It feels like it’s reached a critical mass.
2002 (Customer Experience Specialist, company not institutionally ready) vs. now (people calling us asking for it specifically)
If it’s new to you, I’d tell you:
UX design encompasses all the interactions a customer has with a particular product or service
It’s a subset of customer experience (CX), which encompasses all the interactions a customer has with a company
It’s not limited to digital. A bicycle has a user experience. A playground has a user experience. A dishwasher has a user experience.
It strives to make the complex easy, and even fun.
If you’re “in UX,” you’re trying to improve the usefulness, ease of use, and efficiency of interacting with a product or service.
Good for business:
It has measurable ROI.
Fast Company article about the business case for UI design, every dollar spent on UX brings in between $2 and $100 dollars in return
In the book Cost-Justifying Usability, Clare-Marie Karat references a study where $20,700 spent on usability resulted in a $47,700 return on the first day the improvements were implemented., and $68,000 spent on usability on another system resulted in $6,800,000 return in the first year.
It reduces costs and development inefficiencies
In Software Engineering: A Practitioner’s Approach, Robert Pressman shares that, for every dollar it costs to fix a problem during design, it costs $10 during development, and $100 after release.
UX design reduces wasted development time by 50%, thanks to identifying usability requirements up front and avoiding rework.
It’s far less expensive to prevent a problem than to fix it later.
It increases customer adoption and loyalty
It costs six times more to attract a new customer than it does to keep an old one
A 5% increase in customer retention increases profits up to 125%
It feeds your bottom line.
Good UX increases market share
Happier customers are more likely to purchase, driving sales.
Good for customers:
Good UX, at minimum, makes the process of using your product seamless and frictionless
You want to keep the users “in flow.”
Minimize pain points
Goal oriented; let them get in and get out
Why Software Sucks – People don’t want to use your software, they want to have used it to accomplish goals
At best, good UX makes using your product delightful
Aarron Walter writes about the hierarchy of user needs in his book Designing for Emotion. To be effective, our digital products must be:
Functional – they have to work to solve a problem
Reliable – up and running at all times
Usable – offering a fairly good user experience, with emphasis on consistency and goal orientation
Pleasurable – this is where delight is
However – you can’t design for delight without accommodating those other elements
It’s basically expected:
UX is no longer a luxury, it’s a necessity
We are in an experience economy
Industrial revolution was about production, after WWII, focus was on distribution
Attention spans are short; patience runs thin
Human attention spans are actually shorter than goldfish now. Goldfish is 9 seconds. Humans are 6-8 seconds these days.
A user needs to be able to tell you within the first 7 seconds what your website does, and make the call on whether they should stay.
What is this site for?
Does it apply to me?
What do I do next?
Unless you’re Apple or some other big name brand where the product is the goal, there’s always another site to try
Rockefeller Corporation reports 68% of users give up because they “think you don’t care about them”
A 2011 study by Harris Interactive found 89% of users purchase from a competitor following a poor customer experience
Some will say you “have to go all in” on UX design; I don’t buy that.
When faced with an opportunity to do UX design, we can either be purists and go all in, or we can shoot for “good enough,” given constraints
Psychologists have a term: “Satisficing.” A combination of “satisfy” and “suffice.”
Means settling for something we know may not be the best possible choice, but at least meets essential needs
Not to say that more isn’t better, but that more just isn’t always feasible or realistic. Do what you can.
That said, it’s also not a process that you’re ever “done” with.
It doesn’t have to be pretty
The important thing with UX design is that it has a positive effect. Does it move the needle and get you more information?
Depending on your process, most UX design deliverables may be inherently throwaway.
It doesn’t have to be expensive
There is a UX design answer for every budget.
Leave cults of personality at the door
No UX shaming
Construction metaphor works pretty well. Key thing is to identify the “right tools for the job.”
While these aren’t exhaustive categories (we’re missing content, performance, measurement), in this talk, I’m going to focus on a key subset of tools for user research, design, and testing.
Research phase is where you immerse yourself in the project to get background required to make good design decisions later.
We’re trying to learn as much as we can.
It’s ideally where we start.
UX research includes a wide variety of investigative methods that aim to add context and insight to our design process
One of the biggest mistakes businesses can make is to assume customers think the way they do.
Old saw in the UX world: “You are not your user.”
It’s not usually feasible to do all research methods on a project, but every project generally benefits from employing multiple research methods.
Nielsen Norman Group 3-dimensional framework
Attitudinal vs. behavioral (what you say vs. what you do)
Qualitative vs. quantitative
“Research learning spiral” by interaction designer Erin Sanders.
With internal customers, you’re going to be asking things like:
What does success look like on this project?
Who do you think are our key target audiences and why?
What are the business goals for this project?
What is the competition doing better than we are?
With external customers, it might be more like:
What are your biggest concerns when you’re considering a purchase?
If you landed on the perfect website to help you make this purchase, what are three things you would expect to be able to do right from the homepage?
Tell me about a really enjoyable experience making a purchase recently.
Tell me about a really bad experience.
Know the questions to ask:
Don’t lead
Keep questions open ended
Don’t ask “do you think you would like this?” Users aren’t good at predicting what they’d actually like
Have a script
You may be great at speaking extemporaneously, but a user interview isn’t the time to go in unprepared
Have an idea of the goals you want to accomplish
Don’t be afraid to go off-script
Interviews can go into interesting territory. If you’re getting good insights, let it flow and ask follow-up questions. Circle back to your script when it makes sense.
Card sorting has its roots in psychology
Creates a user-centered taxonomy
Generally used to determine if your IA is heading in the right direction, though you can use it to reveal how users think about other groupings, too.
Increases usability
Improves conversions
Happier, more satisfied users
Face to face or online tools
Index cards
OptimalSort and UserZoom
Open, closed, or hybrid
Open means the categories are not pre-defined; closed means they are.
Hybrid is where you’ve identified some categories, but invite users to create their own if it makes sense.
Easy for users to understand
Open sort: “Please put these into groups that make sense to you, and then give each group a name.”
Closed sort: “Please put each of these cards under the category that makes the most sense to you.”
Fictional, but relatable, snapshot of an individual from each key target audience for your product.
Tries to reveal goals, common characteristics, attitudes, and expectations
They usually have a name and a story – “This is Jane. Jane is a busy mom of three who lives in the suburbs. She jumps onto Pinterest in her spare time, loves DIY projects and is a frugal shopper. Jane loves to get a good deal on things.”
Components may include:
Demographics
Personality traits
Key quote
Pain points
Motivations
Brands or sites they like
Help create empathy between project team and consumers throughout the process, drive imagination, and keep end users relatable.
One-on-one interviews where you ask a user to perform tasks on-screen
Uses a “talk aloud” approach
Hardest part is to not help.
The struggle is valuable information
Can be done throughout project
During research phase, usually used to identify issues with current site/app
Flexible
Moderated or unmoderated
Face to face or remote
Well-suited to guerrilla tactics
You don’t need a lab with one-way mirrors and cameras and eye-tracking software
Get out in the wild and test the system (go to a coffee shop, a library)
Read Steve Krug’s if you’re not sure where to start
Don’t need to test exhaustively
The probability of a user uncovering an issue or error during a usability test is 31%
If you test with three users, you’ll find about 65% of the problems
With four, it’s 75%
Testing only five users turns up 85%
The more users you add to the test, the less you’ll learn
This is because user experiences overlap
The Nielsen Norman Group says, “As soon as you collect data from a single test user, your insights shoot up, and you’ve already learned almost a third of everything there is to know about a design’s usability.”
Design is where we dive deep into how what we’re designing will work and fit together.
This is where we’re defining scope, features, functionality, how it behaves, and how it looks.
We are distilling our research findings into design deliverables
Usually the point at which clients/stakeholders get pretty excited, because it looks like you’re finally “building something.”
Design should be iterative, but the level of iteration is going to be project specific.
Look at project constraints like budget, timeline, etc.
While it’s tempting to try to innovate, design is really an opportunity to take advantage of patterns
One component of usability is consistency and learnability. Familiar and recognizable interfaces can positively affect the user experience
Design is an opportunity to start testing.
Customer journey maps illustrate the steps your customers go through in engaging with your product, service, or company
May have varying scope – one key component or “cradle to grave.”
May be persona-specific
Run customer journey mapping workshops
Convene cross-functional internal team
Product development
Sales
Customer service
Marketing
Identify the stages a customer goes through
Discovery/Awareness
Research
Purchase
Delivery & Receipt
Advocacy
Identify, for each stage:
Tasks – what are they doing?
What are they thinking/feeling?
What questions do they have?
What are they concerned about?
What are their pain points/frustrations?
What barriers are they running into?
Can even move from “onstage” to “backstage”
Helps reinforce human element of interacting with a company – goals are associated with emotions; how can we shape the experience?
Also called “process flows”
Without going into implementation details, identifies how the system is going to support completing goals
First step is to identify each user and business objective
User: finding information, replacing a product, learning a skill, buying a gift
Business: getting a lead, a like, a subscriber, a buyer, a download, a phone call
Spending some time on flows can help you prioritize the things that will be of most value, so you don’t get stuck in the trap of just designing individual pages and interactions
Conversion funnels
Look at how your marketing efforts bring people into the site, and then how do you drive them to the next conversion point.
Stacked funnels to accommodate complete user experience life cycle
Customer acquisition
Bring in via banner ad
They see a landing page
Primary CTA is an email sign-up
Move into CRM flow
Customer receives email with a product of interest
Visits product page
Makes purchase
Sketching is rapid, freehand, loose
Zero intent of it being a finished product
Can be done on-demand
Supports the building process; is not an artifact in and of itself
Wireframes
Basic visual guide that show structure
Illustrate relationships between pages
Illustrate interactions and flows
Varying levels of fidelity
Prototypes
Usually introduces some interactivity, may introduce some more design elements
Sketch to wireframe to prototype continuum is individual and can be contentious
Do what works for you
Information Architecture is the art and science of organizing and labeling websites to maximize usability
Tries to create usable and understandable content structures out of complex sets of information
Microcopy are tiny words that have a big impact
May come out of usability testing insights, especially if you’re encouraging users to think out loud
Sprinkled all over any website: error messages, field labels, text on call to action buttons, help text, accordion panel labels
404 pages
Natural language, short, snappy, user-oriented, helps convey personality and brand
Often easier to make changes
Veeam is a company that provides availability solutions for customers using virtual server infrastructures
They had a lead generation form that included a “Request a quote” button
They noticed people kept asking for a price in their on-page survey
They updated “Request a quote” to “Request pricing,” and saw a 162% increase in clicks to their lead gen form
Impact on conversions
Can anticipate user questions or concerns
“Don’t worry, we will never…”
Reassuring, instructive, builds confidence and trust
Can be part of wireframes/prototypes, or a separate deliverable (microcopy table)
Gain insights through A/B testing
Testing and validation phase is where you figure out whether what you put together in design actually works with intended users
While you might get it right on the first try, be prepared to do further iterations of design and testing
Already talked about usability testing
Pre-development
Testing pre-development is better than testing pre-launch
Katie’s credit card example
A focused type of usability test
You provide a series of tasks and, for each task, show the participant a screen.
Participants should ideally represent your target audiences
Tasks are phrased in natural, non-leading language
The user clicks the portion of the screen they feel would best allow them to accomplish the task
You measure things like
Where did they click
How long to first click
How confident they were in where they clicked
Research supports the usefulness of first-click testing.
A user who clicks down the right path on the first click will successfully complete their task 87% of the time
A participant who clicks down the wrong path on first click tends to only successfully complete their task 46% of the time
Can be done via observation/moderation, or using online tools
Online tools can help with tracking clicks and creating heatmaps
You have an Option A, and Option B, and a measure for success (e.g. clicks)
Submit both to simultaneous experimentation (to avoid other factors being in play)
Measure which one performs better
Things you can test:
Call to action wording, size, placement, color
Headline or product description
Form length and type of fields
Layout and style of website
Product pricing and promotional offers
Images on landing and product pages
Amount of text on a page (short vs. long, paragraphs vs. bullets)
Ways to apply variations
If you’re testing a single element, you can replace the element on the page before it loads (e.g. a single button)
Redirecting to a different page
You might be trying to decide between two entirely new options, or testing an existing design (control) against a new alternative
Learn from other people’s A/B tests – “Good UI Evidence” website has the results of over 100 tests that you can use as a resource.
Also called “reverse card sorting”
Tree testing evaluates findability of content within your IA
Give users a task and ask them to navigate through tree structure until they find where they’d expect the answer to be
Works well because tasks are real life examples
You’re on this office supplies website and need a stapler. Where would you find it?
No visual design elements - both a weakness and a strength. Visual elements can both aid and hinder navigation.
Great complement to card sorting – use a card sort to design the IA, and a tree test to validate it.
While there are other components to consider, a good base framework is that of research, design, and validation
Start off with your ideal approach – what would you love to do on the project
Evaluate against project constraints
Budget
Timeframe
Access to resources
Make adjustments if need be.
Value in “thinking big” at the outset is it gives you more leverage against constraints. If you’re able to say, “I propose we do the following, and here’s why,” you stand a better chance of swaying the project in your favor.
Read and learn
Steve Krug’s books (Don’t Make Me Think and Rocket Surgery Made Easy)
Tons of blogs
UX Magazine
Smashing Magazine (UX category)
UX Booth
UX Movement
Do a search for “top UX blogs”
User groups
Ladies that UX Slack group
Ask Google for resources
Start small and try something
Identify a project and pick a tactic
Write a proposal to a decision maker at your organization
Remember that doing something is almost always better than doing nothing, and you don’t have to do everything to make a difference
Hire a professional
Find a partner you genuinely like working with
A UX audit is a good way to start
Read and learn
Steve Krug’s books (Don’t Make Me Think and Rocket Surgery Made Easy)
Tons of blogs
UX Magazine
Smashing Magazine (UX category)
UX Booth
UX Movement
Do a search for “top UX blogs”
Start small and try something
Identify a project and pick a tactic
Write a proposal to a decision maker at your organization
Remember that doing something is almost always better than doing nothing, and you don’t have to do everything to make a difference
Hire a professional
Find a partner you genuinely like working with
A UX audit is a good way to start