Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
The Anatomy of a Perfect Landing Page (formstack.com)
327 points by jaybol on Dec 13, 2010 | hide | past | favorite | 56 comments


No, this is the anatomy of a perfect landing page:

  <% ab_test('determine_the_best_page_with_numbers_to_back_you_up', ['page1', 'page2']) do |action_name| %>

        render :action => action_name

  <% end %>
(http://www.bingocardcreator.com/abingo)


    A short primer in unconstrained, high-dimensional, non-linear 
    global optimization (over time!)

    You can't do it.
So you need more than just testing.

Unconstrained and high-dimensional means that your search space is IMMENSE. Non-linear means that the optimal designs may be arbitrarily twisty, very small, fractaline and chaotic, and, most importantly, unconnected. Temporal dependence means that even if you magically find a good solution, it may fade with time.

Fortunately, we never have to do that because we use an incredible amount of prior design information (craft) to ensure that our search spaces are much smaller. This page provides an overview of that information (and even includes a call to test) which will hopefully put you somewhere in the neighborhood of a useful page and inform you of what direction to go.

If you "just had to test" then there'd be no need for art, science, literature, stock markets, language, thermodynamics, technique, craft, effort. Computers would have already solved everything (not that we would have ever invented them).

My opinion is that testing is vital because it's your only consistent, trust-worthy way to measure your value function (conversion rates). It's how you put a stick in the water to measure depth. That is only one tiny part of a complete solution no matter how important it is.


Well, you also have to know what to try. I had a local maximum on my landing page and wasn't getting it any better until I started reading articles like this, and my latest one is 60% better than the old. A/B testing alone isn't always enough.


It hadn't occurred to me that A/Bingo could do that. (Swap templates.) Spiffy.


I'm confused, aren't you the creator?


The specific trick he is doing is an interaction between Rails and the API I wrote, which is fortuitous but not planned. It wasn't unlikely, because A/Bingo is designed to "feel like Ruby", but I had never envisioned the software being used in that fashion. (I always do A/B tests on particular elements within a page.)


I know nothing about Ruby/Rails or A/Bingo, but isn't head and body or html just elements? AFAIDK you could test a whole lot more.

In other words, haven't you ever tried to A/B test the full page? :)


Historically, I avoid Big Bang A/B tests because a) I used to have a 5 hour a week budget, which is enough to do heading tests but not quite enough to do full page rewrites and b) I have the design skills of a hamster who fell into the Christmas eggnog and drowned.


To confirm, your intuitions are correct.

I wonder if it's harder to figure out _what_ is better about your split tests as the tests themselves become larger, though.


Doesn't #10 on the original page mention "Always Be Testing"?

Nothing's wrong with starting out with some great guidelines, and then testing it to death.


I don't know why you're being downvoted. This is correct. Landing pages can and should be a/b-tested to the death. If you're gonna a/b-test anything, it's gotta be your landing page!


Thanks - maybe downvoted because there is little explanation. So just to clarify:

Many people have an opinion about the perfect landing page based on some narrow experience. See http://www.google.com/search?q=perfect+landing+page for examples. Absorbing these guidelines provides a good starting point for any landing page optimization campaign, but only a starting point.

Claiming you have created a "perfect" landing page is simply wrong. There is no such thing as a perfect landing page. Through rigorous A/B/n & multivariate testing you can identify pages with better conversion rates and discard poor performers. It is also important to note that this optimization is not necessarily transferable to different ad messaging, user segments, products, or conversion goals.


Probably because you missed the point. They aren't saying copy/paste this page and you've done it. Rather, they are providing a clear set of guidelines toward reaching your perfect landing page.

#10 on their list, in fact, discuss A/B testing.

However, that advise alone is useless. Testing whether A or B is better is useless if both A and B don't have a good foundation.


You know, everyone talks about testing, but I betya almost nobody does it.


I had written a post long back: Landing Page Optimization tips: analysis of 50+ sites to find out what increases sales and conversions http://visualwebsiteoptimizer.com/split-testing-blog/landing...

You may find it a nice complement for the infographic


I've just had a read of this and its very good. Thanks for writing it.


Is the not-so-impeccable title "Impecabble grammar" there on purpose?

</grammar-nazi>


"...wording should compliment each other." "...for woman and young girls"

Also, they're using two different font weights and different kerning at different points. There is also a superfluous space in one of the bullet points.

The point? Have someone proofread your landing page, too.


They didn't say anything about spelling...


Still qualifies as an example of Bell's Law IYAM


Unbounce.com has templates that look like that. So does WooThemes.com


Have you had good luck with Unbounce?

I love it in theory, but the interface is kind of janky - specifically, I have lots of trouble with alignment, positioning, and lack of an Undo button.


http://visualwebsiteoptimizer.com/split-testing-blog/landing...

Another great resource to build perfect landing page. Makes great reading to compare these two resources together


Does anyone here have first-hand experience testing w/ the VeriSign seal? The parent link gives an example of a very substantial sales increase thanks to the seal. For $299/year, though, it's a bit beyond the range of "eh, what the hell, I'll give it a try."


Personally I become more suspicious when I see these images than when they are not there. I only associate it with scammers.

But yeah, probably some real world statistics is better.

You could do the test yourself, and see if people are convinced by the image alone (even though the link only goes to for example the main page of verisign.com). I'm not sure verisign would be too happy about that, though :)


add a seal...if it improves conversions pay money...if not you get to save $300


Just a heads-up: Go Daddy sells SSL certs for $50, and they usually throw in a cheap domain: https://www.godaddy.com/ssl/ssl-certificates.aspx


I instantly assumed that improvement quote must be from some study by VeriSign.


My favorite landing page is the one for Buckyballs (http://www.getbuckyballs.com/). Thanks to it, I'm sure they moved a lot of product on the day Google doodled "buckyball".


Aside from the topic of landing pages - BuckyBalls seems like an extremely slimey company. Look up Buckyballs vs. Zen Magnets, or see http://boingboing.net/2010/09/24/buckyballs-magnet-ma.html


Doesn't seem worse than any other company. I would reserve extremely slimey for companies that fuck their customers over, fucking with your competition is the name of the game ;) Example: http://news.ycombinator.com/item?id=1834976


Interesting basis, but ARGH! I hate these fake infographics.

Why not put the picture just at the top and write their 10 points in html ? They could have linked to their reference in context, the text would be easier to correct, possibly prettier and definitely more accessible. And I could adjust it to a decent font size. Aaaaaaaaaaaargh.


While I don't think there isn't a single canonical form for a landing page for the obvious reasons, I really appreciated the color-mood pairs at the end of the article.

I'll keep them in mind the next time I'm choosing the colour scheme for a new site.

Plus, now I can see why Facebook is all blueish.


I thought this was satire, but they sound sincere.

Get a check list to go through and design it however you (and your users) like it. If you're patio11, don't add any social media fluff.


I find it strange that formstack.com published this but don't use it on their own homepage...maybe they followed item #10 and iterated away from it ;)


Does anybody know where I can buy a template that's similar to this? I've looked on ThemeForest but they all violate some of these rules.


ThemeForest looks pretty nice. Know of any similar sites?


More like this: an average link but great discussion! How much can the first comments determine the quality of the discussion?


Solid basic template and core items to focus on. I've also found a lot of value from the free resources and webinar replays on optimization at http://www.marketingexperiments.com/. Lot's of case-studies and examples with specific conversion change percentages.


Apparently Formstack haven't seen this gem entitled "Surprise, surprise! Having no secure icon on a page increased conversions by 400%" http://zachinglis.me/3cpN


Maybe if the security badge hadn't been so gigantic and cartoonish, the results would have been different. The conclusion that 'every site is unique and best practices shouldn't be adopted without doing any testing', while intuitively sensible, seems to be a premature reading of the data.


You are spot on.

Check this post out - Trust logos almost always provide a lift when used in the proper context / placement ->

http://conversionvoodoo.com/blog/2010/07/proper-placement-of...


I don't think its a 'perfect' landing page, but I think its a good framework to start with when designing a new product. And something to point to when working with clients. I'll definitely keep it bookmarked


ASK YC: Are there any recommend sites that provide results of A/B tests and maybe show some best practices. There are some good fundamentals here but I'd like to see some concepts backed up by data.



http://www.abtests.com/

Results like these are highly context dependent, so don't expect that if you make the same change you'll necessarily see the same result. But seeing specific examples is great for coming up with test ideas.


Its going to be different for every product, market and industry.


You can go through our case studies: http://visualwebsiteoptimizer.com/case-studies.php


Test everything? :P


What, no brown? Don't tell me users see that as a big pile of stinky...


I wonder if their content was determined by A/B testing?


No, but it's an example of a perfect linkbait.


As an aging user, who has been online every single day for the last 15 years, I disagree.

I think this page is far too cluttered.

I like less and less content on a landing page for anything other than a link aggregation(LA) site (HN/Reddit/etc)

I am at your place (if not said LA site) for a specific reason; get me to that reason asap.

More and more, I have less time and less attention..


A "guideline" to a perfect landing page? That's just wrong. If I could define a perfect landing page, it would be the one which sticks out the most! Crafting it after one guideline just ensures that it will look like all the websites already out there.


This doesn't make sense. That's a good argument for things that are compared side by side by TV ads, but landing pages don't have to be unique to be effective. The "difference" you're talking about won't be noticed by anyone but other web marketers.


Moreover, this is the anatomy of a landing page. The graphic is there for information, not as a template.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: