Archive for the ‘web design’ category

A/B Testing Lightbox Screenshot vs. Screenshot + Download Link

February 22, 2009

Everybody paying attention to this blog recently knows I have an unhealthy fascination with Lightboxes, particularly my new favorite iBox.  I like them because they work really well at increasing conversions, most recently in my shopping cart.  (Incidentally, guys, I went back and reset the test.  It really is about 100% improved over the old version.)

So this week I removed the old Lightbox lightbox from my home page and replaced it with an iBox.  I haven’t looked in any rigorous fashion whether that improved things or not — I just did it to cut a few kilobytes off all the Javascript people have to download to use my site, and also because I think the iBox looks cooler out of the box.

Then I noticed that the iBox introduces a loading screen, which the old lightbox did as well.  I hate load screens.  When I see them I think “This is me, losing money”.  Because if two seconds to load the shopping cart cost me half of my potential sales then 2 seconds to look at a screenshot must likewise be suboptimal, and MANY people look at the screenshot (something like 20% of the people who view the page, if CrazyEgg is counting right).

Also, unlike Lightbox, iBox can cause you to get dumped direct to image if you click before the script loads.  Bad news, bears, that means a bounce for most of my users.  I got around this by putting onclick=”false” on the relevant links.

Many, many moons ago (in late 2007!) I experimented with adding blue instructory text to the lightboxed image, exhorting people to download the trial.  That was a crashing failure — it looked like a link but if you clicked it, wham, the image vanished.  But I sort of like the general idea, so it is time for a new split test — take a gander at the screenshot behavior here and tell me if you like it.

You could see the old version of the behavior on my homepage but, well, only if you flip heads the first time you load it.  It is basically the stock lightbox effect — brings up an image, click anywhere to dismiss the image.

I’m hoping for a lift in trial downloads, particularly from clicks coming from advertising.  My worry is that the people are going to get stuck in the lightbox and bounce, since it is much harder to dismiss now.  Oh well, that is what testing is for.  Bring on the visitors!

New Mini-Development Project For Me

February 7, 2009

I have a deep, abiding affection for e-junkie, which is my payment processor of choice.  So much so that I’ve been called their Local Sales Rep on the Business of Software forums.  Probably true — have I mentioned they’re the best $5 a month you will EVER spend in your life?  Sorry, had to do some shillin’ like a villain to make up for what I’m about to say.

I’m thinking of not using their shopping cart anymore.  Not because it isn’t an amazing piece of technology which manages to work for thousands of people without writing code, because it is all of that and more.  The lift I got in conversions from using it has made me thousands, which for about 5 minutes of integration work means the hourly effective wage is sweet indeed.  Its just that my web programming abilities are improving these days, and I’m starting to chafe at a few of the necessary restrictions from using a third party solution.

My big issues:

1)  Forcing people who buy a CD to put in their zip code twice — once in the cart, once at the actual checkout screen.  I’m working on the assumption that that probably kills CD conversions, and I’m not sure those conversions come back

2)  It is slow.  Clicking on the cart gives you a loading message for two or three seconds.  I still think it beats the pants off of a pageload when updating a shopping cart, I just want the perceived speed to be “bugs in my teeth fast”.  (This is where people ask me “Well, why do you need a shopping cart at all when you can just have a Buy Now button?” and where I say “I’ve tested both alternatives and the cart makes me oodles of money by simplifying the customer experience.”)

I was partially inspired to do this by my buddy Yakob at Mixed In Key, who a) has something really cool coming down the pipe which if you are reading this blog will interest you intensely and b) has a really sweet shopping cart implementation.  Try it, you’ll like it.  That’s what I want mine to work like.

I think I can repurpose some of the Widget Factory Javascript code to achieve it fairly easily.  The actual transaction will still be handled by e-junkie, but I want the cart constructed locally.  If I can do it fairly cleanly, I’ll open source this so that anybody else can apply it to their sites — otherwise, I’ll just do the usual kludging and split test it against the genuine e-junkie cart on mine.  I’m thinking the lift in conversions is going to be sizeable enough to justify a few hours of fighting with Javascript (once).

Sidenote: My dashboard informs me that I might hit $3,000 in sales this month.  Whee for new records!  Recession, what recession, 73% year over year growth.  (Watch me jinx myself.)  

What’s doing it?  Same old same old:

  • AdWords doing well as it always does near secularized holidays (Valentine’s Day bingo is always hot, and while I’m not winning that SERP the people who are thankfully slap AdWords all over the place)
  • organic SEO efforts on website paying off (~1,200 visitors from Google on average weekday these days)
  • version 2.51 converts pretty decently (subtle changes, big difference in effects, tell you about it later)
  • a few tweaks to the website are paying nice dividends

CrazyEgg Makes Me Serious Money… Again

February 4, 2009

It has been a really long time since I did any testing of webpage elements and I was thinking “Hmm, what am I paying $20 a month for CrazyEgg if I haven’t logged in since summer?”  So I sat down for a moment and thought of something I could add.  Ahh, I know — maybe I’ll try adding another download button after my benefits spiel and before the ginormous 566×545 pixel sample bingo card, whose scroll-inducing enormity comes before the one visual download button in my main body.

Four days later I come back to CrazyEgg and see the result of 4,200 visitors:

86 clicks, or 10.4% of clicks on the page, on that one stinking extra button.  This increases the conversion of my main page by about 20% (some clicks are presumably “stolen” from other ways to reach the same goal).  Since my main page is also my AdWords landing page this started decreasing the amount I was paying for conversions instantly, and of course increasing the number of trials downloaded will hit the bottom line pretty darn directly.  The naive assumption is that 20% more trials is 20% more sales.

Sadly, my main page does not account for 100% of conversions, but my quick back-of-the-envelope calculation is that the main page causes about 40% of trial downloads directly, which implies that it drives something like $800 of revenue a month, so a 20% increase in that is $160 added to the bottom line (plus assorted cost savings from AdWords which I will not get into because the math gets heady).

Putting a button there is kind of jawdroppingly obvious… I’m not sure why I didn’t do it before.  Sure, there is one button visible to the left when you open the page, and the first text link in the content area is to the download (I have previously tested this and highly recommend it, because the first text link in the content area gets a huge portion of user interaction).  But if someone scrolls down to actually read the benefits list, then they’re left high and dry with nowhere to click unless they scroll past the huge image or scroll upwards.  Neither of those activities “flows” well after you’ve just read a benefits list, not nearly as well as “click here” does.

Well, lesson learned. 

I don’t think I’ve said this in a while: I love you, CrazyEgg.

Speeding Up Web Page Rendering

March 25, 2008

I have the good fortune to be on a fast, fast, fast Japanese connection and as a result don’t typically wait too long to view webpages.  This makes me forget sometimes that the rest of the world doesn’t get nigh-instantaneous page loads, which means I don’t often design with this factor in mind.  However, somebody pointed out that the new sidebar buttons were loading last for them, and as my front page can potentially take 4 seconds to load (longer than a significant portion of visitors stay!) I didn’t want that.

Why is a bit of a long story.  First off, the sidebar is literally the last thing in the HTML body element (with the exception of various bits of Javascript).  This is to push up the main content area in the document, because search engines treat stuff near the top as more important and I want pages to rank for their own content not the content of pages they happen to link to on the sidebar.  This means that, if you parse the webpage starting at the top and going down, you come across those IMG tags pretty much dead last after everything else on the page.

Now, how do browsers download assets (images, Javascript, CSS, and whatnot)?  Basically, there is a FIFO (first-in, first-out) queue maintained per host name.  For example, if I have the web page reference 10 images on, then those are listed from first occuring to last occuring in the queue.  The browser then, following HTTP specifications, starts downloading two at a time per queue.  This means that if you have, say, 25 objects to grab from your own domain and 1 offsite Javascript the offsite Javascript will start downloading about as soon as its discovered while the last object from your domain waits in line.

So that is the technical explanation.  What was happening was my front page loads 2 fairly sizeable screenshots totaling 200kb of the total 350kb required to load the page, and as these are both ABOVE the sidebar when you’re reading HTML linearly, they were blocking the download of the buttons.  That is certifiably ungood, particularly as one of the screenshots isn’t even visible when you open the page (it is far below the fold, most people won’t even see it!)

However, since the queue is maintained per hostname, if I could only host on a hostname other than, I could have things download in parallel.  Happily, my webserver (Nginx) makes it really simple to set up extra names like, say, which are essentially the same as the main domain in every way except they are, well, named differently.  Thus tricking your browser to download from them in parallel.  I set up 4 domains this way and used that to do a bit of manual queue optimization to ensure that the images with the highest payoff (big beautiful buttons!) load fastest. 

And to think I was wondering why so few folks tracked in CrazyEgg were hitting the images compared to before.  Now I know — they were waiting so long they had already found a text link before engaging the image.  The results are visibly different even on my monster Japanese connection.  (Its like the Godzilla of latency… in a good way?)

Rails offers a way to do this automatically, but I wouldn’t recommend it if you have only a few pages to hand optimize.  The reason is simple — randomizing access to domains results in good average case load orders but if you can hand-optimize things you blow it out of the water.  (For example, there is about a 40% chance that the large image would block one of my conversion buttons with random host names.)

Pressing My Customers’ Buttons

March 17, 2008

In my continuing desire to split test the heck out of everything, and my continuing total inability to graphically design to save my life, I went back to the LogoSamurai folks and got some buttons designed for the website as drop-in replacements of my current ones.  I’m also getting some made by my web designer Gursimran, and will be testing tNew buttons to testhe two against each other (and, of course, against the current set) and keeping the ones which are most successful at driving the conversions. 

Gursimran isn’t done with her set yet, but since the Logo Samurai guys are, I thought I’d give you a sneak peek.

As you can see, these are much more Web 2.0 than most web sites in my niche, and quite different from the previous look&feel for the Bingo Card Creator site.  That’s why we test them, of course — I don’t want my opinion on what my customers want to calcify and blind me to the actual facts of what they act upon.  Gursimran has a very different visual style so I’m intensely interested in seeing how things work out.  (Sidenote: I love the pencil!)

Cost for these, incidentally: $60, $15 per button.  I had to convince Gursimran to take money for the buttons, as she wanted to just throw them in with the price I already paid for the web design.  As great a deal that is, I would feel really terrible imposing on her like that — professionals should not be afraid to charge money for services, in my opinion.

Plus, if the winning set of button increases my trial conversion rate by 1% and/or my purchase conversion rate by 1%, that would work out to be quite a bit of money.  I also like keeping all of my freelancers happy with me, as I feel it will tend to get me work done in a timely and high quality manner, and thus prevent me from having to go play Russian Roulette with the freelancer sites to find a replacement source of talent.

Results of Site Redesign

March 15, 2008

About a week ago I merged Daily Bingo Cards and Bingo Card Creator, and embarked on a massive site redesign.  I thought I would write a bit about how this improved my numbers.  I have compared traffic to the combined total of the two sites — all other comparisons are against Bingo Card Creator itself, because I am lazy.  These are not rigorously devised statistics — they’re my quick eyeball of typical statistics for a weekday.

Visitors: 900 -> 1,200

Pages per Visit: 2.5 -> 3.5

Time per visit: 90 seconds -> 150 seconds

Trial Downloads: 100 -> 125 to 150 (hasn’t settled yet)

Confirmed Application Installs: 20-25 -> 30-40 (hasn’t settled yet)

Sales: 2 -> slightly under 1.

I’m sort of at a loss as to what is causing the sales to go down.  Its possible that is just natural fluctuation, as all of the pre-sales indicators are way the heck up.  I also might have some folks working through the trial pipeline who remember the old branding and get turned off by the new design (“This isn’t the right site!” is a very serious worry in my market). 

A graphic on how well the design focuses user attention, stolen shamelessly from my page on St. Patrick’s Day bingo and courtesy of CrazyEgg (I just upgraded to their $19/month plan because I’m getting too much traffic for the $9 plan to be useful — please, God, send me more problems like that one).  (This image will almost certainly be truncated by WordPress.  Click to see the full sized version.)

St. Patrick's Day click tracking

And one more, because images are fun.  Caution: this isn’t the best test in the world, because I did some significant changes to the sidebar several times while the test was running, and when element IDs change sometimes CrazyEgg “loses” the clicks from some of the views.  (This is so that you don’t see big red splotches where page elements no longer exist, obviously, but it also means that most of the clicks on those buttons aren’t getting shown.)

CrazyEgg analytics of front page

Alright, back to my favorite Saturday activity: doing taxes!  (I got the uISV part done already.  It came out to a bit over $800 on $6,300 odd of profits.  Now I’ve just got to collect a bunch of statements documenting less than $100 in interest and then fill out a bunch of boring administrivia forms.)

Add An Image, Increase CTRs By Lots

March 12, 2008

I found a nice free icon set to spruce up my Irish bingo cards blog post, which is going to get seen by several thousand people in the next week.  I figured, hey, add a cool looking image to useful content and you’ll get much better linkable action out of it.  Plus, folks are much more likely to click it.  Doesn’t it grip you so much more than just the text alone?