Baymard Institute

CAPTCHA Can Kill Your Conversion Rate

2009-11-04T20:27:08Z

More and more websites are using CAPTCHA to avoid spam, but they’re typically bad for your business as CAPTCHAs have major usability problems. Most visitors simply get them wrong.

Why CAPTCHAs Are Bad For Business

From the perspective of a web developer, a CAPTCHA may seem like a great solution to prevent spam. However, from a business perspective CAPTCHAs can be pure poison as they have a lot of usability problems:

CAPTCHAs are difficult to decipher. This is what makes them technically good, however, obscuring text and asking your visitors to repeat that text will hurt your conversion rate badly. And let’s face it, even people working with websites daily read a CAPTCHA wrong every now and then.
CAPTCHAs carry no meaning. Most CAPTCHAs are just a random combination of letters and numbers, leaving your visitors with little clues as to whether or not they got it right before submitting the form. Additionally, even if they do read it correctly, because it have to be an exact match there’s also the risk of your visitor simply mistyping it.
Your visitors don’t understand what CAPTCHAs are for. Why are you forcing them to go through an eye exam and spelling test? Some will be annoyed that you’re treating them like a 3rd grader, others may even fell insulted.
People with lowered vision can’t read your CAPTCHA. This makes it near impossible for them to read the already mangled characters of your CAPTCHA.

Some visitors will leave you site immediately when they see your CAPTCHA simply because they don’t understand what it’s for (problem 3). The visitors that do understand it, but are either unable to see it (problem 4), can’t read it (1) or mistyped it (2), will get so frustrated that there’s a good chance they will leave your site too.

Are you willing to take this chance? My suggestion is to set up a split test where you remove the CAPTCHA and then compare the value of the extra conversions against the extra hassle of deleting some additional spam.

If You Still Need A CAPTCHA…

If you absolutely, positively must implement a CAPTCHA on your site, then at least consider these 6 ways of making you captcha more user friendly:

Use a huge CAPTCHA so your visitors won’t have to go scrambling for their reading glasses.
Make the CAPTCHA ask for real words or sentences so your visitors can deduce the characters that are really difficult to read from the characters that are easier to read.
Reload just the CAPTCHA if your visitor gets it wrong so he don’t have to fill in all the other form fields on the page again.
Give your visitors an option to get a new CAPTCHA image so they have the possibility to get another.
Tell your visitors you’ve implemented the CAPTCHA to prevent spam. This way you at least explain to them why they need to through all that hassle and some visitors may even sympathize with you, as they themselves have trouble with spam.
Only ask your visitors to type your CAPTCHA once through the entire session. E.g. if you have a service for getting price quotes, don’t show a CAPTCHA at every request, only during the first request.

What’s your opinion on CAPTCHAs? Post a comment (6 so far).

Designing a new Website #3: Finished Layout

2009-10-24T16:08:51Z

(This is part three in a series of posts about designing a new webpage from scratch, before you have any concrete data to guide your design-decisions.)

In this post we’ll take your design drafts and turn them into a finished layout. You’ll be tweaking the proximity of the different elements on your page as well as adjusting the sizes and nuances to give each element the appropriate amount of visual importance.

After having combined the drafts into one coherent layout we tweak proximity, sizes and nuances of all the elements.

1) Turn Drafts Into HTML

Grab your initial design drafts and begin coding each of them in HTML, starting with the most important design draft first (as determined back when you created your priority lists).

Make a new HTML page for each of your drafts. It’s important that you only add the exact elements from your initial design draft to this HTML page as this will help you keep focused. E.g. if you’re designing the posts-area of a blog, don’t add the sidebar to it just yet (you’ll do this in step 3).

2) Get the Basic Elements in Place

Now it’s time to give your HTML pages some basic styling. This is about getting the basic elements in place and making sure they work really well.

The most important thing to focus on in this step is the font. The font’s family, size, padding, color, nuance and line-height. It’s always a good idea to design the “standard” font first (the one you’ll be using for your body text) as this will make it much easier to find the right proportions for the other types of fonts such as the ones for the different headers.

Proximity is golden here as it visually determines which elements belong together and which don’t, so spend some time on finding just the right amount of white-space e.g. above and below your sub-headers. You’ll typically want more spacing between the upper paragraph and the sub-header than between the sub-header and its following paragraph since these two last elements are related. By putting elements in close proximity to each other you’ll visually tell the visitor that they are related. It may seem like a small and extremely obvious thing but a lot of people (including some calling themselves web designers) still don’t get this right.

It’s a good idea to spend a little time on writing your CSS styles in a flexible manner that makes it easy for you to make overall adjustments down the road. Personally I like to wrap each of my HTML pages in a div-tag with a unique class name so it is easy for me to e.g. decrease the font-size of everything in the sidebar by 10% once all the design drafts are put together on the same page.

Repeat this step for each of your design drafts until you have all of the elements on your site in a separate styled HTML page.

3) Combine Drafts to one Coherent Layout

Finally! It’s time to put everything together, this is what you’ve been waiting for all along: to see the different elements play together in one coherent layout.

Placing the different elements on the same page should in and by itself be pretty easy, however, you’ll have to make a ton of minor adjustments before the layout will work as intended. Especially the positioning of different elements is important, making sure all elements are in perfect proximity to each other. One thing you can do is print out each of the styled HTML pages and move them around on your table. What would it look like if the sidebar was on the left side of the content and not the right?

You’ll want to play around with font-sizes and colors of the different elements as well, emphasizing the most important areas of your page while downplaying the less important parts. Try decreasing the font-size of your sidebar a bit so it’s visually less dominant than the page’s actual content. Perhaps give it a dash of white so the font-color is dark gray instead of black.

Now tweak. Then tweak a bit more. Grab a cup of coffee and tweak some more. When you think you’ve found the right balance, take a walk outside for 30 minutes and then go back and tweak some more. Depending on the page you’re designing (and the time you have at hand) this process may take a few hours to an entire week. You’ll eventually end up with a finished layout that’s in perfect balance and where the visual importance of your different elements align perfectly with their actual priority. This is design at its best.

There’s a million different adjustments you can make during this step and in my experience your options depend very much on the page you’re designing. Even the few elements that do apply to almost all designs don’t benefit from being done in a particular order. With that being said, here’s some things I usually devote a fair amount of my time to get just right:

Proximity – how close are the different elements on the page to each other? If two elements are in close proximity are they also related? If not, add more spacing. Use this to show the relationship between the elements on your page.
Size and nuance – these two factors determine an element’s visual dominance. Spend some time making sure that there’s a correlation between the actual priority of each element and the visual importance you’re devoting to it.
Backgrounds and lines – you can use these graphical elements to separate different parts of your page from each other and make some stand out more than others. Use sparingly and wisely, or it may turn into visual clutter.

Is there something you’d like to add to this list? Impart us with your wisdom by posting a comment.

Subliminally Directing Visitor Attention Towards Your Page's Goal

2009-10-20T21:20:53Z

Today we’re going to take a look at a technique which can be used to subliminally direct your visitor’s attention towards the goal of your page. It is a technique that’s not only overlooked by the site’s visitors but often the site owner too.

The Technique

The basic principle is to have one or more graphic elements that subliminally direct your visitor’s attention towards the goal of your page, towards the call to action.

This technique is very commonly used in the world of print advertising but utilized surprisingly little online. It is often manifested by a person (or animal) looking in a certain direction, making the viewer look in that direction too.

This is because people tend to look in the same direction as other people, verified in this study. So in print ads you’ll often find images of people looking directly at the headline or a phone number.

Online you can (and should) obviously do the same. Let’s take a look at MailChimp who is actually doing this.

An Online Example

MailChimp uses their mascot’s eyes to direct the visitor’s attention towards their headline. Notice how MailChimp’s mascot, a chimp, not only looks directly at the page’s headline, but is also walking towards it, immediately making your eyes wander in the same direction:

To show you how important this is to get right, take a look below where I made the chimp walk and look the other way, away from the page’s headline and call to action:

Besides looking odd, this immediately moves focus away from both headline and call to action, towards the chimp itself. When looking away, the chimp becomes a distraction which actually hurts conversion instead of improving it. The chimp is reduced to a useless decoration instead of vehicle for directing the visitor’s attention.

The Conclusion

So when you’re using images of people (or chimps) think about what they are looking at on your page as this actually has an immense impact on where your visitors will be looking on your page.

Do you yourself use graphic elements to director your visitor’s attention towards the goal of your page? Or know of anybody else that does? Then post a comment.

Designing a new Website #2: Design Drafts

2009-10-13T20:32:08Z

(This is part two in a series of posts about designing a new webpage from scratch, before you have any concrete data to guide your design-decisions.)

With your priority lists in hand, it’s time to begin on the actual design of the site. This step in the overall process is about getting the basics right and making sure the most important elements are designed really well.

The initial design draft for the posts on this blog.

Designing Inside Out

Start out by grabbing the most important priority list – this is what you’ll be designing first. Having the priority lists in place makes it much easier to design things from the “inside out” – an important concept that forces you to build your design around the most important elements on the page.

If you were designing a blog, the most important elements would probably be the posts and the sign-up options. Designing these elements first would mean that other less important elements such as navigation for the categories would be designed later and have to be built into a layout where posts were already designed.

Sketch Initial Design Drafts

With your most important priority list next to you, you’re ready to begin on the first sketches for the design. For the sake of consistency, let’s say you’re designing a blog and that this is the priority list about the posts.

You may seem tempted to quickly draw a header and sidebar to contain the posts. Don’t. While it might feel a bit strange and even uncomfortable to design what a post looks like without having any visual anchors around it, this is exactly what you need to do. Again, this will force you to build the rest of the site around the posts, and not the posts around the rest of the site.

So start sketching out the different elements of your site (separately!). You may do multiple design variations for the same elements. This is good. Now is the time to explore – to try out new things – as the cost of making a change is close to zero.

Repeat this for all the priority lists, going through them by importance, designing the most important, then second most important, and third and fourth, etc.

Example

In the very first sketch for this blog we wrote a big title and then the publication date next to it (on the same line) but in a considerably smaller size. Then we placed the author name and comments count on a new line and gave them the same size as the publication date. Then we placed the body text on a new line below all this “meta data” and bumped down the font-size once again.

In the final design we would leave post title on a line for itself to underscore its importance. Publication date was faded out and placed after author name as it wasn’t supposed to call attention upon itself. You can see how designing cornerstone elements first without any other elements distracting you, really helps you focus.

Do you also design “inside out”? Does it help you focus? Post a comment and let us know.

Designing a new Website #1: Priority Lists

2009-10-10T16:43:06Z

(This is part one in a series of posts about designing a new webpage from scratch, before you have any concrete data to guide your design-decisions.)

When you’re designing a new page the most important things to know are 1) what action you want your users to take, 2) what elements you want to display on that page and 3) the priority of those elements.

1) Page Goal

The very first thing you need to figure out is what action you want your users to take: what you want them to do on your page. Few goals (or even a single goal) is typically preferable as too many goals can confuse users and paralyze decision-making.

On blogs like this one the goal is pretty obvious: have people read your posts. In practice this means getting people to read a couple of posts on the site and then sign up for future posts through an e-mail newsletter or RSS feed.

If you’re designing a product page, the goal is to get people to put the product in their shopping cart.

2) Display Lists

The next thing you need to figure out is what you want to display on the page. Lists are usually good for this, so the next step is to write a few simple lists of all the elements you want to display on the page, which is exactly what we did when designing this blog.

It’s always easy to get started with this step as you can simply add the goal from step 1, in our case this was “E-mail sign up form” and “RSS feed link”. Next up, we wrote a list of all the elements a posts should have: like title, body text, publication date and author name. All this usually takes a little while since you’re writing everything down that needs to be on the page – you’re deciding what gets in, and what is left out.

Now, it’s important to avoid writing anything design-related just yet. E.g. don’t give one of your lists a heading called “Sidebar” because at this point you actually don’t know if the final design should have a sidebar, all you know is what elements need to be in the design.

3) Priority Lists

Finally, take all your lists and prioritize them. What’s the most important thing on the site? What’s the second most important? And third, and so on. For this blog we put the “Posts-list” first on the priority list since this was the most important thing.

After prioritizing the lists, you should prioritize the elements within each list by visual importance, putting the most important elements at the top. Within the “Posts-list” we placed the title at the very top, followed by the author name since we really wanted to highlight that multiple people was behind this project. Next on our list was comments for social proof, but only if one or more comments had actually been written, otherwise it should be hidden.

After this came the actual body text since we wanted to make it really easy for people to dive right into the content and so it should be really prominent. Then came the “Post a comment” link which we felt belonged longer down the list because its immediate visual importance shouldn’t be too significant – only after reading the post should this pop out to the reader’s eyes. And finally, the last element on our “Posts-list” was the publication date which we didn’t want to be of visual importance and should only be noticed by readers who were specifically looking for this piece of information.

You can see how doing these prioritized lists forces you to ask a lot of important questions and demand you choose certain elements over others. All this is really important for your design as it will determine where to place what elements and help you decide how much weight to give them in terms of size and color. So with this prioritized list in your hand, you have everything you need to begin doing your first design drafts.

Oh, did you notice that? We haven’t actually designed anything yet, instead we’ve been defining what needs to be in the design and what importance those things have, because really, how can anyone create a good design for something if they have yet to figure out what it is they’re designing?

I’d love to hear about your approach to designing a new website or page, so please share your experiences in a comment (1 so far).