The Right Tools for the Job: Designing Your UX Approach
•Download as PPTX, PDF•
1 like•202 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.
More Related Content
What's hot
What's hot (20)
Similar to The Right Tools for the Job: Designing Your UX Approach
Similar to The Right Tools for the Job: Designing Your UX Approach (20)
Recently uploaded
Recently uploaded (20)
The Right Tools for the Job: Designing Your UX Approach
- 1. The Right Tools for the Job Designing Your UX Approach
- 2. Hi, I’m Caroline. Director of User Experience, Acumium
- 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
- 13. Interviews Internal (business) and external (customer) Know the questions to ask Have a script Don’t be afraid to go off-script
- 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
- 32. Thank you! 608-571- 1167 | www.acumium.com | hello@acumium.com
Editor's Notes
- 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