White on White Web Design
"White on white" gives your web pages a super-modern, clinically clean and well-lit environment that generates an aura of calm and professionalism. In many ways, it’s a natural conclusion of the "Save the Pixel" approach.
My new article describes where "white on white" comes from and shows 9 examples of recent UI designs I’ve done, and asks if "white on white" could be a useful addition to your designs.
Marketing Insights from the STP Conversion Page
Last month, I described Google Website Optimizer, which is an amazing free tool that helps you test variations of your content to find optimal combinations that help you achieve specific goals.
This month I successfully completed my home page experiment, increasing the number of people who clicked "Buy Now" from the home page by about 40%. So I next turned my attention to the "Buy Now" page.
Historically, only one person out of seven who visits the "Buy Now" page has actually purchased the ebook. Why aren’t the other six people convinced to proceed? Of course, I don’t expect a 100% conversion rate here, but 1/7 seems pretty low.
Here’s the original page. Where do you think people might be dropping off? There’s a brief introduction to what happens next, a bold button calling you to click it, and some notes to help ensure you receive your book in a timely manner.
The whole principle of testing and measuring your page designs is you often can’t tell what will work well, what will work less well, or why. You have to use some educated guesswork.
The things I tried were:
- A bolder intro, with a heading and without the "1, 2" numbering.
- A simpler version of the intro, saying "Get Save the Pixel Now" and using bullets instead of numbers.
- Adding a link to Google that shows people the current equivalent of the sale price in US dollars.
- Reducing the size of the notes that follow the button.
- And finally getting rid of those notes altogether (they’re repeated after you’ve paid).
Here are the results so far:
What this shows me
Clearly, the biggest benefit is from hiding the notes, a massive 92% improvement, which was a surprise.
Thinking about it, I guess that the notes are doing something I’ve suspected has been at play on a few sites I’ve reviewed. I’ve long believed that web pages should give people enough positive reasons to proceed without risking giving them reasons not to move forward.
What I think those notes were doing was making the process of purchasing the ebook feel more complicated and difficult, so giving people reasons to back out of the purchase.
Here’s the strongest combination, which I’m now running on its own head-to-head against the original. It currently has a conversion rate of 8/66 (12.1%) against 0/7 (0%) from the original combo. Even with low numbers, it seems to be a clear winner.
Semantic CSS?!
Do you know what Semantic HTML is? It’s not rocket science, in fact it’s quite simple. Here’s a brief introduction (Introduction to Semantic HTML), but in brief it means using the correct HTML markup to express accurately the structure of your content.
If you try to practice semantic HTML, have you ever thought how semantic correctness applies to your classnames and IDs? Once you get to grips with the basic principles of using the "right" tags (which is rarely clear-cut anyway), how does it apply to the ID and class properties of your HTML elements?
I find that using classnames and IDs correctly (i.e. only using classnames to describe properties of an element and reserving the ID property for identifying what an element actually IS), selecting appropriate names for these values can take you on quite a journey.
If you’re interested to learn more about semantic HTML, why you should be using it, and how it can make your pages work better, I recommend you check out my ebook on the subject, which costs just £5, only available on Web Design from Scratch. It contains a complete reference to HTML tags and how to use them appropriately, plus a complete worked example that takes you through the decision-making process of naming tags and properties.
FREE ebook
I’m excited to be able to share this ebook that I first read a few months ago. It’s by Geoffrey Heard, who’s a highly experienced marketing copy writer. I’ve learnt heaps over the last few months from reading the experiences of copy guys like Geoff and the guru Drayton Bird, and it’s great to be able to share this with you.
It’s a free preview of Geoffrey’s new book, which is the best and most accessible introduction to writing compelling copy I’ve ever come across. Since he sent it to me to preview, several months ago, I’ve been trying to get Geoff to put together a copy that you can read, and here it is.
Quite a mouthful, but believe me, you’ll learn loads from this book!
Enjoyed this Newsletter? Pass it on!
If you got value from this issue, please feel free to forward this message to your friends and colleagues.