Usability - Reducing Friction & Boosting Conversion


Published on

Friction is any part of the conversion process that can frustrate or confuse a user. While some friction is an unavoidable part of the conversion process, the amount of friction visitors encounter varies greatly across web properties.

Fortunately, with the right skills and toolset, we can make the conversion process more user-friendly, thus reducing friction and generating more revenue for our clients.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Excited to be hereI will not be covering anything dealing with persuasionThe topic I decided to cover is usability best practicesall which reduce visitor frustration, or friction, and increase conversions. I wanted to cover this topic because I always come across basic usability issues on client websites, no matter the size of the business.the fact is, in order to convert a visitor, a site has to have a strong user experience as its foundation.
  • I am director of conversion optimization at Fathom in Ohio. We have offices in Cleveland and Columbus.I started there 6 years ago and we have added 100+ employees since thenI have a diverse background: IA, UX design, graphic design, development, video production, branding. I am on theneoupa boardI am on the advisory board for whichtestwon.comI founded CROPA, the conversion rate optimization professional associationCouple notable clients and a team shot
  • You need to provide visitors with the ability to convertIn order to convert, or achieve their goal, a visitor must perform a series of tasksIn essence, visitors must jump through a series of hoops to get what they wanthaving visitors jump through some hoops is necessary in order to get them to convertLike getting a visitor to fill out a lead form or go through a checkout processWhat I am talking about are extra tasks or unnecessary hoops that make it difficult for visitors to achieve their goal… like being forced to refill all form fields because one field did not validateThese hoops are not a product of necessity but are derived from usability issues or poor design.
  • With each extra task or unnecessary hoops a visitor has to “jump” through,frustration level and the chances of them leaving increase while the chances of them converting go down The amount of unessary hoops a visitor will endure is all based on need and exclusivity. Hypothetically, if you had to fill out an online form to send a fire truck to your house to save your house from burning, you would endure an awful lot of frustration in effort to save your home. Similarly, say you had to register for your college classes online… the online registration system is terrible, but you have no other choice then to use the system as it the only system that will allow you to do so.
  • In effort to get more of your visitors to convert, you canaddress those unnecessary, extra hoops. You need make sure your copy is easy to readthat the site itself is intuitive to use the on page elements are easy to absorbJust a quick disclaimer, most of what I will cover are best practices.The truth is that best do not always workYou have heard it a hundred times, you should always be testing.
  • Readability…. Effortless reading comprehensionReadability is as important a usability feature as any. Font choice has a large impact on readability. While there is some flexibility in selecting fonts for a website based on the site’s purpose, you are better off choosing fonts based on their readability as opposed to should avoid using decorative and script fonts or, if you must, use them sparingly. I also recommended you use 3 different fonts max.Bold text allows important words to stand out on the page they create focus points within your copy,slow down the reader and force visitors to take the words in more carefully. But remember not to bold everything. If everything is bold, nothing stands out.Font size makes a difference the optimum size for readability is said to be approximately 14 to 16 pixels.Use the correct line height allows for whitespace between copy lines which make copy easier to read. Be careful not to add too much line space as the lines of text can look disassociated. Try a line height of 1.5.While you must use your own judgment and determine what you think is easy to read, please keep in mind what you consider easy to read, your audience may find difficult.
  • Low contrast between text and the background color can make text extremely hard to read depending on conditions. I am constantly pushing back on designers Designers, often more interested in aesthetics, tend to do there design work in low lighting conditions with big and bright Mac monitors. What they often forget to take into account is that there are varying lighting conditions, different monitor settings and a variety of vision conditions including color blindness.If you are constantly battling your designers about contrast, you are in luck…the world wide web consortium has accessibility standards that address this such thing. To end argument quickly, you can use this simple formula. Or, you can try Colour Contrast Check, drop in some hex values and get the same results.
  • Here is a conversion test in which a non W3C compliant call to action (white text on neon green) is tested against a W3C compliant (black text on yellow) call to action. What are the results?
  • The page with the W3C compliant call to action saw a 38% lift in clicks.
  • Whether you’re displaying informational content or persuasive copy, the key is being concise: clearly communicating your meaning with as few words as possible. you need to eliminate the fluffy, flowery language. This is usually opposite of what we were taught in school.As Mark Twain put it, use plain, simple language, short words and brief sentences use pThe bottom line is people want to obtain information with minimal effort. There are tools out there that can run your copy through different algorithms to calculate readability.Try read-able.comYou can also run a Cloze test on your own copy. A Cloze test is where you remove every nth word within your copy and have people attempt to fill those blanks in based on context.
  • Do you work with anyone that is always sending you emails that consist of one massive paragraph?If so, is it easy to understand the meaning of their message? I personally can’t stand emails like that. I write emails using very short paragraphs that are practically bullet points minus the bullets. It is easier to clearly convey a message using such a format.Considering people read 20 to 30% slower on a computer screen, you need to break up dense paragraphs into smaller, easily digestible chunks.
  • Bullets are great way to display critical content to your visitors.You need to limit the number of bullets you use. You should use 5 bullets at the most.your important bullets should be the first one and the last onePeople remember the beginning and the end, but often forget the bullets in the should bold the important words… this helps make your content more scanable and can draw the eye to important messages
  • Here is an example, this is a sweedish site and it shows a paragraph in version A being broken up into bullets in version B.
  • The bulleted copy helped increase membership applications by 15%
  • Usability issues in terms of CRO is referred to as friction.Friction is any part of the conversion process that causes frustration, mental fatigue or confusion.When I think about usability, I think the best example is a child’s blocks. You never have to teach a child how to play with blocks. They are intuitive… a child will start stacking them with no instruction. blocks will engage them for as long as a child can be engaged (I have a 2 year old) … blocks have been a staple of childhood because they satisfy a childs need to playThey are certainly efficient… no prep time, no other parts… The kid just dumps them out and has at it.
  • Length of pages – while the act of scrolling is not necessary the source of friction, but when the visitor expects a page element in a particular place and has to scroll in order to find what they are looking for… that is when it becomes frictionPage layout and design – there are standard placement for some page items… what if a site’s main navigation was in the right column for instance…. Visual hierarchy… is size, placement and color… if it is tough to make sense of the page, that can be a cause of friction; you can read my blog post on itButton design – same color as everything else or a low contrast grey “submit button”Number of options – too many options can make a user freeze in there tracks and put off making a decisionThe nature of a form field… asking for a physical address when filling out an email newsletter singup, asking for social security number, etc.; asking for information that can be discovered during the next step of the sales process Putting fields next to each other like first and last name, state and zipReducing a step in a process can help reduce frictionPage load speed is a given… you can test it, but the faster the betterDiscontinuity is a source of friction…. That is when the offer, verbiage and or design don’t cary over from one page to the next, from an add to a landing page or from an email to a landing page
  • Here is an example of a landing page that was focused on prospective students in the research stage. The only difference is that we removed the “Degree of Interest” field. At such an early stage in there decision, prospective students had likely not made up their mind about what degree they wanted and did not want to feel “locked” into that decision. That field represented a major decision.
  • Removing that field increased leads by 77% and a great amount of increased revenue for our company.
  • Even though you might be in a technical industry, it does not mean the person gathering research will have a high level of technical knowledge. It very well could be an intern doing research.Does anyone in here know what information is being requesting in the internet connectivity field?We also did away with multiple fields including technical fields like “Total Required RAM in GB” and “Total Required Processor in GHz”.All this could be gathered in the next step of the sales process
  • By reducing the number of fields along with a few other changes like adding tool tips we increased form fills by 368%
  • If you are selling multiple products and services you need to make the visitors decision as easy as possible.Because when confronted with too many options a visitor will encounter decision paralysis… the inability to make sense of numerous options in an efficient manner and feel confident enough to make a decision. To counter decision paralysis you can use a variety of decision support tools.
  • When creating a comparison chart, focus on what features you yourself would want to compareYou also have to decide what is the best way to represent those values… for instance you could do a number rating or use X number of stars to represent eas of use or ease of maintenance for a product.Also, you should always mark an option as “best value” or “most popular”. That subtle hint can help visitors make a confident decision much more quickly.
  • You can use interactive videos that allow visitors to take different paths based on their product or service of interestThis video is an example of my companies interactive video that allows viewers to learn more about the services my company offersInteractive quizzes can be used to aid visitors decision makingIn another example our client helps visitors select an air gun based starting with a variety of parameters: ease of use, quite operation, indoor shooting, etc.
  • Using suggested search lets the visitor know what search queries are likely to provide them with the information they are looking for.When possible you can provide additional search options like with this doctor search. This allows visitors to find the information they are looking for sooner.Additionally, you can provide more search options for more advanced or power users.
  • When it comes to big ticket items like requesting a loan or deciding to go back to school, a financial calculator makes sense. Before you can sell a car or enroll a student they must believe they can afford it.
  • There are user testing tools online and physical user testing labs, but you can conduct user testing simply through observing those around you. Find someone who is technically challenged an watch how they attempt to interact with a website or interface. This can provide you will valuable insight on how to refine the interactions on your page or site.Lowest common denominator… if it is intuitive for them to use it will be intuitive for everyone
  • Visiting a new website is a lot like visiting a doctor for the first time in a large medical complex. You have a goal which is arrive at the doctors office, but you must first you must complete a number of tasks. The tasks to get you there are often figure out which building your doctor’s in, find parking, find a building directory to determine what floor your doctor is on, find the elevator, arrive at the floor and then determine if you need to go left or right…. All this just to get to the right doctor’s office.What do your visitors see when they arrive at your site?Considering people judge your website in 50 milliseconds and will leave within 7 seconds… how clear is the information you are presenting?Is it easy to spot the benefits and differentiators?Is it easy to find what is most important on the page?Is it clear what action or actions the visitor should take or can take?
  • Visual hiearachy is important… like the use of colorIn this example there are 4 competing colors on the left. What stands out most on the page? The navigation highlight telling you what page you are onSecondly, the header for popular itemsThen you have 3 calls to action on the left side all competing with color: orange, blue and purpleOn the right here is the revision. The only thing that should stand out is your primary call to actionIf there is a question as to what stands out on your page, you can use a low tech squint or blur test. When you blur the page you are able to better see what stands out
  • Here is an example of too many unnecessary page elementsThey are all competing for attention: content slider, two calls to action below the foldThe treatment has a single call to action and they did away with the sliderIt is much clearer what call to action the visitor is intended to take
  • This redesign saw a 31% increase in clicks & a 17% increase in subscriptions
  • Initial page showed one featured item at a time in the product browserHad long boring list of products with no imagesWe presented the 4th most popular items … we made the decision easier by marking one as “most popular”People shop online visually, so we Added images to the long list of productsMade the order button much more visible
  • the client saw a 210% increase in sales for their top products
  • To overcome objections you need hard evidenceAs a conversion rate optimization specialist, you often come up against pushback from clients, designers and developers.Ultimately the visitors will be the judges, not the members of your team or the clientFor clients, you can say you will only test on a fraction of their trafficDesigners & developers can be much harder to convince since they have to make the changes for youThis section I will be covering tools you can use to overcome objectionsThis particular tool will tell you if your text over a background color are W3C accessibility compliant It is a great tool to overcome a designers objections
  • A readability tool can help you overcome objects from clients and content writersOn average, Americans read at a 7th great level… sad but trueYou can use a readability testing tool that will use an algorithm that will assign a grade level to your contentIt will also provide a variety of other language testing scoresWhile your audience’s reading level will vary, remember that your visitors want to expend no additional effort to absorb your content
  • This Chrome app will blur your pages for you and generate a squint effectIt can provide you with the evidence you need to get a designer to change color, placement, size etc.
  • I like to use clicktale for its mouse movement heatmaps, attention heatmaps and their recordings of user interactionI have used this tool extensively on ecommerce clientsMy favorite feature is the form suite, which will tell you what fields are being left blank, how long it takes to fill in each field, which fields people are having to re enter their information
  • We used the clicktale form suite to convince the client to drop the degree of interest field… a field they were certain they neededThey saw a 77% increase in form submissionsAs this is performance based, it was huge for our company
  • You can use usertesting to overcome client objections.I know is here… and if mark is in the room, please don’t hate me What I like about userlytics is that you get the verbal feedback, the on page interaction as well as the testers facial expressions… the facial expressions can provide feedback the verbal and onscreen recording cantIf you want to try userlytics out you can visit and use promo code FACC12
  • We used user testing to convince our client their website needed to changeAs people do shop visually, one of the main changes was images we added to help visitors segment themselves.The client saw an 17% increase in sales
  • You must show the ROI of your conversion effortsYou need to go beyond the % lift and tie it to moneyYou need to speak the language of the been counter… of the cfo… this will ensure your CRO efforts can continue
  • Usability - Reducing Friction & Boosting Conversion

    1. 1. Reducing Friction & USABILITY Boosting Conversion Mike Perla @mikeperla @mikeperla #convcon©Fathom SEO, LLC, all rights reserved 2012
    2. 2. Who is this Guy?Aren’t Charles Nicholls and Jay Berkowitz presenting in the other rooms? Mike Perla – Director of Conversion Optimization Fathom – Digital Marketing & Analytics with Results that Matter Director of Event Planning - Northeast Ohio Usability Professional’s Association (NEOUPA) Advisory Board - Founder - Conversion Rate Optimization Professional Association (CROPA) 10+ years of experience in marketing, UX design, development, video production, information architecture, etc. @mikeperla #convcon
    3. 3. ABILITYGive Visitors the Ability to Convert @mikeperla #convcon
    4. 4. ABILITYGive Visitors the Ability to Convert @mikeperla #convcon
    5. 5. ABILITYGive Visitors the Ability to Convert readABILITY useABILITY absorbABILITY @mikeperla #convcon
    6. 6. readABILITY Effortless Reading Comprehension Font Choice – typeface, weight & size Line HeightMonotype Corsiva is hard to read.Verdana is much easier to read. Limit web pages to the usage of 5 fonts or less. Less is better. @mikeperla #convcon
    7. 7. readABILITY Effortless Reading ComprehensionMeasure the relative luminance of each letter (unless they are all uniform) using the formula:L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as: if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4 if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4 if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4and RsRGB, GsRGB, and BsRGB are defined as: RsRGB = R8bit/255 GsRGB = G8bit/255 BsRGB = B8bit/255The "^" character is the exponentiation operator. Is your text W3C compliant? Use Colour Contrast Check @mikeperla #convcon
    8. 8. readABILITY Effortless Reading ComprehensionA B @mikeperla #convcon
    9. 9. readABILITY Effortless Reading ComprehensionA B +38.36% @mikeperla #convcon
    10. 10. readABILITY Effortless Reading Comprehension "I notice that you use plain, simple language, short words and brief sentences. That is the way to write English--it is the modern way and the best way. Stick to it; dont let fluff and flowers and verbosity creep in. When you catch an adjective, kill it. No, I dont mean utterly, but kill most of them--then the rest will be valuable." Mark Twain, letter to D. W. Bowser, March 1880 Use a readability test tool like #convcon
    11. 11. readABILITY Effortless Reading ComprehensionReading from a computer screen is 20-30% slower than reading from paper –The University of Texas The man who makes a success of an important The man who makes a success of an important venture never wails for the crowd. He strikes out for venture never wails for the crowd. He strikes out for himself. It takes nerve, it takes a great lot of grit; but himself. It takes nerve, it takes a great lot of grit; but the man that succeeds has both. Anyone can fail. The the man that succeeds has both. Anyone can fail. public admires the man who has enough confidence in himself to take a chance. These chances are the The public admires the man who has enough main things after all. The man who tries to succeed confidence in himself to take a chance. These must expect to be criticized. Nothing important was chances are the main things after all. ever done but the greater number consulted previously doubted the possibility. Success is the accomplishment of that which most people think cant The man who tries to succeed must expect to be be done. criticized. Nothing important was ever done but the greater number consulted previously doubted the possibility. Success is the accomplishment of that which most people think cant be done. Reading on a computer screen is 20-30% slower than paper @mikeperla #convcon
    12. 12. readABILITY Effortless Reading ComprehensionList items are small, discrete “chunks” that are physically easier on the eye andeasier to follow and comprehend. Enterasys offers leadership network solutions for Take complete control of your wired and wireless higher education in terms of manageability via a networks with OneFabric networking solutions: single pane of glass, security for BYOD, and integrity with fault-tolerance and life-time warrant. Our • Lowest total cost of ownership in the industry OneFabric networking solutions deliver the best user • Manageable via a single pane of glass experience, best-in-class application services, and lowest total cost of ownership in the industry. • Security for BYOD (Bring Your Own Device) • Integrity with fault-tolerance • Best-in-class application services • Life-time warranty Visitors have time to read only 20% of your copy during an average visit @mikeperla #convcon
    13. 13. readABILITY Effortless Reading ComprehensionA B @mikeperla #convcon
    14. 14. readABILITY Effortless Reading ComprehensionA B +15.21% @mikeperla #convcon
    15. 15. useABILITY Easy & Intuitive Usability issues in terms of conversion rate optimization is called “Friction” Friction arises from any element of the conversion process that causes frustration, mental fatigue or confusion. Friction causes aggravation, mental fatigue or confusion @mikeperla #convcon
    16. 16. useABILITY Easy & IntuitiveSources of Friction Length of Pages – Scrolling in effort to find important content or information Page Layout and Design – Confusing layout, no visual hierarchy Button Design – Easy to overlook CTA; conflicting color usage Number of Options – Decision paralysis (3 or 4 options – Weinschenk) Nature and Number of Form Fields – Irrelevant fields or private information Form Field Layout – Form can appear shorter due to layout Number of Steps in Process – The less the better Page Load Speed – Faster the load speed, the better Discontinuity – Design, message, offer Reducing page load speed & the # of form fields is a no-brainer @mikeperla #convcon
    17. 17. useABILITY Easy & IntuitiveA B @mikeperla #convcon
    18. 18. useABILITY Easy & IntuitiveA B +77.47% @mikeperla #convcon
    19. 19. useABILITY Easy & IntuitiveA B @mikeperla #convcon
    20. 20. useABILITY Easy & IntuitiveA B +368.5% @mikeperla #convcon
    21. 21. useABILITY Easy & Intuitive Decision Support Tools aid the users’ decision making process. These tools help users navigate though numerous options and with making difficult decisions. Examples:  Comparison Charts  Quiz and Interactive Videos  Search Options  Calculators  Comparison Shopping Options Decision support tools can help negate decision paralysis @mikeperla #convcon
    22. 22. useABILITY Easy & Intuitive Determine what features or aspects are important to compare: price, ease- of-use, ease of maintenance, weight, warranty length, etc. Decide the best metric for representing the comparisons: check mark, number of stars, actual numbers, etc. Mark one as best value or most popular, further guiding selection Include tooltips for more details Label an option as “best value” or “most popular” when possible @mikeperla #convcon
    23. 23. useABILITY Easy & Intuitive Lead visitors through a decision process with an interactive quiz@mikeperla #convcon
    24. 24. useABILITY Easy & Intuitive Suggested search Basic search allows user to determine what specialties are available Advance search allows for more search criteria @mikeperla #convcon
    25. 25. useABILITY Easy & Intuitive Calculators help with big-ticket item decisions Do I qualify for financial aid? What are the out-of-pocket expenses? What kind of loan should I get? @mikeperla #convcon
    26. 26. useABILITY Easy & IntuitiveThe “Technidiot” Test Does your Grandma, Mother or technically challenged friend find the website intuitive to use? DIY user testing - observe the technically impaired @mikeperla #convcon
    27. 27. absorbABILITY Making Sense of Digital SurroundingsVisitors form an opinion about your web page in 50 milliseconds and will leavewithin 7 seconds or less.So, what do your visitors see? Are the purpose, benefits and differentiators easy to locate and comprehend? Is it easy to decipher what is most important on the page? Is it clear what action they are supposed to take? You have milliseconds to make an impact on a new visitor @mikeperla #convcon
    28. 28. absorbABILITY Making Sense of Digital Surroundings Use the “Squint” Chrome App to quickly assess your layout@mikeperla #convcon
    29. 29. absorbABILITY Making Sense of Digital SurroundingsA B @mikeperla #convcon
    30. 30. absorbABILITY Making Sense of Digital SurroundingsA B +31.4% @mikeperla #convcon
    31. 31. absorbABILITY Making Sense of Digital SurroundingsA B @mikeperla #convcon
    32. 32. absorbABILITY Making Sense of Digital SurroundingsA B +210% @mikeperla #convcon
    33. 33. Overcoming Objections Use Hard Evidence @mikeperla #convcon
    34. 34. Overcoming Objections Use Hard Evidence @mikeperla #convcon
    35. 35. Overcoming Objections Use Hard Evidence @mikeperla #convcon
    36. 36. Overcoming Objections Use Hard Evidence Visitor Recordings Click Heatmaps Mouse Move Heatmaps Attention Heatmaps (Scroll) Form Analytics Conversion Funnels (Create funnels after collecting data) @mikeperla #convcon
    37. 37. Overcoming Objections Use Hard EvidenceControl Treatment +77.47% @mikeperla #convcon
    38. 38. Overcoming Objections Use Hard Evidence Scenario and tasks Up to 5 follow-up questions: Keep them open ended; if using yes/no make sure to include “Why?” Tester Demographics: country, gender, age, education, employment and family status (recruit your own participants or custom recruiting available) Review onscreen interactions, verbal feedback and facial expressions Set annotation points throughout video playback Visit and use promo code FACC12 @mikeperla #convcon
    39. 39. Overcoming Objections Use Hard EvidenceControl Treatment +17.5% @mikeperla #convcon
    40. 40. Closing ThoughtYou Must Show ROIGo beyond the % conversion liftTie your conversion efforts to $ $>% You need to tie your conversion efforts to ROI @mikeperla #convcon
    41. 41. Final SlideTime to Say Goodbye Twitter @mikeperla & @CROProA LinkedIn LinkedIn Group: Conversion Rate Optimization Professionals’ Association @mikeperla #convcon