You’ve just made a sale in you e-commerce store. But 27 days down the road you are faced with a chargeback request from your merchant account provider. You’ve not only lost the sale, you might also have lost your goods, and you’ll probably also face a chargeback fee.
In this post I’ll give you an idea on how to avoid this happening to you.
The Credit Card Statement Quandary
After a customer has made a purchase‚ his credit card statement will have your “credit card statement name” written on it. Most often this is just your legal business name, like “Apple Inc”.
Because a new statement appears for each and every transaction your customer makes, he quickly ends up with a list of hundreds of cryptic business names, making it very difficult to remember what the transaction towards your business name actually represents. Typically your customer will only remember the product he bought from you, not your business name.
This will inevitably lead to chargebacks on otherwise legit sales, simply because your customer can’t make the connection between your business name on his credit card statement and the product he received. Luckily there’s a way to avoid this.
Case Study: 37signals-charge.com
37signals, a company selling online software on a subscription basis, have found a great way to lower their chargeback rate. If you’re a 37signals customer, you won’t see “37signals LLC” on your credit card statement. Instead it will say: “37signals-charge.com”.
This way, if you should start wondering why this charge was made to your account, you’re compelled to check out that website: 37signals-charge.com. Should you do so, you’d get a page looking like this:
This page offers a simple FAQ answering the relevant questions like: “Who are you?”, “Why are you charging me?”, “How do I cancel?”, and “How do I contact you?”.
Imagine you see a charge on your credit card statement that you can’t recognize – isn’t this exactly the kind of questions you’d want answered?
3 Steps to Implement this Yourself
- Buy an appropropriate domain name for the page. 37signals used their business name followed by “-charge.com” which seems like a relevant domain for this (also, it is very likely to be available).
- Contact your bank (or whoever is responsible for your merchant account) and ask them to change your business’ “credit card statement name” to the new domain name.
- Make a dead simple page where you answer basic questions like: “Who are you?”, “Why are you charging me?”, “How do I cancel?”, and “How do I contact you?”. It’s important to write these as answers to someone who has trouble remembering who you are and what you might have sold him.
This will cost you an afternoon of work and $10 for the domain name. Quite cheap if you can avoid just a few chargeback cases.
What do you think about this way of lowering you chargeback rate? Let me know by posting a comment (4 so far).
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 (3 so far).
Do you want more articles like this?
(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 (1 so far).
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 (2 so far).
(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 (2 so far) and let us know.
