This is my first time presenting here at the conversion conference and I am very excited. Today I will not be covering anything dealing with persuasion. The topic I decided to cover is usability best practices… all which reduce visitor frustration, or friction, and increase conversions. The reason I wanted to cover this topic is that I am always amazed at basic usability issues prevalent on client websites, no matter the size of the business.And the fact is, in order to convert a visitor, a site has to have a strong user experience as its foundation.
A little about me, 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 then. I have a diverse background: IA, UX design, graphic design, development, video production, branding. I am on the board of our local User Experience Design Professional Association, I serve on the advisory board for whichtestwon.com and I started CROPA, the conversion rate optimization professional association…. Don’t worry, I will be giving the next CROPA webinar a plug again on the last slide of this presentation.
Competitors…. Everyone in room is a competitor... People only have a given amount of disposable incomeAny organization asking individuals to donate a % of their disposable incomeYou are selling a pleasurable feeling. Donations trigger pleasure areas of the brain that are traditionally stimulated by food, sex and sweets. – University of Oregon
What does your site look like? Does it look like an organization that will handle donations in an honorable way?
So, every attempt at converting visitors requires them to perform a series of tasks. It is similar to asking visitors to jump through a series of hoops. In actuality, having visitors jump through some hoops is necessary in order to get them to convert. Like getting a visitor to fill out a lead form or go through a checkout process. But this presentation will focus on unnecessary hoops… those hoops that are not a product of necessity but are derived from usability issues or poor design.
After each unnecessary hoop a visitor has to “jump” through to reach their goal, their frustration level increases, and the chances of them leaving your site go up while the chances of them converting go down.
In effort to get more of your visitors to convert, you must address those unnecessary hoops. You need make sure your copy is easy to read, that the site itself is intuitive to use and the on page content and page purpose are immediately apparent. Just a quick disclaimer, most of what I will cover are best practices. For the most part, things consider best practices do always work. You have heard it a hundred times, you should always be testing.
Readability 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 aesthetics. For example, you 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 and slow down the reader. They also 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, others may find difficult.
I am constantly pushing back on designers when it comes to the contrast between text and the background color. Low contrast between text and the background color make text extremely hard to read depending on conditions. 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.There is also a great site out there contrastrebellion.com. I encourage you to check it out and join the rebellion.
Whether you’re displaying informational content or persuasive copy, the key is being concise: clearly communicating your meaning with as few words as possible. I am not referring to broken English or text message shorthand, but eliminating the fluffy, flowery language. This is usually opposite of what you were taught in school.As Mark Twain put it: use plain, simple language, short words and brief sentences. That is the way to write EnglishThe bottom line is people want to read with minimal effort. There are always exceptions to the rule, but I am talking specifically about copy on websites where your ultimate goal is to get visitors to complete a desired action.There are tools out there that can run your copy through different algorithms to calculate readability. You 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 content you want to guarantee get across to your visitors.You need to limit the number of bullets you use. You should use 5 bullets at the most.Another little tip is that your important bullets should go first and last. People remember the beginning and the end, but often forget the bullets in the middle.Again, you should bold the important words… this helps make your content more scanable and can draw the eye to messages of importance.
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. It 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 are found to be a satisfying experience. They are certainly efficient… no prep time, no adhesive… you kid just dumps them out and has at it.
Can anyone think of any other sources of friction not mentioned here?Length of pages… if a page does need to be long… make sure to add a CTA to every scroll pointPage and design layout - Clear hierarchy? Consistent use of color
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”.
By reducing the number of fields along with a few other changes we increased form fills by 368%
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.
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.
Size & placement
Talk about form sweet
Talk about form sweet
Talk about form sweet
Usability for Nonprofits: Reducing Friction & Boosting Conversion
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.com Mike Perla – Director of Conversion Optimization 2013 Online Testing Awards Gold Ribbon, Case Study in WhichTestWon.comA/B Test Hall of Fame, Director of Event Planning - Northeast Ohio UsabilityProfessional’s Association (NEOUPA), Advisory Board - WhichTestWon.com,Founder - Conversion Rate Optimization Professional Association (CROPA) 10+ years of experience in CRO, UXD, web design, researched-basedinformation architecture practices, persuasive copywriting, personadevelopment and market positioning.Who is this Guy?Why should I pay attention?!?
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgDrive all the traffic youwant, it is worthless if itdoes not convertConversion Optimization Should Be a Priority!Get Your Web Properties to Convert
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.com Who are your competitors?Any organization asking individuals to donate a % of their disposable income What are you selling?You are selling a pleasurable experience. Donations trigger pleasure areas ofthe brain that are traditionally stimulated by food, sex and sweets. –University of OregonThe World of Non-ProfitsUnassumingly Competitive
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.org It takes just 50 milliseconds (1/20th of a second) for visitors to form anopinion about the quality of a site This is an action of the old part of your brain or “Reptilian Brain” Is it attractive? Is there a clear visual hierarchy? Does it look safe? The “Reptilian Brain” is the ultimate decision maker (halo effect) You have 7 seconds to keep a visitor from leaving The middle and new parts of the brain – feelings/ emotions & logic Is it relevant? Is it clear what I am supposed to do? Do I feel confident intaking that action?Make a Good ImpressionYou Have Just Seconds
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.com Anxiety – How will my money be spent? What % goes to the cause? Aredonations handled securely? Emotion – Use images that tell the story. Use success stories people canrespond to emotionally. Target empathy. Cialdini’s Principles of Influence Social Proof – How many others have donated? What is the totaldonations? Authority – What organizations or persons of authority do yousupport/support you? Affiliations?Appealing to Your CustomerAddressing Anxiety and Using Persuasive Triggers
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgABILITYGive Visitors the Ability to Convert
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comABILITYGive Visitors the Ability to Convert
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgABILITYABILITYGive Visitors the Ability to ConvertabsorbABILITYuseABILITY
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.com Font Choice – typeface, weight & size Line HeightreadABILITYEffortless Reading ComprehensionVerdana is much easier to read.Monotype Corsiva is hard to read.Limit web pages to the usage of3 fonts or less. Less is better.
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgABILITYEffortless Reading ComprehensionIs your text W3C compliant?Use Colour Contrast CheckMeasure 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.4if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4if 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/255GsRGB = G8bit/255BsRGB = B8bit/255The "^" character is the exponentiation operator.
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comABILITYEffortless Reading ComprehensionUse a readability testtool like read-able.com"I notice that you use plain, simple language, shortwords and brief sentences. That is the way to writeEnglish--it is the modern way and the best way. Stick toit; dont let fluff and flowers and verbosity creep in. Whenyou catch an adjective, kill it. No, I dont mean utterly, butkill most of them--then the rest will be valuable."Mark Twain, letter to D. W. Bowser, March 1880Americans average a readinglevel of Grade 8
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgReading from a computer screen is 20-30% slower than reading from paper –The University of Texas.The man who makes a success of an importantventure never wails for the crowd. He strikes out forhimself. It takes nerve, it takes a great lot of grit; butthe man that succeeds has both. Anyone can fail. Thepublic admires the man who has enough confidencein himself to take a chance. These chances are themain things after all. The man who tries to succeedmust expect to be criticized. Nothing important wasever done but the greater number consultedpreviously doubted the possibility. Success is theaccomplishment of that which most people think cantbe done.The man who makes a success of an importantventure never wails for the crowd. He strikes out forhimself. It takes nerve, it takes a great lot of grit; butthe man that succeeds has both. Anyone can fail.The public admires the man who has enoughconfidence in himself to take a chance. Thesechances are the main things after all.The man who tries to succeed must expect to becriticized. Nothing important was ever done but thegreater number consulted previously doubted thepossibility. Success is the accomplishment of thatwhich most people think cant be done.readABILITYEffortless Reading ComprehensionReading on a computer screenis 20-30% slower than paper
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comList items are small, discrete “chunks” that are physically easier on the eye andeasier to follow and comprehend.Enterasys offers leadership network solutions forhigher education in terms of manageability via asingle pane of glass, security for BYOD, and integritywith fault-tolerance and life-time warrant. OurOneFabric networking solutions deliver the best userexperience, best-in-class application services, andlowest total cost of ownership in the industry.Take complete control of your wired and wirelessnetworks with OneFabric networking solutions:• Lowest total cost of ownership in the industry• Manageable via a single pane of glass• Security for BYOD (Bring Your Own Device)• Integrity with fault-tolerance• Best-in-class application services• Life-time warrantyreadABILITYEffortless Reading ComprehensionVisitors have time to read only 20% ofyour copy during an average visit
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.org Usability issues in terms of conversion rate optimization is called “Friction” Friction arises from any element of the conversion process that causesfrustration, mental fatigue or confusion.useABILITYEasy & IntuitiveFriction causes aggravation,mental fatigue or confusion
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comSources of Friction Length of Pages – Visitors spend only 20% of attention below the fold 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, offeruseABILITYEasy & IntuitiveReducing page load speed &the # of form fields is a no-brainer
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgThe “Technidiot” Test Does your Grandma, Mother or technically challenged friend find the websiteintuitive to use?useABILITYEasy & IntuitiveDIY user testing - observe thetechnically impaired
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comVisitors 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 andcomprehend? Is it easy to decipher what is most important on the page? Is it clear what action they are supposed to take?absorbABILITYMaking Sense of Digital SurroundingsYou have milliseconds to makean impact on a new visitor
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.orgA BWhichTestWon.comabsorbABILITYMaking Sense of Digital Surroundings
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.comA B+31.4%WhichTestWon.comabsorbABILITYMaking Sense of Digital SurroundingsUse the “Squint” Chrome Appto quickly assess your layout
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.org://snook.ca/technical/colour_contrast/colour.htmlOvercoming ObjectionsUse Hard Evidence
@mikeperla #GoNPO linkedin.com/in/mikeperla email@example.com://www.read-able.com/Overcoming ObjectionsUse Hard Evidence
@mikeperla #GoNPO linkedin.com/in/mikeperla firstname.lastname@example.org://chrome.google.com/webstore/search/squintOvercoming ObjectionsUse Hard Evidence